Facebook Open Graph (og tags)

The Open Graph protocol has been created by Facebook around 2010.

The development has since been given to the Open Web Foundation.

What is Facebook Open Graph?

The Open Graph (og) protocol aims to optimize the content of a web page for sharing purposes on the main social networks like Facebook, LinkedIn or Twitter on any devices (mobile phone, desktop, tablet) and any app and browsers.

Beyond the optimization for sharing, the Open Graph protocol is also used by browsers to easily understand the content of a page, in the same way of schema.org micro data. It’s easier for a machine to diggest organized content than all the subtleties of human prose to precisely understand the topic of a page.

Facebook describes the open graph tags as a protocol to allow to a web page to benefit from the same features as another Facebook object.

Open Graph tags (og tags)

The open graph is composed by plenty of meta tags, each describing a specific specifications of the object: title, type, url, image, video, description, …

They all have the prefix “og:”: <meta property=”og:THE_FIELD” content=”THE_VALUE”/>

Example:

<meta property="og:title" content="this is the title"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="https://johndoe.com/my-best-content"/>
<meta property="og:image" content="https://johndoe.com/awesome-picture.jpg"/>
<meta property="og:description" content="This post is talking about the Open Graph protocol"/>

It’s code. With code comes bugs. That’s why Facebook developed the Facebook Open Graph debugger to help you validate and fix your OG tags.