Open Graph Tags in HTML 101
A HTML tag that the tutorial doesn’t tell you about
Today, I would like to introduce the open graph tag.
Let me be honest, I just learned this a few days ago. I always wonder how do people have their website preview display when they share on social media, but not when I share mine? And you know what, turns out the magic is all on this og meta tag. I noticed it is not something that are mentioned in tutorials, at least in all the tutorials that I have watched. SO, hopefully you find your way to this article because you are curious about what “open graph tag” is.
Open graph tag is introduced by Facebook in 2010. It was created to help optimize Facebook posts by providing more control over the information travel from third-party website when shared on Facebook (for instance, when the post is liked or shared).
All the open graph meta tags should be in the <head> section in HTML to send the information to the DOM.
Why are Open Graph Tags Important?
As mentioned earlier, open graph meta tags are created to allow information easier to control on social media, like Facebook. In the marketing perspective, the open graph meta tags can have a massive impact on conversions and click-through rates.
Think about it, would you click on a link that has neither website preview, title nor descriptions? You might think those are either scam links or you are just simply not interested. That is why open graph meta tags are important to especially marketers!
In the following section, we are going to explore how we are going to use open graph tags.
How to Use Open Graph Tags?
Before we start, here’s a quick glance what your open graph tags need to include:
Before we start, you need to know that for the og tags are different for Twitter and we’ll look at it in a bit!
Here are the few things you have to put in as you saw from the picture above: og:image , og:title , og:description and of course there are more depending on your needs.
Let’s break down what they do and I will be using the example from the picture above to help you understand what’s going on:
og:title : it’s quite self-explanatory. This is how you define your content’s title. In the <head> section, this will look like this:
<meta property="og:title" content="Apple rolls out CarPlay for safely using iPhones in the car" />og:image : This is how you ensure the thumbnail of your website shows on social media when you share. This is crucial!
This is how it will look like:
<meta property=”og:image” content=”http://www.yourdomain.com/image-name.jpg” />Either you get your image from your CMS(content management system) or any open sources, or you can get it from your local file and replace the http://www.yourdomain.com/ with %PUBLIC_URL%/the-name-of-your-image.(whatever source your image is from).
The most frequently requested resolution for OG image is 1200px x 627px. At this size, your thumbnail will fit perfectly in both large image thumbnail or small image.
og:description : This should contains the description of your website, similar to og:title . It helps people understand what your website does.
This is how it will look like:
<meta property=”og:description” content=”Apple has launched its Carplay...” />There are two more tags that is not in the picture you also have to include:
1. og:type : This tells the DOM how you describe the object you are sharing, whether it is a blog post, website, or video, etc.
Here are the common examples that you can put inside the og:type tag:
- website
- article
- blog
- book
- game
- movie
- city
- country
<meta property=”og:type” content=”website” />2. og:url : This is where you paste the URL of your website to this meta tag.
<meta property=”og:url” content=”http://www.yourdomain.com” />That’s all you need for now!
As I mentioned earlier, Twitter’s open graph tags look slightly different. Let’s explore that in our next section!
Twitter Open Graph Tags
As for Twitter, it is called a “card”. Since we have to explore the main part of the open graph tags, I am going to be brief and give you the tag names as reference:
twitter:card: works quite similarly withog:type. When you share a URL in your tweet, Twitter would look into your file and look fortwitter:cardand know this is how you want to show your website on Twitter! (I’ll share a screenshot in a bit, then you’ll know how cool it is!)
<meta name=”twitter:card” content=”summary” />twitter:title: works similarly withog:title. Use up to 70 characters.
<meta name=”twitter:title” content=”Your title here” />twitter:description: works similarly withog:description. Use up to 200 characters.
<meta name=”twitter:description” content=”description here” />twitter:url: works similarly withog:url
<meta name=”twitter:url” content=”http://www.yourdomain.com” />twitter:image: works similarly withog:image
<meta name=”twitter:image” content=”http://www.yourdomain.com /image-name.jpg” />BUT WAIT! How do you know if it works or not!? In the next section, we are going to talk about the “debugger”.
Open Graph Debugger
As a good developer, we always make sure everything works by using debugger. Open graph tags are no exception! Facebook created a Sharing Debugger specifically for Facebook (unfortunately — for me — you need to log in to be able to use the debugger), so as Twitter, and LinkedIn has one too!
(Since I don’t have a Facebook account, I will use LinkedIn as example!) All of these three sites are pretty user friendly (or should I say developer friendly??). All you have to do is to copy the site URL onto the page and it should be able to show you how your website looks like if you share them on your respective social media.
At this point, I would recommend deploying your website to a host (like Netlify or Heroku) so you can get a link. I have to be honest, I never tried with local host, so I don’t know how it works.
Let me use my portfolio as an example:
As you can see, it displays the thumbnail, the title, the URL of the website is displayed on the page. However, I forgot to put the og:description meta tag, therefore there’s a feedback down below. Pretty cool, right? :)
And with Twitter debugger/Card Validator, you would see this:
This means you have included the Twitter open graph tags in your website. Even if you don’t use Twitter, I think it’s a good rule of thumb to put these tags in the <head> section, who knows you’ll need them one day, right?
Meta Tag Generator
Before we go, I would like to share this tool I used that helped me generate the meta tags for my website. Sometimes it’s too much to type, it’s always helpful to have a tool to just copy and paste everything. Meta Tags would generate the open graph tags that you need for your URL. All you have to do is
Type in the meta data, select the channels that you’d be sharing on and click “generate meta tags” on the right hand corner. It will generate the meta tags for you, which looks like this:
Pretty cool, right? :)
That’s how my Tweet looks like when I shared my portfolio:
Before You Go…
This is a relatively short and sweet article. I hope this is informative enough to get you started with open graph tags! I have linked some resources down below if you would like to learn more advanced open graph meta tags and happy coding!
Resources
Debugger:
Generator:
