Open Graph : pourquoi et comment s'en servir ?

Open Graph est un protocole créé par Facebook en 2010, et désormais utilisé par la plupart des réseaux sociaux : Twitter, LinkedIn ou encore Pinterest. Le principe est le suivant : le développeur du site insère des balises Open Graph dans le code source de la page web ; lorsqu'un internaute partage la page sur un réseau social, l'aperçu s'affiche conformément aux instructions renseignées par le développeur.

L'open graph protocol (OGP) permet ainsi à la marque de maîtriser l'affichage du contenu, en personnalisant les informations de type titre, image ou encore description. L'enjeu pour l'entreprise : optimiser ses liens sociaux. De cette manière, l'audience de l'internaute qui a partagé le contenu est incitée à cliquer pour être redirigé sur le site de la marque : l'entreprise augmente sa portée, et son trafic entrant.

Quel est l'intérêt d'utiliser Open Graph ?

Utiliser Open Graph consiste à renseigner des balises meta og dans l'élément < head > du fichier HTML qui contient le code de la page web. À noter que lorsque le site est créé à l'aide d'un CMS, des plugins dédiés permettent d'insérer ces balises sans connaissances en code. Les balises meta og s'adressent spécifiquement aux réseaux sociaux : elles leur indiquent des instructions d'affichage, à la manière d'autres balises de l'élément < head > qui expliquent au navigateur web comment afficher le lien du site sur la page des résultats de recherche.

Titre de l'encart de partage, nom de domaine du site source, description du contenu de redirection ou encore image d'illustration : lorsqu'un utilisateur partage la page web sur le réseau social, ce sont les informations dûment renseignées par l'entreprise qui apparaissent sur le profil de l'utilisateur, et sur le fil de publications de ses abonnés.

Sans balises Open Graph, le robot d'indexation du réseau social choisit le plus pertinemment possible le titre, l'image d'aperçu et la description du contenu partagé. Avec les balises Open Graph, c'est l'entreprise qui choisit. L'intérêt est notable : la marque optimise l'affichage pour le rendre attractif pour sa cible, l'invitant de manière convaincante à visiter la page, pour in fine augmenter son trafic via les réseaux sociaux. L'entreprise en outre contrôle son image de marque, puisque l'encart de partage apparaît sur les réseaux sociaux conformément à ses instructions.

Illustration : le blog d'entreprise publie un article illustré d'une photo et d'une infographie. L'entreprise souhaite en faire un snack content à diffuser sur Facebook. À cet effet, elle utilise Open Graph : elle indique dans le code de la page de blog qu'il faut afficher l'infographie lorsque l'article est partagé. L'infographie est un contenu attractif, que l'utilisateur Facebook se plaît à visualiser. L'utilisateur Facebook clique plus volontiers sur le lien, pour visiter le blog en quête d'autres contenus intéressants. Résultat : le trafic entrant augmente.

Les balises meta Open Graph

• La balise de type : la balise og:type décrit au réseau social la nature du contenu principal de la page. Il peut s'agir d'un article, d'une vidéo ou encore de musique. En fonction, le réseau social applique le format d'affichage le mieux adapté.
• La balise de titre : la balise og:title détermine le titre de l'encart de partage visible sur le réseau social. L'entreprise peut utiliser le titre du contenu de la page web, ou choisir un titre différent, plus attractif pour son audience sur les réseaux sociaux.
• La balise d'image : la balise og:image permet de choisir l'image qui apparaît sur le réseau social lorsqu'un utilisateur partage la page. Des balises enrichies permettent de personnaliser la taille ou encore le texte descriptif de l'image.
• La balise d'url : la balise og:url correspond à l'adresse web de la page. Pour des raisons de lisibilité, le réseau social fait apparaître uniquement le nom de domaine dans l'encart de partage.
• La balise de description : la balise og:description, facultative, permet de rédiger un court descriptif du contenu de la page web. Le réseau social affiche le texte en-dessous du titre.
• La balise de statistiques Facebook : la balise fb:app_id est essentielle pour obtenir les statistiques du trafic entrant généré par le partage de la publication sur Facebook.
• La balise de video : la balise og:video est utile si le contenu partagé est au format vidéo. Elle permet à l'audience de lire la vidéo directement dans le fil de publications.

D'autres balises meta Open Graph, non obligatoires, permettent de donner davantage d'informations à propos de l'aperçu du lien social à afficher : og:locale pour spécifier la langue du contenu source ou og:site_name pour confirmer le nom du site web au réseau social, par exemple. Une fois les balises meta og insérées dans le code de la page, il est possible de vérifier que le réseau social les comprend correctement, et de s'assurer de l'absence d'erreur dans le code. Les outils à cet effet proposent également un aperçu du rendu final. Chaque réseau social met à disposition son propre outil :

• Sur Facebook : Sharing Debugger.
• Sur Twitter : Twitter Card Validator. À noter que Twitter a développé son propre protocole, Twitter Cards, mais comprend également le protocole Open Graph.
• Sur Pinterest : Rich Pin Validator.
• Sur LinkedIn : Open Graph debugger.

Exemple d'ajout Open Graph

See the Pen Untitled by HubSpot France (@HubSpot-France) on CodePen.

Dans cet exemple, l'auteure du blog utilise Open Graph en vue d'optimiser l'aperçu de son premier article lorsqu'il est partagé sur Facebook. Elle utilise notamment dans son code les balises meta og suivantes :

• La balise og:title pour rendre le contenu plus attractif, en interpellant par une question. Le titre affiché sur le réseau social, ici, est différent du titre de l'article sur le blog.
• La balise og:description pour donner envie de poursuivre la lecture, incitant ainsi à cliquer pour se rediriger vers le blog. Ce court descriptif n'apparaît pas dans l'article.

L'utilisateur Facebook qui voit apparaître le partage sur son fil de publications visualise un titre, une description et une image spécifiques. Lorsqu'il se rend sur le blog, ces éléments n'apparaissent pas.

Pour aller plus loin, téléchargez ce rapport 2022 sur les réseaux sociaux et découvrez comment adapter votre stratégie réseaux sociaux aux évolutions des attentes des consommateurs.