Facebook Open Graph Explained

You may heard the buzz around Open Graph and wonder what it's all about. You may have even read the Wikipedia entry for Open Graph but still don't know what it is. I'll do my best to explain it in a moment, but don't worry if you don't understand what it is. The more important questions are why you need it and how to use it, which we will also get into.

The Jargon

Open Graph is a type of Microdata (RDFa to be exact), which most notably has been implemented by Facebook. Microdata are basically special tags in web page code that can contribute to a "sematic web." Open Graph was designed to "socially graph" web pages, but it also can do things like provide Facebook-like functionality on sites and apps outside of Facebook.com.

Why It's Important

Since the dawn of the Internet, websites have primarily used HTML to display web pages in browsers like Firefox, Internet Explorer and Chrome. But HTML is formatting language, it tells the browser you have titles, paragraphs, images, but the browser and your computer have no idea what those titles, paragraphs and images are talking about.

You could be viewing a web page about a new Lexus but your computer doesn't know it's a page about a car. Open Graph and other Microdata technologies give meaning to webpages that other computers can understand.

Now with Open Graph, Facebook can put a web page into context, understand how to categorize it and how does the information relate to other entities: what kind of information is it, what is it talking about, who authored it, who else would Like it?

Now think about Facebook, the biggest social network in the world. If they know what a web page is about, they can show it to people who are interested in the same topics. If you have a website about football, wouldn't you rather Facebook show your articles to people who are sports fanatics instead of people who are knitting fanatics? Ah-ha!

Because of the famous "Like," Facebook knows what people are interested in, and with Open Graph, they can match web content to people's interests. Now you're beginning to see the power of Open Graph.

Open Graph goes beyond matching content to interests. It can identify how people relate to content. A video may have dozens of contributors, producers, actors, directors and more. Facebook can connect a video with everyone involved.

Think about someone who writes Kindle books, creates videos, and produces articles all over the web on several different sites. Open Graph can attach authors to their content no matter where it's hosted or shared, and connect that content to the author's fans.

Open Graph has detailed tags to help describe and catalog different types of content, video, audio and text, down to the individual roles of people collaborating on the piece of content. Where the content was produced and where people reside geographically. Most large and popular sites have been using Open Graphic for years now.

Why you need to use Open Graph:

Here's a summary of why you should integrate your site with Open Graph:

• Ensures your content shows up correctly in Facebook.


• It can help your content reach more people.


• Provides a personalized experience for visitors by recommending articles based on interest and showing which articles have been Like'd by friends.


• Can help you reach your target audience and demographic much more effectively.

Ever post an article from your website on Facebook, and the wrong image was posted?

This is an incredibly frustrating problem, especially when you use a posting service (like me) and you find the last dozen articles were posted with the wrong image or wrong description. This usually happens when the wrong tags are used, but sometimes it can be something else. I'll explain later how to avoid these problems.

The problem is without the right Open Graph tags, Facebook is left to guess what the information on the page is about, and they usually get it wrong.

With the proper tags, Facebook will understand what your content is, how it's organized and how it should be displayed within Facebook.

There are endless possibilities if search engines and computers can truly understand your site's content. There are rumors that Facebook will begin allowing people to add widgets from their favorite sites on their Timelines, and that this will only be possible with sites having Open Graph tags.

Google, Bing and Yahoo have teamed up to support a different set of Microdata published at schema.org. I have a hunch that very soon if Google is unsure what your site is about because you're not using rich snippets, they'll push it down in the search results in favor of sites that they understand and trust. Quote from Google:

Because we're always working to expand our functionality and improve the relevance and presentation of our search results, schema.org contains many new snippet types that Google may use in future applications.

You may not care about search results and get your traffic from other sources, but it doesn't end here. In the quote above "future applications" could mean a lot. Google and Facebook are continually working on ways to expand their reach and profits: new marketplaces, payment processing, messaging, advertising and more. In the future, without Microdata, your overall Internet presence could suffer.

And it even gets more intriguing: Google clearly states in Webmaster Central that it already recognizes Facebook Share coding for videos.

How to Implement Open Graph on Your Site

If you use WordPress it's easy. There are plugins in the WordPress repository that will insert the Open Graph tags automatically into your site's HTML markup. Here's an example of what some of these tags look like:



The official Facebook WordPress plugin is one place to start. WordPress SEO by Yoast is good. Jetpack from WordPress has gotten better this past year at implementing Open Graph tags. All these are free to use.

The three plugins I mentioned auto-populate the tags. But there are other plugins that let you manually add tags beyond the basics like title, description, image, author, etc. This type of implementation would be handy for video or music producers.

If you don't use WordPress then you'll have to manually add the HTML tags to your header either by using a web page editor or having your developer insert them for you. If you don't understand what I just said, consult with any web developer. A number of you reading this might be using Joomla or Drupal, which may have Open Graph plugins available like WordPress does.

Dealing with Open Graph Problems

If you use a plugin to add Open Graph tags to your site, it doesn't guarantee you won't have display problems when your articles are posted on Facebook. Here are a couple common Facebook posting problems and how to fix them.

Too small of an image

Your article needs to have an image at least 200 x 200 pixels or Facebook won't use it. Instead, they'll find a different image on your site big enough and use that, which can result in some lame looking Facebook posts that result in low click-throughs.

I've had problems with images that were either 200 pixels wide or tall. I assume whatever tool I used to measure my image wasn't accurate or my image was really 199.5 pixels on one side and I didn't know it. To be safe, make sure your images are much more than 200 pixels on any side.

Wrong description

Earlier I said if you don't have Open Graph tags to tell Facebook what your web page is about, it will guess and usually it's wrong. But sometimes a WordPress plugin will tag the wrong description, which will foul up your post when you share it on Facebook.

In my experience, this usually happens because of a plugin conflict or there are WordPress short codes in the content. If you can't fix the plugin conflict or depend on short codes, use the Excerpt field in the post editor in WordPress. Either copy the first few lines of your article into the Excerpt box, or write a custom description. Most Facebook Open Graph plugins will use the Excerpt for the description.

If you don't see the Excerpt field below the post editor, click Screen Options at the top left of the admin panel and check Excerpt. It should appear below the main post edit box.

Get to know the Facebook Debugger

If you're having problems with the way your posts are displayed in Facebook, and you have no idea what the problem is, try using the Facebook Open Graph Debugger:

https://developers.facebook.com/tools/debug/

Enter the URL of the page you're having problems with and the debugger will identify any issues.

In the example above, the debugger tells me I have one image too small and it will chose the second image in my post instead.

If there is nothing wrong with your page the Response Code will show 200.

This tool can help identify problems in your Open Graph tags, which you may be able to fix yourself. If you have consistent problems with your tags you may need to try a different plugin or ask a developer to look at your site.

The Future of Open Graph and Microdata

We may be at the very earliest stages of an exciting new frontier with the semantic web. At some point it will become mainstream to have Open Graph and Microdata tags on web sites.

Those who embrace these technologies will have a head start on where the web is going. The rest will be scratching their heads wondering what just happened.

This was just an overview of Open Graph, if you have any questions about your website, please get in touch with me here or on Twitter.