Ultimate Guide To Facebook’s Open Graph Protocol

Facebook first introduced open graph in 2010 and since that time it has been used to define digital objects all over the Internet. Websites, movies, and even locations can become “rich objects” in this social graph powered by Open Graph(OG) metadata.

But what exactly is Open Graph? And why would you want to use it on your website?

In this post I hope to shed some light by answering that question. You’ll learn about OG implementation and how metadata can be used to power social network sharing features. If you’re a webmaster or blogger who doesn’t understand how Open Graph works, this post has everything you need to know.

zuckerberg presentation open graph

Intro To Open Graph Content

Open graph(OG) is a methodology created by Facebook that allows digital ideas to be rendered as machine-readable objects with properties and values.

OG data is transmitted through OG metatags in HTML documents. Since social networks are often the best places to share links online, these networks have an easier time formatting links with OG data available.

This data can include anything that’s defined on the Open Graph website. Most of the time it’s just generic page content along with a thumbnail image.

So is there a quick & easy explanation for all of this?

Put briefly, you can add Open Graph metadata into a website to describe very specific information about the page. This information allows social networks like Facebook to scrape the data and display it natively for a better user experience.

Many other networks use the Open Graph protocol for native display like Pinterest, LinkedIn, and Google+.

meta html tag code source

So there’s plenty of reason to use OG tags, especially for Internet marketing and content publishing. When content gets shared it’ll be added to the social graph and content will blend into the network’s layout.

What Is A Social Graph?

The concept of a social graph is still relatively new and growing over time. It’s a rather obscure concept that isn’t truly tangible, yet it affects properties in a tangible manner.

This Business Insider article describes the social graph as a way to define “things” in a digital space. The fabric of the social graph is made up of places like restaurants, media like movies, and properties like websites.

The Open Graph protocol enables any webpage to become a rich object in a social graph. This object is purely digital but it’s great for machines and databases.

social graph facebook presentation

Open Graph content passes details to the graph about a specific object. For example, a blog post object might have a title, thumbnail, description, and preview data.

Adding your site into the social graph makes it easier for people and networks to find information about your website. Most people won’t pull OG info from your site, but they can see that info on Facebook.

So in truth this is more like a data structure connecting places and ideas to people in a large digital network. The social graph can also contain real-world objects like restaurants and movie stars.

Implementing OG On A Website

Most open graph data starts with a page title, a description, a URL and a thumbnail image. This helps Facebook(and other social sites) render data in their native environments.

Most social networks agree that the social graph is important for pulling content. It has become somewhat of a standard for web publishers who want to make sharing easier on the web.

Tuts+ has a brief tutorial on this subject where they describe this varied information as “social signals”.

Every piece of useful text or content should be easy to share across various networks. Images can also have structured properties for image height, width, and MIME type. This is most often excessive but can be useful in circumstances where specificity is required(like newer social platforms).

Here’s a very simple example of a thumbnail object from the Tuts+ tutorial:

<meta property="og:image" content="http://www.website.com/thumbnail.jpg">

Object types should always be defined by the og:type meta property. Most devs just stick with the basics for a page title and thumbnail image.

But optional OG meta data can include an audio file, video file, or author information. If you want to get detailed you could end up with dozens of Open Graph meta tags in your website’s header section.

You can find a lot more info on the Open Graph website with examples and further links.

Live Examples with Testing

For a peek at how this works in action let’s look at the source code for my Foundation 6 ultimate guide. Every post on Vandelay Design will have these og:type meta tags but they each contain different information depending on the post.

<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Ultimate Guide To Foundation 6 For Web Development" />
<meta property="og:description" content="Whether you're brand new to Foundation or just want to catch up with the newest features in F6, this guide is a fantastic place to start with Foundation 6." /> 
<meta property="og:url" content="http://www.vandelaydesign.com/ultimate-guide-to-foundation-6/" />
<meta property="og:site_name" content="Vandelay Design" />

You’ll notice all of this info is very standard and ultimately expected of any blog post. But having it all organized together in a structured manner allows social networks and web crawlers to parse the data much easier.

On most Vandelay Design blog posts you’ll find all of these OG meta tags, plus extra tags with information for the images in the post.

Naturally this is true of many blogs and it’s super easy to implement this into your own. But how can you check if the OG tags are active?

This is where tools like Facebook’s debugger or the Iframely debugger are immeasurably helpful. If we enter my same post into Facebook’s debug tool we get this output.

facebook open graph tester webapp

You’ll see a list of raw tags along with Facebook’s parsed content like images and publication time. There’s even a small screenshot of what the post would look like when shared directly on Facebook.

Alternatively you can use Iframely to pull similar metadata that spans further than just Facebook. Iframely displays content like page icons and other protocols like oEmbed and Twitter Cards.

iframely embed code tester

Both of these webapps are completely free to use and worth bookmarking if you’ll ever need to check the syntax of other webpages. Custom OG debugging will help you spot errors and check if your current meta tags are working properly.

Free Plugins & Add-ons

Most websites today are built on top of CMS engines or similar tools. These often allow for plugins or modules developed by 3rd parties which add or extend functionality.

Perhaps the most common choice is WordPress, currently powering about 25% of the entire Internet.

If you’re a WordPress user then you’ve likely heard about Yoast SEO. This is a powerful SEO plugin with a handful of features to improve your website rankings—one of which is the addition of OG meta tags.

yoast open graph screenshot

After installing Yoast you should find OG tags added to your site header automatically. Post pages will include titles, descriptions, and the post thumbnail if applicable.

But many people avoid Yoast because it can be rather bloated. So if you’re looking for an OG-only plugin consider using Open Graph or the more popular WP Facebook Open Graph. Both work great and offer customization for WordPress sites.

Other plugins are available for engines like Drupal and Joomla.

There’s also plain HTML implementation if you want to go that route. Custom OG code generators can be found on Google’s dev site and in small webapps.

Devs who want to play around with Open Graph might consider this jQuery plugin created by Fiann O’Hagan. It allows you to parse Open Graph content from a website into a JSON object for JavaScript manipulation.

This may not be super helpful for adding OG content to your website—but it can be fun and educational for web developers.

Custom Graph Properties

If you’re into heavy customization I recommend Facebook’s OG docs that catalog everything you would possibly need to know about the protocol.

facebook open graph documentation

Also their Open Graph guide is a less-technical intro to the various concepts for digital information.

Object types can include books, articles, products, restaurants, and others. Most of these custom objects work best for advanced developers building games or custom applications that tie into the Open Graph protocol.

Knowledgeable developers can get into complex topics like building custom objects with the Object API. This mostly ties into Facebook’s API but there’s room for other sites to pull data as well.

For example, you can create a recipe object with properties like recipe author and ingredients. This data can be passed to a profile or to another object in the social graph. This is a rather complex example and would probably only find use in a custom webapp. But it shows the potential of Open Graph as a protocol and how much room there is to grow.

If you want to learn more check out these articles:

Wrapping Up

Whether you’re a designer, developer, marketer or content writer, Open Graph should be an instrumental piece to your workflow.

Building a website with OG content is necessary for social sharing and recognition points for bots. I highly recommend implementing one of the plugins listed in this post, or learning how to add the code yourself.

And if you’re into the Open Graph scene keep up-to-date on the Facebook documentation page.

To dig into more social media related content check out these posts:

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.