1110

What Is Open Graph Protocol? Does Your Website Need It?

Mohd Sohail

Mohd Sohail

— 3 min read
What Is Open Graph Protocol? Does Your Website Need It?

If you ever shared a YouTube video on Facebook, WhatsApp or any such social platform, you must have seen that we often get the thumbnail and description of that video as preview elements. You could see the example I am talking about in the image below.
facebook ogp open graph protocol
I have shared a music video on Facebook and you can see that just by sharing its URL, Facebook automatically fetches the thumbnail, title, and description of that video.
Not just YouTube videos but this also works for the most website. Here is a screenshot of a Facebook share for one of our articles.
what is open graph protocol
 
You can see that after I inserted the URL of the article, Facebook automatically fetched its thumbnail and other information as a preview.
This preview gives us some information about the shared webpage. This not only works on Facebook but on almost all major social platforms like WhatsApp, telegram messenger, twitter etc.
So how does this happen? How does Facebook know which information is which one? Well, the answer is pretty simple – The Open Graph Protocol.

What is the Open Graph Protocol?

By the official definitions ‘The Open Graph protocol enables any web page to become a rich object in a social graph’. This means that if you wanted to upload an image of some product with a link to purchase it on some social media platform, you could simply share its link and the image, name and other description could be fetched automatically.
Before the Open Graph protocol, many technologies existed for the job, however, the Open Graph protocol has unified and centralized all of them to make it easy for the developers.

Do I need it on my website?

Unless your website is for some top secret organization that cannot afford to leak even the slightest info, you probably need it. The Open Graph protocol is used by almost every social networking platform and it is great to have meta information about your website and pages to be previewed every time they are linked.

How Do I use it on my website?

Using the Open Graph protocol on your website is extremely simple. It has meta tags which you need to insert in the head section of your HTML page.
The 4 important tags for your webpage to be made into a social object are as follows –

  • 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, you may require other properties.
  • 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., “http://www.imdb.com/title/tt0117500/”.

Apart from these, there are many other tags also. You can read the full documentation on those tags on the official website.

Conclusion

The Open Graph Protocol is a great way to create objects which are rich with information about the webpage they point to. It is a great way to get a preview of a webpage and its content. You can read all about the Open Graph Protocol here.

Read more