Vous avez publié votre site, collé le lien dans LinkedIn ou dans un message, et obtenu un rectangle gris avec l’adresse en dessous. Le site va bien. Ce qui manque, c’est un petit jeu d’instructions dans votre HTML appelé balises Open Graph, qui indiquent aux messageries et aux réseaux sociaux quel titre, quelle description et quelle image afficher. Ajouter quatre lignes à la section head de votre page corrige la chose, et ce guide explique quoi y mettre.
De quoi un aperçu de lien est fait
Quand vous collez un lien, l’application n’ouvre pas votre page comme le ferait une personne. Elle envoie un robot lire le haut de votre HTML et y chercher des balises précises. Ce qu’il y trouve devient la carte. Si les balises manquent, il se rabat sur ce qu’il peut récupérer — souvent le titre de votre page, parfois rien du tout.
La norme s’appelle Open Graph. Elle est née chez Facebook et est aujourd’hui lue par LinkedIn, Slack, Discord, WhatsApp, iMessage et la plupart des autres.
Une og:image est l’image que votre lien affiche quand quelqu’un le colle quelque part.
Les quatre lignes qui vous manquent
Ouvrez votre index.html, trouvez la section <head> près du haut, et collez ceci à l’intérieur — avant la balise de fermeture </head>.
<meta property="og:title" content="Le titre de votre page"> <meta property="og:description" content="Une phrase à propos de la page."> <meta property="og:image" content="https://yoursite.sofast.host/preview.png"> <meta property="og:url" content="https://yoursite.sofast.host/">
Deux choses font trébucher ici.
L’adresse de l’image doit être absolue. preview.png ne fonctionnera pas. /preview.png non plus. Il faut l’adresse complète, commençant par https://, parce que le robot qui lit votre page ne navigue pas sur votre site — il récupère une seule adresse, isolément.
Le fichier image doit être téléversé avec votre site. Mettez preview.png dans le même dossier qu’index.html avant de compresser et de téléverser.
Si un outil d’IA a construit votre page, demandez-lui d’ajouter les balises Open Graph et il les placera au bon endroit. C’est plus rapide que de modifier le HTML à la main et cela risque moins de casser quelque chose.
Fabriquer l’image elle-même
Format : 1200 × 630 pixels. C’est le rapport auquel presque toutes les plateformes recadrent. Plus petit, l’image paraît floue ; avec un autre rapport, vos bords sont coupés.
Éloignez le texte des bords. Les applications ne recadrent pas toutes pareil. Tout ce qui est important doit tenir dans les 80 % du centre.
Rendez-la lisible en vignette. Dans un fil de messages, cette image fait environ 300 pixels de large. Votre nom en corps 24 disparaît. Moins de mots, plus gros.
Utilisez du PNG ou du JPG, sous les 300 ko environ. Certains robots abandonnent devant des images lourdes et n’affichent rien plutôt que d’attendre.
Pourquoi l’ancien aperçu reste coincé
Vous avez ajouté les balises, téléversé, collé le lien — et obtenu la même carte vide.
Les plateformes mettent les aperçus en cache agressivement, souvent pendant des jours. La carte que vous voyez a été construite avant que votre correction existe. La plupart des plateformes offrent un outil de débogage qui force un rafraîchissement : LinkedIn a le Post Inspector, Facebook le Sharing Debugger. Collez-y votre adresse et le cache se vide pour cette plateforme.
Slack et iMessage sont plus difficiles à forcer. Ajouter ?v=2 à la fin de l’adresse la fait passer pour une nouvelle adresse et provoque un aperçu frais.
Questions fréquentes
Les quatre réponses ci-dessous couvrent X, les images manquantes, les aperçus par page et l’effet éventuel sur le référencement.
Généralement non. X lit les balises Open Graph quand les siennes sont absentes. Ajoutez <meta name="twitter:card" content="summary_large_image"> si vous voulez précisément le grand format — cette seule ligne vaut la peine.
Vérifiez l’adresse de l’image en la collant directement dans un navigateur. Si elle ne se charge pas seule, elle ne se chargera pas non plus pour un robot. Neuf fois sur dix, le fichier n’a pas été inclus dans le téléversement, ou l’adresse manque du préfixe https://.
Oui. Les balises Open Graph sont propres à chaque page. Chaque fichier HTML a son propre jeu dans sa propre section head, ce qui compte dès que votre site fait plus d’une page.
Non. Les balises Open Graph sont lues par les plateformes sociales, pas par les systèmes de classement de Google. Elles influencent le nombre de personnes qui cliquent sur un lien partagé, ce qui est un vrai gain, mais ce n’est pas un facteur de classement.
Corrigez les balises, téléversez de nouveau, même adresse.