It's definitely a daunting feeling as a developer to realize that the app you've poured hours and hours into your app and you just aren't getting the kind of traffic you'd hoped for. Well with a little SEO help and designing your HTML in the proper way, that doesn't have to be the case. I'd focused on some very low hanging fruit, SEO wise, in my last post here. For this post I'm gonna cover really quick tags you can put in your HTML right now that make the links to your page much prettier and more accessible.
The Open Graph
The teams over at Facebook came up with what's called the Open Graph Protocol (read here if interested). It's a neat way for you to have a nice shareable version of your website across different social media platforms. You can easily specify the title, description, base URL, and thumbnail image that facebook and company add when you post a link on a status update.
Customizing these tags are important because blank images on a LinkedIn, facebook, or twitter page make you look unprofessional and that much less legit. And we're all legit or quit over here.
What is nice is that the open graph meta tags I'll show below will carry over from the different social media platforms you'll use.
The Basics
The must have open graph meta tags you should use are the title, description, type, url, and image tags. If you're using a frontend framework like React, you'll want to look for the index.html file that your components are injected into. The tags you'll insert look like this:
<meta property="og:title" content="[...Title]" />
<meta property="og:description" content="[...Description goes here]"/>
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="[...website_url]" />
<meta property="og:image" content="[...website_domain]/[...image_path]" />
Title and Description
The title and description tags are fairly straightforward. If you're trying to share blogged content on your website then using these might shift from the base title and description.
Type
The type tag is meant to just specify what sort of object this is, in our case with a React App or website, all we need is
<meta property="og:type" content="website" />
But you can imagine that this can be used to specify whether this is a video, audio, etc. The full list of open graph types can be found here.
URL
The URL tag is, from appearances, very simple but it's important to know that this should be what's called your "Canonical URL." What this means is that you can specify pages that have similar or related content under one supreme URL. The use case for a canonical URL is when you have blog posts that are the same content wise, but have separate URLs. Or if you have some page that queries a list of content like on an ecommerce page, then you'll typically want to provide a canonical URL. This is just so that Google and the open graph in this case know that certain pages are all the same. Similar content on multiple URLs waste time for the search engines.
Image
This tag has caused me the most issues because you have to specify an href for the location of your image.
This is an example of how facebook will unpack one of my portfolio projects. The code I've supplied it looks like this:
<meta property='og:title' content="Beat Poems | Machine Poetry"/>
<meta property='og:image' content="https://christianmkastner.com/beat-poems/src/assets/thumbnail.png"/>
<meta property='og:description' content="Beat Poems makes your poems a little less ordinary. Input a poem and Bongo Cat will do its own spin on your material. Then let Bongo Cat read it aloud, accompanied with some sweet bongos."/>
<meta property="og:type" content="website" />
<meta property='og:url' content="https://christianmkastner.com/beat-poems" />
As you can see I've got all my open graph meta tags and the image tag has the content of my base url and after it has the relative location of the image I wanna use as a thumbnail. I built this website using webpack and so the bundler created an src folder with an assets folder and the actual thumbnail image inside. This tag is highly dependent on where exactly your thumbnail is located so is highly dependent on what you're working with.
For example, a React app has a public folder where you can input images used for actual images and favicons used in the html. This is a place where you can put your thumbnail image to use for the open graph.
Those are some really easy ways to bump up notoriety and professionalism in your app or site. Making sick stuff is only half the battle. Getting it into the hands of people and making it appealing is just as important.
As a lasting note, some helpful tools to make this process easier are the dev tools for the open graph so you can more easily see what your shareable link will look like. All three social media platforms, Facebook, Twitter, and LinkedIn have them with:
Top comments (2)
prety useful, thanks
Thank you so much for your this easy to understand tutorial. I finally able to fix my bugs by using the meta tags