Introduction

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to enable any web page to have the same functionality as a Facebook Page.

While many different technologies and schemas exist and could be combined together, there isn't a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement. Developer simplicity is a key goal of the Open Graph protocol which has informed many of the technical design decisions.

Basic metadata

To turn your web pages into graph objects, you need to add basic metadata to your page. We've based the initial version of the protocol on RDFa which means that you'll place additional <meta> tags in the <head> of your web page. The four required properties for every page are:

As an example, the following is the Open Graph protocol markup for The Rock on IMDB:

<html xmlns:og="http://ogp.me/ns#">
<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/images/rock.jpg" />
...
</head>
...
</html>

The following properties are optional for any object and are generally recommended:

For example (line-break solely for display purposes):

<meta property="og:type" content="actor" />
<meta property="og:description" content="Sean Connery found fame and fortune as the
                                         suave, sophisticated British agent, James
                                         Bond." />
<meta property="og:site_name" content="IMDb" />

The RDF schema (which relates the Open Graph Protocol to other schemas) can be found at http://ogp.me/schema.

Specifying location

The Open Graph protocol supports the ability for you to specify location information for your object. This is useful if your object is for a business or anything else with a real-world location. You can specify location via latitude and longitude, a full address, or both. The property names used are defined within the Microformat hCard.

In order to specify latitude and longitude, include the following two properties:

If you wish to specify a human readable address, include the following five properties:

For example:

<html xmlns:og="http://ogp.me/ns#">
<head>
...
[REQUIRED TAGS]
<meta property="og:latitude" content="37.416343" />
<meta property="og:longitude" content="-122.153013" />
<meta property="og:street-address" content="1601 S California Ave" />
<meta property="og:locality" content="Palo Alto" />
<meta property="og:region" content="CA" />
<meta property="og:postal-code" content="94304" />
<meta property="og:country-name" content="USA" />
...
</head>

Specifying contact information

The Open Graph protocol supports the ability for you to specify contact information for your object. It's likely that future versions of the protocol will support extracting this information from the body of your page. In order to specify contact information, include at least one of the following three properties:

For example:

<html xmlns:og="http://ogp.me/ns#">
<head>
...
[REQUIRED TAGS]
<meta property="og:email" content="me@example.com" />
<meta property="og:phone_number" content="650-123-4567" />
<meta property="og:fax_number" content="+1-415-123-4567" />
...
</head>

Attaching video data

If you want to attach a video to your Open Graph page you can simply specify a video url:

and optionally, you can add additional metadata

If you don't specify a og:video:type, parsers will try to infer the type. A sensible default would be to assume "application/x-shockwave-flash" until HTML5 video becomes more prevalent.

For example:

<html xmlns:og="http://ogp.me/ns#">
<head>
...
[REQUIRED TAGS]
<meta property="og:video" content="http://example.com/awesome.flv" />
<meta property="og:video:height" content="640" />
<meta property="og:video:width" content="385" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
...
</head>

Attaching audio data

In a similar fashion to og:video you can add an audio file to your markup:

and optionally

For example:

<html xmlns:og="http://ogp.me/ns#">
<head>
...
[REQUIRED TAGS]
<meta property="og:audio" content="http://example.com/amazing.mp3" />
<meta property="og:audio:title" content="Amazing Song" />
<meta property="og:audio:artist" content="Amazing Band" />
<meta property="og:audio:album" content="Amazing Album" />
<meta property="og:audio:type" content="application/mp3" />
...
</head>

Object types

In order for your object to be represented within the graph, you need to specify its type. This is done using the og:type property:

<meta property="og:type" content="product" />

The base schema includes the following types. It's possible that social networks will choose to support only a subset of these types or create additional types based on their niche.

Activities

Businesses

Groups

Organizations

People

Places

Products and Entertainment

For products which have a UPC code or ISBN number, you can specify them using the og:upc and og:isbn properties. These properties help to make more concrete connections between graphs.

Websites

Discussion and support

You can discuss the Open Graph Protocol on the developer mailing list. It is currently being consumed by Facebook (see their documentation) and mixi. It is being published by IMDb, Microsoft, NHL, Posterous, Rotten Tomatoes, TIME, Yelp, and many many others.

Implementations

The open source community has developed a number of parsers and publishing tools. Let the mailing list know if you've built something awesome too!