Aperçu OG
Aperçu OG lit vos balises Open Graph et Twitter card et affiche la carte de lien qu’un robot d’exploration rendra réellement, remplacements compris — sans og:title, la carte reprend votre <title>, qui commence généralement par le nom du site. Il signale aussi les échecs silencieux : une URL d’image relative n’est tout simplement jamais récupérée.
acme.example
Tarifs
Trois formules, aucun minimum d’utilisateurs et une offre gratuite sans limite de durée.
acme.example
Tarifs
Trois formules, aucun minimum d’utilisateurs et une offre gratuite sans limite de durée.
Quels sont les problèmes avec ces balises ?
Comment fonctionne Aperçu OG ?
Une carte de lien est rendue par le robot d’exploration de quelqu’un d’autre, à partir des balises de votre page, et tout ce qui peut mal tourner le fait en silence. Rien ne lève d’exception, rien n’écrit de journal, et la page s’affiche parfaitement dans un navigateur — la carte est juste légèrement fausse, et le taux de clic légèrement plus faible, pour toujours.
La chaîne de repli est ce qui s’affiche réellement
Les plateformes n’exigent pas og:title. En son absence, elles utilisent <title>, qui sur la plupart des sites est le nom de la page précédé du nom du site — la carte affiche donc « Acme Analytics — Tarifs » là où elle devrait afficher « Tarifs ». L’aperçu ci-dessus résout la chaîne au lieu de ne montrer que ce qui est présent, et nomme la source d’où vient chaque champ, car « manquant » et « présent mais faux » demandent des corrections différentes.
L’échec qui ressemble à un succès
<meta property="og:image" content="/og/pricing.png"> est du HTML valide et complètement cassé. Les robots d’exploration ne résolvent pas les chemins relatifs par rapport à la page, donc l’image n’est jamais récupérée et la carte affiche un cadre gris. C’est la cause la plus fréquente d’une carte qui marche dans un aperçu local et n’affiche rien en production — et la raison pour laquelle une URL d’image relative est signalée comme critique plutôt que comme simple remarque de style.
Pourquoi cet outil analyse plutôt qu’il ne cherche des motifs
L’implémentation évidente est une expression régulière par balise, et elle casse dès la première vraie page : content="a > b" contient un > à l’intérieur d’un attribut entre guillemets, content='It's here' contient une apostrophe qui termine une analyse naïve, et <meta> peut être autofermée, non fermée, ou présenter ses attributs dans n’importe quel ordre. Le document est donc parcouru une seule fois par un analyseur qui connaît les guillemets et les éléments à texte brut — l’approche des outils JSON et XML de ce site.
Ce qu’il ne peut pas faire, c’est récupérer votre image, car cela impliquerait une requête réseau depuis une page qui n’en promet aucune. Il vérifie donc ce qui est vérifiable sans requête — l’URL est absolue, les dimensions déclarées sont assez grandes, le rapport hauteur/largeur est proche du 1.91:1 auquel chaque plateforme recadre, et le texte alternatif existe.
Balises du <head>
<meta property="og:title" content="Pricing" /> <meta property="og:image" content="/static/og/pricing.png" /> <meta name="twitter:card" content="summary" />
Constats
critical og:image "/static/og/pricing.png" is not an absolute URL.
Crawlers do not resolve relative paths.
warning og:description Missing. The card falls back to <meta description>.
warning og:image:alt Missing. Screen readers announce nothing.
info twitter:card "summary" renders a small square thumbnail.Balises du <head> → Constats
Balises du <head>
<meta property="og:title" content="Pricing" /> <meta property="og:image" content="/static/og/pricing.png" /> <meta name="twitter:card" content="summary" /> <title>Acme Analytics — Pricing</title> <meta name="description" content="Pricing for Acme Analytics." /> <link rel="canonical" href="https://acme.example/pricing" />
Constats
critical og:image "/static/og/pricing.png" is not an absolute URL. warning og:description Missing. warning og:url Missing. warning og:image:alt Missing. info og:type Missing, so it defaults to "website". info og:site_name Missing.
Quelles options et quels cas limites Aperçu OG prend en charge ?
| Paramètre | Type | Valeur par défaut | Comportement et cas limites |
|---|---|---|---|
| og:title | requis | repli sur <title> | Le titre de la carte. Sans cette balise, la carte reprend votre <title>, qui porte généralement le nom du site devant — la carte se lit alors comme la page d’accueil plutôt que comme la page. |
| og:description | requis | repli sur la meta description | Les deux lignes sous le titre. Une meta description est écrite pour un résultat de recherche ; le texte d’une carte s’adresse à quelqu’un qui décide de cliquer ou non, et ce n’est rarement la même phrase. |
| og:image | requis | aucune | Doit être une URL https absolue — les robots d’exploration ne résolvent pas les chemins relatifs. 1200×630 est la taille depuis laquelle chaque plateforme recadre ; en dessous de 600×315, la carte est agrandie et paraît floue. |
| og:image:alt | recommandé | aucune | Lu à voix haute par un lecteur d’écran et affiché quand l’image ne se charge pas. Pris en charge par toutes les grandes plateformes et presque toujours omis. |
| og:image:width / height | recommandé | détectées | Les déclarer permet au robot d’exploration de mettre en page la carte avant de télécharger l’image. Sans elles, la première lecture d’une page s’accompagne d’une seconde requête pour récupérer l’image. |
| og:url | recommandé | l’URL récupérée | L’adresse canonique de la page. Sans elle, une page accessible par deux URL répartit ses compteurs de partages entre les deux. |
| og:type | recommandé | website | « article » débloque les champs auteur et date de publication, et change la façon dont certains clients présentent la carte. |
| og:site_name | facultatif | nom d’hôte | Affiché au-dessus du titre par LinkedIn et plusieurs clients de messagerie. Sans cette balise, ils affichent le nom d’hôte. |
| twitter:card | recommandé | summary | summary_large_image affiche l’image sur toute la largeur ; summary affiche une petite vignette carrée. Une valeur non reconnue est traitée comme summary. |
| canonical | recommandé | aucune | Un <link rel="canonical"> n’est pas une balise OG et compte tout autant : c’est ce qui empêche une même page présente à deux adresses de se concurrencer elle-même. |
Questions fréquentes
Pourquoi mon image ne s’affiche-t-elle pas dans l’aperçu ?
Presque toujours une URL relative. og:image doit être absolue — https://acme.example/og/pricing.png, et non /og/pricing.png — car le robot d’exploration la récupère hors contexte et n’a aucune page à partir de laquelle résoudre le chemin. C’est pourquoi elle est signalée ici comme critique. La deuxième cause la plus fréquente est une image derrière une authentification, et la troisième, un CDN qui bloque le user agent de la plateforme.
J’ai mis à jour les balises, mais la carte n’a pas changé. Pourquoi ?
Les robots d’exploration mettent en cache. Facebook et LinkedIn conservent une carte pendant des jours, et X pendant environ une semaine. Le Sharing Debugger de Facebook comporte un bouton Scrape Again qui vide ce cache ; le Post Inspector de LinkedIn fait de même. Tant que vous ne l’avez pas fait, vous regardez les anciennes balises — voilà pourquoi une modification qui a bien été prise en compte peut sembler sans effet.
Quelle taille doit faire l’image ?
1200×630 pixels. C’est exactement 1.91:1, le rapport auquel chaque plateforme recadre, donc rien n’est rogné. En dessous de 600×315, l’image est agrandie et paraît floue ; beaucoup plus large, elle perd ses bords. JPEG pour les photographies, PNG pour les aplats et le texte, et restez sous environ 1 MB — certains clients ignorent les images plus lourdes plutôt que d’attendre.
Faut-il des balises Twitter si j’ai déjà Open Graph ?
X se replie sur Open Graph pour le titre, la description et l’image : les balises og:* seules suffisent donc à produire une carte. Ce que cela ne fait pas, en revanche, c’est choisir le bon type de carte : sans twitter:card, vous obtenez la petite vignette carrée summary plutôt que la grande image. Une balise de plus en vaut la peine, et twitter:title mérite d’être là quand le texte de la carte doit différer de l’aperçu du lien ailleurs.
Cet outil récupère-t-il ma page ou mon image ?
Non. Vous collez le balisage et il est analysé dans l’onglet — le panneau Réseau ne montre rien. C’est une contrainte délibérée, pas une limite : un outil qui récupérait votre image pourrait la mesurer, mais il serait aussi un serveur au courant de chaque URL que vous collez. Les vérifications faites ici sont celles qui n’exigent aucune requête : URL absolues, dimensions déclarées, rapport hauteur/largeur et texte alternatif.
Quelles plateformes lisent quelles balises ?
Open Graph est lu par Facebook, LinkedIn, Slack, WhatsApp, Discord, Telegram, Pinterest et — en repli — X. Les balises twitter:* de X priment là où elles sont présentes. Certains clients ajoutent leurs propres exigences : Slack veut une image à peu près carrée pour son unfurl, et Discord affiche une petite vignette pour les cartes summary et une bannière pleine largeur pour summary_large_image.