Ajoutez une image Open Graph

Q: Pourquoi mon image ne s'affiche-t-elle pas même après avoir ajouté la balise ?

Trois suspects habituels : (1) l'URL est relative (/og.png) au lieu d'absolue (https://example.com/og.png) — la plupart des plateformes exigent l'absolu, (2) l'image renvoie 404 ou 500, (3) la plateforme affiche un aperçu en cache d'une version antérieure. Passez l'URL dans le debugger de Facebook et re-scrappez.

Q: Ai-je besoin d'une image différente pour Twitter/X ?

Pas sauf si vous le voulez. X retombe sur og:image s'il n'y a pas de twitter:image, mais twitter:card doit être summary_large_image pour obtenir la mise en page en grande carte. Voir Balises Twitter Card.

Ce que vérifie ce contrôle

Cherche <meta property="og:image" content="..."> dans le <head> de la page. Le contrôle échoue lorsque la balise est absente, lorsque l’URL est relative (elle doit être absolue) ou lorsque l’image renvoie un code de statut différent de 200.

Pourquoi c’est important

L’image OG est le plus grand élément visuel d’une carte de lien partagée. Facebook, LinkedIn, Slack, Discord, iMessage, WhatsApp, Telegram, Mastodon, Bluesky et la plupart des lecteurs RSS l’affichent tous de la même façon : une carte avec l’image en haut et titre/description en dessous.

Un lien avec une image nette 1200×630 reçoit plusieurs fois plus de clics que le même lien sans image. Les replis sur URL brute paraissent cassés — la plupart des utilisateurs supposent que la page est morte.

L’image OG alimente aussi le panneau « À propos de ce résultat » de Google et les cartes de citation des moteurs IA, donc son absence est aussi un problème de SEO et de découvrabilité IA, pas seulement un problème social.

Comment le corriger

Placez une URL absolue vers un PNG ou JPG de 1200×630 dans le <head> de la page :

<meta property="og:image" content="https://example.com/og/home.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Capture d'écran de la page d'accueil MetricSpot">

Les sous-balises :width, :height et :alt sont optionnelles mais améliorent le rendu sur connexions lentes et l’accessibilité pour les lecteurs d’écran.

Règles de taille (spec Facebook — toutes les autres plateformes la suivent) :

Ratio 1.91:1 (1200×630 est la taille canonique).
Minimum 600×315 — tout ce qui est plus petit s’affiche comme un petit carré au lieu d’une grande carte.
Taille de fichier maximum 5 Mo.
Utilisez PNG pour les designs avec beaucoup de texte, JPG pour les photos.

Images OG dynamiques — générez automatiquement une image unique par article :

Vercel OG Image — @vercel/og, JSX → PNG en edge.
Astro — astro-og-canvas ou satori pour la génération au runtime ; pré-générez dans dist/og/*.png au build.
WordPress — Yoast Premium, Rank Math ou un plugin comme « WP OG Image Auto » superposent le titre du post sur un template.
Cloudinary / Imgix — transformations de superposition de texte sur une image template de base.

WordPress — définissez l’image à la une du post, et Yoast/Rank Math l’utiliseront automatiquement comme og:image.

Testez avant de publier — collez l’URL dans le Sharing Debugger de Facebook et le Post Inspector de LinkedIn. Cliquez sur « Re-scrape » pour rafraîchir le cache après modifications.

Questions fréquentes

Pourquoi mon image ne s’affiche-t-elle pas même après avoir ajouté la balise ?

Trois suspects habituels : (1) l’URL est relative (/og.png) au lieu d’absolue (https://example.com/og.png) — la plupart des plateformes exigent l’absolu, (2) l’image renvoie 404 ou 500, (3) la plateforme affiche un aperçu en cache d’une version antérieure. Passez l’URL dans le debugger de Facebook et re-scrappez.

Ai-je besoin d’une image différente pour Twitter/X ?

Pas sauf si vous le voulez. X retombe sur og:image s’il n’y a pas de twitter:image, mais twitter:card doit être summary_large_image pour obtenir la mise en page en grande carte. Voir Balises Twitter Card.

Et si ma page est dynamique et que le contenu change ?

Générez une nouvelle image au moment du build (Astro/Next.js — astro-og-canvas, @vercel/og) ou à la requête (fonctions edge). Pour l’e-commerce, la page produit doit utiliser une photo produit. Pour les articles de blog, une carte gabarit avec le titre de l’article.