Open Graph et Twitter Cards : réussir l'aperçu de partage

Vous partagez le lien d'une de vos pages sur une messagerie ou un réseau social, et l'aperçu affiché ne ressemble à rien : pas d'image, un titre tronqué, ou pire, le logo d'un autre site. Ce n'est pas le réseau social qui décide, c'est votre page. Les informations qu'il utilise sont déclarées dans le code source, avec un jeu de balises appelé Open Graph.

Ce qu'est le protocole Open Graph

Open Graph a été créé par Facebook en 2010, puis adopté par à peu près tout ce qui affiche un aperçu de lien : LinkedIn, WhatsApp, Discord, Slack, Signal, Telegram, iMessage, Bluesky, Mastodon. Le principe est simple : ces balises se placent dans le <head> de la page, elles ne sont jamais visibles par le visiteur, et elles décrivent votre page sous forme d'un objet doté d'un titre, d'une description, d'une image et d'une adresse.

Elles se reconnaissent à leur attribut property, qui commence par og:, là où les balises méta classiques utilisent name. C'est une différence de syntaxe qui a son importance : écrire <meta name="og:image"> au lieu de <meta property="og:image"> est une erreur fréquente, et la balise est alors purement ignorée.

Les balises indispensables

Balise	Rôle
`og:title`	Le titre affiché dans l'aperçu. Il peut différer du `<title>` de la page, par exemple pour être plus court ou plus accrocheur.
`og:description`	Les une ou deux lignes affichées sous le titre. Comptez 120 caractères utiles, au delà le texte est coupé sur mobile.
`og:image`	L'image de l'aperçu. C'est de loin la balise la plus importante : sans elle, votre lien se réduit à un bloc de texte gris que personne ne remarque.
`og:url`	L'adresse canonique de la page. Elle évite qu'un partage effectué depuis une adresse avec des paramètres de suivi soit compté comme une page différente.
`og:type`	`website` pour une page d'accueil, `article` pour un contenu daté. Sans valeur, la plupart des plateformes supposent `website`.
`og:site_name`	Le nom du site, affiché en petit au dessus ou en dessous du titre selon les plateformes.
`og:locale`	`fr_FR` pour un site francophone. Facultatif mais utile sur un site multilingue.

Voici un en-tête complet, tel qu'il devrait figurer sur une page d'article :

L'image de partage : les règles à connaître

C'est là que se concentrent presque toutes les erreurs. Quelques points à respecter.

Une adresse absolue, toujours

L'image doit être déclarée avec son adresse complète, protocole compris : https://www.exemple.fr/images/photo.jpg. Une adresse relative comme /images/photo.jpg ne fonctionne pas. Les robots des réseaux sociaux ne sont pas des navigateurs, ils ne résolvent pas les chemins relatifs.

1200 par 630 pixels

C'est le format de référence, dans un rapport d'environ 1,91 pour 1. Il est correctement recadré par toutes les plateformes. En dessous de 600 pixels de large, la plupart d'entre elles basculent sur un petit aperçu carré, beaucoup moins visible dans un fil. Déclarer og:image:width et og:image:height permet d'afficher le bon cadre avant même que l'image ne soit téléchargée.

Le texte doit rester au centre

Chaque plateforme recadre différemment. Sur mobile, une image large est souvent rognée sur les côtés, et un carré est parfois découpé au centre. Si vous incrustez du texte dans l'image, gardez le dans la zone centrale et laissez une marge généreuse sur les bords.

Un poids raisonnable

Restez sous 1 Mo. Certaines plateformes abandonnent le téléchargement au delà, et l'aperçu s'affiche alors sans image. Le format JPEG convient pour une photo, le PNG pour un visuel à aplats.

L'image doit être publique

Elle ne doit être ni protégée par un mot de passe, ni bloquée dans votre robots.txt, ni servie derrière une protection anti robots. Beaucoup d'aperçus vides viennent d'une image parfaitement valide mais inaccessible aux robots.

Les Twitter Cards

X, anciennement Twitter, utilise son propre jeu de balises, préfixées twitter:. Bonne nouvelle : il sait lire les balises Open Graph en secours. Vous n'avez donc besoin d'ajouter que deux lignes pour obtenir le grand format d'affichage.

<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@votrecompte">

Notez que ces balises utilisent name et non property. La valeur summary_large_image donne le grand aperçu horizontal ; summary donne la vignette carrée, nettement moins visible.

Les cinq erreurs les plus fréquentes

Aucune balise og:image. Le cas le plus courant. La plateforme cherche alors seule une image dans la page et attrape souvent le logo, un pixel de suivi ou une icône de partage.
La même image sur tout le site. Techniquement correct, mais tous vos liens se ressemblent. Une image propre à chaque article ou à chaque produit change beaucoup le taux de clic.
Une adresse d'image relative. Le robot ne peut pas la résoudre, l'aperçu reste vide.
Un aperçu qui reste périmé. Les plateformes gardent en cache le premier aperçu récupéré, parfois plusieurs jours. Après correction, il faut leur demander de relire la page depuis leur outil de débogage, sans quoi vous continuerez à voir l'ancienne version.
Des balises injectées par JavaScript. Les robots des réseaux sociaux n'exécutent pas le JavaScript. Les balises Open Graph doivent être présentes dans le code source livré par le serveur.

Vérifier son travail

Trois réflexes, dans cet ordre. D'abord, affichez le code source de la page et cherchez og: : les balises doivent être là, dans le <head>. Ensuite, ouvrez l'adresse de votre og:image directement dans le navigateur pour confirmer qu'elle s'affiche. Enfin, utilisez les outils de débogage officiels des plateformes, qui vident leur cache et vous montrent l'aperçu réel.

L'analyseur de balises méta relève la valeur de og:image sur chaque page de votre site et signale celles qui n'en ont pas. C'est le moyen le plus rapide de savoir combien de vos pages partiraient sans aperçu.

Questions fréquentes

Les balises Open Graph influencent-elles le référencement ?

Pas directement. Google ne les utilise pas comme critère de classement et affiche vos <title> et meta description dans ses résultats, pas vos balises og:. L'effet est indirect : un lien qui s'affiche bien est davantage partagé et davantage cliqué, ce qui amène des visites et parfois des liens entrants.

Faut-il dupliquer title et og:title ?

Ce n'est pas obligatoire. En l'absence de og:title, la plupart des plateformes reprennent le <title>. Les déclarer séparément permet d'adapter le ton : le <title> est optimisé pour la recherche, l'og:title pour la conversation.

Mon aperçu est correct sur un réseau et pas sur un autre

Presque toujours une histoire de cache. Chaque plateforme conserve sa propre copie de l'aperçu, et elles ne se mettent pas à jour au même rythme. Passez par l'outil de débogage de la plateforme concernée pour forcer une nouvelle lecture.

Combien de balises og:image puis-je déclarer ?

Plusieurs sont autorisées, la première étant utilisée par défaut. En pratique, une seule bien choisie vaut mieux que trois, car le comportement varie d'une plateforme à l'autre.

Poursuivre

Analyser les balises méta de vos pages, y compris la présence de og:image.
Consulter la liste complète des balises méta, Open Graph et Twitter Cards.
Comprendre les balises méta et leur rôle dans le référencement.
robots.txt et sitemap.xml pour maîtriser l'indexation de votre site.