Athira V Ajit

Jan 19, 2021

4 min read

What are <meta property=”og:xxxx” content=””> mean in any site ?

I had been quiet curious about these tags when I started reviewing codes generated by WordPress (I had used yoast seo which lead to auto generation of these tags). But quiet frankly that was not what lead me to this topic.

Photo by Markus Winkler on Unsplash

While I was creating my blog posts in medium what quiet intrigued me was the auto generation of thumbnails while inserting a link. I noticed the same in LinkedIn while sharing posts. Though I had seen these kind of generations for some time but it was not until now that I started giving these things a thought.

So lets dive in 🧐

“It is better to learn late than never.” ~ Publilius Syrus

Photo by Rob Schreckhise on Unsplash

I thought why not understand how sites create thumbnails like these.

So I started searching how different social media handles are creating these thumbnails ???

That’s where I had stumbled on to Open Graph meta tags the entity behind all these magic.

So what is Open Graph ?

The Open Graph protocol enables any web page to become a rich object in a social graph.

For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook. — https://ogp.me/

The four required properties for every page based on ogp are:

  • og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
  • og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
  • og:image - An image URL which should represent your object within the graph.
  • og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "https://www.imdb.com/title/tt0117500/".

As an example, the following is the Open Graph protocol markup for The Rock on IMDB:

<html prefix="og: https://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

On the other hand twitter has defined its own for its twitter cards. In case its not available then the normal ogp tags are considered.

<html>
<head>
<title>Title</title>
<meta name=”twitter:card” content=”summary”>
<meta name="twitter:url" content="yourdomain">
<meta name="twitter:title" content="a suitable title">
<meta name="twitter:description" content="a suitable description">
...
</head>
...
</html>

Being a developer these tags might not be a big deal but for a seo specialist this is a topic which he has to be concerned of . WHY ?

These tags can affect conversions and click-through rates to a great extent.

Its also interesting to note down how some companies create these thumbnail previews. For example the below given article explains how slack where they call these by the name “UNFURL” decodes these meta tags.

Do you have some project where you want to create these kind of thumbnails?

Worry not !! I have good news for you. You don’t have to create it from scratch , we have a package for that as we say

“Where there is npm there is a way ” — By Me😂😏

In case you want to know the authors journey as to how he thought of the package and created it check out the following link.

Also lets connect on LinkedIn

Feel free to check my github repo as well

Additional References