Rich Link Preview using the Open Graph Protocol
Jan 8, 2019
link preview
At some point, you have come across link previews(like the one above) shared around social media which contain a little preview of the contents of the website. It’s hard not to take notice of them since they always stand out. I think they improve the chances of a link getting clicked than one without it, plus they look great. Recently, I came across a link with a preview on twitter and stopped to think "how can this be achieved?" It occurred to me that I had gotten so used to seeing these previews that I had not thought about how they were implemented. After a moment of thinking, I guess social media crawlers (Twitter, Facebook, etc), scrap information from the webpage and decides through some internal heuristic, what to show in the preview. But this doesn't give the website owner much control over what appears in the preview. I decided to do some "actual" research into how to control the contents of the preview and that's how I found out the Open Graph protocol.
What is the Open Graph Protocol?
Social media plays a crucial role in driving traffic to websites. Hence, the appearance of your website when shared on social media platforms should not be left to chance. The Open Graph Protocol, started by Facebook, enables developers to control how their websites look when shared on social media. Its strength is the simplicity in syntax and integration into any webpage while giving developers great control on how their websites behave when shared on social media.
The basics
The open graph can be easily added to any webpage by adding og: tags to the <head> section of the page. There are five basic tags that every page should have:
og:title
The title of the page. If the page is a news or blog article, it's usually the title of the article.
<meta property="og:title" content="title of the page" />
og:url
The clean url of the webpage. It should not contain session variables or query parameters. Example of the og:url:
<meta property="og:url" content="https://your-domain.com" />
og:image
The image that is used in the generated preview. Facebook recommends "at least 1080 pixels in width for best display on high resolution devices" and a minimum of 600 pixels for image ads. One thing to note when trying to implement this tag is to use the full URL to the image. The Facebook debugger would not find the image if you try using relative parts like this:
<meta property="og:image" content="../path-to-your-image" />
Instead, do this:
<meta property="og:image" content="https://your-domain.com/path-to-your-image" />
og:type
The type of the object. The values include website, book, article, etc. For a full reference of the available types, check out the Object Type Reference. Facebook default to website if it's not explicitly declared.
<meta property="og:type" content="website" />
og:description
A short description of the contents of the website. It does not have to be exactly the same words as what's on the page so it leaves room for one to get creative. A catchy description may convince someone to follow the link who may not have necessarily done so without it.
<meta property="og:description" content="Open Graph protocol enables website to become rich objects when shared on social platforms" />
Extended Properties
Besides the basic properties, there are additional properties that can be used to specify additional information. Examples include:
og:locale
The locale the tags are marked up in. The format is language_TERRITORY. For example, to specify UK English,
<meta property="og:locale" content="en_UK" />
og:audio
A URL to an audio file to accompany this object.
<meta property="og:audio" content="http://your-domain.com/path-to-audio-file" />
You can check out the full reference of supported properties.
Twitter Cards
Twitter created their own version of the open graph called Twitter cards. It's similar to the open graph protocol but instead of the property attribute, you use the meta tag name attribute and the value is prefixed with twitter: instead of og:
There are four types of cards which can be used: summary card, a summary card with a large image, app card, and player card. Let's create a summary card with a large image and look into some of the basic tags.
twitter:card
The type of card, in this case summary_large_card. The markup looks like so:
twitter:site
The Twitter @username the card should be attributed to.
twitter:title
The title of the content. Keep it short as Twitter truncates it after two lines.
twitter:description
The description of the content. It's not shown in the mobile app(Android and iOS) but is displayed in the web application. It's truncated after three lines so this is something to check.
twitter:image
The URL to the image that represents your content. Just like the og:image, don't use the relative URL to your domain. It should be the full URL. Minimum dimensions are 300x157 pixels and maximum dimensions are 4096x4096 pixels.
twitter:image:alt
It works like the alt attribute of the HTML img tag. It's a text description of the image that helps those who are visually impaired, or if the image can't be fetched by the Twitter crawler.
Putting it all together, here is a full example:
<meta name="twitter:card" content="summary_large_card>
<meta name="twitter:site" content="@slightlynerd">
<meta name="twitter:title" content="title of the contents of webpage">
<meta name="twitter:description" content="description of the contents of your page">
<meta name="twitter:image" content="https://your-domain.com/path-to-your-image">
<meta name="twitter:image:alt" content="description of contents of the image">
To learn more Twitter cards, check out the official guide.
WhatsApp Previews
WhatsApp supports the open graph protocol to show rich link previews. The basic tags of the open graph protocol are used to generate the preview. While testing the og: tags on various social media platforms, sometimes the image in the link preview didn't show up on WhatsApp, even when it showed up on other platforms. I did some research and testing and it seems the problem is from the size of the image. Anything above 300kb and WhatsApp does not show the image in the preview. Though I've not been able to find official documentation on this, as long as the size of the image is < 300kb, the preview would show correctly without problems.
Testing
At this point, you must have marked up your website with og: tags and twitter: cards. How do you test them? How can you be sure it shows up right when it's shared on social media? The first thing is to deployed to the website to a live server. Then you can use the Facebook sharing debugger and Twitter validator to check how it looks on those respective platforms.
Fallback Mechanisms
I mentioned earlier in this article that I guessed social media crawlers would have some internal heuristic to determine what to show in a preview if anything. I decided to run some tests and I split them into three categories: without meta tags, with plain meta tags (no og: or twitter:), and with open graph tags.
Without meta tags
In this test, I had not meta tags on the page and some basic HTML in the page. The HTML markup looked like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Open Graph Protocol</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<h1>Open Graph Protocol</h1>
<p>Ogp is a simple addition to your website that adds some sugar to improve your websites experience on social media.</p> <img src="images/ellie.jpg" alt="the last of us ellie" width="300" height="300">
</body>
</html>
Results
screenshot from Facebook debugger
screenshot from Twitter Validator
My bet was that the social media crawlers try to pick up some contents from the webpage to generate the preview. As it turned out, Facebook's sharing debugger was able to pick up the title from the title tag to show in the preview. Twitter's validator was not able to pick up anything from the webpage. WhatsApp also picks up the title, just like Facebook.
With plain meta tags (no open graph)
I added the plain meta tags, without the og: or twitter: prefixes like this:
<meta name="title" content="Open graph protocol demo" />
<meta name="description" content="Open graph protocol enables website to become rich objects when shared on social platforms" />
<meta name="url" content="https://slightlynerd.github.io/open-graph-protocol/" />
<meta name="image" content="https://slightlynerd.github.io/open-graph-protocol/images/ellie.jpg" />
Results
screenshot from WhatsApp
Both Facebook and WhatsApp render everything, just like they did when I used the Open Graph tags. Surprisingly, Twitter was still not able to generate a preview from those tags.
With open graph tags
All platforms render the preview correctly when I used the Open Graph tags, including Twitter. When I added Twitter tags for a summary with large image card, Twitter prefers that over the open graph tags. If Twitter cards are not detected, Twitter falls back to open graph tags.
Final thoughts...
I think the Open Graph protocol is a simple standard that can easily be incorporated into any website. It's not another library or plugin that adds bloat to your website which is nice. If you are building your website with WordPress, there are plugins you can add to your website to achieve the same results. There are also chrome extensions you can download from the Chrome Web Store to help you will developing locally. Once you deploy it, do test with the official debuggers.
The full example code can be found on GitHub. You can copy and paste in your own projects, make sure to replace the contents with your own content. Leave a star on GitHub if you found this useful.
If you got to this point, thanks for reading. I hope you found this article useful. If so, do share.
