Why we should add Open Graph to websites

It’s no secret that Facebook today has become one of the leading sources of traffic to your website. Similar to how Meta Tags help how your website listing displays on search engines, Open Graphs help control how your page will look like when shared on Facebook. Thus you can imagine how important it is these days to define Open Graphs, you don’t want messy title and description coming up for your website page when it is shared or liked.

Even though Open Graph was introduced long time back, still many websites have not been able to implement it properly, so we thought we would do a basic post on this to give an idea of how important it is.

What is Open Graph?

Open graph (OG) is a protocol used by Facebook used to describe content on websites pages and whose aim is to facilitate and improve the social integration.

To make it short, “Facebook’s Open Graph protocol allows for web developers to turn their websites into Facebook “graph” objects, allowing a certain level of customisation over how information is carried over from a non-Facebook website to Facebook when a page is “recommended”, “liked”, or just generally shared. The information is set via custom META tags on the source page”

Technical Jargon

OG tags are composed of mainly:

• Title – Page title or article title
• Type – The type of website you would want your website to be categorized as e.g. blog
• URL – Canonical URL of the webpage
• Site Name – Name you want your website to be displayed as

A sample code of how the OG tags are written is given below:

<html prefix="og: https://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="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

Optional OG Tags

Some of the optional tags are also defined by Facebook which can be used depending upon the type of post being shared:

• og:audio – A URL to an audio file to accompany the page
• og:description – Description about the webpage
• og:determiner – The word that appears before this object’s title in a sentence. An enum of (a, an, the, “”, auto). If auto is chosen, the consumer of your data should chose between “a” or “an”. Default is “” (blank).
• og:locale – The locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US.
• og:locale:alternate – An array of other locales this page is available in.

What if an OG Tag is not added?

If the meta data is not specifically defined using Open Graph protocol then Facebook (or LinkedIn, Google+, etc.) takes a guess of details. This can cause a lot of trouble especially if the content on the page is not organised properly leading to random sentences being displayed on Facebook which in turn will be seen and shared by millions of people.

To know more about the OG tags and how Facebook uses it to tell stories, check out this link https://developers.facebook.com/docs/sharing/opengraph/.