Le protocole Open Graph

Le protocole Open Graph

Le protocole Open Graph a été créé par Facebook (Meta) et a pour objectif d’enrichir les liens postés sur les réseaux sociaux. En effet, lorsque vous postez un lien sur Facebook, Twitter, Linkedin ou tout autre réseau social, un aperçu apparaît avec une image, un titre et un petit texte descriptif.

Ce bloc est affiché pour aider les usagers à comprendre ce que vous voulez partager.

Pour autant, cela n’est pas complètement automatique. Pour contrôler ce qui s’affiche, il existe un ensemble de paramètre à insérer dans vos pages, qui sont lues lors du partage de celles-ci.

Aperçu Linkedin

Format

Si de nombreux réseaux se sont alignés sur la méthodologie de Facebook pour interpréter les liens, il existe des réseaux comme Twitter qui ont décidé de faire leur sauce dans leur coin. Cela dit, ils utilisent tout de même les balises Open Graph si les balises propres à Twitter ne sont pas renseignées.

Open Graph

Dans la section <head> de votre site, vous devez indiquer les balises suivantes :

  • og:title - Le titre qui sera affiché
  • og:type - Le type de contenu à partager (certaines données deviennent obligatoires selon le type)
  • og:image - Le lien vers l’image à afficher
  • og:url - L’URL du contenu

Exemple :

<html>
<head>
<title>Les redirections web - Web ex Machina</title>
<meta property="og:title" content="Les redirections web" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.webexmachina.fr/article/les-redirections-web.html" />
<meta property="og:description" content="Plus votre site vit, plus il connait de changements. Vous envoyez des liens, des sites vous référencent etc. Les URLs de vos pages vont inexorablement bouger. C'est pour cela que l'on met en place des redirections. Qu’est-ce qu’une redirection ? Comment les mettre en place ? C’est le but de cet article !" />
<meta property="og:image" content="https://www.webexmachina.fr/files/blog/2022/2022-11-23_redirections/pexels-song-song-13734875.jpg" />
...
</head>
...
</html>

Il existe de nombreux autres paramètres, optionnels mais toutefois recommandés pour qualifier un peu plus le contenu de vos pages. En voilà quelques-uns :

  • og:description - Le texte qui accompagne le post
  • og:locale - La langue du contenu, au format suivant : [language designator]_[region designator]
  • og:locale:alternate - Si votre contenu est disponible dans d’autres langues, vous pouvez l’indiquer ici
  • og:site_name - Le nom de votre site

Pour les autres contenus, référez vous à la documentation sur le site officiel : https://ogp.me/

Aperçu Facebook

Twitter

Pour Twitter, c’est exactement la même logique, mais avec des attributs différents. La liste de tous les paramètres sont disponibles sur leur documentation : https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup

Les plus importants sont les suivants :

  • twitter:card - peut avoir les valeurs suivantes : summary, summary_large_image, app, player. Le rendu du post sera différent sur Twitter selon la valeur choisie.
  • twitter:site - Correspond à l’ID Twitter du site (@username)
  • twitter:creator - Correspond à l’ID Twitter de l’auteur
  • twitter:title - Même chose que og:title (mais limité à 70 caractères)
  • twitter:image - Même chose que og:image
  • twitter:description - Même chose que og:description
Aperçu Twitter

Bonnes pratiques

Il n’est pas obligatoire de rédiger un texte spécifique pour chaque page fort heureusement. Ce sont des champs qui peuvent se remplir automatiquement avec d’autres champs existants.

Par exemple, vous devez forcément saisir un nom pour chaque page. Afin de rester cohérent, vous pouvez réutiliser ce nom en tant que balise de référencement title et comme valeurs des balises open-graph og:title et twitter:title.

De même pour la balise de description, faites juste attention à limiter le nombre de caractères pour respecter les contraintes de Twitter.

En PHP, vous pouvez utiliser la fonction substr pour limiter une chaine de caractères. Il existe aussi de nombreux snippets pour couper une chaîne à la fin d’un mot et rajouter “…” (la fonction native de PHP ne tenant pas compte de cela).

Avec SMARTGEAR et dans nos sites en général, nous proposons de saisir ces champs manuellement depuis notre back-office et utilisons des règles comme celles mentionnées ci-dessus si ces champs ne sont pas renseignés.

Back-office Contao

Outils

Vous avez peut-être déjà été confronté à ce problème. Vous partagez un lien, puis modifiez la page et rien à faire, votre post ne s’actualise pas.

C’est normal, car comme tout système recherchant la performance, Facebook et les autres mettent en place un cache sur les contenus qu’ils partagent.

Heureusement, ils mettent tous à disposition un outil pour forcer cette actualisation :

Aperçu debugger Facebook

Le protocole Open Graph est essentiel à respecter pour contrôler le partage des liens sur les différents réseaux sociaux. Ces derniers monopolisent une bonne partie du trafic Internet depuis une dizaine d’années et vos usagers passent forcément du temps dessus.

A vous de trouver la bonne miniature et le bon titre pour amener une partie de ces internautes sur votre site !

Dans la même catégorie