Ajoutez les balises Open Graph essentielles

Q: Et si ma page a déjà un ` ` et une meta description ?

Les moteurs de recherche lisent et . Les plateformes sociales lisent og:title et og:description. Ce sont des champs séparés avec des intentions séparées (snippets de recherche vs aperçus de partage), donc dupliquez-les plutôt que de sauter les versions OG.

Ce que vérifie ce contrôle

Analyse le <head> de la page à la recherche de quatre balises meta : og:title, og:description, og:image et og:url. Ce sont les propriétés Open Graph minimales que lisent toutes les grandes plateformes sociales, de messagerie et de chat lorsque quelqu’un colle votre lien.

Pourquoi c’est important

Lorsque les balises manquent, l’aperçu du lien sur Facebook, LinkedIn, X, Slack, Discord, iMessage, WhatsApp et Telegram retombe sur une simple URL avec, au mieux, un titre de page scrappé — pas d’image d’aperçu, pas de description. Le taux de clic d’une carte sans aperçu est une fraction de celui d’une carte avec une image 1200×630.

Open Graph alimente aussi le panneau « À propos de ce résultat » de Google et les cartes de citation des moteurs IA. Une page sans balises OG apparaît comme un lien brut là où vos concurrents apparaissent en carte complète.

Comment le corriger

Placez les quatre balises dans le <head> de chaque page publique. Les valeurs peuvent refléter votre <title> et votre meta description, mais doivent être pensées pour le social — un brin plus accrocheuses, une image choisie à la main.

<head>
  <meta property="og:title" content="Audit SEO gratuit en 60 secondes — MetricSpot">
  <meta property="og:description" content="Voyez ce que les agents IA et Google voient sur votre site. 91 contrôles, sans inscription.">
  <meta property="og:image" content="https://metricspot.com/og/home.png">
  <meta property="og:url" content="https://metricspot.com/">
  <meta property="og:type" content="website">
</head>

Astro / Next.js — générez les valeurs par page depuis le frontmatter :

---
const { title, description, ogImage } = Astro.props;
const url = Astro.url.href;
---
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={new URL(ogImage, Astro.site).href} />
<meta property="og:url" content={url} />

WordPress — Yoast SEO, Rank Math et SEOPress produisent tous ces balises automatiquement. Ouvrez l’un d’eux, définissez les paramètres par défaut sociaux dans SEO → Social, puis surchargez par publication si nécessaire.

Règles d’image. PNG ou JPG, ≥ 1200×630 (1.91:1), moins de 5 Mo. Voir la page dédiée Image Open Graph pour les détails de taille et de format.

Testez avant de publier — collez l’URL dans le Sharing Debugger de Facebook et le Post Inspector de LinkedIn, puis cliquez sur « Scrape Again » pour invalider le cache.

Questions fréquentes

Ai-je besoin à la fois des balises Open Graph et Twitter Card ?

X (anciennement Twitter) retombe sur Open Graph s’il n’y a pas de balises twitter:, donc OG seul couvre la majeure partie du terrain. Ajoutez les balises Twitter Card uniquement si vous voulez une image ou un résumé différent sur X — voir Balises Twitter Card.

Et si ma page a déjà un `<title>` et une meta description ?

Les moteurs de recherche lisent <title> et <meta name="description">. Les plateformes sociales lisent og:title et og:description. Ce sont des champs séparés avec des intentions séparées (snippets de recherche vs aperçus de partage), donc dupliquez-les plutôt que de sauter les versions OG.

Pourquoi mon aperçu reste-t-il incorrect après l’ajout des balises ?

Facebook, LinkedIn et Slack mettent agressivement en cache les aperçus scrappés — parfois pendant des semaines. Passez l’URL dans le debugger de la plateforme et cliquez sur le bouton « Re-scrape ». Vos changements n’apparaîtront pas tant que le cache n’aura pas été purgé.