Vous partagez votre nouvelle page et l’aperçu affiche un ancien titre, un logo coupé ou un rectangle gris. Les gens jugent un lien sur cette carte avant de cliquer : un aperçu cassé vous coûte des visites à chaque partage.
Les aperçus suivent quelques règles simples. Une fois que la page fournit aux applications ce qu’elles cherchent, le problème reste généralement réglé.
D’où vient l’aperçu
Quand quelqu’un colle un lien, le robot de l’application récupère votre page et lit quelques balises dans l’en-tête HTML. Le standard principal est leprotocole Open Graph, qui définit og:title, og:type, og:image et og:url. La plupart des applications lisent aussi og:description, et X lit ses propres balises twitter:card en se rabattant sur Open Graph pour le reste.
Le robot ne fait pas défiler la page, ne clique pas et n’attend pas comme une personne. Il lit ce que le serveur envoie en premier. Ce que JavaScript ajoute ensuite lui échappe souvent.
Pourquoi ça ne marche pas
Les balises manquent, donc l’application devine à partir du texte et des images qu’elle trouve.
Les balises sont ajoutées par JavaScript après le chargement, donc le robot ne les voit jamais.
og:image utilise un chemin relatif ou une adresse http au lieu d’une URL https complète.
L’image est trop lourde, trop petite, au mauvais format, ou bloquée par un pare-feu, une protection anti-bots ou une connexion obligatoire.
Toutes les pages partagent le même titre et la même image génériques, donc chaque lien se ressemble.
L’application a gardé en cache une ancienne version de la page et continue de l’afficher.
Une image qui fonctionne partout
Utilisez une image paysage de 1200 × 630 pixels, en JPEG ou PNG, de poids raisonnable. Éloignez le texte important et les logos des bords, car certaines applications recadrent en carré ou dans un format plus étroit. Servez-la depuis une URL https complète que tout le monde peut ouvrir sans se connecter.
Ajoutez aussi og:image:width, og:image:height et og:image:alt. Ils aident les applications à mettre en page la carte avant le téléchargement de l’image et à la décrire aux personnes qui utilisent un lecteur d’écran.
Rafraîchir un aperçu en cache
Les applications conservent les aperçus, parfois plusieurs jours. Après avoir corrigé les balises, il faut parfois leur demander de relire la page. Le Sharing Debugger de Facebook et le Post Inspector de LinkedIn ont tous deux un bouton pour récupérer à nouveau une URL. Pour les autres applications, partager le lien avec un paramètre inoffensif, comme ?v=2, crée un nouvel aperçu.
Testez avant de partager
Montesteur gratuit d’aperçu de lien récupère votre page comme le font les robots d’aperçu, lit les balises Open Graph et de carte X, télécharge les images pour vérifier qu’elles se chargent et mesure leurs dimensions et leur poids. Il montre ensuite l’allure probable de la carte sur X, LinkedIn, Facebook, WhatsApp, Slack et Discord, avec une liste de corrections.
Chaque application a ses propres règles et les modifie de temps en temps : prenez ces aperçus comme une indication fidèle plutôt que comme une copie au pixel près.
Rendez-le automatique
Sur un site de nombreuses pages, les aperçus devraient venir du contenu lui-même : nom du produit, titre de l’article ou date de l’événement, avec une image générée ou choisie pour chaque page. Des frameworks comme Next.js peuvent produire ces balises et ces images côté serveur. Si toutes vos pages partagent une carte générique,parlez-moi de votre site et je mettrai cela en place pour que chaque nouvelle page ait un aperçu correct sans travail supplémentaire.