Open Graph protocol
The "Open Graph protocol" is simply a method of including meta information in a web page to allow Facebook to accurately represent the page's content when it is linked to in Facebook. For example, if you have no Open Graph meta tags on a page, Facebook will typically select a random image on the page to represent the content of the page; with the tags, you can specify what image should be shown when someone shares that particular page.
You can read Facebook's official documentation for more background information. This page is essentially a summary of the information and requirements for each meta tag.
If enough people "like", "share", "send", etc. your page on Facebook, then Facebook will generate a page associated with it. For example, the "Main Page" of this site has over 30 likes and now has a page found at http://www.facebook.com/pages/Main-Page/209367199084525 .
You can test what Facebook will read from your page by going to the Facebook Linter. It may also tell you if you've formatted particular information wrong (for example, you gave a relative address to an image instead of a full URL).
Contents |
Syntax
All tags should be in the head tag of your page and are of the following format:
<meta property="[PROPERTY]" content="[PROPERTY VALUE]"/>Properties
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:title | any text | The Rock | required | after a page receives 50 likes the title becomes unchangeable | |
| og:type | see Types below | required | after a page receives 10,000 likes the type becomes unchangeable | ||
| og:url | "proper"/canonical format for URL of current page | fully qualified URL | http://www.imdb.com/title/tt0117500/ |
required | |
| og:image | image to associate with the content of the page | fully qualified URL | http://ia.media-imdb.com/rock.jpg |
required | |
| og:site_name | human readable name of the website this page is contained in | any text | IMDb | required | |
| fb:admins | comma separated list of users who should have administrative access to any Facebook pages created about this web page | comma separated list of Facebook user ids | 45234,95424 |
required if no fb:app_id defined |
|
| fb:app_id | Facebook ID for an application that owns this page | Facebook application ID | 118381521562237 | required if no fb:admins defined |
|
| og:description | description of the page | any text |
Locations
Definition on the Open Graph website
adding latitude and longitude coordinates
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:latitude | 37.416343 | ||||
| og:longitude | -122.153013 |
adding a "human" readable address
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:street-address | 1601 S California Ave | none | |||
| og:locality | Palo Alto | none | |||
| og:region | CA | none | |||
| og:postal-code | 94304 | none | |||
| og:country-name | USA | none |
Contact Information
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:email | me@example.com | none | |||
| og:phone_number | +1-650-123-4567 | none | |||
| og:fax_number | +1-415-123-4567 | none |
Videos
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:video | fully qualified URL to a SWF video | http://example.com/awesome.swf | none | Facebook supports embedding video in SWF format only. You must include a valid og:image for your video to be displayed in the news feed. | |
| og:video:width | pixel width of video described in og:video | integer ≤ 398 | 385 | must have og:video | |
| og:video:height | pixel height of video described in og:video | integer ≤ 460 | 400 | must have og:video | |
| og:video:type | mime-type of video file described in og:video | application/x-shockwave-flash | must have og:video |
Audio
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:audio | fully qualified URL to an audio file | "http://example.com/amazing.mp3" | none | not sure what all formats are supported beyond mp3 | |
| og:audio:title | title of audio described in og:audio | any text | "Amazing Soft Rock Ballad" | must have og:audio | |
| og:audio:artist | pixel height of audio described in og:audio | any text | "Amazing Band" | must have og:audio | |
| og:audio:album | mime-type of audio described in og:audio | any text | "Amazing Album" | must have og:audio | |
| og:audio:type | mime-type of audio file described in og:audio | any text | "application/mp3" | must have og:audio |
Others
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:upc | UPC code of the item | none | may be an expectation of og:type being one under "Products and Entertainment" | ||
| og:isbn | ISBN code of book if describing a book | "978-0470878040" | none | may be an expectation of og:type being one under "Products and Entertainment" |
Types
The following is a list of the possible values for og:type
Activities
- activity
- sport
Businesses
- bar
- company
- cafe
- hotel
- restaurant
Groups
- cause
- sports_league
- sports_team
Organizations
- band
- government
- non_profit
- school
- university
People
- actor
- athlete
- author
- director
- musician
- politician
- profile
- public_figure
Places
- city
- country
- landmark
- state_province
Products and Entertainment
- album
- book
- drink
- food
- game
- movie
- product
- song
- tv_show
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
- article
- blog
- website
Use article for any URL that represents transient content - such as a news article, blog post, photo, video, etc. Do not use website for this purpose. website and blog are designed to represent an entire site, an og:type tag with types website or blog should usually only appear on the root of a domain.
If your object does not fit into one of the types above, you can specify your own type. This will be represented as type other on Facebook. We will monitor the most commonly used types and graduate them to fully supported og:types. If you are specifying your own type we recommend that you use your own namespace. For example if you are moviesite.com, and you want to mark a URL on your site as a director you would do:
<html xmlns:moviesite="http://www.moviesite.com/ns#" > <head> .... <meta property="og:type" content="moviesite:director"/>
Notes
The "official" definition of the Open Graph protocol is at http://ogp.me/ , however Facebook (although being the author of it) uses a modified version of the protocol. This page is describing the protocol as reflected on the Facebook Developer Docs about the Open Graph and how it interacts with Facebook's API / social plug-ins.
