open graph optimisation facebook
Posted: March 28, 2011 By:

Facebook Open Graph Markup

The structured data you provide Facebook (via the Open Graph protocol) defines how your pages will be represented on Facebook.  Think of this in the same way as when you coin your meta description and title tags in the HTML markup of your own web page to impact how your site appears in the SERPs.

Simply put, Facebook’s Open Graph protocol enables you to integrate your web page into the social graph. Currently, it is designed for web pages that represent profiles of real-world things – stuff like movies, sports teams, celebrities and restaurants.

The inclusion of Open Graph meta tags into the HTML of your web page essentially makes your web page the same as a Facebook Page.

So, how exactly does this work?

When a user clicks the like button on your page, provided the Open Graph protocol is enabled , a connection is established between your pages and the user. The page appears amongst the “Likes and Interests” of that particular users profile and you have the ability to publish updates to the user. Crucially, your site will now start to appear in the same kinds of places that Facebook Pages turn up I.E Facebook Search – you can also start to target ads to people who (already) like your content.

Facebook Open Graph in Action

Facebook Open Graph in Action

To allow your pages to be “spidered” correctly by Facebook, you will need to add the Open Graph tag and the Like Button to your pages. These tags allow you to specify correctly, the structured information that Facebook will then use to give you more opportunities to surface internally.

For Example:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="http://www.facebook.com/2008/fbml">
  <head>
    <title>The Rock (1996)</title>
    <meta property="og:title" content="The Rock"/>
    <meta property="og:type" content="movie"/>
    <meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
    <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
    <meta property="og:site_name" content="IMDb"/>
    <meta property="fb:admins" content="USER_ID"/>
    <meta property="og:description"
          content="A group of U.S. Marines, under command of
                   a renegade general, take over Alcatraz and
                   threaten San Francisco Bay with biological
                   weapons."/>
    ...
  </head>
  ...
</html>

A few crucial Open Graph Tags:

Open Graph Meta Tags
Instead of crawling pages like Google, Facebook is relying on sites to insert unique RDFa formatted meta tags on pages. Don’t fret, this isn’t that different from putting meta tags on your pages, though the Open Graph meta tags are a bit more robust.

og:title

This is the title of the object. It is what will appear in Facebook search results. Think of it as the title tag for Facebook.

og:type

This is the type of object the page represents. Unlike Google’s approach, Facebook is hoping that sites will self-identify content to produce an installed taxonomy. The type is also at the heart of the semantic web, which is what the Open Graph is supposed to make a reality.

At present, there is no validation that the right type has been selected, opening Facebook up to a lot of dirty data and spam. The types are rather self explanatory and I’m guessing the variety of types will expand as the Open Graph matures.

og:url

This is the URL for the object. And just like regular SEO, you want this to be the canonical URL. There’s no real mechanism for a 301 redirect within the Open Graph, so you need to get your URL right from the get go or risk restarting or splitting your object’s Facebook presence.

og:image

This is the image you want associated with the object and will appear in Facebook search results.

og:description

This is the description of the object. Think of it as the meta description for your Facebook search result.

og:site_name

This is the human readable name of the site the object resides on. Simple and straightforward.

fb:admins

You must associate a page with Facebook user accounts so you can administer the page on Facebook. It’s not really SEO related, but it’s necessary in setting up your tags appropriately and enables the ability to publish updates to users who Liked that object.

fb:app_id

You must associate a page with a Facebook Application so you can take advantage of built in analytics. Don’t panic, you don’t actually have to create an Application. Instead, go to the Applications page, type in your site’s name and home page and you’ve now created an Application that comes with an App ID and App Secret code. Think of this as Facebook’s version of Google Webmaster Central verification.

fb:page_id

Associate your site and pages with your Facebook Page. Since I began research on the Open Graph this tag seems to have been deprecated or at least made optional. In the current environment it would simply create another association with the Open Graph. That this tag is now less prominent should make you think twice about investing substantially in Facebook Pages.(source)

Installing a Like Button is fairly easy and a definite “must” for all web sites. It’s worth allowing users the opportunity to comment on the links, aswell. Why? Because Likes are to Facebook as Backlinks are to Google.

According to Facebook: “If users do add a comment, the story published back to Facebook is give more prominence” (source)

One thing is for certain however, we don’t know if this is an indication of future algorithmic SEO style changes for Facebook, or whether prominience is give in the sense that the “liking” user friends might pay slightly more attention.  Either way, enabling comments in with your like button is a must – the chances are a commented “like” will probably draw more traffic than just a “like”.

Have a look at the URL Linter Tool from Facebook and find out how your brand will appear on Facebook! The Key thing to take from this post is: You want your brand to appear how you want it? Don’t you?