Le protocole Open Graph

Open Graph

Propriétaire de site Internet :

Choisissez le contenu de votre site à partager sur les principaux réseaux sociaux.

 

 

Par défaut, Facebook se charge de parcourir votre page afin de détecter les tags « img » présents et vous propose ces images au moment du partage. Malheureusement, Facebook vous coupe parfois les images d’une manière bien inesthétique.

Grâce au protocole Open Graph, il vous est possible d’indiquer à Facebook, le contenu à afficher. Plus concrètement, le protocole Open Graph est un ensemble de balises qui permet à un Webmaster de donner aux principaux réseaux sociaux (Facebook, Google +, Twitter, Linkedin...) des informations précises sur ses pages. Ces informations permettront aux réseaux sociaux de mieux afficher le contenu d’une page Web partagée.

 

Pour mettre en place le protocole Open Graph, il faut simplement :

  • Ajouter le namespace "http://ogp.me/ns#" au tag html
  • Au sein des balises head, il faut rajouter des balises meta avec les attributs property et content
  • Les spécifications définissent 4 balises de l'Open Graph comme "Requise" : og:title, og:type, og:url, og:image
  • D'autres tags sont aussi utiles, notamment si votre page a du contenu riche (vidéo)

 

Exemple d'insertion de données Open Graph :

<html xmlns:og="http://ogp.me/ns#">

<head>

<title>Article sur l'Open Graph</title>

<meta property="og:title" content="Article sur l'Open Graph par InSitWeb" />

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

<meta property="og:url" content="http://www.monsite.com/" />

<meta property="og:image" content="http://www.monsite.com/images/mon_image.jpg" />

...

</head>

...

</html>

 

 

Tailles des images :

Minimum 200 pixels de large. En dessous de cette taille, Facebook considèrera votre image comme étant trop petite ou pas assez "importante" pour être partagée et retournera vers une solution de scraping.

 

Outil de test sur Facebook :

https://developers.facebook.com/tools/debug/

InSitWeb Chat