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. Once your pages become objects in the graph, users can establish connections to your pages as they do with Facebook Pages. Based on the structured data you provide via the Open Graph protocol, your pages show up richly across Facebook: in user profiles, within search results and in News Feed.
To turn your web pages into graph objects, you’ll need to add Open Graph protocol
<meta> tags and the Like buttonto 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:og="http://opengraphprotocol.org/schema/" 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"/> ... </head> ... </html>
The Open Graph protocol defines five 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.
og:url– The canonical URL of your object that will be used as its permanent ID in the graph, e.g.,
og:site_name– A human-readable name for your site, e.g., “IMDb”
In addition, we’ve extended the basic meta data to add one required field to connect your page with :
fb:app_id– A comma-separated list of either Facebook user IDs or a Facebook Platform application ID that administers this 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.
<meta property="fb:admins" content="USER_ID"/> <meta property="og:site_name" content="IMDb"/> <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."/>
In the sample News Feed story below, 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 category your link will appear within;
og:image is the image thumbnail.
For some objects, it makes sense to specify additional meta data, such as location for a restaurant. You can add as many
og:-prefixed properties as you would like to provide additional context about your web pages. Learn more about the other property fields.