Testeur d’aperçu de lien

Ce qui se passe quand vous collez un lien

Dès que vous collez une adresse dans une publication ou une conversation, un serveur appartenant à ce service demande la page. Il ne l’affiche pas. Il lit le début du HTML, cherche une poignée de balises <meta>, télécharge l’image que l’une d’elles désigne et construit une carte avec ces morceaux. Puis il enregistre la carte et tous ceux qui voient le lien reçoivent la version enregistrée.

Les balises suivent une convention appelée Open Graph, que Facebook a lancée en 2010 et que presque tous les réseaux et applications de messagerie lisent aujourd’hui. Chacune commence par og:. X lit les mêmes balises et en ajoute une à lui, twitter:card, pour choisir la mise en page.

Les balises, par ordre d’effet

og:image

L’image. Plus que tout le reste, elle décide si le lien se fait remarquer. L’adresse doit être absolue, commençant par https://.

og:title

Le titre de la carte. Sans lui, les services se rabattent sur la balise <title>, qui finit souvent par un nom de site que vous ne vouliez pas voir répété.

og:description

Une ou deux phrases sous le titre. À défaut, la méta description, puis un passage que le service choisit pour vous.

twitter:card

Réglez-la sur summary_large_image et X affiche l’image en pleine largeur. Sans elle, vous obtenez un petit carré à côté du texte.

og:url

L’adresse sous laquelle les mentions j’aime et les partages sont comptés. Elle devrait être la même que l’URL canonique de la page.

og:site_name, og:type, og:locale, og:image:alt

Des détails complémentaires : l’étiquette au-dessus du titre dans Slack et Discord, le type de contenu, la langue et une description de l’image pour les utilisateurs de lecteurs d’écran.

Comment l’image est jugée

Notre serveur télécharge le fichier nommé dans og:image (ou twitter:image quand c’est la seule) et le mesure d’après ces seuils.

Si vous voulez une recette qui marche partout, faites un seul JPEG ou WebP de 1200 × 630 pixels, de moins de 300 KB et gardez tout texte loin des bords. Le contrôle note aussi un titre ou une description manquants, un <title> de plus de 60 caractères, une description de plus de 200 et un og:url qui contredit le lien canonique.

Les six cartes dessinées dans les résultats sont des reconstitutions faites à partir de vos balises. Votre navigateur charge l’image depuis notre serveur, en copie réduite, de sorte que le site testé ne voit jamais votre visite.

Ajouter les balises et rafraîchir les anciennes cartes

Les résultats se terminent par un bloc rempli à partir de ce que nous avons trouvé. Il va à l’intérieur de <head> :

<meta property="og:title" content="How we made our builds twice as fast">
<meta property="og:description" content="Three changes to our pipeline, with the numbers before and after.">
<meta property="og:image" content="https://www.example.com/img/build-time-card.jpg">
<meta property="og:url" content="https://www.example.com/blog/build-time/">
<meta name="twitter:card" content="summary_large_image">

Attention à l’attribut. Les balises Open Graph utilisent property= et la balise de X utilise name=. Sur un CMS, vous tapez rarement tout cela à la main. Les extensions SEO de WordPress, les thèmes Shopify, Squarespace et Webflow ont tous un champ « image sociale » par page et une valeur par défaut pour tout le site.

Deux limites à garder en tête. Les mises en page changent, donc les dessins montrent quels éléments apparaissent, pas les pixels exacts. Et le contrôle lit le HTML sans exécuter de scripts, ce qui est aussi la façon de travailler des récupérateurs d’aperçus. Les balises insérées par JavaScript manqueront ici et elles manqueront aussi sur les réseaux.