Open Graph Tags in HTML 101

A HTML tag that the tutorial doesn’t tell you about

Megan Lo
Megan Lo
Jun 14 · 7 min read

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?

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?

Credit: Neil Patel

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=”” />

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 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=”” />

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

  • twitter:card : works quite similarly with og:type . When you share a URL in your tweet, Twitter would look into your file and look for twitter:card and 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 with og:title . Use up to 70 characters.
<meta name=”twitter:title” content=”Your title here” />
  • twitter:description : works similarly with og:description . Use up to 200 characters.
<meta name=”twitter:description” content=”description here” />
  • twitter:url : works similarly with og:url
<meta name=”twitter:url” content=”” />
  • twitter:image : works similarly with og:image
<meta name=”twitter:image” content=” /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

(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:

From Twitter’s Card Validator

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

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…

Geek Culture

Proud to geek out. Follow to join our 1M monthly readers.