The Open Graph Protocol

The social media is a major traffic driver to websites, hence, the appearance of your website on social media is very important in attracting and sustaining users on your platform

Imagine surfing through twitter or other social networks, there are possibilities of meeting a couple of links and if there’s no attraction, it’d be rare to have you stop and check on the link, the Open Graph Protocol (OGP) enables you to display little information about the web page which could trigger the user to checking through the shared link.

The Open Graph Protocol (OGP) :

1. Enables a web page to become a rich object in a social graph(a model or representation of a social network, where the word graph has been taken from the graph theory.).
2. It helps you control what appears whenever a link to your web page is shared on social media platforms like Facebook, Twitter, WhatsApp, etc.

Just the same way search engines have the tags they look for in a web page, so does social networks. Below are a few use cases of the OGP:

The Title

This helps to add title to your content. It gives title to your object. It is best your title is not longer than 100 characters. If your title goes beyond 100 characters, it will be automatically shortened to 88. Sample code is written below:

<meta property=”og:title” content=”Top 50 tech companies in the world”/>```

The URL

This could be very useful in cases of a dynamic website where the content of the webpage is dynamic but you want users to be able to access the index page of the site irrespective of the view in the link accessible to them. Sample code is written below:

<meta property="og:url" content="www.google.com" />

The Type

This helps to describe the type of your object. It could be a website, article, music or video. Sample code below:

<meta property="og:type" content="video.movie" />
<meta property="og:type" content="website" />

The Image

This could be used to display a preview image that could in some way give information about the content of the site. Sample code below:

<meta property="og:image" content="path/to/image" />

The OGP cases written above are quite necessary, the ones written below are optional but developers are advised to make use of them.

The Description

This could be a sentence or two, even though it is optional it is very good it is added as it calls attention and makes a reader attracted to the site. It gives information about the object. Sample code below:

<meta property=”og:description” content=”Apple ranks atop the world's list of largest tech companies. ... With annual revenue of $262 billion,...”/>

The Audio

This is used to attach a URL to an audio file to accompany this object.

<meta property="og:audio" content="http://url-to-audio.mp3" />

The Video

Similar to the audio, it gives the URL to the video of the object

<meta property="og:video" content="http://path/to/video.mp4" />

The Site name

This could be useful if your object is part of a larger web site, the name which should be displayed for the overall site.

<meta property="og:site_name" content="google" />

There are many other ways of describing the OGP but are beyond the scope of this article. For details on them, you could visit the official website.

Thank you.