The Open Graph protocol
Semantic Web Meetup
Austin Haugen - Paul Tarjan
http://www.facebook.com/ahaugen - http://paultarjan.com
Basic metadata
<html xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://developers.facebook.com/
schema/">
<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://..rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
...
</head>
...
</html>
Rich metadata
...
<meta property="og:latitude" content="37.416343" />
<meta property="og:longitude" content="-122.153013" />
<meta property="og:street-address" content="123 Mission
St" />
<meta property="og:locality" content="San Francisco" />
<meta property="og:region" content="CA" />
<meta property="og:postal-code" content="94110" />
<meta property="og:country-name" content="USA" />
<meta property="og:phone_number" content="+123" />
<meta property="og:email" content="df@df.com" />
...
Design goals
Useful to others beyond Facebook.
Copy and paste.
Simple markup. Simple schema.
What’s needed?
1 What is the user liking?
2 A clean page title
3 An image
4 A canonical URL
1) What is the user liking
Based off of the most popular categories for Facebook Pages.
▪ Activities
▪ Businesses
▪ Groups
▪ Organizations
▪ People
▪ Places
▪ Products and Entertainment
▪ Websites
2) A clean page title
Search Engine Optimization has caused all sorts of stuff to
be crammed into the <title> tag.
▪ “The Semantic Web & THE POWER OF PULL | Blog Archive | The Facebook
Open Graph, Part I”
▪ “A New Data Model – Facebook Developer Blog”
▪ “W3C Track @ WWW2010, Raleigh, NC, USA ; 29-30 April 2010”
▪ “Open Graph Protocol | Google Groups”
4) A canonical URL
We wanted to use link-rel canonical.
▪ Major publishers were concerned that adding link-rel canonical would
negatively impact their ranking within search engines.
A simple example
What’s desired?
5 A short description
6 A site name (for collections of pages)
7 Location information
8 Contact information
5) A short description
A simple schema.
▪ Not respecting Don’t Repeat Yourself.
▪ Optimized for a consistent schema versus reuse of existing meta tags.
▪ One namespace. One prefix.
▪ One HTML tag attribute (“property”)
What we didn’t want
But tried.
Too complex!
What we didn’t want
But tried.
Too complex!
What we didn’t want
But tried.
Too complex!
What we didn’t want
But tried.
Too complex!
7) Location information
▪ Couldn’t find a – simple – location markup specification.
▪ Reused the property names from the Microformat hCard
▪ Fully expect this information to be expressed within the page body
versus the head.
▪ RDFa gives us a consistent syntax for both cases.
Adoption
Open source implementations
Facebook Pages
Facebook Pages
Facebook Pages
What’s next
What could be next
▪ Objects types around media content
▪ video, audio, events
▪ Allow publishing to likers
▪ You can do this today, but not nicely
▪ og:feed
▪ Other types of edges
▪ og:taggedIn, og:isWatching
▪ Richer metadata to help find related objects
▪ Avatar on IMDb and Avatar on Rotten Tomatoes
Thanks! Questions?
http://opengraphprotocol.org/
