Qu’est-ce qu’Open Graph?

Le Protocole Open Graph , ou plus couramment appelé “Open Graph”, est une balise structurée que vous pouvez ajouter à vos documents HTML pour contextualiser votre contenu et prendre le contrôle des snippets qui sont affichés lorsque vos URLs sont partagés via les plateformes des réseaux sociaux comme Facebook, LinkedIn, Twitter ainsi que les applications telles que Slack, WhatsApp et Telegram.

Facebook Open Graph illustrated

Voici un exemple de KLM qui prend en main la façon dont leur article de blog est affiché sur Facebook, en utilisant Open Graph :

Facebook Open Graph example

Pourquoi s’intéresser à Open Graph

Avoir une image attractive qui retient l’attention, un bon titre et une bonne description encourage les gens à cliquer sur votre snippet. Cela peut changer la donne si vous voulez tirer votre épingle du jeu sur les réseaux sociaux.

Les balises OpenGraph vous donne la possibilité de maîtriser la façon dont les snippets de vos URLs seront affichés sur les réseaux sociaux. En SEO, nous sommes obnubilés par l’optimisation de nos titres et meta descriptions pour obtenir le plus haut CTR ( taux de clics) possible, mais les gens oublient souvent cet aspect là quand il s’agit des réseaux sociaux. Et c’est bien dommage si on considère que le combat sur les réseaux sociaux est tout aussi féroce (si ce n’est plus).

Geoffrey Colon
Geoffrey Colon

Open Graph est important parce que cela prend sérieusement en compte le partage de contenu. Lorsque les gens saisissent un lien pour le poster en statut ou le partager directement depuis votre site, ils n’ont pas envie d’avoir à redesigner le contenu pour qu’il soit beau et s’intègre bien à leur fil d’actualité. Et ils ne veulent certainement pas avoir juste un lien sans photo ou titre. Open Graph aide à mettre en forme le contenu en étant en lien avec de nombreuses Interfaces de Programmation (appelées API) ce qui donne une apparence globale et devient attractif pour ceux qui voient cette information dans leurs fils d’actualités et sont alors plus enclins à cliquer sur le lien. Open Graph agit comme un traffic driver contrôlé par l’équipe de design web.

Izzi Smith
Izzi Smith

Les signaux sociaux sont un bon moyen de prouver aux moteurs de recherche que vous avez du contenu de haute qualité qui peut être partagé, unique, et qui peut être pertinent pour une large audience. Cela dit, si vous ne maîtrisez pas l’apparence de vos pages sur les plateformes de réseaux sociaux, vous risquez de perdre le bénéfice de ces partages et des ces engagements si le mauvais contenu est mis en avant. En utilisant Open Graph vous éradiquez ce risque, vous pouvez avoir la main sur la façon dont votre contenu est présenté, ce qui maximise vos chances d’amener plus de monde sur votre site et de gagner ces signaux sociaux importants.

Est-ce qu’Open Graph améliore mon ranking ?

Non, Open Graph n’améliore pas votre ranking de façon directe. Nous pensons néanmoins qu’Open Graph aide les moteurs de recherche à cerner le contexte de votre contenu, tout comme Schema.org. Au final, Open Graph est bénéfique pour vos performances SEO.

Comme nous l’avons dit plus tôt, si vous voulez attirer plus de trafic grâce aux réseaux sociaux, il est grandement recommandé d’implémenter Open Graph.

Après tout, ça ne prend pas beaucoup plus de temps d’ajouter un titre Open Graph, une description et une image lorsque vous peaufinez votre titre et votre meta description.

Kevin Indig
Kevin Indig

Les balises Open Graph sont importantes dans le processus de distribution de notre contenu. Elles réduisent de beaucoup les frictions de partage de contenu en s’assurant que le snippet soit bien fait et augmente ainsi la probabilité qu’il soit partagé de nouveau. Au final, les balises Open Graph sont un facteur important dans la distribution virale de contenu. Plus on y fait attention, plus votre contenu est partagé.

Arnout Hellemans
Arnout Hellemans

Comme beaucoup d’outils n’ont pas de base HTTP (comme WhatsApp, Slack, FB Messenger), il n’y a pas de référent (referrer en anglais). C’est la raison pour laquelle cela termine dans la catégorie trafic direct pour Google Analytics. Utilisez le tracking sur la balise og:url (UTM ou autres) pour différencier les sources de trafic.

Les plateformes compatibles avec Open Graph

La plus évidente est Facebook, puisque ce sont les développeurs d’Open Graph.

Open Graph est aussi compatible avec au moins cinq autres plateformes :

  • LinkedIn
  • Slack
  • Twitter
  • WhatsApp
  • Telegram

Veuillez noter que Twitter a développé sa propre version, appelée “Twitter Cards”. Mais s’il n’y a pas de balises Twitter Cards présentes, ils se reporterons aux balises Open Graph pour générer les snippets à partir des URLs.

Comment implémenter Open Graph

Pour implémenter Open Graph, il faut ajouter une balise Open Graph à vos documents HTML dans la partie <head> de vos pages. Vous pouvez le faire manuellement, mais si votre site web est géré par un SGC (CMS en anglais), il y a probablement des plugins et d’autres fonctionnalités disponibles pour le faire automatiquement. Si ce n’est pas le cas, parlez en à vos développeurs. En règle générale, créer une fonctionnalité de ce genre n’est pas compliqué.

Il y a quatre propriétés Open Graph requises:

  1. og:url
  2. og:title
  3. og:description
  4. og:image

Il y a aussi deux propriétés recommandées. Utilisez les pour contextualiser d’avantage le contenu:

  1. og:type
  2. og:locale

Voyons un exemple Open Graph

Notre article sur Schema.org ressemble à cela lorsqu’il est partagé sur Facebook:

Open graph on Facebook - snippet example

Lorsqu’on extrait le code source, voici à quoi ressemble l’implémentation d’Open Graph:

Open Graph code snippet

og:locale

La propriété og:locale décrit l’endroit visé par la page (sa localisation). Dans ce cas, il s’agit de la valeur par défaut, en_US. On peut dire que og:locale est similaire à l’attribut hreflang en SEO dans sa manière de viser une audience particulière.

Si votre contenu est disponible pour d’autres localisations, vous pouvez définir des versions alternatives en utilisant og:locale:alternate.

Exemple de code de snippet
<meta property="og:locale" content="en_US" />

Prérequis
La valeur est constituée d’un code de langage de deux lettres, d’un tiret du bas, puis d’un code de pays de deux lettres.

Ce qui se passe si vous ne la définissez pas
Si la balise og:locale n’est pas remplie ou définie, elle sera par défaut : en_US.

Plus d’infos sur og:locale
Documentation Facebook pour développeurs.

og:type

La propriété og:type décrit le type de contenu (dans ce cas article). Ce tag influence la façon dont votre page apparaît dans le fil d’actualité Facebook. Il ya plusieurs types de contenu parmi lesquels on peut choisir, comme par exemple : produit, livre, endroit, profil, et video.movie. On peut comparer og:type aux types de Schema.

Exemple de code de snippet
<meta property="og:type" content="article" />

Prérequis
On ne peut définir qu’un seul type de contenu par page.

Ce qu’il se passe si vous ne la définissez pas
Si vous ne définissez pas la balise og:type, elle sera website par défaut.

Plus d’infos sur og:types
Documentation Facebook pour développeurs.

og:title

La propriété og:title définit le titre Open Graph, qui donne le titre d’une page. og:title est similaire au tag titre de page <title> en SEO.

Exemple de code de snippet
<meta property="og:title" content="Structured data using Schema.org: the Ultimate Guide" />

Prérequis
Le titre ne devrait contenir aucune marque. Il devrait décrire le titre de votre contenu. De plus, gardez ces recommandations en tête lorsque vous optimiser votre snippet pour Facebook :

  • Votre titre ne rentrera pas en une seule ligne s’il fait plus de 55-60 caractères.
  • Votre og:description ne sera pas visible si votre titre tient en deux lignes.

Ce qu’il se passe si vous ne le définissez pas
Les plateformes de réseaux sociaux utiliseront votre tag <title> ou votre twitter:title en solution de repli.

og:description

La balise og:description correspond à la description Open Graph. C’est une courte description du sujet de la page.

Exemple de code de snippet
<meta property="og:description" content="Get more clicks and outsmart your competitors with Schema.org!" />

Prérequis
Lorsque vous optimisez votre snippet pour Facebook, gardez en tête que la description ne rentrera pas dans une ligne si elle fait plus de 55-60 caractères.

Ce qu’il se passe si vous ne la définissez pas
Les plateformes sociales utiliseront votre meta description ou votre twitter:description en derniers recours.

og:url

La propriété og:url décrit la version canonique de l’URL, c’est à dire la version sans paramètres.

Exemple de code de snippet:
<meta property="og:url" content="https://www.contentkingapp.com/academy/schema/" />

Prérequis
Il est essentiel de définir la version canonique de l’URL ici, puisque les Likes et les Partages sont attribués à cet URL plutôt qu’à la version non canonique.

Ce qu’il se passe si vous ne la définissez pas
Votre implémentation Open Graph ne sera pas validée, car c’est une propriété obligatoire.

og:site_name

La propriété og:site_name décrit le nom du site web (mais ce n’est plus une propriété mise en application).

Exemple de code de snippet
<meta property="og:site_name" content="Real-time SEO Auditing and Content Tracking" />

article:section

La propriété article:section est une propriété de og:type, qui décrit la partie de votre site à laquelle appartient la page. Dans notre cas, article:section est la catégorie dans laquelle se trouvent nos articles Académie.

Exemple de code de snippet:
<meta property="article:section" content="Structured Data" />

Prérequis
Aucun.

Ce qu’il se passe si vous ne la définissez pas
Les plateformes de réseaux sociaux ne seront pas en mesure de comprendre à quelle section de votre site appartient la page dont il est question.

Plus d’infos sur article:section
Documentation Facebook pour Développeurs.

og:image

La propriété og:image définit l’image qui devrait apparaître sur votre snippet. Choisissez ces images avec attention, parce que la taille, la qualité et la dimension comptent.

Exemple de code de snippet:
<meta property="og:image" content="https://www.contentkingapp.com/wp-content/uploads/2018/06/[email protected]" />

Prérequis
Lorsqu’il s’agit de og:image, gardez les prérequis suivant à l’esprit:

  • Si vous voulez qu’une image large s’affiche sur votre snippet, assurez vous qu’elle ait au moins 600 x 315 pixels (mais dans l’idéal au moins 1,200 x 630 pixels pour les écrans à haute densité de pixels comme les écrans Apple Retina).
  • Si vous choisissez une image qui fait moins de 600 x 315, Vous verrez que votre snippet contiendra une image plus petite.
  • Le minimum absolu d’une image est de 200 x 200 pixels. Les images plus petites ne seront pas validées.
  • Le format d’image maximum est de 8 MB par image.
  • Pour s’assurer que votre image ne soit pas coupée, restez en à un ration de 1.91:1 aspect ratio.

Ce qu’il se passe si vous ne la définissez pas
Votre implémentation Open Graph ne sera pas valide et les plateformes de réseaux sociaux chercheront sur votre page une image à afficher. Il y a de fortes chances que cela ne soit pas beau à voir, puisque nous avons vu qu’il y a des critères assez strictes concernant les images.

Champs supplémentaires optionnels pour og:image
Il y a des champs supplémentaires optionnels disponibles pour og:image qui peuvent fournir plus d’informations à propos de l’image :

  • og:image:url: c’est une alternative à og:image
  • og:image:width et og:image:height: précise la longueur et la largeur de l’image, ce qui permet à l’image de se charger correctement lorsqu’elle est partagée pour la première fois.
  • og:image:type: vous laisse définir le type d’image. Les formats supportés sont:
    • image/jpeg
    • image/gif
    • image/png

og:image:secure_url

og:image:secure_ur définit la version HTTPS de og:image.

Exemple de code de snippet:

<meta property="og:image:secure_url" content="https://www.contentkingapp.com/wp-content/uploads/2018/06/[email protected]" />

Prérequis
L’URL de l’image doit être donnée en HTTPS.

Ce qui se passe si vous ne la définnissez pas
Ce qui arrive dans ce cas là n’est pas clair.

Autres propriétés Open Graph

Il y a beaucoup plus de propriétés Open Graph disponibles. En voici quelques une qui peuvent être intéressantes :

  • og:video: utilisé pour utilisé une vidéo. Voir la documentation Facebook pour Développeurs à ce sujet.
  • og:updated_time: indique la date de la dernière mise à jour d’une page.
  • og:ttl: donne le nombre de secondes avant que la page soit de nouveau récupérée par Facebook. C’est une façon de limiter les crawlers Facebook.

Faites valider votre implémentation Open Graph avec un checker

Vous pouvez utiliser le débogueur Open Graph de Facebook pour valider votre implémentation Open Graph.

Cela dit cet outil vous permet de vérifier seulement une URL à la fois. Il serait logique d’avoir une solution de taille pour vérifier plusieurs pages en même temps. C’est là que ContentKing intervient : il vous laisse auditer vos implémentations Open Graph sur l’ensemble de votre site web en temps réel.

Contentking - issues open graph

Les meilleures pratiques concernant Open Graph

Gardez en tête les recommandations suivantes lorsque vous avez à faire à Open Graph:

  1. Assurez vous de définir au moins les propriétés prérequises par Open Graph, dans l’idéal définissez aussi les propriétés optionnelles.
  2. Limitez vos og:title à 55–60 caractères.
  3. Limitez vos og:description à 60–65 caractères.
  4. Pour og:image, utilisez une image de haute qualité qui fait au minimum 1,200 x 630 pixels, tout en gardant la taille du fichier en dessous de 8 MB.
  5. Lorsque vous préparez la balise Open Graph d’une page, passez toujours par le débogueur Open Graph pour prévisualiser votre snippet, et pour vous assurer que toutes les données sont présentes. Ajustez et modifiez le jusqu’à ce que vous en soyez satisfait. Il y a un autre avantage à noter : votre snippet aura la bonne apparence la première fois qu’il sera partagé grâce au pre-cache.
  6. Si vous avez fait des erreurs, que vous les avez ensuite corrigées et que vous souhaitez que Facebook génère un nouveau snippet : allez sur le débogueur Open Graph et cliquez sur “Collecter de nouvelles informations d’analyse”. Cela rafraîchira le cache. Cependant ça ne rafraîchira pas automatiquement l’image du même coup (pour cela vous devez définir un nouvel URL og:image et une fois que c’est fait cliquez sur “Collecter de nouvelles informations d’analyse”.
  7. Utilisez og:image:width et og:image:height pour permettre à Facebook et à d’autres plateformes de charger l’image correctement dès le premier partage.
ContentKing Academy Content Team
Steven van Vessum
Steven van Vessum

Steven est le Chef de l’expérience client dans l’entreprise ContentKing. Cela signifie qu’il s’occupe de tout lié avec les clients et avec l’inbound marketing. C’est là où il veut être. Il aime améliorer le référencement des sites web dans les moteurs de recherche et parler de l’inbound marketing.

Vojtěch Zach
Vojtěch Zach

Vojtěch is ContentKing’s Customer Support & Localization Manager. He is the one who will answer your questions when you reach out to us. He is a studied translator, so apart from making our users happy, he also loves to take on our localization challenges.

Lorena Torsani
Lorena Torsani

Lorena is ContentKing’s Marketing Specialist. She’s a creative thinker, who is highly enthusiastic about engaging with customers, running exciting campaigns and bringing forth some fresh ideas.

Commencer votre essai gratuit de 14 jours

Vous pouvez commencer en 20 secondes

Insérez un nom de domaine valide, s'il vous plaît (www.exemple.fr).
  • La carte de crédit n'est pas requise
  • Aucune installation requise
  • Sans engagement