Pourquoi le lien vers votre site s'affiche mal sur WhatsApp ou Facebook (et comment réparer l'image OG)

Si votre lien s'affiche sans image (ou avec un titre bizarre) sur WhatsApp ou Facebook, la cause est presque toujours dans le site : la balise og:image manque, pointe vers une image inaccessible ou trop lourde, ou l'application ressert une ancienne version gardée en cache. Corrigez la balise et l'image, contrôlez la page avec le Sharing Debugger de Meta, puis renvoyez le lien sur WhatsApp en ajoutant ?v=2 à la fin pour forcer une nouvelle lecture.

Le scénario est classique : vous envoyez le lien de votre site à un client, vous appuyez sur envoyer et... un rectangle vide apparaît, sans image, avec un titre étrange ou l'adresse web étirée en travers. Vous n'avez rien fait de travers en l'envoyant. Cet aperçu (l'image, le titre et la description) est construit à partir de balises cachées dans le code de la page, appelées Open Graph. Quand elles manquent ou sont mal réglées, l'application devine, et elle devine souvent mal. La bonne nouvelle : ça se répare, et le plus souvent sans rien de compliqué.

La réponse courte : 6 vérifications, dans l'ordre

• La page contient-elle une balise og:image ? Affichez le code source de la page (clic droit, puis « Afficher le code source de la page ») et cherchez « og:image ». Si elle n'y est pas, aucune application ne sait quelle image montrer.
• L'adresse de l'image est-elle complète et en https:// ? Une adresse relative du type /img/photo.jpg, ou une image servie en http, ne fonctionne pas.
• L'image s'ouvre-t-elle seule, dans une fenêtre de navigation privée ? Si elle demande une connexion ou renvoie une erreur, les robots de WhatsApp et de Facebook ne la verront pas non plus.
• L'image a-t-elle le bon format ? JPEG ou PNG, environ 1200x630 px, et légère : autour de 300 Ko pour WhatsApp.
• Le Sharing Debugger de Meta voit-il la bonne image ? C'est le meilleur diagnostic gratuit pour Facebook.
• Le lien avec ?v=2 à la fin affiche-t-il un aperçu sur WhatsApp ? Si oui, la page est bonne et c'était un problème de cache.

Ce qu'est vraiment l'image OG (et qui la lit)

OG signifie Open Graph, un protocole créé par Facebook et repris par presque toutes les applications qui affichent des aperçus de liens : WhatsApp, Facebook, LinkedIn, Telegram, Slack, iMessage. Quand quelqu'un colle votre lien, l'application télécharge la page et lit ces balises dans la section head du code :

• og:title : le titre affiché dans l'aperçu
• og:description : la ligne de texte sous le titre
• og:image : la grande image
• og:url : l'adresse officielle de la page
• og:image:width et og:image:height : les dimensions de l'image, que Meta recommande d'indiquer pour que l'image s'affiche dès le premier partage

Deux détails techniques font échouer beaucoup de sites. D'abord, ces balises doivent figurer dans le HTML envoyé par le serveur : les robots d'aperçu n'exécutent pas le JavaScript, donc une balise ajoutée après coup par un script (fréquent sur les sites en React ou Vue sans rendu côté serveur) leur reste invisible. Ensuite, la forme standard utilise l'attribut property (property="og:image") : beaucoup de robots tolèrent name="og:image", mais pas tous.

Si les balises sont absentes, l'application improvise : elle prend le titre de la page, peut-être une petite image trouvée au hasard, peut-être aucune. D'où les cartes vides ou bizarres.

Pourquoi l'image ne s'affiche pas : les causes fréquentes

D'après notre expérience, presque tous les cas se résument à l'une de ces causes :

• Aucune balise og:image. Le site ne dit pas quelle image montrer, donc rien ne s'affiche.
• Adresse relative ou en http. Il faut une adresse complète qui commence par https://. Le robot n'est pas sur votre site, il ne sait pas où chercher /img/photo.jpg.
• Image trop petite. Facebook n'accepte pas les images de moins de 200x200 px, et en dessous de 600x315 px il les affiche en petit.
• Fichier trop lourd. WhatsApp ne publie pas de limite officielle, mais les guides de test conseillent de rester autour de 300 Ko : au-delà, l'aperçu peut disparaître sans aucun message d'erreur.
• Format mal pris en charge. JPEG et PNG passent partout ; WebP, SVG ou AVIF ne s'affichent pas de façon fiable dans tous les aperçus.
• Page ou image inaccessible aux robots. Connexion obligatoire, site de préproduction protégé par mot de passe, protection anti-bots ou pare-feu qui bloque les robots d'aperçu, ou règle trop large dans le fichier robots.txt.
• Balises ajoutées par JavaScript au lieu d'être présentes dans le HTML de départ.
• Balises en double ou périmées. Deux plugins SEO qui écrivent chacun leur og:image, une adresse qui pointe encore vers l'ancien domaine ou vers le site de test, ou vers un fichier image renommé, déplacé ou supprimé.

Souvent, il n'y a qu'une seule cause. Trouvez-la, corrigez-la, puis occupez-vous du cache.

La bonne image d'aperçu : dimensions, poids, format

Pour le contenu : votre logo ou un visuel clair, très peu de texte et en gros caractères, et rien d'important collé aux bords, car selon l'application et l'écran l'image peut s'afficher en petite vignette. Pour LinkedIn, la même image de 1200x630 px convient : LinkedIn demande au moins 1200x627 px et 5 Mo maximum, selon son aide officielle.

WhatsApp : pourquoi l'aperçu ne se met pas à jour

C'est le point qui rend fou : vous corrigez le site, vous renvoyez le lien, et l'aperçu est toujours l'ancien, ou toujours vide. Voici ce qu'il faut savoir :

• L'aperçu est créé au moment de l'envoi, par l'appareil de l'expéditeur, puis joint au message. Les messages déjà envoyés gardent donc leur ancien aperçu ; seuls les nouveaux envois profitent de la correction.
• WhatsApp garde les aperçus en cache et ne propose aucun outil officiel pour les vider.
• Le Sharing Debugger de Facebook ne suffit pas pour WhatsApp. Il rafraîchit le cache de Facebook, mais WhatsApp ne suit pas forcément. Utilisez-le pour vérifier vos balises, pas comme bouton de mise à jour de WhatsApp.
• L'astuce qui marche : ajoutez ?v=2 à la fin du lien, puis ?v=3 à l'essai suivant. Pour WhatsApp, c'est une nouvelle adresse, qu'il va relire. Si votre lien contient déjà un « ? », ajoutez &v=2 à la place.
• Attendez que l'aperçu apparaisse avant d'appuyer sur envoyer. Si vous envoyez trop vite, le message part sans aperçu.
• Vérifiez le réglage de confidentialité. WhatsApp permet de désactiver les aperçus de liens dans ses paramètres de confidentialité avancés. Si l'option est activée sur votre téléphone, les liens que vous envoyez partent sans aperçu, même avec un site parfait.

Facebook : le Sharing Debugger, étape par étape

Le Sharing Debugger de Meta est gratuit ; il suffit d'être connecté à un compte Facebook.

• Connectez-vous à Facebook, ouvrez l'outil et collez l'adresse de la page.
• Lancez l'analyse avec le bouton « Debug ». Selon la langue de votre compte, les boutons de l'outil peuvent apparaître en anglais ou traduits.
• Lisez les avertissements : balise manquante, image trop petite, image inaccessible, redirection.
• Regardez l'aperçu affiché : c'est ce que verront les personnes qui partagent votre lien sur Facebook.
• Après chaque correction, cliquez sur « Scrape Again » pour que Facebook relise la page.

Deux pièges à connaître. Meta met les images en cache selon leur adresse : si vous remplacez l'image par un fichier qui porte le même nom, Facebook peut continuer à montrer l'ancienne. Donnez un nouveau nom au fichier (par exemple apercu-v2.jpg). Et si l'image n'apparaît pas lors du tout premier partage, ajoutez og:image:width et og:image:height : selon Meta, ces deux balises permettent d'afficher l'image tout de suite, sans attendre qu'elle soit téléchargée et traitée. Si Facebook montre bien une image, mais pas la bonne, consultez notre guide sur l'image ou le texte incorrects quand vous partagez un lien sur Facebook.

LinkedIn, Telegram et les autres : vérifier ou rafraîchir l'aperçu

Chaque application garde sa propre copie de l'aperçu. Corriger Facebook ne corrige pas automatiquement les autres.

Comment réparer, étape par étape

Si vous avez accès au site (ou à la personne qui le gère), voici l'ordre à suivre :

Étape 1 : préparez l'image. 1200x630 px, JPEG ou PNG, votre logo ou un visuel clair, peu de texte, compressée pour rester autour de 300 Ko.

Étape 2 : ajoutez ou corrigez les balises og:title, og:description, og:image (adresse complète en https://) et og:url, plus og:image:width et og:image:height si possible, dans la section head de la page, directement dans le HTML.

Étape 3 : videz les caches du site, qu'il s'agisse du plugin de cache, du cache de l'hébergeur ou du CDN. Sinon, les robots continuent de recevoir l'ancienne page.

Étape 4 : ouvrez l'image seule dans une fenêtre de navigation privée. Elle doit s'afficher sans connexion ni redirection.

Étape 5 : passez la page au Sharing Debugger, corrigez les avertissements et cliquez sur « Scrape Again ».

Étape 6 : testez pour de vrai. Envoyez-vous le lien sur WhatsApp avec ?v=2 à la fin, et attendez l'aperçu avant d'envoyer.

WordPress et constructeurs de sites : où régler l'image de partage

Sur WordPress, un plugin SEO comme Yoast SEO ou Rank Math génère les balises Open Graph sans toucher au code. Avec Yoast, l'image se choisit page par page dans la section consacrée aux réseaux sociaux du panneau Yoast SEO, dans l'éditeur ; pour les pages sans image, Yoast utilise l'image du site définie dans Yoast SEO, Réglages, rubrique « Site basics » (les libellés peuvent varier selon la langue de votre WordPress). N'activez pas deux plugins qui génèrent les mêmes balises : vous obtiendriez des og:image en double.

Sur Wix, Shopify, Squarespace et les autres constructeurs, cherchez dans les réglages SEO ou « réseaux sociaux » de chaque page un champ d'image de partage. Sur un site construit sur mesure, ces balises se programment une seule fois dans le modèle de page, et chaque nouvelle page en hérite.

Quand vous ne pouvez pas le réparer seul

Parfois, il n'y a nulle part où cliquer : plateforme fermée, pas d'accès au code, ou simplement pas envie de vous battre avec des plugins un après-midi chargé. C'est tout à fait normal.

Chez MPO Web Studio, petit studio web basé à Cluj-Napoca, nous réglons l'aperçu WhatsApp et Facebook au moment de construire le site, pas après la première plainte d'un client. Nous travaillons à distance et nous vous montrons une démo gratuite avant tout paiement. Si vous voulez simplement qu'on regarde un lien qui s'affiche mal, envoyez-nous l'adresse de la page sur WhatsApp : nous vous dirons d'où vient le problème.