The 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 equivalent 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 the 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 provide via the Open Graph Protocol defines how your page will be represented on Facebook.
Getting Started
To turn your web pages into graph objects, you’ll need to add Open Graph protocol <meta> tags and the Like button to your webpages.
The tags allow you to specify structured information about your web pages. The more information you provide, the more opportunities your web pages can be surfaced within Facebook today and in the future. Here’s an example for a movie page:
<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>
The Open Graph protocol defines four required properties:
og:title– The title of your object as it should appear within the graph, e.g., "The Rock".og:type– The type of your object, e.g., "movie". 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. You may include multipleog:imagetags to associate multiple images with your page.og:url– The canonical URL of your object that will be used as its permanent ID in the graph, e.g.,http://www.imdb.com/title/tt0117500/.
In addition, we’ve extended the basic meta data to add a required field to connect your webpage with Facebook:
fb:app_id– A Facebook Platform application ID that administers this page.
It’s also recommended that you include the following properties as well as these multi-part properties.
og:site_name– A human-readable name for your site, e.g., "IMDb".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. Theog: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 category your link will appear within; og:image is the image thumbnail.
Source
The Open Graph is changing the way we browse the web. It’s going to be huge in 2012! Nice article.