Take Control

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.

Open Graph: Take Control of How Social Media Shares Your Web Pages

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:

Open Graph: Take Control of How Social Media Shares Your Web Pages

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 html.

<!DOCTYPE html>
<html
   xmlns:og="http://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.

Content Type

First, the content type, specified by the og:type property. On the homepage, we typically set the value to website.

<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 productplacevideo.moviebooks.book, and many more in case your content is not a typical article like a blog post or news.

For example:

<!-- 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" />

Meta URL

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/" />

Meta Title

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.

Open Graph: Take Control of How Social Media Shares Your Web Pages

Meta Description

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.

Meta Image

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 200×200 pixels, but Facebook recommends the image size be 1200×630 pixels for the best possible outcome.

Open Graph: Take Control of How Social Media Shares Your Web Pages

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.

Open Graph: Take Control of How Social Media Shares Your Web Pages

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. An article may be accompanied with a few supporting meta tags such article:authorarticle:published_timearticle:publisherarticle:section, and article:tag.

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 ogfb, and article.

<!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.

Open Graph: Take Control of How Social Media Shares Your Web Pages

Although Facebook suggest that we include article tags such as article:published_date and 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:actorvideo:director, and video:duration instead of the articles:published_date.

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.

Wrapping Up

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.

Further References