Open Graph is an essential way to open up another lane of traffic into your website. It provides a powerful supplement to standard SEO, allowing your web content to be shared, explored, and “liked” through Facebook’s Open Graph system.
But what is the Open Graph? It is a protocol used to represent web pages and applications as rich objects in social graph through an API. It can also be used to retrieve information out of Facebook. Their internal search engine - a highly interactive, unconventional search engine, true, but an important one to be hooked into - also uses Open Graph to generate its search results.
By tagging your content and allowing Open Graph to intelligently display it, you’re plugging yourself into an entirely new stream of web traffic -- and one of the biggest you could ask for.
Essentially, your content becomes a social “item” -- just like a friend’s status update, or Spotify music listen, or any other story. The key is using Open Graph-specific tags in your page’s HTML code, thereby allowing your website content to appear as any other type of Facebook content.
Tagging A Page for Open Graph
A page is tagged for Facebook’s Open Graph by adding metadata to the HTML code.
We’ll explain how to add the metadata, and where to add it, in just a minute, but to start, we’re just going to go over what needs to be added. The HTML metadata of every page you intend to use with Open Graph must have information on the following properties:
Title: the title of whatever page or object you want to appear on Facebook. In the metadata it will be specified as og:title.
Type: the type of the page or object you’re sharing -- i.e. a movie, a book, an event, etc. It will be specified as og:type.
Image: the URL to an image that will represent your page or object when people see it on Facebook. It will be specified as og:image.
URL: the permanent URL of your page or object that will be stored as your object’s ID in Open Graph. It will be specified as og:url.
There are also several optional metadata tags, though two of the most useful are the following:
Description: a short description of your object or page -- just one or two sentences -- that will be displayed on Facebook. It will be specified as og:description.
Site Name: the name of the larger site that this object or page belongs to -- in case it’s necessary to specify. It will be specified as og:site_name.
Adding this information using the metadata tags is simple. Simply open the HTML of your webpage, and look for the header section, which will be marked by <head> and </head>.
<meta property="og:title" content="Title of your object, event, or page." /> <meta property="og:type" content="Type of story." /> <meta property="og:url" content="Permanent URL to your page." /> <meta property="og:image" content="URL to an image that represents your story." /> <meta property="og:site_name" content="The name of your website" /> <meta property="og:description" content="Short description of your page." />
If you're not sure whether the code is working how it should, simply visit the Facebook Object Debugger, plug in the appropriate URL for your page, and read the debugging information. This page is extremely helpful, and will tell you exactly what needs to be done to improve your code and get the object working in Open Graph.
Apps and Other Actions
Open Graph isn’t limited to just having your content appear online. There are also ways to create simple Facebook apps for your page that allow people to take action, such as liking your page or sharing it with others.
When you’re publishing a link to your web page using a traditional Facebook account, people can see your link and like your status update, but they can’t like the actual page itself -- that is unless you’re Open Graph, which allows people to like the page itself.
That distinction is another one of the main advantages of Facebook’s Open Graph tags versus traditional Facebook social media approaches. The details of the actions you can allow Facebook users to take are explained here, and also look out for articles covering this topic on our site!