I have been asked several times recently about "what is an Open Graph?" and "How do I use it?" Not having a clear answer, I decided to educate myself so I could share the knowledge.
The Open Graph protocol is widely implemented by Google and Facebook and in use on large websites such as IMDb, Microsoft, NHL, Time, Yelp and an increasing multitude of other sites. The Open Graph protocol was originally created at Facebook and is inspired by Dublin Core, link-rel canonical, Microformats, and RDFa.
The Open Graph is a protocol that enables any web page to become a rich object in a social graph. At the center of Facebook’s core is a technology called the Social Graph, which Facebook uses to allow any web page to have the same functionality as any other object on Facebook.
Although there are many other technologies, protocols and schemas that exist that could have been adopted to accomplish a similar technique, there is no single technology that provides enough information to richly represent any web page within the social graph. The Open Graph protocol effectively brings these existing technologies together to offer a unified, simple and powerful way to turn web pages into graph objects.
Facebook’s Graph API allows web sites to draw information from a variety of sources including photos, events, pages and even their relationship between each other. This allows the social graph concept to envelop more than just relationships between individuals to include virtual non-human objects between individual as well.
Making use of the open graph requires the developer to place four basic meta data in the
section of the webpage’s html source code:- 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., “video.movie”. Depending on the type you specify, other properties may also be required.
- og:image – An image URL which should represent your object within the graph.
- 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/”.
As an example, the following code is used by IMDB.com for the movie "The Rock"
<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.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 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.