Balises Open Graph : maîtriser l'aperçu des liens partagés
Quand un lien est partagé sur Facebook, LinkedIn, WhatsApp, Slack ou X, quelques lignes dans l'en-tête de la page décident du titre, du texte et de l'image que les gens voient.
Collez un lien dans une conversation ou une publication et, un instant plus tard, une carte apparaît avec une image, un titre et une ligne de texte. Cette carte n'est pas devinée à partir de la page : elle est construite à partir des balises Open Graph, une poignée d'éléments meta placés dans le <head> de la page. Les pages qui n'en ont pas reçoivent ce que le réseau parvient à récupérer, c'est-à-dire souvent le logo, un bandeau de cookies ou pas d'image du tout. Ce guide explique les balises qui comptent, les règles pour l'image et la façon de corriger un aperçu qui refuse de se mettre à jour.
Qu'est-ce qu'Open Graph ?
Open Graph est un petit ensemble de conventions lancé par Facebook en 2010 pour que n'importe quelle page web puisse se décrire elle-même au moment d'être partagée. Il s'est imposé bien au-delà de Facebook : LinkedIn, WhatsApp, Telegram, Slack, Discord, Microsoft Teams et beaucoup d'autres lisent les mêmes balises. X les lit aussi, en plus de ses propres balises twitter:. Les écrire une seule fois couvre donc presque tous les endroits où un lien peut être partagé.
Les balises ressemblent à ceci :
<meta property="og:type" content="article">
<meta property="og:title" content="How to Make Cold Brew at Home">
<meta property="og:description" content="The grind, the ratio and the steeping time.">
<meta property="og:url" content="https://example.com/cold-brew">
<meta property="og:image" content="https://example.com/images/cold-brew.jpg">
<meta property="og:site_name" content="The Coffee Blog">Les balises qui comptent
| Balise | Ce qu'elle définit | Conseil |
|---|---|---|
og:title | Le titre en gras de la carte | Peut différer du titre pour la recherche : plus court et plus engageant |
og:description | La ligne sous le titre | Une ou deux phrases ; beaucoup d'applications n'affichent que la première ligne |
og:image | L'image | Une adresse https:// complète ; voir les règles de taille ci-dessous |
og:url | L'adresse à laquelle le partage est attribué | L'adresse canonique, sans paramètres de suivi |
og:type | Le type de page | website pour la plupart des pages, article pour les articles |
og:site_name | Le site affiché au-dessus ou en dessous du titre | Le nom de votre marque |
og:locale | La langue et la région | Par exemple en_US ; facultatif |
Notez qu'Open Graph utilise l'attribut property, et non name. La plupart des plateformes acceptent les deux, mais property est ce que prévoit la spécification.
L'image : taille et format
L'image est ce que les gens remarquent en premier, et c'est là que la plupart des aperçus échouent.
- Taille : 1200 × 630 pixels, soit un rapport de 1,91 pour 1, fonctionne partout. Une image plus petite que 600 × 315 peut être affichée en petite vignette, voire ignorée.
- Format : le JPG et le PNG sont sûrs. Le WebP est accepté par la plupart des plateformes, mais pas toutes ; les GIF sont affichés comme une image fixe.
- Poids du fichier : restez bien en dessous de quelques mégaoctets. Certaines applications, WhatsApp en particulier, ignorent les images trop lourdes.
- Adresse : une adresse https:// absolue que tout le monde peut ouvrir. Les chemins relatifs, les images derrière une connexion et les adresses bloquées par le robots.txt ne fonctionnent pas.
- Zone de sécurité : éloignez le texte et les visages des bords, car certaines applications recadrent l'image en carré ou en bande plus étroite.
Le convertisseur d'images redimensionne et compresse une image à ces dimensions sans l'envoyer sur un serveur.
Les cartes X (Twitter)
X lit les balises Open Graph pour le titre, la description et l'image, mais un choix demande sa propre balise : twitter:card. Avec summary_large_image, l'image s'affiche en grand au-dessus du texte ; avec summary, c'est un petit carré à côté. Sans cette balise, les liens peuvent apparaître comme une simple URL. La balise twitter:site peut indiquer le compte qui se trouve derrière le site. Le générateur de Twitter Card écrit les deux jeux de balises ensemble.
Open Graph et les moteurs de recherche
Les moteurs de recherche ne classent pas les pages d'après leurs balises Open Graph ; ce sont l'élément <title> et la meta description qui façonnent le résultat de recherche. Les deux jeux contiennent souvent un texte proche, mais ils s'adressent à des lecteurs différents : le titre pour la recherche doit contenir les mots que les gens tapent, alors que le titre de partage peut être écrit pour quelqu'un qui fait défiler son fil d'actualité. L'aperçu du résultat Google montre à quoi ressemble la version pour la recherche.
Pourquoi un aperçu est faux ou absent
| Symptôme | Cause probable | Solution |
|---|---|---|
| Ancienne image ou ancien texte après une modification | La plateforme a mis en cache le premier aperçu | Demandez-lui de relire la page, par exemple avec le Sharing Debugger (outil de débogage de partage) de Facebook ou le Post Inspector de LinkedIn |
| Aucune image | Adresse d'image relative ou inaccessible | Utilisez une adresse https:// complète et publique |
| Petite vignette au lieu d'une grande image | Image trop petite, ou pas de twitter:card sur X | Utilisez 1200 × 630 et ajoutez summary_large_image |
| Le mauvais titre | Balises ajoutées par JavaScript après le chargement de la page | Placez les balises dans le HTML envoyé par le serveur ; la plupart des robots n'exécutent pas les scripts |
| Rien, sur une seule page | La page bloque les robots ou exige une connexion | Autorisez le robot à récupérer la page |
Le point sur JavaScript piège de nombreuses applications monopages : si les balises n'apparaissent qu'après l'exécution des scripts, les robots des réseaux sociaux ne les voient jamais. Générez-les côté serveur, ou pré-rendez les pages qui sont le plus partagées.
Écrire les balises
Le générateur de balises meta écrit les balises pour la recherche, les balises Open Graph et les balises X à partir d'un seul formulaire court, avec des aperçus pour Google, Facebook et X qui se mettent à jour au fil de la saisie. Il peut aussi lire les balises d'une page existante à partir de son HTML, ce qui est le moyen le plus rapide de contrôler une page que vous avez déjà. Le générateur Open Graph l'ouvre directement sur l'aperçu pour les réseaux sociaux.