open_graph_protocol_logo

Facebook Open Graph Protocol

open_graph_protocol_logoThe Open Graph Protocol enables you to integrate your Web pages into the social graph. It is currently designed for Web pages representing profiles of real-world things — things like movies, sports teams, celebrities, and restaurants. Including Open Graph tags on your Web page, makes your page equal to a Facebook Page. This means when a user clicks a Like button on your page, a connection is made between your page and the user. Your page will appear in the “Likes and Interests” section of the user’s profile, and you have the ability to publish updates to the user. Your page will show up in same places that Facebook pages show up around the site (e.g. search), and you can target ads to people who like your content. The structured data you give via the Open Graph Protocol defines how your page will be represented on Facebook.

Getting Started with Open Graph Protocol

To turn your web pages into graph objects, you’ll need to add Open Graph protocol <meta> tags and the Like button to your web pages.

The tags allow you to specify structured information about your web pages. The more information you give, the more opportunities your web pages will be surfaced within Facebook today and in the future. Here’s an example for a movie page:

xmlns=”http://www.w3.org/1999/xhtml”
xmlns:og=”http://ogp.me/ns#”
xmlns:fb=”http://www.facebook.com/2008/fbml”>
<head>
<title>KINGS OF LEON</title>
<meta property=”og:title” content=”KINGS OF LEON“/>
<meta property=”og:type” content=”music”/>
url” content=”http://www.kingsofleon.com”/>
<meta property=”og:image” content=”http://www.kingsofleon.com/band.jpg”/>
LEON”/>
<meta property=”fb:admins” content=”USER_ID”/>
<meta property=”og:description”
content=”Get KOL’s new album Come Around Sundown for 7.99 for a limited time only”/>

</head>

</html>

The Open Graph protocol defines four required properties:

  • og:title – The title of your object as it should appear within the graph, e.g., “KINGS OF LEON”.
  • og:type – The type of your object, e.g., “music”. See the complete list of supported types.
  • og:image – An image URL which should represent your object within the graph. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1. We support PNG, JPEG and GIF formats.
  • og:url – The canonical URL of your object that will be used as its permanent ID in the graph, e.g.,http://www.kingsofleon.com.

In addition, we’ve extended the basic meta data to add two required fields to connect your webpage with Facebook:

  • og:site_name – A human-readable name for your site, e.g., “KINGS OF LEON”.
  • fb:admins or fb:app_id – A comma-separated list of either Facebook user IDs or a Facebook Platform application ID that administers this page. It is valid to include both fb:admins andfb:app_id on your page.

It’s also recommended that you include the following property as well as these multi-part properties.

  • og:description – A one to two sentence description of your page.

If a user likes your URL using a Like button, a News Feed story similar to the one below will be published to Facebook. The og:title links to og:url and the og:site_name is rendered pointing to your site’s domain automatically.

On a user’s profile, og:type defines which group your link will appear within; og:image is the image thumbnail.

For some objects, it makes sense to specify more meta data, such as location for a restaurant. You can add as many og:-prefixed properties as you would like to give more context about your web pages.Learn more about the other property fields.

2 thoughts on “Facebook Open Graph Protocol

  1. The power of #seo – Google this: ‘Kings of Leon Open Graph’. It ranks #1 in less than a day by using hot keywords (KOL) and keywords(OP) for this post!

    Also, after reviewing the SERP, it looks like the following code picked up these keywords first:

    < meta property=”og:title” content=”KINGS OF LEON”/ >

    and the previous line comes after the following line in the post:

    < title>KINGS OF LEON < / title >

    I’m wondering if the “op:title” tag carries more weight than the classic “< title >” tag; it obviously did in this example. Has anyone else experimented with the Open Graph Protocol? I’m interested in other examples.

    -Steve

Leave a Reply

Your email address will not be published. Required fields are marked *