L’essentiel en bref
- Une image d’aperçu de lien est l’image qu’une plateforme affiche quand quelqu’un partage une URL, et elle vient de la balise og:image de la page.
- Les causes les plus courantes d’une image d’aperçu absente : pas de balise og:image, une URL d’image relative, une image inaccessible au robot, ou des balises ajoutées par JavaScript après le chargement de la page.
- Les plateformes mettent les aperçus en cache : après avoir corrigé une page, il faut souvent un outil de débogage ou une URL modifiée pour que la nouvelle image apparaisse.
- Une image 1200×630 dont les mots restent au centre s’affiche bien sur presque toutes les plateformes.
- Tester un lien dans un message privé à soi-même est le moyen le plus rapide de voir ce que verront les autres.
Sur cette page
Une image d’aperçu de lien vient d’une ligne du HTML de votre page : la balise og:image. Quand une plateforme comme WhatsApp, Slack, LinkedIn ou iMessage voit un lien, un robot récupère la page, lit cette balise et télécharge l’image. Si l’aperçu est vide ou faux, un maillon de cette chaîne a cédé : la balise manque, l’adresse de l’image est relative, le robot est bloqué, ou la plateforme montre encore une ancienne copie de son cache.
Pourquoi les aperçus de lien cassent : tableau de diagnostic
Partez du symptôme que vous voyez. Le tableau ci-dessous couvre les huit causes des aperçus cassés, les suspects habituels en premier.
Cause probable
og:image sur la pageSolution
head de la pageCause probable
/share.pngSolution
https://Cause probable
Solution
Cause probable
robots.txtSolution
Cause probable
Solution
Cause probable
Solution
twitter:card défini sur summary_large_imageCause probable
Solution
Cause probable
Solution
Les balises dont un aperçu a besoin
Il en faut étonnamment peu. Un titre, une description, une URL d’image complète, la taille de l’image, et une ligne en plus pour que X affiche une grande carte plutôt qu’une vignette. L’URL canonique de la page dans og:url aide les plateformes à regrouper les partages d’une même page.
<head>
<title>Autumn menu | Hearth Bakery</title>
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/autumn">
<meta property="og:title" content="Our autumn menu is here">
<meta property="og:description" content="Pumpkin loaf, apple buns and spiced coffee, baked every morning.">
<meta property="og:image" content="https://example.com/share/autumn-1200x630.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Autumn menu at Hearth Bakery">
<meta name="twitter:card" content="summary_large_image">
</head>Les frameworks facilitent cette erreur. Une application monopage qui définit ses balises après le chargement s’affichera bien à quelques endroits et échouera presque partout. Utilisez plutôt la fonction de métadonnées côté serveur de votre framework, ou générez l’image par page comme décrit dans les images OG dynamiques.
Comment actualiser un aperçu de lien en cache
Les plateformes récupèrent une page une fois et gardent le résultat un moment : corriger vos balises ne corrige pas les posts déjà partagés, ni parfois les nouveaux partages. Utilisez les outils de la plateforme quand ils existent, et changez l’URL quand il n’y en a pas.
- 1
LinkedIn
Collez l’URL dans le Post Inspector de LinkedIn. Il récupère de nouveau la page et montre exactement ce que LinkedIn voit.
- 2
Facebook, Instagram et WhatsApp
Le Sharing Debugger de Meta, dans ses outils pour développeurs, montre les balises trouvées et propose un bouton pour récupérer de nouveau la page. WhatsApp peut mettre plus de temps à suivre.
- 3
Slack, Discord, iMessage et autres
La plupart n’ont pas d’outil public d’actualisation. Renommez le fichier image, par exemple
autumn-v2.png, et mettez la balise à jour pour que le robot voie une nouvelle adresse. - 4
Cas tenaces
Partagez la page avec une chaîne de requête inoffensive comme
?v=2. Les plateformes la traitent comme un nouveau lien et le récupèrent à neuf.
Concevoir une image qui s’affiche bien partout
Une fois les balises en état, c’est l’image qui décide si l’on touche. Faites-la en 1200×630, un cadre large d’environ 1,91 pour 1 que toutes les grandes plateformes acceptent. Certaines apps l’affichent plus petite ou rognent un peu les côtés, quelques-unes retombent sur un carré : gardez donc les mots au centre. Toute l’histoire des tailles est dans la taille d’image OG.
Open Graph 1200×630
1200 × 630
Lien LinkedIn 1200×627
1200 × 627
Carré de repli 1200×1200
1200 × 1200
Les mots traversent la partie la plus claire du fond et disparaissent à la taille d’une miniature.
La même carte avec une zone calme et très contrastée derrière les mots. Lisible même dans une discussion chargée.
À éviter
- Votre logo seul sur fond blanc
- Une capture d’écran de la page elle-même
- De longues phrases en petits caractères
- Du texte collé aux bords
- La même image pour toutes les pages
À faire
- Un titre court qui correspond à la page
- Un fond que l’on reconnaît comme le vôtre
- Un texte assez grand pour se lire à 300 pixels de large
- Une marge nette tout autour
- Une image par page importante
Un aperçu est minuscule dans une discussion : les règles du texte des miniatures s’appliquent donc, quelques grands mots, un fort contraste, une idée. Dans Gradiently, le Mark d’un design garde sa zone la plus calme derrière les mots et choisit un texte clair ou sombre ligne par ligne : le titre reste lisible quelle que soit la façon dont la plateforme redimensionne la carte. Partez de la taille Aperçu de lien dans le Studio : le même design peut devenir votre bannière de blog 1200×600 et le reste de vos tailles d’images pour les réseaux sociaux.
Un test de deux minutes avant de partager
- Affichez le code source de la page et vérifiez que
og:images’y trouve avec une URL https complète. - Ouvrez cette URL d’image dans une fenêtre de navigation privée. Si elle ne se charge pas, les robots non plus ne peuvent pas la charger.
- Passez l’URL dans le Post Inspector de LinkedIn ou le débogueur de Meta pour voir les balises analysées.
- Envoyez-vous le lien dans WhatsApp ou Slack et regardez-le sur un téléphone.
- Si quelque chose est périmé, changez le nom du fichier image et testez de nouveau.
Faites-le une fois pour chaque modèle de votre site, pas pour chaque page, et les aperçus cassés cessent d’être une surprise. Si vous construisez un site de zéro, le guide du fond d’image héros de site web couvre l’image principale à laquelle ces aperçus empruntent souvent.
Les questions qu’on nous pose
Pourquoi l’image d’aperçu de mon lien ne s’affiche-t-elle pas ?
Le plus souvent, la page n’a pas de balise og:image, la balise utilise une URL relative, l’image est bloquée pour les robots, ou les balises sont ajoutées par JavaScript. Vérifiez d’abord le code source brut de la page.
Comment mettre à jour un aperçu de lien qui montre une ancienne image ?
Les plateformes mettent les aperçus en cache. Demandez une nouvelle récupération de l’URL avec le Post Inspector de LinkedIn ou le Sharing Debugger de Meta, ou renommez le fichier image pour que son URL change.
Quelle taille pour une image d’aperçu de lien ?
1200×630 pixels. Gardez les mots au centre, car certaines apps rognent les côtés ou affichent la carte en carré.
Pourquoi X affiche-t-il une petite vignette plutôt qu’une grande image ?
Ajoutez une balise meta twitter:card définie sur summary_large_image, et vérifiez que l’image est assez grande, idéalement 1200×630.
Les aperçus de lien fonctionnent-ils avec les applications monopages ?
Seulement si les balises Open Graph sont dans le HTML envoyé par le serveur. La plupart des robots n’exécutent pas JavaScript : les balises ajoutées dans le navigateur leur sont invisibles.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil