social media

Protocole Open Graph - Gardez la main sur le contenu partagé !


7 Août 2017
open graph contenu partagé


Au cours de la création d'une page web, il est intéressant d'anticiper le paramétrage de partage de cette page sur les réseaux sociaux. Ce peut être le rôle du développeur web de définir les aspects des posts de partage.La rédaction du titre d'un post pour le partage d'un article ou d'une page web est critique pour l'incitation au clic.

Ainsi, le protocole Open Graph a été mis en place pour permettre de donner aux réseaux  sociaux les principales informations pour le paramétrage des posts à partir du code HTML de la page.

Il a été initialement créé par Facebook mais est maintenant géré par L'Open Web Foundation. Les posts portent le nom de "Cards" avec Twitter.
Ce protocole est utilisé par les principaux réseaux tels que Facebook, Twitter, Google + ou encore LinkedIn.

“ Le protocole Open Graph permet de garder le contrôle sur l'apparence du contenu partagé sur les réseaux sociaux”

Le protocole Open Graph est basé sur la définition de balise <meta> placées dans la partie <head> code HTML. Il est possible de retrouver l'ensemble des balises sur le site de l'Open Web Foundation.

Cependant certaines sont essentielles, nous allons nous concentrer sur celles-ci et définir les
balises pour le partage d'un post Facebook et Twitter. Quelque soit le réseau social, les balises principales sont :
- Titre
- Image
- Description
- URL de la page

Voici un exemple des balises <meta> nécessaires pour la configuration d'un post Facebook :

Open Graph Facebook
Voici le format de post de partage que l'on obtient avec ces balises :

code Open Graph Facebook

ATTENTION ! Il faut savoir que Facebook possède sa propre mémoire cache pour le partage des posts. Si vous souhaitez modifier vos balises <meta> il se peut que votre modification ne soit pas effective dans la mesure où Facebook utilise le post stocké dans sa mémoire cache. Pour empêcher cela, il faut se rentre sur l'outil de debug en ligne et entrer le lien de la page à partager.


Sur Twitter, le système de Cards ou Cartes permet de passer d'un simple partage de lien à un encart personnalisé avec une description est une image liée au post. La présentation devient alors beaucoup plus attractive pour l'utilisateur.

Il existe plusieurs formes de Cartes :
- Summary : Titre, Description et Thumbnail (petite image, icône)
- Summary Large Image : Similaire à la carte Summary mais avec une grande image
- App : Associé à un téléchargement direct vers une application mobile.
- Player : Possibilité d'associé une Vidéo, un Son ou un Média.

Il faut donc indiquer dans les balises <meta> quel format nous souhaitons utiliser, suivi des informations nécessaires.

code Twitter Card
Voici ce le format de post de partage Twitter obtenu avec ces balises :

post twitter card summary
Voici ce que nous aurions obtenu en définisant twitter:card en summary_large_image :

post twitter card summary large image
Enfin, il est nécessaire d'inclure un attribut supplémentaire à la balise d'ouverture html comme ceci :

code html open graph
Vous pouvez consulter le code source de cette page pour voir les balises utilisées.

Je vous conseille également de vérifier le bon fonctionnement des tags mis en place en se rendant sur les outils de debug et de validation pour  Twitter ou pour Facebook.

Lancez-vous ! Personnalisez vos posts de partage !