Générateur d'aperçu Open Graph

On ne découvre à quoi ressemble un lien partagé qu’une fois qu’on l’a partagé — et à ce moment-là, la publication est en ligne et l’image n’est pas la bonne. L’outil ci-dessus génère l’aperçu de la carte à partir de vos balises Open Graph avant la publication : vous pouvez ainsi corriger la longueur du titre ou l’image manquante en amont.

Comment ça marche

Deux façons de procéder. Soit vous remplissez directement les champs — titre, nom du site, description, URL de la page, URL de l’image — et l’aperçu se met à jour pendant la saisie. Soit vous collez le HTML du <head> de votre page dans la zone d’import, et l’outil en extrait les balises pour vous.

Le parseur applique le même ordre de priorité qu’un vrai crawler :

• Les balises og:* l’emportent dès qu’elles sont présentes.
• Les balises twitter:* complètent tout ce qu’Open Graph a laissé vide — une page qui n’a que twitter:title s’affiche donc quand même.
• Un simple élément <title> et <meta name="description"> servent de dernier recours.
• Les entités HTML sont décodées : & s’affiche comme & au lieu de se retrouver tel quel dans l’aperçu.

Le domaine affiché sous la carte est déduit de l’URL de la page, sans le protocole ni l’éventuel préfixe www., comme le font la plupart des plateformes. Tout s’exécute dans votre navigateur : vous pouvez coller le code d’une page de préproduction encore confidentielle sans qu’il parte où que ce soit.

Ce qu’il faut vérifier avant de publier

L’image, c’est toute la carte. Un aperçu en grand format est constitué essentiellement de l’image : si elle manque ou ne se charge pas, la publication se réduit à un lien texte qui ne récolte qu’une fraction des clics. Les exigences à respecter : une URL absolue, au moins 1200×630 pixels, moins de 5 Mo environ, un format courant, et une image accessible sans authentification. Un chemin relatif est de loin la cause la plus fréquente d’une carte vide — le crawler qui récupère votre page ne se trouve pas sur l’origine de votre application.

Les titres sont tronqués selon leur largeur en pixels. Une soixantaine de caractères ne pose problème sur aucune plateforme ; sur mobile, la limite est plus basse. Placez en tête ce qui donne envie de cliquer : un titre du genre « … | Rubrique | Nom du site » gaspille sa position la plus précieuse.

Les descriptions sont coupées vers 150 à 200 caractères, et certaines plateformes les masquent complètement sur petit écran. Rédigez la première phrase pour qu’elle se suffise à elle-même.

Le type de carte dépend de l’image. twitter:card doit valoir summary_large_image quand vous disposez d’une vraie image, et summary sinon ; annoncer une grande carte sans grande image donne un recadrage étiré et de piètre qualité.

Toute URL absolue doit l’être aussi pour un inconnu. og:url, og:image et l’URL canonique doivent toutes pointer vers l’URL publique de production, et non vers une adresse localhost ou de préproduction qui aurait fuité par une variable de template.

Pourquoi l’aperçu et la réalité diffèrent parfois

Cet outil affiche ce que disent vos balises. Les plateformes appliquent ensuite leurs propres règles par-dessus, et trois d’entre elles réservent régulièrement de mauvaises surprises.

Le cache. Facebook, LinkedIn et Slack mettent en cache les métadonnées récupérées de façon agressive — souvent pendant plusieurs jours. Corriger une balise ne rafraîchit pas un lien déjà partagé : il faut passer par le scraper ou le débogueur de la plateforme pour forcer une nouvelle récupération.

L’exploration. En règle générale, les crawlers des réseaux sociaux n’exécutent pas JavaScript. Les balises injectées côté client après l’hydratation leur sont invisibles. Si votre carte est vide une fois partagée mais correcte dans l’inspecteur d’éléments du navigateur, c’est presque certainement la raison : les balises doivent figurer dans le HTML rendu côté serveur.

Les redirections et l’authentification. Un crawler qui tombe sur une page de connexion, une redirection géographique ou un interstitiel de consentement voit les métadonnées de cette page-là, pas les vôtres.

Lectures et outils associés

L’en-tête du document et les règles qui régissent ce qu’il doit contenir sont traités dans Les fondamentaux de HTML5. Comme une carte n’apparaît que si le crawler obtient une réponse réussie, mieux vaut connaître les codes qu’il peut recevoir à la place — Codes de statut HTTP couvre les redirections et les erreurs qui cassent le partage en silence.

Pour produire le bloc de balises au départ, utilisez le générateur de balises meta ; pour mettre au propre le balisage du <head> qui l’entoure, le formateur HTML.