Pourquoi l'aperçu de votre lien paraît incorrect, et comment le corriger avec Open Graph

Vous partagez le lien de votre nouvelle page de destination et l’aperçu s’affiche sans image, avec le titre de votre page d’accueil ou une bannière datant de deux campagnes. La page elle-même est correcte. L’aperçu est construit à partir d’autre chose : quelques lignes de code dans l’en-tête de la page, que la plupart des gens ne voient jamais.

Cet article présente les six causes à l’origine de la plupart des aperçus défectueux, dans l’ordre où il vaut la peine de les vérifier. Si vous voulez que les balises soient écrites pour vous, le générateur Open Graph gratuit les construit, les échappe correctement et les vérifie par rapport aux limites indiquées plus bas.

Comment un aperçu de lien est généré

Lorsqu’un lien est collé dans une publication ou un message, l’application envoie un robot d’exploration vers la page. Le robot lit les balises <meta> dans le <head> et dessine la carte à partir d’elles. Ces balises proviennent du protocole Open Graph, qui en désigne quatre comme obligatoires :

• og:title : le titre de la page tel qu’il doit apparaître dans la carte.
• og:type : le type de page, en général website ou article.
• og:image : l’image.
• og:url : l’URL canonique de la page, que le protocole appelle son identifiant permanent.

Ajoutez og:description et vous obtenez la carte. Un jeu complet et minimal ressemble à ceci :

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

Cause 1 : les balises sont absentes

Sans balises og:, chaque application doit se rabattre sur ce qu’elle trouve d’autre sur la page, comme la balise <title> ou la première image, et le choix dépend de chaque application. C’est ainsi qu’un même lien peut paraître correct à un endroit et cassé à un autre. La solution consiste à indiquer les quatre balises obligatoires ainsi qu’une description sur chaque page que vous destinez au partage, et pas seulement sur la page d’accueil. Une page produit partagée avec les balises de la page d’accueil affiche la carte de la page d’accueil.

Cause 2 : l’URL de l’image est relative

Ce point est facile à manquer, car la page s’affiche correctement dans votre propre navigateur. content="/images/og.jpg" fonctionne pour un navigateur déjà situé sur votre site, mais le robot se trouve en dehors de celui-ci. Écrivez l’adresse complète, en commençant par https:// et votre domaine. Il en va de même pour og:url.

Cause 3 : l’image n’a pas la bonne taille ni le bon format

Chaque plateforme indique ce qu’elle attend, et elles s’accordent sur une image large :

• LinkedIn indique dans son guide pour rendre un site partageable que l’image doit faire au moins 1200 × 627 pixels, avec un ratio recommandé de 1.91:1, et ne pas dépasser 5 Mo.
• Les bonnes pratiques de partage de Meta recommandent des images d’au moins 1080 pixels de large pour les écrans haute résolution, et d’au moins 600 de large pour afficher des publicités à lien image.
• La grande carte image de X accepte un ratio 2:1 de 300 × 157 jusqu’à 4096 × 4096 pixels, sous 5 Mo, en JPG, PNG, WEBP ou GIF, et ne prend pas en charge le SVG, selon sa documentation développeur (la page d’origine redirige désormais, ce lien passe donc par l’Internet Archive).

Une seule taille convient aux trois : 1200 × 630. Elle respecte le minimum de LinkedIn de 1200 × 627, elle est plus large que les 1080 de Meta, et son ratio est 1200 ÷ 630 = 1.905, à moins de 5 % du 2:1 de X. Une image carrée ou haute sera recadrée pour tenir dans une carte large, donc gardez l’élément important au centre. Le calculateur de ratio d’aspect montre ce que conserve un recadrage centré.

Indiquez aussi la taille dans les balises. Meta demande og:image:width et og:image:height afin que son robot puisse afficher l’image immédiatement au lieu de la télécharger et de la traiter d’abord. Son guide pour les webmasters le formule simplement : indiquez la hauteur et la largeur pour que l’image s’affiche correctement dès le premier partage de la page.

Cause 4 : les balises sont ajoutées par JavaScript

Certains constructeurs de sites et applications monopages ajoutent les balises meta après le chargement de la page, dans le navigateur. Un robot qui lit le HTML envoyé par votre serveur peut ne jamais exécuter ce code, et ne voit donc jamais les balises. Vérifiez la source de la page (Afficher le code source, et non l’inspecteur, qui montre la page après l’exécution des scripts). Si les balises ne figurent pas dans la source, le robot ne les voit probablement pas non plus. La correction se fait dans les réglages de votre site ou dans son modèle côté serveur.

Cause 5 : des caractères spéciaux ont cassé la balise

Un titre contenant des guillemets doubles, comme Le lin "seul" dont vous avez besoin, ferme l’attribut content="..." trop tôt, et le reste du titre est perdu. Les caractères sensibles à l’intérieur d’un attribut doivent être échappés : " devient ", & devient &, et < devient <. Les navigateurs et les robots les retransforment en caractères d’origine lorsqu’ils lisent la balise. Le générateur le fait à votre place, ce qui est en partie la raison de s’en servir.

Cause 6 : l’application a gardé l’ancienne version

Vous avez corrigé les balises, partagé à nouveau, et l’ancienne carte est toujours là. C’est le cache. Les applications stockent ce qu’elles ont récupéré et le réutilisent, et les deux grands réseaux proposent un outil pour demander une nouvelle lecture :

• Facebook : collez l’URL dans le Débogueur de partage de Meta. Le guide pour les webmasters de Meta indique qu’il affiche les balises que le robot a récupérées, avec les erreurs ou avertissements éventuels, et qu’il déclenche une nouvelle lecture. Les bonnes pratiques de Meta ajoutent que le contenu récupéré se met à jour autrement selon une période standard de 24 heures.
• LinkedIn : passez l’URL dans le Post Inspector. La page d’aide de LinkedIn est claire sur la limite : l’actualisation ne modifie l’aperçu que pour les nouvelles publications. Les publications qui contiennent déjà l’URL conservent l’ancien aperçu.

Cette remarque sur LinkedIn est à retenir avant un lancement. Vérifiez l’aperçu avant la première publication, car vous ne pouvez pas corriger une ancienne publication en corrigeant la page.

La balise twitter:card : une ligne, pas quatre

X lit aussi Open Graph. Sa documentation des cartes indique un repli pour chaque balise : twitter:title reprend og:title, twitter:description reprend og:description, twitter:image reprend og:image, et twitter:image:alt reprend og:image:alt. Vous n’avez donc pas besoin de tout répéter. La seule ligne à ajouter est twitter:card : summary_large_image pour une image pleine largeur, ou summary pour une petite vignette carrée. Si vous l’omettez, la même documentation indique que X peut afficher à la place une petite carte récapitulative, ce qui explique parfois qu’une grande image apparaisse en miniature. La même documentation limite un titre à 70 caractères, une description à 200 et le texte alternatif à 420.

Une vérification de cinq minutes avant le lancement

1. Affichez la source de la page et repérez les balises og:. Les quatre obligatoires, plus une description.
2. Vérifiez que og:image et og:url commencent par https://.
3. Ouvrez l’URL de l’image seule dans un navigateur. Elle doit s’afficher, en 1200 × 630 ou à peu près.
4. Collez l’URL dans le Débogueur de partage et dans le Post Inspector, et lisez les cartes.
5. Ce n’est qu’ensuite que vous partagez.

Où se situe Hermoso

Hermoso est un agent de marketing IA : il repère les publicités qui fonctionnent déjà sur votre marché, crée des publicités image et vidéo fidèles à votre marque, programme les publications sur vos propres comptes et lance des campagnes payantes sur vos propres comptes publicitaires. Un bon aperçu de lien est ce qui rend ces publications attirantes. Hermoso fonctionne dans l’application web, ou dans Claude, ChatGPT et Cursor, via son serveur MCP.

Questions fréquentes

Pourquoi mon lien n’affiche-t-il aucune image sur Facebook ou LinkedIn ?

En général, la balise og:image est absente, utilise un chemin relatif au lieu d’une adresse https:// complète, ou pointe vers une image trop petite. LinkedIn demande au moins 1200 × 627 pixels. Après correction, passez l’URL dans le Débogueur de partage de Meta ou dans le Post Inspector de LinkedIn pour qu’ils la récupèrent à nouveau.

Quelle taille doit avoir une image Open Graph ?

1200 × 630 pixels fonctionnent sur les grands réseaux. Cela respecte le minimum de LinkedIn de 1200 × 627, soit un ratio d’environ 1.91:1, est plus large que les 1080 pixels recommandés par Meta, et se rapproche du 2:1 accepté par X pour les grandes cartes image.

Comment mettre à jour un aperçu de lien LinkedIn ?

Corrigez les balises de la page, puis saisissez l’URL dans le Post Inspector de LinkedIn. L’aperçu actualisé ne s’applique qu’aux nouvelles publications. Les publications qui contiennent déjà l’URL conservent l’ancien aperçu.

Ai-je besoin des balises twitter: si j’ai des balises og: ?

Seulement twitter:card. X se rabat sur og:title, og:description, og:image et og:image:alt lorsque les versions twitter: sont absentes.