No two websites’ markup are created equal. As such, it can be difficult for social media platforms like Facebook to find the correct piece of information within the content to be displayed when the page is shared on the News Feed.
That is where the Open Graph Protocol (OGP) comes into play; an initiative developed by Facebook that allows it to recognize web content easily and display it nicely within their platform.
Examine the following:
This gives us a decent content preview on the Facebook Feed, with the title as well as the excerpt. If we look at the content on our demo page, however, there are a few more elements that could be utilized; such as the image and the author name. Facebook will not pick these details up without help.
So let’s take a look how we can use Open Graph to improve our content presentation on Facebook.
Using Open Graph
Open Graph specifies a number of meta tags defining meta information of the content, similar to the meta tags that we feed to search engines in common SEO practices. Before we add these meta tags we will need to set the XML Namespace for Open Graph in the
<!DOCTYPE html> <html xmlns:og="https://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#"> <head></head> <body></body> </html>
The namespace conception in HTML is similar to other web languages; it prevents ambiguity on the data structure. It refers to which semantic vocabularies or syntax should be used when the namespace is present in the document. In our case, the
og namespace refers to the Open Graph Protocol, while the
fb namespace refers to Facebook-own Open Graph specification.
Alternatively, we can use the
prefix attribute to define these namespaces. For instance:
<!DOCTYPE html> <html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#"> <head></head> <body></body> </html>
Adding Open Graph Meta Tags
Facebook requires a few tags to be present at all times.
First, the content type, specified by the
og:type property. On the homepage, we typically set the value to
<meta property="og:type" content="website" />
And commonly set it to
article for the content.
<meta property="og:type" content="article" />
A number of other possible values can also be set in
og:type meta tag which include
books.book, and many more in case your content is not a typical article like a blog post or news.
<!-- Product Type: may be used in e-commerce product sites. --> <meta property="og:type" content="product" /> <!-- Place Type: may be used in travel websites. --> <meta property="og:type" content="place" /> <!-- Movie Type: may be used in movie review websites like iMDB or movie streaming website like Netflix. --> <meta property="og:type" content="video.movie" />
The content URL, specified with the
og:url property, must contains an absolute URL of the web page without query strings or hashes, similar to the
canonical link. On the homepage, the URL is the homepage URL:
<meta property="og:url" content="https://tutsplus.github.io/" />
The content URL will be a little more detailed:
<meta property="og:url" content="https://tutsplus.github.io/open-graph-protocol/" />
The meta title, specified with the
og:title property, defines the title for the preview. The value of the title might not always match the title set in the
title tag; you may choose to alter, or abbreviate the title for sharing.
For example, the content of our page is about CSS and is entitled for the purposes of social media “Learn CSS: The Complete Guide”. However the document title is actually “Open Graph Protocol — Tuts+”, thus:
<meta property="og:title" content="Learn CSS: The Complete Guide" />
There isn’t a defined character limit for the
og:title, but Facebook is known to truncate titles on occasion, particularly for content shared in the comment thread where the space is narrow.
The meta description, specified with the
og:description tag, provides the shared content excerpt.
<meta property="og:description" content="A comprehensive guide to help you learn CSS online, whether you're just getting started with the basics or you want to explore more advanced CSS.">
Facebook does not set a defined character or word limit to the description. Still, Facebook will truncate the description when it sees fit, so keep the description short and enticing.
The meta image is defined with
og:image, enabling you to visually represent the content, and the value does not always need be an image within the content. Use the best image to entice readers to click and eventually read the content.
<meta property="og:image" content="https://tutsplus.github.io/open-graph-protocol/img/css-best-browser-850.png" />
In addition to the URL, you can also add in the meta tags specifying the image size and image MIME type. These meta tags are optional, but will help easing Facebook workload when it comes to parsing and caching the image.
<meta property="og:image:width" content="850"> <meta property="og:image:height" content="450"> <meta property="og:image:type" content="image/png" />
The minimum image size is capped at 200x200 pixels, but Facebook recommends the image size be 1200x630 pixels for the best possible outcome.
You may want to consider the aspect ratio of your image too:
“Try to keep your images as close to 1.91:1 aspect ratio as possible to display the full image in News Feed without any cropping.” – Facebook Developers
The Facebook App ID
Within Facebook, adding the Facebook App ID with
fb:app_id meta tag is highly encouraged. The App ID will allow Facebook to link your website and generate a comprehensive overview of how users interact with your website and content.
<meta property="fb:app_id" content="1494084460xxxxxx">
You may ignore it, if having analytical of your website is not necessary.
Subsidiary Meta Tags
A few meta tags are optional, but will come in useful in certain cases.
The Site Name
The site name is specified with the
og:site_name meta tag. It defines the website name, or more accurately your website brand. The website brand or name might not always be your domain name. Tuts+, in this case, is one good example.
According to our branding guidelines this should be written as Tuts+ instead of Tutsplus, yet
tutsplus.com is the domain name since a domain cannot contain the
+ character, hence:
<meta name="og:site_name" content="Tuts+">
Facebook does not show this site name on the content shared. Instead, you will find it shown on the notification when you have installed a Facebook Social Plugin such as Facebook Comment on your website.
The Type-related Meta Tags
There are a number of meta tags related to the specified content type. As implied, these tags differ depending on the value specified in
og:type meta tag. Here we have an
article may be accompanied with a few supporting meta tags such
Before including these meta tags, we will need to add a new namespace pointing to the Open Graph Article specification. So, at this point, we have three namespaces namely
<!DOCTYPE html> <html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <head></head> <body></body> </html>
The Article Author
According to Facebook, the
article:author meta tag should contain a Facebook profile URL or the ID of the article’s author.
<meta name="article:author" content="https://www.facebook.com/johndoe">
Adding more than one URL or ID is allowed in case multiple authors contributed to the article.
<meta name="article:author" content="https://www.facebook.com/johndoe, https://www.facebook.com/janedoe">
Tip: if the author does not have a Facebook account, you may replace
article:author with the following
author meta tag.
<meta name='author' content='John Doe' />
Facebook will display the author name on the preview, as follows.
Although Facebook suggest that we include article tags such as
article:section they do not add any significance at the time of writing. That is, unless you are dealing with an Instant Article page.
As mentioned, these tags largely depend on your content type. If the content type is
video.movie, more appropriate tags would be
video:duration instead of the
For that reason, I will leave that part of Open Graph up to you to explore. Facebook has provided comprehensive reference material on these meta tags along with a few examples of code snippets.
Open Graph has since been adopted by other social media platforms such as Twitter (though Twitter also has its own proprietary markup called Twitter Cards), Pinterest, LinkedIn, and Google+ in one form or another. In this tutorial we looked into a few Open Graph meta tags and leveraged them to make our content preview more compelling.
Finally, if you find your content is not rendered as expected, use the Facebook Sharing Debugger to find out what’s wrong with the markup.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post