Logo de Hexium

Open Graph Protocol

Qu'est-ce que l'Open Graph ?

Initié par Facebook en 2010 et désormais adopté par des plateformes telles que Twitter, LinkedIn et Pinterest, Open Graph est un protocole qui établit comment les pages web sont représentées lorsqu'elles sont partagées sur les réseaux sociaux. En insérant des balises spécifiques Open Graph dans le code HTML, les développeurs web pilotent l'apparence de la vignette de partage incluant le titre, l'image et la description pour une présentation optimisée.

L'Open Graph Protocol (OGP) confère aux marques un contrôle sur la manière dont leur contenu est affiché sur les plates-formes sociales, permettant ainsi une personnalisation précise des informations partagées. L'objectif pour les entreprises est clair : améliorer le rendement des liens partagés sur les réseaux sociaux. Grâce à un contenu partagé bien présenté et attrayant, l'entreprise peut significativement accroître sa portée numérique et attirer plus de trafic vers son site, optimisant ainsi sa présence en ligne et son interaction avec l'audience.

Pourquoi utiliser l'Open Graph ?

L'implémentation d'Open Graph implique de renseigner des balises meta og au sein de l'élément <head> du code HTML de votre page web. Si votre site est conçu via un CMS, des extensions ou plugins peuvent insérer ces balises sans nécessiter de compétences en développement web. Ces balises meta og sont destinées aux réseaux sociaux, leur fournissant des directives précises sur l'affichage de votre contenu à l'instar de celle que d'autres balises <head> offrent aux moteurs de recherche pour la présentation des liens dans les résultats de recherche.

Les informations comme le titre de la publication partagée, l'URL du domaine source, la description du contenu et l'image principale sont affichées selon les détails fournis préalablement par l'entreprise lorsqu'un internaute partage la page sur un réseau social. Cela résulte dans une visibilité maîtrisée sur le profil de l'utilisateur et sur la page d'accueil de ses contacts.

En absence de balises Open Graph, les algorithmes des réseaux sociaux sélectionnent ces éléments au mieux, tandis que l'utilisation des tags Open Graph cède cette autorité à l'entreprise. C'est une opportunité notable car elle permet de construire une présentation attrayante et ciblée pour encourager la visite de la page, ce qui peut ultimement accroître le trafic provenant des réseaux sociaux. Cela offre également à l'entreprise une gestion précise de son image de marque, en s'assurant que les publications partagées sur les réseaux sociaux correspondent exactement à ses standards.

Prenons l'exemple d'un blog d'entreprise qui publie un nouvel article avec une photo et une infographie. L'entreprise désirant promouvoir sn contenu sur Facebook utilisera Open Graph pour spécifier dans le code de la page de l'article que l'infographie doit être mise en avant lors du partage. Les infographies étant généralement des contenus visuels attrayants, cela incitera davantage les utilisateurs de Facebook à cliquer sur le lien et à visiter le blog à la recherche d'autres contenus de qualité. Le résultat est une augmentation significative du trafic entrant.

Quelles sont les différentes balises meta ?

Pour bénéficier des avantages de l'Open Graph il est nécessaire d'inclure certaines balises meta dans la section head de vos pages HTML. Chaque balise influence à sa manière les éléments affichés lorsqu'une page est partagée sur les réseaux sociaux.

  • Balise de type : La balise og:type spécifie le type d’objet que votre page représente, comme un article, un produit ou une vidéo. Ce tag aide le réseau social à catégoriser le contenu partagé.

  • Balise de titre : La balise og:title définit le titre de votre contenu tel qu’il apparaîtra lors du partage. C’est l'équivalent du titre de votre page mais optimisé pour le réseau social.

  • Balise de description : og:description fournit une description claire et concise du contenu de la page, à la manière de la balise meta description mais orientée pour les réseaux sociaux.

  • Balise d'image : La balise og:image détermine quelle image sera utilisée en aperçu lors du partage. Il s'agit souvent de l'élément le plus frappant, influençant directement le taux de clics.

  • Balise d'URL : og:url permet de définir l'URL canonique de votre page destinée à être partagée. Elle établit la permanence de l'identité de la page, même si celle-ci est partagée via plusieurs URL.

  • Balise de langue : Avec og:locale vous pouvez spécifier la langue du contenu partagé ce qui essentiel pour adapter le contenu partagé au public cible en fonction de sa localisation géographique.

  • Balise de vidéo : Si votre page contient des éléments multimédias, comme une vidéo, og:video permet de référencer spécifiquement la vidéo à afficher dans le partage social.

En plus de ces balises courantes, Open Graph comprend également des balises pour la spécification d'autres types de données, comme og:audio, ainsi que des balises pour des plateformes spécifiques comme Twitter (twitter:card, twitter:title, ...). En utilisant correctement ces balises, vous assurez une présentation optimale de votre contenu sur les réseaux sociaux, augmentant l'efficacité de vos partages et améliorant l'engagement de l'utilisateur.

Mise en place de l'Open Graph

La mise en place des balises Open Graph peut être effectuée manuellement ou via un plugin si vous utilisez un CMS comme WordPress, Drupal ou Strapi. Nous vous recommandons d'utiliser des outils tels que le Facebook Debugger pour tester le bon affichage des informations renseignées sur votre page web.