Aperçu Open Graph — vérifiez les cartes de partage social

Les balises Open Graph décident de l’apparence de votre page à chaque partage : une image ou un titre manquant vous coûte des clics et des partages. Collez vos balises og:/twitter:card ou une URL pour prévisualiser la carte Facebook, X et style WhatsApp, repérer les champs manquants et corriger le ratio de l’image. Étapes : collez les balises ou chargez une URL, lisez les trois cartes et le tableau des champs, puis complétez ce qui manque. Le mode coller s’exécute sur votre appareil ; le mode URL récupère la page une fois et ne la stocke pas. Exemple : une page avec une og:image 1200×630 partagée en grande carte.

Coller les balises

Comment ça marche

L’aperçu analyse les balises og:/twitter: que vous collez (ou les extrait du HTML récupéré pour une URL) et dessine trois cartes. Facebook affiche l’image 1.91:1 à gauche avec titre, description et domaine dessous. X suit twitter:card : summary_large_image montre une grande image en haut, summary une petite à côté du texte. Les applis de messagerie comme WhatsApp montrent une grande carte. Le tableau marque og:title, og:description et og:image comme obligatoires et liste les champs optionnels.

Règles suivies par l’aperçu

Voici les tailles et replis utilisés par les plateformes, selon le protocole Open Graph et la documentation X Cards.

Champs obligatoires : og:title, og:description et og:image. Les manquants sont signalés pour être corrigés avant publication.
og:image en 1200×630 px (1.91:1) fonctionne sur toutes les grandes plateformes. Facebook accepte aussi les recadrages 2:1 et 1:1 ; les petites images sont souvent agrandies et floues.
twitter:card summary_large_image va avec une grande image ; summary avec une petite. Sans twitter:card, les plateformes déduisent une carte summary des balises og:.
Quand og:title ou og:image manque, les plateformes utilisent le titre HTML, la meta description et la première image de la page.
La taille est mesurée en chargeant l’image dans le navigateur ; si elle ne se charge pas (bloquée, hors ligne ou mauvaise URL), la vérification rapporte « inconnu ».

Exemple

Les balises d’exemple décrivent un article avec une og:image 1200×630 et twitter:card summary_large_image. L’aperçu montre une carte Facebook avec l’image à gauche, une grande carte X, une carte style WhatsApp et un tableau où tous les champs obligatoires sont présents.

Bonnes utilisations

Avant de publier un article ou une page d’atterrissage, collez les balises une fois et confirmez que la carte s’affiche bien sur Facebook, X et les applis de messagerie.
Quand un lien partagé ne montre pas d’image ou une image recadrée, collez les balises og: pour voir si og:image manque ou a un mauvais ratio.
Après une mise à jour de CMS ou de thème, récupérez l’URL en direct et vérifiez que les balises og: correspondent toujours à la page.

Frequently asked questions

Que se passe-t-il si une page n’a pas de balises Open Graph ?

Facebook, X et WhatsApp construisent l’aperçu avec le titre HTML, la meta description et la première image de la page. La carte peut être incomplète ou montrer la mauvaise image, d’où l’existence des champs og: obligatoires.

Quelle taille pour og:image ?

La taille sûre est 1200×630 px, un ratio 1.91:1 accepté par toutes les grandes plateformes. Facebook prend désormais aussi en charge les recadrages 2:1 et 1:1. Les images très petites sont souvent agrandies et deviennent floues.

Quel est le lien entre twitter:card et les balises og: ?

twitter:card choisit la mise en page : summary_large_image montre une image large, summary une petite. Quand twitter:title, twitter:description ou twitter:image manquent, X utilise la balise og: correspondante.

Que fait la plateforme si og:image manque ?

Elle utilise la première image trouvée dans le HTML de la page, ou affiche la carte sans image. Une og:image manquante est la cause la plus fréquente d’un lien partagé sans image d’aperçu.

Pourquoi la vérification du ratio indique « inconnu » ?

L’aperçu tente de charger og:image avec un chargement d’image du navigateur pour lire sa taille réelle. Quand l’image est bloquée, hors ligne, lente ou que le serveur refuse la requête, la taille ne peut pas être lue et la vérification indique inconnu.

Mes balises sont-elles envoyées quelque part ?

Non. En mode coller, l’analyse et l’aperçu se font sur votre appareil. Le mode URL récupère la page une fois via notre worker et ne la stocke pas.

Questions ou retours

Quelque chose n’est pas clair, cassé ou manquant ? Rédigez un message ci-dessous — nous lisons chaque note.