Balises Open Graph : comment maîtriser l'aperçu de vos liens

En bref : les balises Open Graph indiquent aux réseaux sociaux et aux applications de messagerie ce qu'il faut afficher quand votre lien est partagé. Chaque page a besoin de og:title, og:description, og:image et og:url, plus twitter:card pour X. Utilisez une URL d'image absolue en HTTPS, d'environ 1200 × 630 px, de moins de 5 Mo, avec l'élément important près du centre. Générez les balises dans le HTML envoyé par votre serveur et, après toute modification, actualisez l'aperçu en cache de chaque plateforme, car les anciennes cartes ont la vie dure.

L'aperçu d'un lien est souvent la première impression que donne votre site. Un collègue colle votre page de tarifs dans Slack, un client partage un produit sur WhatsApp, un partenaire publie votre article sur LinkedIn. Si la page n'a pas de balises Open Graph, chaque application devine : le texte du bandeau de cookies devient la description, l'image est un minuscule logo ou rien du tout, et le titre est celui de la balise <title> de la page, quel qu'il soit.

Ce guide présente le rôle de chaque balise, ce que lit chaque plateforme, les tailles d'image qui fonctionnent partout, les raisons pour lesquelles les aperçus ne se mettent pas à jour, et comment notre vérificateur Open Graph gratuit repère les balises manquantes, avec une correction pour chacune.

Qu'est-ce qu'Open Graph ?

Selon ogp.me, « The Open Graph protocol was originally created at Facebook » (le protocole Open Graph a été créé à l'origine chez Facebook). Il transforme une page web en « objet riche » avec un titre, un type, une image et une URL que d'autres services peuvent afficher. Facebook l'a créé, mais LinkedIn, Slack et la plupart des messageries lisent les mêmes balises, et X les utilise en repli de ses propres balises.

Ces balises sont de simples éléments meta dans le <head>, écrits avec un attribut property :

<meta property="og:title" content="Waterproof Hiking Boots for Women">
<meta property="og:description" content="Leather boots tested on 40 km of wet trail. Sizes 36 to 43.">
<meta property="og:image" content="https://www.example.com/images/boots-share.jpg">
<meta property="og:url" content="https://www.example.com/hiking-boots/women/">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

Les balises qui comptent

Le protocole définit quatre propriétés obligatoires : un titre, un type, une image et une URL canonique. En pratique, quelques propriétés facultatives comptent aussi.

Deux détails de la spécification méritent d'être connus. Si une balise apparaît deux fois, « the first tag (from top to bottom) is given preference during conflicts » (la première balise, de haut en bas, est prioritaire en cas de conflit) : la balise d'un thème placée au-dessus de celle de votre extension l'emporte. Et les propriétés structurées comme og:image:width appartiennent à l'og:image qui les précède immédiatement.

Qui lit quoi

Chaque plateforme documente ses propres règles. L'essentiel :

• Facebook et les applications Meta. Le guide webmaster de Meta liste og:url, og:title, og:description, og:image et og:type. Les images sont mises en cache selon leur URL. Le Sharing Debugger montre ce que le robot a récupéré et déclenche une nouvelle collecte.
• LinkedIn. Sa page d'aide cite quatre balises qui « must exist » (doivent exister) : og:title, og:image, og:description et og:url. Les images doivent faire au moins 1200 × 627 px, avec un ratio de 1,91:1 et 5 Mo maximum. Post Inspector montre comment LinkedIn voit une URL et actualise sa copie.
• X. X utilise les balises twitter: et se replie sur les équivalents Open Graph quand elles manquent, donc og:title, og:description et og:image suffisent généralement. twitter:card définit la mise en page ; summary_large_image affiche une image large. X documente un ratio de 2:1 pour cette carte, un minimum de 300 × 157 px, des fichiers de moins de 5 Mo, et les formats JPG, PNG, WebP ou GIF (pas SVG).
• Slack. Quand aucune application ne gère un domaine, Slack « crawls the URL, looks for common OpenGraph and X (formerly known as Twitter) Card metadata » (documentation Slack).
• Google. Ce n'est pas un réseau social, mais Google cite og:title parmi les sources des liens de titre et prend en compte og:site_name pour choisir le nom du site affiché au-dessus de vos résultats.

Choisir l'og:image

L'image détermine si un aperçu paraît soigné ou cassé. Les exigences varient légèrement d'une plateforme à l'autre : visez donc une image qui les satisfait toutes.

Utilisez une image spécifique pour chaque page importante (photo produit, illustration d'article) et une image par défaut soignée pour le reste. Un logo sur un carré blanc est l'option la plus faible : la plupart des applications l'affichent en petit ou le recadrent maladroitement.

Pourquoi les aperçus ne se mettent pas à jour

Les plateformes conservent l'aperçu qu'elles ont construit lors du premier partage d'une URL. Meta indique que « Images are cached based on the URL and won't be updated unless the URL changes » (les images sont mises en cache d'après l'URL et ne sont pas mises à jour tant que l'URL ne change pas) : remplacer share.jpg par un nouveau fichier du même nom peut donc ne rien changer. La séquence fiable :

1. Importez la nouvelle image sous un nouveau nom de fichier (ou ajoutez un paramètre de version à son URL).
2. Mettez à jour les balises de la page et déployez.
3. Passez l'URL dans le Sharing Debugger de Meta et dans le Post Inspector de LinkedIn pour forcer une nouvelle collecte.
4. Repartagez le lien. Les publications déjà en ligne conservent généralement l'ancienne carte.

Balises selon le type de page

Les balises de base sont les mêmes partout, mais certains types de pages gagnent à en avoir davantage :

• Articles et billets de blog. Utilisez og:type article. Le protocole définit pour ce type des propriétés supplémentaires, comme article:published_time, article:modified_time, article:author et article:section.
• Pages produit. Utilisez la photo principale du produit comme og:image et mettez le nom du produit, et non celui de la boutique, dans og:title. Le prix et la disponibilité relèvent des données structurées Product, abordées dans notre guide du balisage schema.
• La page d'accueil et les pages de catégorie. Elles sont moins souvent partagées mais plus souvent vues. Une image par défaut soignée avec votre nom et une courte phrase sur votre activité fonctionne mieux qu'une photo au hasard.
• Les pages qui ne doivent pas être partagées, comme le paiement ou les pages de compte. Elles n'ont pas besoin de balises particulières ; assurez-vous simplement que l'image par défaut ne pointe pas vers un contenu privé.

Voir ce que voit un robot

Avant d'accuser une plateforme, regardez le HTML qu'elle reçoit. Ouvrez la page avec « Afficher le code source » (et non l'inspecteur d'éléments des DevTools, qui montre la page après l'exécution des scripts) et cherchez og:. Le guide de Meta donne aussi l'user agent de son robot, facebookexternalhit/1.1, ce qui permet de récupérer la page comme Facebook depuis un terminal :

curl -s -A "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" https://www.example.com/ | grep -i 'og:'

Si les balises apparaissent dans votre navigateur mais pas dans cette sortie, c'est qu'elles sont ajoutées par JavaScript, ou que votre serveur ou votre pare-feu répond différemment aux robots.

Comment fonctionne le vérificateur Open Graph de Searvia

Le vérificateur Open Graph gratuit utilise le même moteur que notre outil d'analyse SEO de site web et place trois contrôles en premier : les balises de partage social, la balise title et la meta description. Saisissez un domaine ou l'adresse d'une page et il :

1. Récupère cette page, en suivant les redirections. Si vous ne saisissez qu'un domaine, c'est la page d'accueil qui est analysée ; collez donc l'adresse d'un article ou d'une page produit pour vérifier son aperçu.
2. Lit le HTML renvoyé par votre serveur, sans exécuter JavaScript, comme le voient la plupart des robots d'aperçu de liens.
3. Recherche quatre balises et enregistre la première valeur non vide de chacune : og:title, og:description, og:image et twitter:card.

Le résultat est un tableau avec une coche ou une croix et la valeur exacte de chaque balise :

Le contrôle n'affiche jamais d'échec et pèse peu dans le score global, car l'absence de balises sociales n'empêche pas une page d'être trouvée. En revanche, elle dégrade chaque partage, et c'est pourquoi cet outil les met en premier.

Les contrôles du titre et de la description (réussis entre 30 et 60 caractères, et entre 70 et 160 caractères) apparaissent juste en dessous, car beaucoup d'applications s'en servent en repli quand les balises Open Graph manquent. Le rapport inclut aussi un aperçu du résultat Google, qui utilise og:site_name pour le nom du site lorsque vous le définissez.

Ce que le vérificateur ne fait pas : il ne télécharge pas l'image pour la mesurer, ne vérifie pas og:url, og:type ni og:image:alt, et ne récupère pas la page comme le robot de chaque plateforme. Utilisez les débogueurs des plateformes pour le contrôle final.

Comment lire les résultats

• Les quatre cochées : les bases sont en place. Consultez les valeurs et vérifiez qu'elles ont du sens : un vrai titre, une description qui n'est pas l'avis sur les cookies, une URL d'image qui commence par https://.
• og:image manquante : corrigez-la en premier. C'est ce que les gens remarquent dans l'aperçu.
• Seule twitter:card manque : X lira quand même vos balises Open Graph mais pourra afficher une petite carte résumé. Ajoutez la balise pour obtenir une grande image.
• Avertissements sur le titre et la description en dessous : ils concernent Google et les applications qui s'en servent en repli.

Comment corriger chaque balise manquante

og:title est manquante

Ajoutez un titre écrit pour des personnes qui font défiler un fil, pas pour un moteur de recherche. Il peut reprendre votre <title> sans le suffixe de marque :

<meta property="og:title" content="Waterproof Hiking Boots for Women">

og:description est manquante

Rédigez une ou deux phrases avec un détail concret. Réutiliser votre meta description convient :

<meta property="og:description" content="Leather boots tested on 40 km of wet trail. Sizes 36 to 43, free returns.">

og:image est manquante

1. Créez une image de 1200 × 630 px (JPG, PNG ou WebP) avec le sujet centré.
2. Importez-la dans un emplacement public et copiez son URL HTTPS complète.
3. Ajoutez la balise d'image, ainsi que les dimensions et le texte alternatif :

<meta property="og:image" content="https://www.example.com/og/boots-share.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A pair of brown leather hiking boots on a wet rock">

1. Ouvrez l'URL de l'image dans une fenêtre de navigation privée pour confirmer qu'elle se charge sans connexion.

twitter:card est manquante

<meta name="twitter:card" content="summary_large_image">

Notez l'attribut name : les balises Twitter utilisent conventionnellement name, alors que les balises Open Graph utilisent property.

Réglages par plateforme

Après toute modification, relancez le vérificateur, puis les débogueurs des plateformes.

Erreurs courantes

• URL d'image relatives. /images/share.jpg fonctionne dans un navigateur mais pas pour les robots qui attendent une URL complète. Utilisez toujours https://….
• Balises injectées par JavaScript. Les applications monopage qui définissent les balises dans le navigateur donnent souvent des aperçus vides. Générez les balises côté serveur ou au moment du build. Google conseille aussi d'éviter le JavaScript qui modifie les balises meta.
• L'image est bloquée. Un mur de connexion, une règle de protection anti-bot ou une ligne du robots.txt peuvent empêcher le robot de récupérer l'image. LinkedIn précise qu'un site « may be blocking us from pulling the image » (peut nous empêcher de récupérer l'image).
• Une seule image pour toutes les pages. Cela fonctionne, mais un produit ou un article partagé avec sa propre image attire davantage l'attention.
• Balises en double. Un thème et une extension impriment chacun og:image : la première l'emporte, ce qui peut être la mauvaise. Affichez le code source et cherchez og:image.
• Remplacer une image sous la même URL. Les caches conservent l'ancienne. Utilisez un nouveau nom de fichier.
• SVG ou fichiers énormes. Non pris en charge par X, et lents pour tout le monde.

Exemple concret (hypothétique)

L'exemple suivant est hypothétique, il ne s'agit pas de données réelles. Fernway, une application de gestion de projet fictive, constate que les liens vers son site dans Slack n'affichent qu'une case grise et le texte « We use cookies to improve your experience. »

Le vérificateur Open Graph montre og:title et og:description présentes, mais og:image et twitter:card manquantes. La valeur de la description s'avère être le texte du bandeau de cookies : une extension génère og:description à partir du premier paragraphe du HTML, et le bandeau arrive en premier.

Les correctifs : une og:description rédigée dans le modèle de page, une image de 1200 × 630 px montrant la vue tableau du produit avec le sujet centré, og:image:width, og:image:height et og:image:alt, et twitter:card défini sur summary_large_image. Un second passage du vérificateur est réussi. L'équipe passe ensuite l'URL dans le Sharing Debugger et le Post Inspector, et republie le lien dans Slack, où la nouvelle carte apparaît.

Une checklist de 15 minutes

1. Lancez le vérificateur Open Graph sur votre domaine.
2. Ajoutez chaque balise manquante parmi og:title, og:description, og:image et twitter:card.
3. Ajoutez og:url, og:image:width, og:image:height et og:image:alt pendant que vous êtes dans le modèle.
4. Vérifiez que l'image fait 1200 × 630 px, moins de 5 Mo, publique et servie en HTTPS.
5. Générez les balises dans le HTML serveur, pas dans du JavaScript côté client.
6. Actualisez les aperçus en cache dans les débogueurs des plateformes, puis repartagez.

Comment Searvia garde vos aperçus et vos fiches en bon état

Le vérificateur Open Graph gratuit analyse une page, votre page d'accueil ou n'importe quelle adresse saisie, en une vingtaine de secondes, sans inscription, et le même rapport couvre les 37 autres contrôles de notre audit de site. Les aperçus ne sont qu'un aspect de l'affichage de vos pages ; les titres, descriptions et balises canoniques sont traités dans notre guide des balises meta, et le vérificateur de balises meta montre votre aperçu Google.

Pour l'ensemble du site, un compte Searvia gratuit ajoute un audit de site hebdomadaire qui explore chaque page et signale les titres et descriptions manquants ou en double, afin que le texte utilisé en repli par les applications reste exact. Pour un titre ou une description faibles, Write with AI dans l'audit propose des options prêtes à l'emploi (1 crédit), et l'audit se relance chaque semaine : une mise à jour de thème ou d'extension qui casse vos titres ou descriptions apparaît donc dans le rapport suivant.