Introduction sur le protocole Open Graph

Le protocole Open Graph permet de transformer toute page du web en objet riche intégré dans le graph social. Au sein de l'eco-système Facebook, il permet à n'importe quelle page web d'avoir les mêmes fonctionnalités qu'une Page Officielle sur Facebook.com.
Alors que différentes technologies et schémas existent et pourraient être combinés ensemble, il n'y a pas de technologie qui fournit suffisamment d'informations pour représenter de manière riche n'importe quelle page dans le graph social (environnement social).  Le protocole Open Graph construit sur ces technologies existantes offre aux développeurs une seule chose à implémenter. La simplicité de développement est le but premier du protocole Open Graph ce qui a beaucoup influencé les décisions autour de sa conception technique.

Les balises Open Graph fondamentales

Pour transformer votre page web en objet du graph, vous devez lui ajouter des balises fondamentales. La version initiale du protocole open graph s'appuie sur celle du RDFa, ce qui signifie que vous devrez placer des balises additionnelles <meta> dans le <head> de votre page web. Les quatre propriétés requises pour chaque page sont :

Par exemple, voici le marquage Open Graph pour le film The Rock présent sur 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>
Les propriétés suivantes sont optionnelles mais sont recommandées:

Par exemple (les retours à la ligne sont uniquement présents pour faciliter la lecture) : 

<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" />
Le schéma RDF (qui met en relation le protocole Open Graph et d'autres schémas) peut être trouvé à cette adresse : http://ogp.me/schema

Spécifiez votre localisation

Le protocole Open Graph offre l'opportunité de renseigner une adresse pour votre objet Open Graph. Ceci est utile si votre objet représente une entreprise ou tout autre élément du monde réel ayant une adresse physique. Vous pouvez spécifier un emplacement via la latitude and longitude, une adresse complète, ou les deux. Les propriétés sont définies par le Microformat hCard. Pour spécifier la latitude et la longitude, il faut inclure ces deux propriétés :

Si vous souhaitez spécifier une adresse lisible, il convient d'inclure ces 5 propriétés :

Par exemple :

<html xmlns:og="http://ogp.me/ns#">
<head>
...
[TAGS REQUIS]
<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>

Renseigner des informations de contact

Le protocole Open Graph vous donne aussi la possibilité de spécifier des informations de contact pour votre objet. Il est probable que les futures versions du protocole extrairont ces informations depuis le corps de votre page. Pour spécifier des informations de contact, il convient d'ajouter au moins une des ces trois propriétés :

Par exemple : 

<html xmlns:og="http://ogp.me/ns#">
<head>
...
[TAGS REQUIS]
<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>

Attacher des données vidéo

Si vous voulez attacher une vidéo à votre page, il vous suffit simplement de spécifier une URL pointant vers votre vidéo :

Vous pouvez ajouter ces balises en option :

Si vous ne spécifiez pas de og:video:type, les parseurs essaieront de les renseigner automatiquement. La valeur "" peut être considérée comme valeur par défaut le temps que l'HTML5 soit plus répandu.
Par exemple : 

<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>

Attacher des données audio

Comme pour l'og:video, vous pouvez ajouter un fichier audio à votre marquage.

Et en option :

Par exemple : 

<html xmlns:og="http://ogp.me/ns#">
<head>
...
[TAGS REQUIS]
<meta property="og:audio" content="http://example.com/amazing.mp3" />
<meta property="og:audio:title" content="Mon incroyable morceau de musique" />
<meta property="og:audio:artist" content="Notre incroyable groupe de musique" />
<meta property="og:audio:album" content="Notre super album" />
<meta property="og:audio:type" content="application/mp3" />
...
</head>

Les types d'objets Open Graph

Afin de permettre initialement de représenter votre objet dans le graph, vous devez spécifier son type. Ceci doit être fait en utilisant la propriété og:type :
<meta property="og:type" content="product" />
Le schéma de base inclue les types listés ci-dessous. Il est possible que les réseaux sociaux ne prennent pas en compte tous les types décris mais seulement un sous-ensemble de ceux-ci. Il est également possible qu'ils en créent de nouveaux en fonction de leurs besoins.

Activities

Businesses

Groups

Organizations

People

Places

Products and Entertainment

Pour les produits qui possèdent un code UPC ou un numéro ISBN, vous pouvez le spécifier en utilisant les propriétés og:upc et og:isbn. Ces propriétés aident à créer des connexions pertinentes entre 2 objets du graph.

Websites

Discussions et support