During a recent project, in which we implemented Facebook Like buttons on a client’s website, we noticed a problem with the previews Facebook was generating for the site.
The text Facebook chose to display in the social graph (i.e., Facebook’s News Feed) when a user clicked the Like button, appeared to be random, in this case a chunk of boilerplate text from an email submission form on the page, completely irrelevant to the larger site content. Initially, we couldn't figure out why this was happening, and it was a problem since our client was keen on Facebook integration and the issue pretty much undermined the rationale behind implementing Like buttons in the first place.
After some investigation we found the reason. The text Facebook had selected to display was the least-"nested" text in the page (within the page’s code). The text was inside a hidden div tag at the bottom of the page, while the rest of the page content was nested within multiple layers of div tags.
Thankfully, rather than expecting developers to "hack" Facebook by placing desirable text near the bottom of the page in an unnested div, Facebook offers a vastly better solution: the Open Graph protocol.
The Open Graph protocol (OGP) consists of a set of meta tags that can be inserted into your site's header that make your site "readable" to OGP-consuming clients (such as Facebook) and allows you to explicitly control the content Facebook will show in the social graph. In these OGP meta tags you can define common descriptive items like page title, description and image, and less common items like location, contact info, object type, video and more.
To make it work you add meta tags to your page headers that contain Open Graph-specific property keys and corresponding content attributes. Some of the common properties are og:title, og:type, and og:description.
A full example, supplied for a movie page, might look like the following:
<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>
You can read the full documentation on the Open Graph protocol website or the Facebook Developer page.
As the web becomes more social and more people share your web pages on sites like Facebook, using the Open Graph protocol gives you control over how your content is presented outside your website, instead of leaving it to chance and unpredictable, best-guess algorithms. The Open Graph protocol is a new must-have in a cutting edge web developer's ever-growing toolkit.
