# Aperçus de lien : pourquoi vos liens s’affichent mal, et la solution
[Canonical HTML page](https://gradiently.design/fr/guide/link-preview-image)
Vous collez votre lien dans une discussion et obtenez un cadre gris, la mauvaise image ou un logo coupé en deux. Presque tous les aperçus cassés viennent de l’une de huit causes, et toutes se corrigent en quelques minutes.
## The short version
- 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.
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.
| Ce que vous voyez | Cause probable | Solution |
| --- | --- | --- |
| Aucune image | Pas de balise `og:image` sur la page | Ajoutez la balise dans le `head` de la page |
| Pas d’image, la balise est présente | URL relative comme `/share.png` | Utilisez l’adresse complète, commençant par `https://` |
| Pas d’image dans certaines apps seulement | Balises insérées par JavaScript | Générez les balises côté serveur, dans la première réponse HTML |
| Pas d’image, l’URL est correcte | Image derrière une connexion, un pare-feu ou une règle `robots.txt` | Rendez l’image accessible publiquement |
| Ancienne image après un changement | La plateforme a mis en cache la première récupération | Relancez la récupération avec un débogueur ou changez l’URL de l’image |
| Petit carré au lieu d’une grande carte | Image trop petite, ou pas de balise grande carte pour X | Utilisez 1200×630 et ajoutez `twitter:card` défini sur `summary_large_image` |
| Image coupée sur les côtés | Mots placés près des bords | Gardez le texte au centre du cadre |
| Image lente à charger ou délai dépassé | Le fichier pèse plusieurs mégaoctets | Compressez-le ; quelques centaines de kilooctets suffisent largement |
Descendez la liste. Quand l’aperçu est vide, la réponse se trouve presque toujours dans les quatre premières lignes.
## 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.
```html
Autumn menu | Hearth Bakery
```
Un jeu complet. Notez l’URL https absolue de l’image ; un chemin comme /share/autumn.png est une erreur très courante.
> **Regardez la source, pas la page** Les robots lisent le HTML brut que votre serveur envoie et la plupart n’exécutent jamais JavaScript. Ouvrez votre page, choisissez Afficher le code source et cherchez `og:image`. S’il n’est pas dans cette source, aucune appli de messagerie ne le trouvera, même s’il paraît correct dans l’inspecteur de votre navigateur.
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](https://gradiently.design/fr/guide/dynamic-og-images).
## 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](https://www.linkedin.com/post-inspector/). 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](https://gradiently.design/fr/guide/open-graph-image-size).
- Open Graph 1200×630: 1200 × 630
- Lien LinkedIn 1200×627: 1200 × 627
- Carré de repli 1200×1200: 1200 × 1200
La carte 1200×630, l’image de lien quasi identique de LinkedIn, et le carré auquel certaines apps recadrent. Des mots centrés survivent aux trois.
Une image d’aperçu de lien où le titre se trouve sur une zone claire du dégradé et se lit mal
Les mots traversent la partie la plus claire du fond et disparaissent à la taille d’une miniature.
La même image d’aperçu de lien avec une zone du dégradé plus sombre et plus calme derrière le titre
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](https://gradiently.design/fr/guide/typography-for-thumbnails) 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](https://gradiently.design/fr/guide/social-media-image-sizes).
## Un test de deux minutes avant de partager
1. Affichez le code source de la page et vérifiez que `og:image` s’y trouve avec une URL https complète.
2. 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.
3. Passez l’URL dans le Post Inspector de LinkedIn ou le débogueur de Meta pour voir les balises analysées.
4. Envoyez-vous le lien dans WhatsApp ou Slack et regardez-le sur un téléphone.
5. 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](https://gradiently.design/fr/guide/website-hero-background) couvre l’image principale à laquelle ces aperçus empruntent souvent.
## FAQ
### 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.