The Open Graph Protocol
Ever wondered that whenever you share a link on Facebook, Whatsapp or other social media sites, how does the thumbnail automatically along with the link? Nothing’s magic!! This is known as Link Preview. There’s always something that’s happening under the hood. In this article, we will be exploring how this happens!
This Link Preview is made possible by the Open Graph Protocol.
Lets understand what this really is….
The Open Graph protocol was introduced by Facebook. It 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.
What Open Graph does is this:-
- It works with the metadata that you have provided to your page.
- Once it scrapes the metadata, it turns your web pages into graph objects. This makes it possible for the crawlers in your browser to access the metadata and make it available to other users.
If you are asked to improve the SEO of your website, you will have to provide specific metadata and other dynamic meta tags for better results. In the modern day scenario, you will always want to increase your website’s click-through rates. Open Graph makes it possible for you by providing this link preview.
Meta tags are always provided in the head of your webpage. The four required properties for every page 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.,"http://www.imdb.com/title/tt0117500/".
Notice the ‘og’ prefix added to each of them. This ‘og’ is what helps Open Graph protocol know that the developer wants to convert his webpage into a graph object.
While using modern day applications, people tend to share photos, videos and links among themselves. Whatsapp even has a feature that whenever a video link has been shared, you can directly watch that video in there without navigating to the main application. To make all this possible, a link preview has to be present first and that is where Open Graph comes into action!!
As shown in the official page, the code block below is the markup for The Rock on IMDB:-
<html prefix="og: http://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="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>Do you smell what The Rock is cooking? 🔥
There are a vast number of meta tag options provided to you to help you achieve whatever you want. Have a look at the official page to know more…
However that’s not all!!!
If you are a React developer working with CRA or other frameworks providing client-side rendering, try designing a page providing it metadata in the above mentioned way and share it on Facebook. You might find that your link preview isn’t working as expected. Why is it so? Let’s find out…
Facebook does not read changes through JavaScript. Consequently, whenever you might want your dynamic meta tags to work correctly, it won’t. For example, if you create cards like in Fig 4, and implement individual share buttons on them, you will want to provide dynamic og:image tags. This will then allow you to get your desired link preview whenever you share it socially. However, you might find that you get unexpected images in the thumbnail.
To tackle this, you should either build a server-side rendered website or use Prerender.io
The Prerender.io middleware that you install on your server will check each request to see if it’s a request from a crawler. If it is a request from a crawler, the middleware will send a request to Prerender.io for the static HTML of that page.
Your website or webpage must be provided with static HTML content.
In case of your cards in Fig-4, provide a static link to each of those cards. Facebook will then be able to read the static content for each of those cards and will render your desired image.
In client side rendered apps, the initial load time is more and consequently, the crawlers are unable to read your dynamically provided data, causing discrepancies. This is tackled well and clear in server side rendered apps.
Now, other social media sites also are taking advantage of social meta tags. All of the other major platforms, Twitter, LinkedIn, and Google+, recognize Open Graph tags. Twitter actually has its own meta tags for Twitter Cards, but if Twitter robots cannot find any, Twitter uses Open Graph tags instead.
Bonus!!!
If you are interested in knowing what meta tags are to be used to garner attention and increase your website’s click through rates, you can check out the metatags used by other famous websites.
For this, we will take the help of the npm library- open-graph-scraper.
Initialise your package.json file with:-
npm initProvide whatever name you want your repository to have and then install the express and open-graph-scraper.
npm install --save express open-graph-scraper
Create a server.js file:-
error:- This returns true or false; True if there was a error. The error itself is inside the results object.
result:- This contains all of the Open Graph results.
response:- This contains the HTML of page.
In this code, we will have a look at the metadata of the Object page of MDN.
Run your code:-
node server.js 
The response object is huge as it is the entire HTML content of the page. Hence it’s not captured here. You can run the code and find the output yourself.
Looking at the result, you will find that both Open Graph and Twitter Cards have been used here. Thus you can add your own meta tags in this fashion to gain more views on your website and also achieve the Link Preview feature.
