Image Open Graph d'une landing page : pourquoi l'aperçu de partage change tout

Publié le 4 août 2026 · 7 min de lecture

Le scénario est banal : vous collez le lien de votre landing page dans un message LinkedIn, un post X ou un groupe WhatsApp, et à la place d'un aperçu engageant, rien ne s'affiche — ou un aperçu cassé, une image générique, un titre tronqué. Le lien atterrit dans le fil comme une ligne de texte grise parmi des dizaines de posts illustrés. La plupart des efforts de conversion se concentrent sur ce qui se passe après le clic — le titre, le CTA, le formulaire. Mais un lien mal préparé perd une partie de ses clics avant même que la page ne charge, au moment où quelqu'un décide, en une fraction de seconde dans un fil qui défile, si ce rectangle mérite un clic.

Ce qui s'affiche avant même d'arriver sur la page

Quand un lien est collé sur LinkedIn, Facebook, WhatsApp, Slack ou X, la plateforme n'affiche pas l'URL brute : elle va chercher dans le <head> de la page des balises Open Graph — og:title, og:description, og:image — normalisées par le protocole Open Graph introduit par Facebook en 2010 et aujourd'hui lu par la quasi-totalité des plateformes sociales et de messagerie. X (ex-Twitter) ajoute sa propre variante, twitter:card. Ces balises sont distinctes de celles que lit Google pour le référencement : une page peut très bien être bien indexée et pourtant totalement muette au moment d'être partagée, simplement parce que personne n'a rempli ces quelques lignes de métadonnées.

Pourquoi une image absente coûte plus cher qu'on ne l'imagine

Une étude fondatrice de la mémoire visuelle, « Perception and memory for pictures: Single-trial learning of 2500 visual stimuli » (Standing, Conezio & Haber, Psychonomic Science, 1970), a montré que des participants exposés une seule fois à des milliers d'images reconnaissaient plus de 90 % d'entre elles plusieurs jours plus tard — une capacité de reconnaissance visuelle qui n'a pas d'équivalent pour du texte lu au même rythme. Cette étude ne porte pas sur les réseaux sociaux, mais elle illustre un principe qui s'y applique directement : dans un fil qui mélange photos, vidéos et texte, un lien sans image n'entre tout simplement pas en compétition sur le même terrain perceptif que ses voisins illustrés. Il ne se distingue pas moins bien — il ne se distingue pas du tout.

Comment vérifier l'aperçu de sa propre landing page

Avant de corriger quoi que ce soit, il faut voir ce que chaque plateforme affiche réellement, car chacune met en cache sa propre copie des métadonnées :

Facebook Sharing Debugger (developers.facebook.com/tools/debug) — affiche l'aperçu et propose un bouton « Scrape Again » pour forcer la mise à jour après une modification.
LinkedIn Post Inspector (linkedin.com/post-inspector) — indispensable pour un public B2B francophone, LinkedIn ayant son propre cache indépendant de celui de Facebook.
Twitter Card Validator, accessible via une recherche « card validator » sur developer.x.com — vérifie spécifiquement la balise twitter:card, qui doit être présente même si og:image l'est déjà.
Un test manuel dans WhatsApp ou Slack, en collant le lien dans une conversation avec soi-même — le plus rapide pour un premier contrôle, même s'il ne dit pas pourquoi un aperçu est cassé.

Les erreurs les plus fréquentes

Balise og:image absente — la plateforme retombe alors sur la première image trouvée dans le HTML, au hasard, ou n'affiche rien du tout.
URL relative au lieu d'une URL absolue — og:image doit pointer vers https://exemple.fr/image.png, jamais vers /image.png : la plupart des robots de partage ignorent silencieusement une URL relative.
Image trop lourde — au-delà de quelques mégaoctets, certains robots de partage abandonnent le téléchargement dans le délai imparti et affichent un aperçu vide.
Mauvais ratio — le format recommandé est 1200 × 630 pixels (ratio 1,91:1) ; une image carrée ou verticale est recadrée de façon imprévisible selon la plateforme, coupant parfois le texte ou le visage placé dedans.
Cache non rafraîchi — après une refonte, Facebook et LinkedIn continuent d'afficher l'ancienne image pendant des jours si l'on ne force pas un nouveau scrape via les outils ci-dessus.
twitter:card manquante — sans elle, X retombe sur un aperçu texte minimal même si og:image est correctement renseignée.

Que mettre dans l'image, au-delà du simple fait d'en avoir une

Une image présente mais vide de sens — un fond dégradé sans texte, une capture d'écran générique — récupère une partie de l'attention perceptive documentée plus haut, mais ne convertit pas davantage cette attention en clic. Trois éléments simples font la différence : le nom de l'offre ou de la marque, une promesse concrète en quelques mots (le même principe que pour un titre de landing page qui accroche, mais lisible en miniature, donc avec deux fois moins de mots), et un contraste fort entre texte et fond — l'image sera vue à une taille équivalant à un timbre-poste sur mobile. Une capture de la page elle-même, prise brute, fonctionne rarement : le texte y est trop petit pour être lu à cette échelle.

Next.js gère une partie du travail, mais pas tout

Depuis l'App Router, Next.js (le framework des dix templates LanderKit) sait générer automatiquement les balises og:image et twitter:card à partir d'un simple fichier opengraph-image.png ou opengraph-image.tsx déposé dans le dossier d'une route — plus besoin d'écrire les balises <meta> à la main. Sur ce blog, chaque article génère automatiquement sa propre image 1200 × 630 (titre, temps de lecture, charte graphique) via un script exécuté au build. Ce que le framework ne peut pas deviner, en revanche, c'est le contenu à mettre dans cette image pour votre offre — c'est la partie qui reste éditoriale, pas technique.

Un cas concret

Sur une landing page de coaching comme le template Coach & Consultant (démo), une image Open Graph générique se contenterait du logo. Une image efficace affiche plutôt le nom de la coach, la promesse chiffrée déjà présente sur la page (« 8 séances pour structurer votre offre ») et une photo du visage — un choix qui s'appuie sur un principe distinct, documenté dans notre article sur l'image hero d'une landing page. Ce même travail vaut pour n'importe lequel des dix templates LanderKit (89 € l'unité, 229 € le pack complet) : chacun mérite sa propre image de partage, pensée pour son offre précise, plutôt qu'un visuel générique repris d'une page à l'autre.

Pièges à éviter

Réutiliser la même image Open Graph sur toutes les pages du site — chaque page (accueil, offre, article) mérite un aperçu qui correspond à ce qu'on y trouve réellement.
Oublier de tester après une refonte — un changement de design sans purge du cache Facebook ou LinkedIn peut afficher une ancienne version pendant des jours à l'insu de l'équipe.
Surcharger l'image de texte — au-delà d'une accroche courte, le texte devient illisible à la taille d'un aperçu mobile.
Ignorer twitter:card en pensant qu'og:image suffit partout — ce n'est vrai que sur les plateformes qui lisent le standard Open Graph, pas sur X.

FAQ

Questions fréquentes

Quelle taille d'image utiliser pour og:image ?

1200 × 630 pixels (ratio 1,91:1) est le standard le plus largement compatible entre Facebook, LinkedIn, WhatsApp et X. Un poids inférieur à 300 Ko évite les échecs de téléchargement par certains robots de partage.

Pourquoi l'aperçu ne se met pas à jour après un changement d'image ?

Facebook, LinkedIn et les autres plateformes mettent en cache les métadonnées d'un lien pendant plusieurs jours. Il faut forcer un nouveau scrape via le Facebook Sharing Debugger ou le LinkedIn Post Inspector pour que le nouvel aperçu remplace l'ancien.

Faut-il une image Open Graph différente par page ?

Oui. Une image générique reprise sur toutes les pages ne reflète jamais ce que le lien partagé contient réellement, ce qui réduit sa pertinence et sa capacité à donner envie de cliquer.

Next.js génère-t-il automatiquement l'image Open Graph ?

L'App Router de Next.js sait injecter les balises og:image et twitter:card à partir d'un fichier opengraph-image déposé dans une route, ce qui évite d'écrire les balises meta à la main. Le contenu de l'image — texte, visuel, promesse — reste en revanche un choix éditorial à faire soi-même.

À lire ensuite