Aperçu du lien non affiché ? Causes et comment y remédier

Un aperçu de lien est construit à partir des balises Open Graph dans le HTML de la page de destination - og:title, og:description, og:image et og:url. Lorsque vous collez un lien dans WhatsApp, Facebook, Slack ou X, le robot d'exploration de cette plateforme récupère la page, lit ces balises et affiche la carte. Si l'aperçu ne s'affiche pas, c'est presque toujours l'une de deux choses : les balises sont absentes ou défectueuses, ou la plateforme a mis en cache un résultat vide et continue à le servir.

Ce fait unique - l'aperçu provient de la destination, pas du lien - est ce qui le rend réparable. Vous ne déboguez pas la plateforme ; vous déboguez les balises de la page et effacez ensuite la mémoire de la plateforme. Ce guide explique pourquoi les aperçus se cassent, les quelques balises qui comptent, si les liens courts en sont responsables (généralement pas), et l'outil exact pour actualiser chaque plateforme.

Si vous raccourcissez également le lien, comment raccourcir une URL couvre cet aspect, et la question du lien court a sa propre section ci-dessous car c'est celle que les gens comprennent mal.

Pourquoi les aperçus de liens se cassent#

Les aperçus échouent pour un petit ensemble prévisible de raisons, et les nommer constitue la moitié de la solution.

• Balises Open Graph absentes ou mal formées. Aucun og:title ou og:image signifie que le robot n'a rien pour construire une carte, vous obtenez donc un lien brut. C'est de loin la cause la plus courante.
• Une image inaccessible ou trop grande. L'URL og:image renvoie une erreur 404, se trouve derrière une connexion, ou est trop grande pour que la plateforme la récupère dans les délais. La carte s'affiche sans son image, ou pas du tout.
• Cache vide. La plateforme a exploré l'URL une fois avant que les balises existent, a stocké "pas d'aperçu", et continue à l'afficher jusqu'à ce qu'elle soit forcée de regarder à nouveau.
• Rendu uniquement par JavaScript. La plupart des robots sociaux n'exécutent pas JavaScript ; ils lisent le HTML brut. Si vos balises sont injectées côté client, le robot ne les voit jamais.

Ce dernier point pénalise constamment les applications à page unique modernes. Le robot demande le HTML, reçoit une coquille vide et repart. La spécification du protocole Open Graph définit à quoi les balises doivent ressembler dans le HTML servi, et la solution est toujours de s'assurer qu'elles sont dans le HTML que le robot reçoit, et non ajoutées ultérieurement par script.

Les balises Open Graph qui alimentent un aperçu#

Quatre balises font presque tout le travail. Corrigez celles-ci et la plupart des plateformes affichent une carte propre.

og:title est le titre de la carte. og:description est la ligne de texte en dessous. og:image est l'image, et c'est celle que les gens se trompent le plus souvent - pointez-la vers une URL absolue d'une image d'environ 1200x630 pixels, accessible publiquement, pas derrière une authentification. og:url est l'adresse canonique de la page, ce qui maintient l'aperçu stable même lorsque le lien comporte des paramètres de suivi.

X lit sa propre famille de balises twitter:card et se replie sur Open Graph quand elles sont absentes, c'est pourquoi une page peut s'afficher parfaitement sur Facebook et paraître nue sur X. La solution sûre est d'inclure les deux : les quatre balises Open Graph plus twitter:card, twitter:title, twitter:description et twitter:image. Ce sont quelques lignes de HTML dans la section head de la page, et c'est la différence entre une carte qui fonctionne partout et une qui ne fonctionne qu'à un seul endroit. Google documente le comportement des robots et des balises spéciales si vous souhaitez également la perspective côté recherche.

Les liens courts cassent-ils les aperçus de liens ?#

C'est la question qui amène les gens sur le blog d'un raccourcisseur d'URL, et la réponse est rassurante : un lien court propre ne casse pas les aperçus. Lorsque vous partagez un lien court, le robot d'exploration de la plateforme suit la redirection vers la destination et y lit les balises Open Graph, de sorte que la carte affiche exactement l'aperçu de la destination comme le ferait la longue URL.

Les aperçus se cassent autour des liens courts uniquement dans des cas spécifiques. Une chaîne de redirections - un lien court pointant vers un autre lien court pointant vers la page - peut perturber ou faire expirer le délai d'un robot, donc limitez-vous à un saut, ce qui est aussi la discipline qui garde les redirections rapides et propres pour le SEO. Un raccourcisseur qui utilise un masquage par iframe au lieu d'une vraie redirection cassera l'aperçu, car le robot voit le wrapper, pas la destination - l'une des plusieurs raisons pour lesquelles cette technique est une mauvaise idée, traitée dans le cloaking de liens et le masquage d'URL. Et si la destination elle-même n'a pas de balises Open Graph, aucun lien court ne peut les inventer. Utilisez une redirection en un saut sur un domaine personnalisé pointant vers une page avec de bonnes balises, et l'aperçu est identique au lien non raccourci.

Si vous souhaitez des liens courts qui redirigent proprement en un saut et ne s'interposent jamais entre votre audience et un bon aperçu, créez un espace de travail Elido gratuit et pointez votre premier lien vers une page avec les bonnes balises.

Comment y remédier, plateforme par plateforme#

Une fois les balises correctes, le travail restant est d'effacer le cache de chaque plateforme, et chaque plateforme majeure vous fournit un outil.

1. Facebook et Instagram. Faites passer l'URL par le Facebook Sharing Debugger. Il affiche les balises trouvées et un bouton "Scrape Again" qui récupère à nouveau la page et efface la carte en cache. Cela couvre également Instagram, qui partage le même robot.
2. LinkedIn. Utilisez le LinkedIn Post Inspector. LinkedIn met les aperçus en cache pendant environ une semaine, et l'inspecteur est le seul moyen de forcer une actualisation anticipée.
3. X (Twitter). Le validateur de carte récupère la page à nouveau et montre comment la carte s'affichera ; confirmez que les balises twitter:card sont présentes et retestez.
4. WhatsApp, iMessage, Slack, Discord. Ces plateformes n'ont pas de débogueur public. Elles suivent Open Graph, mais mettent agressivement en cache. La solution de contournement est de partager une URL légèrement différente - ajoutez ou modifiez un paramètre de requête inoffensif - que l'application traite comme nouvelle et explore à nouveau.

Le schéma est le même partout : corrigez les balises sur la page, puis forcez la plateforme à regarder à nouveau. Un aperçu simplement mis en cache se corrige en quelques minutes dès que vous le re-scrapez ; un aperçu aux balises manquantes apparaît dès que le robot voit à nouveau la page.

La liste de contrôle avant le partage#

Avant qu'un lien soit diffusé à une audience, trente secondes de vérification évitent l'embarras du lien brut.

• Confirmez que la destination possède og:title, og:description, og:image et og:url, ainsi que les balises Twitter Card.
• Ouvrez directement l'URL og:image dans un navigateur - elle doit se charger, publiquement, à environ 1200x630.
• Faites passer l'URL finale, lien court inclus, par le débogueur Facebook pour voir la vraie carte.
• Si vous partagez un lien court, vérifiez qu'il s'agit d'un saut unique vers la destination, pas d'une chaîne.

Faites ces quatre vérifications et l'aperçu s'affiche dès la première fois, sur chaque plateforme qui compte. La carte n'est pas magique et la plateforme ne vous complique pas délibérément la vie - ce sont quatre balises sur votre page et un cache à effacer.

À lire sur le blog#

• Comment raccourcir une URL : liens gratuits, de marque et en masse
• Domaines personnalisés pour les liens courts : le guide DNS et TLS
• Cloaking de liens et masquage d'URL : ce qui est sûr pour le SEO
• Les raccourcisseurs d'URL nuisent-ils au SEO ? La réponse honnête
• Liens intelligents expliqués : routage en périphérie sans service supplémentaire