Lorsque vous partagez un lien sur WhatsApp, l’application récupère votre page, lit quelques balises meta dans le HTML et assemble une carte d’aperçu (titre, description et image) avant même que le destinataire ne touche le lien. Si ces balises sont incorrectes, l’aperçu disparaît silencieusement. Ce guide explique exactement quelles balises Open Graph WhatsApp lit, pourquoi og:image doit utiliser une URL absolue, quelles dimensions d’image fonctionnent réellement et comment tester et corriger les aperçus avant l’envoi.
Comment WhatsApp lit les aperçus de liens
Chaque fois que quelqu’un colle une URL dans une discussion WhatsApp, le robot interne de l’application, parfois appelé WhatsApp Link Preview Bot, envoie une requête HTTP GET à cette URL. Il analyse la réponse HTML à la recherche de balises <meta property="og:..."> dans le <head>. S’il trouve les bonnes balises, il assemble une carte d’aperçu. Sinon, le lien apparaît en texte brut sans aucun contexte visuel.
WhatsApp n’est pas le seul robot à fonctionner ainsi : Facebook, LinkedIn, Slack, Telegram, iMessage et Twitter/X suivent tous le même protocole Open Graph développé par Facebook en 2010. La spécification se trouve sur ogp.me et définit un ensemble de balises <meta> que tout site web peut ajouter pour contrôler l’apparence de ses pages lorsqu’elles sont partagées sur les réseaux sociaux.
Quand l’exploration a-t-elle lieu ?
WhatsApp explore une URL lorsque vous la collez pour la première fois dans une discussion et que l’aperçu se charge. Le résultat est mis en cache de manière agressive : WhatsApp servira la même carte d’aperçu pendant des jours, voire des semaines, après le premier chargement. C’est pourquoi la mise à jour de vos balises OG sur le serveur ne corrige pas immédiatement un aperçu cassé ; la version en cache continue d’apparaître. Plus de détails sur l’invalidation du cache dans une section ultérieure.
Remarque
Aperçus en discussion de groupe ou en message privé
WhatsApp génère des aperçus aussi bien en messages privés qu’en discussions de groupe. Le comportement est identique : les mêmes balises OG sont utilisées dans les deux cas. Il existe toutefois une nuance : si l’expéditeur a désactivé les aperçus de liens dans ses paramètres WhatsApp (Paramètres → Discussions → Générer les aperçus de liens), aucun aperçu n’apparaîtra, quelle que soit la qualité de configuration de vos balises. Il s’agit d’un réglage côté client, pas d’un problème côté serveur.
Exigence d’URL absolue pour og:image
C’est la cause la plus fréquente des aperçus WhatsApp cassés : un chemin relatif dans la balise og:image. La spécification du protocole Open Graph est sans ambiguïté à ce sujet : og:image doit être une URL absolue complète. Ni un chemin relatif à la racine, ni une URL relative au protocole, ni un fragment de chemin. Une URL complète avec schéma, domaine et chemin.
| Format | Exemple | Fonctionne dans WhatsApp ? |
|---|---|---|
| ✓ URL absolue (correcte) | https://votredomaine.com/images/share.jpg | ✓ Oui |
| ✗ Chemin relatif à la racine | /images/share.jpg | ✗ Non : échoue silencieusement |
| ✗ URL relative au protocole | //votredomaine.com/images/share.jpg | ✗ Peu fiable |
| ✗ Chemin relatif | images/share.jpg | ✗ Non |
| ✗ URI de données | data:image/jpeg;base64,... | ✗ Non |
Les propriétés structurées peuvent être spécifiées en plaçant deux points après le nom de la propriété et en utilisant une autre balise og:image avec une URL absolue.
Pourquoi les chemins relatifs échouent silencieusement
Lorsque le robot de WhatsApp récupère votre page, il analyse le HTML de manière isolée : il ne « connaît » pas votre URL de base comme le ferait un navigateur. Un chemin relatif comme /images/share.jpg n’a aucun contexte, le robot l’ignore donc ou tente de le résoudre par rapport à une URL de base qu’il n’a peut-être pas correctement déduite. Le résultat est une image manquante sans aucun message d’erreur : l’aperçu apparaît sans image ou n’apparaît pas du tout.
Utilisez toujours l’URL absolue complète, y compris https://. Si votre site prend en charge HTTP et HTTPS, utilisez toujours https:// : de nombreux robots sociaux refusent de charger des images non HTTPS dans les aperçus pour des raisons de sécurité.
Avertissement
CDN et hébergeurs d’images tiers
Si vos images sont servies depuis un CDN ou un hébergeur tiers (comme Cloudinary, Imgix ou un bucket de stockage cloud), l’exigence d’URL absolue s’applique toujours : utilisez simplement l’URL complète du CDN. La seule considération supplémentaire concerne les en-têtes CORS : assurez-vous que votre CDN autorise les requêtes cross-origin, car certains robots le vérifient. Vérifiez aussi que l’URL du CDN ne contient pas de jetons d’authentification qui expirent : une URL signée limitée dans le temps cassera les aperçus pour toute personne cliquant sur le lien après l’expiration du jeton.
Optimiseur de texte d’aperçu Open Graph
Vérifiez si les longueurs de votre og:title et og:description sont optimisées simultanément pour WhatsApp, Facebook, LinkedIn et Twitter.
Règles de taille et de format pour og:image
Bien choisir l’URL de l’image ne représente que la moitié du travail. WhatsApp impose aussi des exigences de taille et de format qui déterminent si l’image est affichée en évidence ou totalement ignorée.
Dimensions recommandées
La spécification Open Graph recommande 1200×630 pixels avec un rapport d’aspect de 1,91:1. C’est la cible qui s’affiche bien simultanément sur WhatsApp, Facebook, LinkedIn et Slack : il n’y a donc aucune raison de ne pas l’utiliser par défaut.
| Plateforme | Taille minimale | Taille recommandée | Rapport d’aspect |
|---|---|---|---|
| 300×200 px | 1200×630 px | 1,91:1 | |
| 200×200 px | 1200×630 px | 1,91:1 | |
| 200×200 px | 1200×630 px | 1,91:1 ou 1:1 | |
| Twitter/X | 280×150 px | 1200×628 px | 2:1 (summary_large_image) |
| Slack | 500×300 px | 1200×630 px | 1,91:1 |
WhatsApp affichera des images jusqu’à environ 300×200 pixels, mais tout ce qui est plus petit tend à être rendu comme une minuscule vignette plutôt qu’une image en évidence, et les très petites images peuvent être totalement omises. Les images en dessous du seuil minimum ou avec des rapports d’aspect extrêmes (des portraits très hauts, par exemple) sont parfois rejetées.
Formats de fichier pris en charge
- JPEG (.jpg, .jpeg) : le meilleur choix pour les photographies et les images avec dégradés. Largement pris en charge par tous les robots sociaux.
- PNG (.png) : le meilleur choix pour les graphiques, les logos et les images avec transparence. Également pris en charge universellement.
- WebP : prise en charge irrégulière selon les robots. Évitez WebP pour og:image même si votre site utilise des images WebP par ailleurs.
- GIF : largement pris en charge, mais seule la première image est affichée (pas d’animation). Rarement idéal pour les images d’aperçu.
- SVG : non pris en charge par la plupart des robots sociaux, y compris WhatsApp. Utilisez plutôt un PNG ou un JPEG rastérisé.
Considérations sur la taille du fichier
Gardez votre fichier og:image sous 300 Ko. Le robot de WhatsApp s’exécute sur les serveurs de Meta et est optimisé pour la vitesse : les images très volumineuses mettent plus longtemps à être récupérées et augmentent le risque d’expiration du délai, ce qui donne un aperçu sans image. Un JPEG bien optimisé en 1200×630 px devrait tenir sans problème sous 200 Ko.
Astuce
Causes fréquentes d’aperçus cassés
Même avec des balises OG correctes, les aperçus de liens WhatsApp ne se rendent parfois pas. Voici les causes les plus fréquentes.
URL og:image relative
Déjà abordé plus haut, mais cela vaut la peine d’insister car c’est l’erreur la plus courante. Utilisez toujours https://votredomaine.com/chemin/vers/image.jpg, jamais /chemin/vers/image.jpg. Servez-vous du Validateur de balises OG pour détecter ce problème avant de partager.
Balises OG générées par JavaScript (absentes du HTML rendu côté serveur)
Le robot de WhatsApp n’exécute pas JavaScript. Si vos balises meta sont injectées par un framework côté client après le chargement de la page, ce qui est courant dans les applications monopage construites avec React, Vue ou Angular sans rendu côté serveur, le robot verra un <head> vide et ne générera aucun aperçu. Les balises OG doivent être présentes dans la réponse HTML initiale du serveur. Utilisez le rendu côté serveur (SSR) ou la génération statique (SSG) pour garantir que les balises figurent dans le HTML brut.
Le serveur bloque le robot WhatsApp
Des outils de sécurité comme le Bot Fight Mode de Cloudflare, des règles WAF personnalisées ou des configurations robots.txt agressives bloquent parfois le robot WhatsApp. Vérifiez votre robots.txt pour vous assurer qu’il ne bloque pas tous les robots avec `User-agent: * Disallow: /`. Consultez aussi les journaux de sécurité de votre serveur lors des tests : vous constaterez peut-être que le robot est bloqué avec un statut 403 ou 429.
og:image renvoie un statut autre que 200
Si l’URL de l’image renvoie un 404, un 403, une redirection 301 ou toute réponse autre que 200, WhatsApp supprime silencieusement l’image de l’aperçu. Vérifiez que l’URL de votre image est directement accessible (sans redirection ni authentification) en l’ouvrant dans une fenêtre de navigation privée et en contrôlant le statut. Utilisez l’Inspecteur d’en-têtes HTTP pour examiner les en-têtes de réponse de n’importe quelle URL d’image.
og:image hébergée en HTTP (pas HTTPS)
Les robots sociaux imposent généralement HTTPS pour des raisons de sécurité. Une image servie en HTTP simple sera souvent ignorée même si le reste de votre page est en HTTPS. Assurez-vous toujours que l’URL de votre og:image commence par https://.
og:image dépasse la limite de taille ou a un format invalide
Les images très volumineuses (plus de 5 Mo) ou aux formats non pris en charge (SVG, WebP sur certains robots) sont silencieusement ignorées. Restez sur du JPEG ou du PNG sous 300 Ko en 1200×630 px.
Avertissement
Invalider le cache des aperçus WhatsApp
WhatsApp met en cache les aperçus de liens par URL. Une fois qu’une URL a été explorée, le même aperçu est servi à tous les destinataires qui reçoivent ce lien, que vous ayez ou non mis à jour les balises OG depuis. La durée de vie du cache n’est pas documentée publiquement, mais en pratique elle peut aller de plusieurs jours à une semaine.
La méthode de la chaîne de requête
La solution la plus fiable consiste à ajouter une chaîne de requête à l’URL lorsque vous la partagez. WhatsApp traite https://votredomaine.com/page?v=2 comme une URL distincte de https://votredomaine.com/page : il explorera donc à nouveau la page et générera un nouvel aperçu. La chaîne de requête peut être n’importe quoi (?v=2, ?ref=wa, ?share=1) tant qu’elle diffère de celle partagée auparavant.
Astuce
Utiliser le Sharing Debugger de Facebook pour amorcer le cache
Le Sharing Debugger de Facebook (developers.facebook.com/tools/debug) est un outil qui valide vos balises OG et force une nouvelle exploration de votre URL sur l’infrastructure de Meta. Comme WhatsApp et Facebook partagent la même infrastructure Open Graph au sein de Meta, une exploration via le Sharing Debugger peut parfois amorcer (ou vider) le cache d’aperçu WhatsApp pour la même URL. Il vaut la peine de l’exécuter après tout changement de balise, en complément de la méthode de la chaîne de requête.
Résumé : procédure d’invalidation du cache
- Mettez à jour vos balises OG sur le serveur et vérifiez que la réponse HTML brute contient les nouvelles valeurs.
- Passez votre URL dans le Validateur de balises OG pour confirmer que les balises sont correctes.
- Soumettez l’URL au Sharing Debugger de Facebook pour forcer une nouvelle exploration.
- Lors du partage sur WhatsApp, ajoutez une nouvelle chaîne de requête (par exemple ?v=2) pour garantir une exploration fraîche.
Schémas avancés de balises OG
Une fois les bases en place, quelques schémas avancés vous donnent davantage de contrôle sur l’apparence de votre contenu sur WhatsApp et les autres plateformes sociales.
Plusieurs balises og:image
La spécification Open Graph autorise plusieurs balises og:image sur une même page. Chaque balise d’image supplémentaire est traitée comme une alternative : les robots utilisent généralement la première image valide rencontrée. C’est utile pour prévoir une solution de repli :
<!-- Primary: large landscape (WhatsApp, Facebook, LinkedIn) -->
<meta property="og:image" content="https://yourdomain.com/share-1200x630.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Fallback: square (some LinkedIn contexts, Instagram) -->
<meta property="og:image" content="https://yourdomain.com/share-1200x1200.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="1200" />Utiliser og:image séparément de twitter:image
Twitter/X lit d’abord twitter:image et ne se rabat sur og:image que si aucune balise Twitter Card n’est présente. Vous pouvez donc définir une image différente pour Twitter sans affecter WhatsApp. La taille d’image recommandée par Twitter pour une carte summary_large_image est 1200×628 px (rapport 2:1) plutôt que 1200×630 px. La différence est minime, mais si vous voulez un rendu parfait au pixel sur les deux plateformes, précisez les deux :
<!-- Used by WhatsApp, Facebook, LinkedIn, Slack -->
<meta property="og:image" content="https://yourdomain.com/share-1200x630.jpg" />
<!-- Used by Twitter/X specifically -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yourdomain.com/share-1200x628.jpg" />Images OG dynamiques
De nombreux sites modernes génèrent leurs images OG dynamiquement (pour les articles de blog, les pages produit ou les profils utilisateurs) via des services ou du rendu côté serveur. Si vous générez des images par programme, rappelez-vous que l’URL doit rester absolue et publiquement accessible. Les URL d’images OG dynamiques ressemblent souvent à : https://votredomaine.com/api/og?title=Mon+Titre ; c’est parfaitement valide tant que le point de terminaison renvoie une véritable image avec le bon en-tête Content-Type (image/jpeg ou image/png), et non une page HTML.
Valider les données structurées en parallèle des balises OG
Les balises Open Graph fonctionnent aux côtés (et non à la place) des données structurées JSON-LD. Pour les articles, les produits et les entreprises locales, les données structurées activent les résultats enrichis Google, tandis que les balises OG gèrent les aperçus de partage social. Les deux systèmes sont complémentaires : vous avez besoin des deux. Utilisez le Validateur de données structurées pour contrôler votre schéma JSON-LD tandis que le Validateur de balises OG s’occupe de votre implémentation Open Graph. Le Générateur de balises meta peut produire une section <head> complète avec balises OG et Twitter Card en une seule sortie.
Section head complète recommandée
Pour référence, voici une section <head> complète et prête pour la production couvrant Open Graph (WhatsApp, Facebook, LinkedIn), Twitter Card et les balises meta SEO standard :
<head>
<!-- Standard SEO -->
<title>Your Page Title | Site Name</title>
<meta name="description" content="A concise 150-160 character page description." />
<link rel="canonical" href="https://yourdomain.com/your-page" />
<!-- Open Graph (WhatsApp, Facebook, LinkedIn, Slack) -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://yourdomain.com/your-page" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A concise summary for social sharing." />
<meta property="og:image" content="https://yourdomain.com/images/share-1200x630.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Descriptive alt text for the preview image." />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:locale" content="en_US" />
<!-- Twitter Card (Twitter/X) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A concise summary for Twitter." />
<meta name="twitter:image" content="https://yourdomain.com/images/share-1200x628.jpg" />
</head>Générateur de balises meta
Générez un ensemble complet de balises meta Open Graph, Twitter Card et SEO en une seule fois, sans rédaction manuelle.
Points clés
- WhatsApp lit quatre balises Open Graph pour construire un aperçu de lien : og:title, og:description, og:image et og:url.
- og:image doit être une URL HTTPS absolue complète : les chemins relatifs échouent silencieusement sur WhatsApp et tous les autres robots sociaux.
- Utilisez un JPEG ou PNG de 1200×630 px sous 300 Ko comme og:image pour un rendu multiplateforme optimal.
- Incluez les balises og:image:width et og:image:height pour que les robots puissent mettre en page l’aperçu avant le chargement de l’image.
- Les balises OG doivent figurer dans le HTML rendu côté serveur : les balises meta injectées par JavaScript ne sont pas lues par WhatsApp.
- WhatsApp met en cache les aperçus par URL pendant des jours. Ajoutez une chaîne de requête (?v=2) lorsque vous partagez un lien mis à jour.
- Utilisez le Validateur de balises OG pour contrôler toutes les balises avant de partager, et le Sharing Debugger de Facebook pour forcer une nouvelle exploration après vos modifications.