Have you ever heard of OG-TAGS?

Ever noticed how Facebook shows an excerpt from a website with its image, or how a tweet with just a URL changes into a short window to the actual website? It's because of og-tags. Let's understand more about it!

Overview of OG Tags

The Open Graph Protocol is what works behind og-tags. It was introduced by Facebook in 2010 to better integrate a website with Facebook. It turns websites into intractable objects, and makes it easier to share. Like on a website when you choose to share via Facebook, it creates a summary of the URL you wish to share. Like the one below:

See how beautifully it creates the summary of the content! Similarly, it works on Twitter. The level up to which you can interact depends on the type of data shared like:

Here, twitter even allows playing videos in this twitter post itself.

Now, Let's see some of the details, how it works, basic syntax etc.

It's based on RDFa: Resource Description Framework in attributes. Hence, it uses metadata from a page to turn them into these graph objects. You can think of object as the website being displayed, and Graph as the small summary style window created using og-tags. And for it, <meta> tags are required. In each meta tag, a property can be specified. A sample og tag might look like :

For Facebook:

<meta property="og:title" content=" The Geeky Way"/>

For Twitter:

<meta name="twitter:title" content="The Geeky Way"/>

This will set the Title of the object as it should appear in Graph. For example, in the first image that we created using Facebook share as shown above, we have WordPress.com: Create a website or a blog as the title for the og tag.

How does it work?

There are a number of parsers that parse information from these og tags and render them as the social graph that we've seen above.

Facebook also has its official parser using which you can see how your website will look like after setting all the nice og tags. It'll tell you the value set for the og tags that it read.

Like if you do that for TheGeekyWay.com you can see the og:title tag as :

og:title | The Geeky Way

And that's just what the image above shows!

Some basic OG tags

For Facebook

• og:title - The Title of the object, web page.
• o​g:type - The type of content of that object, like website, music.[song| album| playlist ... ]
• og:image - URL of an image that represents the object.
• og:url - The canonical URL of the object, i.e the one you want to provide to a user. Not necessarily the one which created the object.

These should get you going with a perfectly working object graph.

But, that's not all! Extra metadata can be attached to each property. For instance, for an image you can specify width, height, alt text etc. You can refer to this link to see how much metadata can be added.

For Twitter

It's called Twitter cards on Twitter.

Basic tags for twitter graph can be summarized as :

<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@username"/> <meta name="twitter:title" content="Title Of The Page goes here"/> <meta name="twitter:description" content="This contains a brief description of the page"/> <meta name="twitter:image" content="www.url.of/the/image.jpg"/>

But, It might happen that you inserted the OG tags for the Facebook graph, but you forgot the to add the twitter version of it that helps create twitter card. Well, Twitter takes care of it. If it's not able to find the necessary meta tags, then it uses OG tags, and according to a predefined relationship between them, it uses the value from those OG tags to create the twitter card.

Hope this quick tip about og tags helps you better set up and optimize your website. If you've any questions, please feel free to ask in the comments section below.