Aperçu de partage

Comment l’utiliser

1. Saisissez l’adresse d’une page, comme example.com/blog/launch, et cliquez sur Vérifier. Pas de page sous la main ? Essayez l’un des exemples.
2. Voyez la carte que chaque application construit pour elle : X, Facebook, LinkedIn, Slack, Discord, WhatsApp et iMessage. Un point vert signifie que la carte est correcte ; un point orange ou rouge indique sous la carte ce qui ne va pas.
3. Ouvrez Afficher corrections et balises pour voir chaque balise vérifiée une par une. Les balises manquantes sont prêtes à coller dans votre <head> : copiez-les, remplissez les valeurs, publiez le changement et vérifiez à nouveau.

L’adresse de la vérification est dans la barre d’adresse de votre navigateur : vous pouvez l’envoyer à la personne qui s’occupe de la page.

Comment fonctionnent les aperçus de liens

Quand vous collez un lien dans un post ou un chat, le robot de l’application récupère la page une fois et lit les balises de son <head>. Il n’exécute pas de JavaScript, ne se connecte pas et n’accepte pas les bandeaux de cookies : les balises ajoutées par un script après le chargement de la page lui sont invisibles. Le vérificateur récupère la page de la même façon : une requête, pas de JavaScript, et des redirections suivies comme un robot les suit.

Chaque application lit les mêmes quelques balises, avec ses propres solutions de repli :

• Open Graph (og:title, og:description, og:image, og:url, og:site_name) est ce que lisent Facebook, LinkedIn, Slack, Discord, WhatsApp et iMessage.
• X lit d’abord twitter:card, twitter:title, twitter:description et twitter:image, puis se rabat sur les balises Open Graph. Sans twitter:card, il affiche une petite carte de résumé, même quand il y a une image.
• Quand og:title manque, la plupart des applications utilisent le <title>. Quand og:description manque, certaines utilisent la meta description et d’autres n’affichent aucun texte.
• Discord colore le bord de sa carte avec theme-color.

Les aperçus ici suivent ces règles. Chaque application change aussi son design de temps en temps : considérez-les comme proches, pas exacts.

L’image d’aperçu

Une seule image fonctionne partout : 1200 × 630 pixels (1,91:1), en PNG ou JPEG, à une adresse https:// complète.

• En dessous de 600 pixels de large, Facebook et LinkedIn affichent une petite vignette au lieu d’une grande carte. En dessous de 200 × 200, Facebook n’affiche pas d’image.
• X accepte des images jusqu’à 5 Mo et Facebook jusqu’à 8 Mo. WhatsApp omet souvent les images de plus de 600 Ko environ : un JPEG bien compressé est le choix sûr.
• Le SVG n’est pris en charge par aucune des grandes applications.
• Une adresse relative comme /og.png ne fonctionne pas avec tous les robots. Écrivez l’URL complète.
• Les recadrages carrés sont fréquents (WhatsApp, iMessage pour les petits liens) : gardez l’essentiel de l’image près du centre.

Le vérificateur récupère aussi l’image, la mesure à partir de l’en-tête du fichier et l’affiche dans les aperçus.

Pourquoi un aperçu semble encore ancien

Les applications mettent en cache ce qu’elles ont récupéré, de quelques minutes à environ une semaine. Après avoir corrigé vos balises, le vérificateur affiche tout de suite la nouvelle version, mais un lien déjà partagé garde l’ancien aperçu jusqu’à ce que l’application le récupère à nouveau. Le Sharing Debugger de Facebook et le Post Inspector de LinkedIn récupèrent une page à la demande. Dans Slack, un lien publié à nouveau après un moment obtient un nouvel aperçu. Ajouter une chaîne de requête, comme ?v=2, fait que n’importe quelle application le traite comme un nouveau lien.

Questions fréquentes

Pourquoi mon aperçu n’a-t-il pas d’image ?

Les causes habituelles, dans l’ordre : il n’y a pas de balise og:image, l’adresse de l’image est relative ou renvoie une erreur, l’image est trop petite ou trop grande, ou la balise est ajoutée par JavaScript après le chargement de la page. La ligne sous chaque carte indique la cause qui s’applique.

De quelles balises ai-je besoin au minimum ?

og:title, og:description, og:image avec une image de 1200 × 630, og:url et twitter:card réglé sur summary_large_image. Le Générateur de balises meta les écrit pour vous.

Peut-il vérifier des pages qui demandent une connexion ?

Non. Les robots ne se connectent pas : une page derrière une connexion n’a d’aperçu nulle part. Le vérificateur voit ce qu’ils voient, et ne récupère que des adresses publiques : les réseaux privés et internes sont refusés.

Le vérificateur stocke-t-il les pages qu’il récupère ?

Non. Il récupère la page et ses images quand vous cliquez sur Vérifier et vous envoie ce qu’il a trouvé. Le résultat est gardé deux minutes, pour qu’une deuxième vérification de la même adresse soit instantanée, puis supprimé. Il lit jusqu’à 2 Mo de HTML et 8 Mo par image, et abandonne au bout de 8 secondes.

Pourquoi dit-il que ma page répond 403 alors qu’elle s’ouvre bien dans mon navigateur ?

Certains sites et pare-feu bloquent les requêtes qui ne viennent pas d’un navigateur, ou celles des grands robots qu’ils connaissent. Si le vérificateur reçoit un 403, Facebook ou LinkedIn peuvent en recevoir un aussi : vérifiez les réglages anti-bots de votre pare-feu.

Y a-t-il une limite ?

Vingt vérifications par minute depuis une même adresse. Chaque site est aussi récupéré au plus 60 fois par minute pour l’ensemble des utilisateurs du vérificateur, afin qu’il ne puisse pas servir à inonder un site. Les résultats sont gardés deux minutes : la même adresse vérifiée peu après revient immédiatement ; cliquer à nouveau sur Vérifier sur la page que vous regardez la récupère toujours à neuf.