Vous avez corrigé les balises Open Graph, collé le lien dans une conversation WhatsApp pour vérifier, et l’aperçu est toujours faux : l’ancien titre, sans image, ou aucune carte au-delà de l’URL brute. C’est une façon courante de perdre une demi-heure, parce que WhatsApp ne vous dit presque rien de ce qu’il a vu ni pourquoi il a renoncé.
Cet article couvre trois choses : comment WhatsApp construit cette petite carte d’aperçu, la courte liste des raisons pour lesquelles elle sort mal, et l’astuce d’un caractère qui fait relire votre page à WhatsApp au lieu de vous montrer une version enregistrée et périmée. Si vous préférez aller droit au diagnostic, le débogueur d’aperçu de liens WhatsApp télécharge votre page de la même manière que WhatsApp et vous dit ce qu’il a trouvé.
Comment WhatsApp construit l’aperçu d’un lien
Quand vous collez une URL dans une conversation, votre téléphone ne lit pas la page. Ce sont les serveurs de WhatsApp qui la téléchargent, une fois, et qui extraient quelques balises du HTML pour composer la carte : un titre, une courte description et une image. Il cherche d’abord les balises Open Graph (les lignes `<meta property="og:...">` qu’une page place dans son `<head>`), passe aux balises Twitter Card si elles manquent, puis à l’élément `<title>` quand il n’y a rien d’autre.
Les trois balises qui comptent le plus sont `og:title`, `og:description` et `og:image`. Si celles-ci sont correctes, vous obtenez la carte attendue. Voici à quoi ressemble un jeu complet :
<meta property="og:title" content="Le titre de votre page"> <meta property="og:description" content="Un résumé d’une ligne de la page."> <meta property="og:image" content="https://exemple.com/preview.jpg">
Un détail explique presque tous les problèmes rencontrés : le téléchargement est fait par un bot, pas par un navigateur. WhatsApp envoie un user agent de robot, récupère le HTML brut et s’arrête là. Il n’exécute pas de JavaScript, ne fait pas défiler la page et n’attend le chargement de rien. Ce qui se trouve dans le HTML que votre serveur renvoie à la première réponse est tout ce que WhatsApp verra.
Les raisons habituelles qui cassent un aperçu
La plupart des aperçus cassés viennent de l’une des raisons ci-dessous. Elles sont à peu près dans l’ordre où il vaut la peine de les vérifier.
Les balises ne sont pas dans le HTML
Si la page n’a ni `og:title` ni `og:image`, WhatsApp n’a pas grand-chose pour travailler. Il peut se rabattre sur le `<title>` et afficher une carte simple sans image, ou n’afficher que le lien. Ouvrez la page, regardez le code source et cherchez `og:`. Si ces lignes n’y sont pas, WhatsApp ne les a pas vues non plus.
Les balises sont ajoutées par JavaScript
C’est celui qui piège les sites modernes. Si votre framework insère les balises meta après le chargement de la page (une application monopage, ou un rendu côté client), elles existent dans le navigateur mais pas dans le HTML brut. WhatsApp n’exécute pas ce JavaScript, il lit donc la coquille vide et ne trouve rien. Les balises doivent être dans le HTML que le serveur renvoie, avant qu’aucun script ne s’exécute. La solution est le rendu côté serveur ou une étape de pré-rendu.
L’image est trop petite, trop lourde ou pas en HTTPS
Pour la carte à grande image, `og:image` doit être une vraie image, accessible et de taille raisonnable. En dessous d’environ 300×200 pixels, WhatsApp a tendance à passer à une petite vignette ou à sauter l’image ; un fichier très lourd (plus de 5 Mo environ) peut aussi être écarté. L’URL de l’image doit être en https et doit se charger sans connexion. Une erreur fréquente : l’image est servie depuis une URL signée d’un CDN ou de S3 avec un jeton qui expire, donc l’aperçu fonctionne aujourd’hui et renvoie une 404 la semaine prochaine, une fois le jeton expiré.
La page bloque le robot
Si la page est derrière une connexion, renvoie un 401 ou un 403, ou bloque les user agents inconnus au niveau du CDN, WhatsApp reçoit un mur au lieu de votre HTML et ne peut pas composer la carte. Certains sites réservent les balises Open Graph à un robot d’aperçu reconnu, et c’est pourquoi la même URL peut générer un aperçu sur une plateforme et pas sur une autre.
Le titre ou la description est trop long
Cela n’empêche pas l’aperçu, ça le tronque seulement. WhatsApp coupe le titre après environ 65 caractères et la description après environ 160, donc un titre long se retrouve coupé au milieu d’une phrase. Mettez les mots importants en premier et gardez `og:title` court.
La page est lente ou redirige trop
Le robot n’attend qu’un certain temps. Une page qui met plusieurs secondes à répondre, ou une page enfouie sous une chaîne de redirections, peut dépasser le délai avant que WhatsApp ne lise les balises. Pointez le lien vers l’URL finale et faites en sorte que la première réponse soit rapide.
L’astuce : faire passer l’URL pour une nouvelle
Voici la partie qui déroute presque tout le monde, et la raison pour laquelle un aperçu reste faux longtemps après que vous avez corrigé la page. WhatsApp met l’aperçu en cache par rapport à l’URL exacte. Une fois qu’il a téléchargé votre page et composé la carte, il réutilise cette carte pour le même lien et ne télécharge pas de nouveau pendant un bon moment. Vous pouvez donc corriger toutes les balises et le lien déjà partagé continuera d’afficher l’ancien aperçu cassé, parce que WhatsApp ne lit pas votre page, il lit son propre cache.
Le moyen de contourner ça est de changer l’URL pour que WhatsApp la traite comme une URL jamais vue. Ajoutez un paramètre de requête que votre page ignore :
https://exemple.com/votre-page → https://exemple.com/votre-page?v=2
N’importe quel paramètre fait l’affaire (`?v=2`, `?x=1`, `?refresh=1`), du moment que le texte de l’URL diffère de celui que WhatsApp a déjà en cache. Il voit une nouvelle URL, télécharge la page sur-le-champ et lit vos balises actuelles. Si vous devez vérifier de nouveau après une autre modification, augmentez le numéro : `?v=3`, puis `?v=4`. La plupart des pages ignorent un paramètre de requête inconnu, donc cela ne change rien à ce que voit le visiteur.
Une réserve honnête. Cela vous donne un aperçu qui fonctionne pour tester et pour partager à partir de maintenant, mais cela ne vide pas le cache de votre URL propre d’origine. Cette entrée expire selon le calendrier propre à WhatsApp, que Meta ne publie pas et qui peut aller jusqu’à des semaines. Servez-vous donc du paramètre pour confirmer la correction et pour distribuer un lien qui génère aujourd’hui un aperçu correct, au lieu d’attendre que l’URL brute se rafraîchisse d’elle-même.
Voir ce que WhatsApp voit, sans deviner
Coller un lien dans une vraie conversation encore et encore est une façon lente de déboguer, car vous ne voyez que le résultat, jamais la raison. Le débogueur d’aperçu de liens WhatsApp fait le téléchargement à votre place : il demande votre page comme le robot de WhatsApp, montre le titre, la description et l’image exacts qu’il a trouvés, et donne une lecture en langage clair de ce qui manque ou de ce qui est trop long. Quand les balises Open Graph sont absentes, il écrit les lignes `<meta>` à copier, et il a un bouton anti-cache qui applique l’astuce du paramètre ci-dessus. Vérifiez d’abord la page là, corrigez ce qu’il signale, puis partagez le lien pour de vrai.
Questions fréquentes
Pourquoi WhatsApp affiche-t-il encore l’ancien aperçu après que j’ai corrigé la page ?
WhatsApp a mis en cache l’aperçu par rapport à cette URL exacte et sert la carte enregistrée au lieu de relire votre page. Ajoutez un paramètre de requête (par exemple `?v=2`) pour qu’il télécharge de nouveau la page, ou attendez que le cache de WhatsApp expire de lui-même.
WhatsApp exécute-t-il du JavaScript quand il lit ma page ?
Non. Le robot de WhatsApp télécharge le HTML brut et s’arrête. Si vos balises Open Graph sont ajoutées par du JavaScript côté client, WhatsApp ne les voit jamais. Les balises doivent être dans le HTML que le serveur renvoie, ce qui signifie généralement un rendu côté serveur ou une étape de pré-rendu.
Pourquoi n’y a-t-il pas d’image dans mon aperçu WhatsApp ?
Les causes les plus fréquentes sont une balise `og:image` manquante, une image en dessous d’environ 300×200 pixels, une image servie en http au lieu de https, une image derrière une connexion ou avec une URL signée qui expire, ou une balise image ajoutée par JavaScript. Vérifiez l’image retenue avec le débogueur d’aperçu de liens.
Combien de temps WhatsApp garde-t-il en cache l’aperçu d’un lien ?
Meta ne publie pas la durée exacte et, en pratique, elle peut durer des semaines. C’est pourquoi vous ne pouvez pas compter sur un cache qui se vide tout seul pendant les tests, et pourquoi ajouter un paramètre de requête est le moyen fiable de voir un aperçu neuf maintenant.