How to Add Open Graph Data to Your Website

What is The Open Graph Protocol?

The Open Graph Protocol is a lot like Twitter Card Data and Schema markup. Basically, the Open Graph Protocol is a collection of meta tags that allow a website to become a rich object in Facebook’s social graph. As a result, a website with Open Graph data on it has the same functionality as any other object on Facebook like profile links and stream updates.

Resource Description Framework in attributes: RDFa

When Facebook developed its social graph, the company based Open Graph on RDFa or “Resource Description Framework in attributes.” RDFa was developed by W3C and is a set of extension for XHTML that embed subject-predicate-object expressions. This approach is based on Classical Conceptual Modeling, and basically defines objects like this:

Subject – the resource, itself. In this case a website.
Predicate – the predicates details the relationship between the Subject and Object(s). In the case of a website this would be “has.”
Object – the objects are all attributes or aspects about the resource. For a website, these are things like the title, description, and url.

Therefore, in the statement “Chow-Bryant.com has a title and url,” the subject is “Chow-Bryant.com,” the predicate is “has” and the objects are a “title,” and “url.” If you want to learn more about RDFa, check out W3C’s 3rd edition of its RDFa primer.

Why Facebook Open Graph Data is Important?

The benefits of using Open Graph data are similar to those for Twitter Cards. When you, or another follower, share your content on Facebook the post object will automatically have a thumbnail, title, and description. This makes your content more shareable by increasing the likelihood that your audience notices your content in their feeds.

This is what Open Graph Data looks like in Facebook’s news feed.

Expanded Character Limits

In addition to making content more shareable, Open Graph data also provides additional space to describe your article, image, or video. If you want to really fine tune your Open Graph data, then you want to make sure your title and description are the right length. For Open Graph, the character limit for the title tag is 40 characters or less. That said, the description varies depending on whether or not the object is shared in the news feed, ticker, or in a comment thread. If you want to play it safe, try to descriptions to 110 characters or less.

Facebook Analytics

Facebook also offers a few analytics services to page owners that go beyond page insights. Page owners can create a Facebook App to track how followers interact with your website and mobile app. In order to utilize these features a site owner must place their Facebook App ID in their Open Graph data.

Will Open Graph Increase my Rankings in Search?

Like Twitter Cards, Open Graph data will not do anything for your rankings in organic search. Open Graph data only helps your social media efforts on Facebook, but the benefits are well worth the time.

How to Create Open Graph Data

Creating Open Graph data is fairly simple, and doesn’t require a lot of formal coding knowledge. For the most part, you can copy/paste the information in the “content” to create your own tags.

Markup Tags

For this article I’m going to put together Open Graph data for the Chow-Bryant homepage. Since this is a website the following four tags are required:

og:type – this declares the type of object. In this case the object type is “website.”
og:title – this is the title of the object. Try to keep this field down to 40 characters or less so your titles are cutoff on Facebook.
og:url – this is the URL for the website object. In this case it will be the homepage.
og:image – this is for the object’s thumbnail image. This image can be either square, or a 300 x 400 pixel rectangle.

In addition to the required tags for a website, there are a few optional tags that feed additional information into Facebook’s social graph.

og:site_name – this declares the website name for your object. This is typically just the company name.
og:description – a one to two sentence description. The character limit varies from between 110 and 300 characters depending on where the object is share.
fb:app_id – ID for Facebook App.
og:locale – this declares language and location for the object.
fb:admins – Facebook admin IDs
og:image:secure_url – this field will likely be deprecated soon, but it declares a secure URL for the attached image if the original one is non-secured.
og:image:type – declares the file extension for the thumbnail image.
og:image:width – sets the width for the thumbnail image.
og:image:height – sets the height for the thumbnail image.

Example Open Graph Data

Now that we have the right information and know which tags we need, it’s just a matter of creating the tags. This is like any other meta tag and follows a “name” and “content” convention. For example, here’s what the Open Graph data looks like for Chow-Bryant using all of the optional tags:

<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Chow-Bryant | Digital Media & Advertising in Houston, Texas" />
<meta property="og:description" content="Chow-Bryant is a digital media and advertising agency in Houston, TX" />
<meta property="og:url" content="https://www.chow-bryant.com/" />
<meta property="og:site_name" content="Chow-Bryant" />
<meta property="fb:app_id" content="XXXXXXXXXXXXXXXX" />
<meta property="fb:admins" content="XXXXXXXXXX" />
<meta property="og:image" content="https://www.chow-bryant.com/wp-content/uploads/2015/02/chow-bryant-logo-300-300.jpg" />
<meta property="og:image:secure_url" content="https://www.chow-bryant.com/wp-content/uploads/2015/02/chow-bryant-logo-300-300.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />

Note: you may notice that the App ID and Facebook Admin ID contain just X’s. This is because, while anyone could find these IDs by looking at the source code, it’s best not to publish these in a machine readable form.

Where to Place Open Graph Data

With the Open Graph data complete, it’s time to place this snippet on our site. To accomplish this, just copy and paste the snippet in the HEAD section of the page right before the Twitter Card data. That’s it!

Checking Your Work

After you add Open Graph data to your site, make sure you check your work for errors. Try Facebook’s debugger tool to make sure Open Graph data is properly placed on your site and free of errors.