Aperçu Open Graph — X, Facebook, LinkedIn, Slack, Discord
Récupérez les balises Open Graph par URL ou collez le HTML. Affiche la carte sur cinq plateformes à leur largeur réelle.
1200 × 630 (1.91:1) — one image serves every platform
Vue d’ensemble
Une carte de partage est la première chose que la plupart des gens voient d’une page, et elle est rendue par cinq plateformes différentes avec cinq mises en page différentes. Cet outil les dessine toutes à leur largeur réelle de fil à partir des mêmes balises : « le titre est-il coupé sur LinkedIn ? » devient donc quelque chose que vous regardez au lieu de le deviner.
Le bloc de balises généré est le balisage exact à coller dans votre <head>, avec
les valeurs de content déjà échappées pour le HTML.
Utilisation
- Placez l’URL de la page dans le champ du haut et appuyez sur fetch meta — notre serveur lit ses balises et remplit les champs. Ou appuyez sur paste HTML et collez la source à la place, ce qui reste entièrement dans votre onglet.
- Ajustez à la main le titre, la description, le nom du site et l’URL de l’image pour essayer des variantes.
- Basculez entre ALL et une plateforme unique pour comparer, ou concentrez-vous sur celle qui vous intéresse.
- Surveillez les compteurs ; ils passent à l’ambre quand une valeur est assez longue pour être tronquée.
- Appuyez sur copy tags et collez le résultat dans le
<head>de la page.
Les balises qui comptent vraiment
Cinq plateformes, un seul jeu de balises. Ce que chacune lit, dans l’ordre où elle le lit :
| Balise | Effet | Remarques |
|---|---|---|
og:title | Titre de la carte | Se replie sur <title>. Environ 60 caractères avant troncature sur les cartes les plus étroites |
og:description | Texte du corps | Se replie sur <meta name="description">. Environ 155 caractères |
og:image | L’image | URL absolue obligatoire. Aucun robot ne résout un chemin relatif |
og:url | URL canonique du partage | Les plateformes dédoublonnent sur cette valeur : une valeur erronée fusionne donc l’engagement de deux pages |
og:type | website ou article | Modifie rarement le rendu ; article active des champs supplémentaires sur certaines plateformes |
og:site_name | Petite étiquette au-dessus ou en dessous du titre | Ignorée par X |
twitter:card | summary ou summary_large_image | Détermine si X affiche une vignette ou une image pleine largeur |
twitter:image | Image pour X | Facultative — X se replie sur og:image |
L’erreur de loin la plus fréquente est un og:image relatif. Il s’affiche
correctement dans tous les outils d’aperçu locaux, qui le résolvent par rapport à
l’URL de la page, et il produit partout ailleurs une carte sans image, parce que
les robots ne le résolvent pas.
La deuxième erreur la plus fréquente est un og:url qui pointe vers la mauvaise
variante : avec un paramètre de suivi, ou vers http:// alors que le site sert en
https://. Les plateformes indexent leur cache sur cette valeur, ce qui rend
aussi la carte difficile à corriger.
Le cache, ou pourquoi votre correction n’est pas apparue
Chaque plateforme met en cache la carte qu’elle a construite la première fois qu’une URL a été partagée, et aucune ne recharge la page selon un calendrier que vous maîtrisez. Modifier les balises ne met pas à jour une carte déjà partagée.
Chaque plateforme a sa propre façon de forcer un rafraîchissement :
- Facebook et Instagram — le Sharing Debugger, bouton « Scrape Again »
- LinkedIn — le Post Inspector
- X — plus aucun débogueur public ; changer l’URL est la voie fiable
- Slack — met en cache environ 30 minutes, puis recharge
- Discord — met en cache agressivement ; changer l’URL est le remède pratique
D’où l’argument en faveur d’une vérification de la carte avant le premier partage plutôt qu’après. Une carte erronée qui s’est déjà propagée est un problème bien plus lourd qu’une carte erronée attrapée dans un aperçu.
Les contraintes d’image en pratique
1200 × 630 dans un rapport de 1,91:1 fonctionne sur les cinq plateformes et c’est la seule taille qui vaille la peine d’être produite. Les détails qui cassent les cartes :
- En dessous de 200 × 200, plusieurs plateformes refusent purement et simplement l’image.
- Au-delà d’environ 5 Mo, certains robots l’abandonnent au lieu de la redimensionner.
- Les PNG transparents se composent sur le fond que la plateforme utilise, lequel diffère entre thème clair et thème sombre. Employez une image opaque.
- Le texte près des bords est rogné, car chaque plateforme recadre la même image un peu différemment. Gardez tout ce qui est important dans les 80 % centraux.
- Une image derrière une authentification produit une carte vide. Les robots ne sont pas connectés et n’envoient pas vos cookies.
Exemples
- Auditer une page en ligne : collez son URL et appuyez sur fetch meta — les champs se remplissent depuis les balises de la page et vous voyez ce que les plateformes sociales construiront.
- Rédiger une nouvelle page : laissez l’image vide pour travailler sur le substitut, puis déposez l’URL réelle en 1200 × 630 quand elle existe.
- Titres longs : collez un titre de 90 caractères et regardez-le survivre sur X mais passer sur deux lignes sur Facebook.
Remarques
Les aperçus sont des reconstitutions fidèles de la carte de chaque plateforme aux largeurs qu’elles utilisent, pas des captures d’écran prises sur ces plateformes. Les plateformes ajustent leurs mises en page au fil du temps, et certaines appliquent leur propre cache — une carte déjà partagée peut conserver son ancienne image jusqu’à ce que vous la purgiez dans le débogueur de cette plateforme.
L’extraction des balises lit og:* d’abord et se replie sur twitter:*, puis sur
<title> et <meta name="description">, ce qui correspond à peu près à l’ordre
que les robots eux-mêmes suivent. Le même ordre s’applique que les balises
viennent de fetch meta ou du HTML collé.
La requête côté serveur suit au plus cinq redirections, lit au plus les premiers 512 ko de la page et refuse tout ce qui n’est pas du HTML. Seule une liste fixe de clés meta est renvoyée ; rien d’autre de la page n’est retransmis.