La balise og:image est l’une des balises meta les plus déterminantes de votre page : c’est la vignette qui s’affiche lorsque quelqu’un partage votre URL sur Facebook, LinkedIn, WhatsApp, Slack, Discord ou X. Mais une règle piège constamment les développeurs : l’URL placée dans og:image **doit être absolue**. Un chemin relatif échouera silencieusement et votre aperçu de lien n’affichera aucune image. Ce guide explique pourquoi cette contrainte existe, ce que « URL absolue » signifie réellement et comment la configurer correctement.
Qu’est-ce que og:image et pourquoi est-ce important ?
Open Graph est un protocole introduit par Facebook en 2010 qui vous permet de contrôler l’apparence d’une URL lorsqu’elle est partagée sur les plateformes sociales. La balise meta `og:image` définit l’image d’aperçu - la grande vignette qui attire l’attention dans un fil d’actualité, un message de chat ou une carte de lien. Elle est aujourd’hui prise en charge par pratiquement toutes les plateformes qui génèrent des aperçus de liens : Facebook, LinkedIn, WhatsApp, Telegram, Discord, Slack, iMessage et bien d’autres.
Sans og:image valide, les plateformes n’affichent aucune image ou tentent d’en extraire une au hasard dans la page - généralement un élément sans rapport ou trop petit pour un rendu propre. Une og:image bien conçue peut augmenter fortement le taux de clic sur le contenu partagé, ce qui en fait l’une des balises meta les plus rentables que vous puissiez ajouter.
La syntaxe de base
<meta property="og:image" content="https://example.com/images/article-cover.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A descriptive alt text for the preview image" />Note
Pourquoi og:image exige une URL absolue
Lorsqu’un utilisateur partage un lien sur Facebook, LinkedIn ou WhatsApp, le robot de la plateforme visite cette URL pour lire ses balises meta. Point crucial : ce robot est un client HTTP indépendant, il n’a aucune notion de « la page d’où il vient ». Quand il lit un chemin relatif comme `/images/cover.jpg`, il n’a aucune URL de base pour le résoudre, et donc soit il ignore la balise, soit il renvoie une erreur.
Une URL absolue, à l’inverse, est autonome. Elle contient le protocole, le domaine et le chemin complet - tout ce dont le robot a besoin pour récupérer l’image dans n’importe quel contexte, sans dépendre de la page qu’il vient de lire. C’est pourquoi la documentation Open Graph indique explicitement qu’og:image doit être une URL absolue, et pourquoi toutes les grandes plateformes imposent cette règle.
L’URL d’og:image doit être une URL absolue. Les URL relatives, les URL relatives au protocole et les URI de données ne sont pas prises en charge.
Les trois formats d’URL et ceux qui fonctionnent
| Format d’URL | Exemple | Fonctionne pour og:image ? |
|---|---|---|
| URL absolue | https://example.com/og.jpg | ✓ Oui - fonctionne toujours |
| URL relative au protocole | //example.com/og.jpg | ✗ Non - schéma manquant |
| Chemin relatif à la racine | /images/og.jpg | ✗ Non - pas de domaine |
| Chemin relatif | images/og.jpg | ✗ Non - ni domaine ni racine |
| URI de données | data:image/png;base64,… | ✗ Non - ce n’est pas une URL |
Warning
Ce que « URL absolue » signifie réellement
Une URL absolue identifie complètement l’emplacement d’une ressource sur internet, quel que soit le contexte dans lequel elle apparaît. Elle se compose de quatre éléments, tous obligatoires :
- Schéma - le protocole : `https://` (utilisez toujours HTTPS ; les images HTTP peuvent être bloquées par les règles de contenu mixte sur les pages HTTPS)
- Hôte - votre nom de domaine : `example.com` ou `www.example.com`
- Chemin - l’emplacement du fichier : `/images/og-cover.jpg`
- Facultatif : port - nécessaire uniquement sur un port non standard (par ex. `:8080`). Ne l’incluez pas pour un site de production.
https://example.com/images/og-cover.jpg
│ │ │
│ │ └-- chemin vers le fichier image
│ └-------------- nom d’hôte (votre domaine)
└---------------------- schéma (toujours https://)HTTPS ou HTTP
Utilisez toujours `https://` dans l’URL de votre og:image. Si votre og:image pointe vers une URL HTTP alors que votre page est servie en HTTPS, les navigateurs et certains robots bloqueront la requête de contenu mixte. Facebook, LinkedIn et WhatsApp récupèrent tous les images en HTTPS et échoueront silencieusement, ou n’afficheront aucune image, si votre URL utilise HTTP.
Tip
Comment générer la bonne URL absolue selon le framework
La cause la plus fréquente des bogues d’URL relative est que les développeurs construisent la valeur d’og:image par concaténation de chaînes sans inclure explicitement l’origine. Voici le bon schéma pour les frameworks et environnements les plus courants.
Next.js (App Router)
Avec Next.js 13+ et l’App Router, utilisez la propriété `metadataBase` dans votre layout racine. Elle indique à Next.js quelle origine utiliser pour résoudre les chemins d’image relatifs de `openGraph.images`.
import type { Metadata } from 'next';
export const metadata: Metadata = {
metadataBase: new URL('https://example.com'), // ← définit la base
openGraph: {
images: ['/images/og-cover.jpg'], // Next.js résout en URL absolue
},
};Sans `metadataBase`, Next.js produira un chemin relatif dans le HTML et les robots sociaux ne pourront pas charger l’image. C’est l’une des configurations les plus souvent oubliées dans les déploiements Next.js.
Next.js (Pages Router)
Avec le Pages Router et `next/head`, vous devez construire manuellement l’URL absolue complète, généralement via une variable d’environnement pour l’origine du site.
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? 'https://example.com';
<Head>
<meta
property="og:image"
content={`${SITE_URL}/images/og-cover.jpg`}
/>
</Head>HTML statique / sites statiques
Aucune magie de framework ici : écrivez directement l’URL complète. La seule variable à surveiller est d’utiliser le domaine de production, et non localhost.
<meta property="og:image" content="https://example.com/images/og-cover.jpg" />WordPress
Des extensions comme Yoast SEO, Rank Math ou All in One SEO génèrent automatiquement des URL absolues d’og:image en combinant `home_url()` avec le chemin de l’image téléversée. Si vous définissez og:image manuellement dans un thème, utilisez `get_site_url()` pour construire l’URL absolue plutôt que de coder le domaine en dur.
$og_image = get_site_url() . '/wp-content/uploads/og-cover.jpg';
echo '<meta property="og:image" content="' . esc_attr($og_image) . '" />';Approche par variable d’environnement (recommandée pour toute stack)
Coder le domaine en dur est fragile : les environnements de préproduction et de production utilisent des domaines différents, et une faute de frappe casse les aperçus partout. Le schéma le plus propre consiste à stocker l’URL de base du site dans une variable d’environnement et à la référencer lors de la construction des valeurs d’og:image.
NEXT_PUBLIC_SITE_URL=https://example.comexport const SITE_URL =
process.env.NEXT_PUBLIC_SITE_URL ?? 'https://example.com';
export function absoluteOgImage(path: string): string {
// Garantit que le chemin commence par /
const normalized = path.startsWith('/') ? path : `/${path}`;
return `${SITE_URL}${normalized}`;
}
// Utilisation :
// absoluteOgImage('/images/og-cover.jpg')
// → 'https://example.com/images/og-cover.jpg'Optimiseur de texte d’aperçu Open Graph
Vérifiez la longueur de og:title et og:description, le risque de troncature et la qualité du texte de l’aperçu social - instantanément dans votre navigateur.
Exigences propres à WhatsApp pour og:image
Les aperçus de liens WhatsApp sont générés par son propre robot, plus strict que ceux de Facebook ou LinkedIn sur plusieurs points. Si votre og:image fonctionne sur Facebook mais pas sur WhatsApp, l’une de ces contraintes en est généralement la cause.
- URL HTTPS absolue - comme sur toutes les autres plateformes ; WhatsApp ne suit pas les redirections de HTTP vers HTTPS.
- Image accessible publiquement - aucune authentification, aucune protection anti-bots bloquant les plages d’IP du robot WhatsApp.
- Taille minimale : 300×200 px - les images plus petites sont souvent ignorées par le générateur d’aperçus WhatsApp.
- Poids maximal : ~300 Ko - le robot WhatsApp a un délai très court pour récupérer les images. Les images volumineuses expirent ou sont ignorées.
- Format JPEG ou PNG - la prise en charge de WebP varie selon la version et la plateforme WhatsApp. Privilégiez JPEG pour une compatibilité maximale.
- og:image:width et og:image:height fortement recommandées - elles permettent à WhatsApp de dimensionner le conteneur d’aperçu avant le téléchargement.
Warning
Configuration og:image recommandée pour WhatsApp
<!-- og:image principal - doit être une URL HTTPS absolue -->
<meta property="og:image" content="https://example.com/og/article-cover.jpg" />
<!-- Compléments fortement recommandés -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Titre de l’article ou brève description" />
<!-- Nécessaires pour que WhatsApp affiche une carte complète (et non une simple URL) -->
<meta property="og:title" content="Le titre de votre page" />
<meta property="og:description" content="Brève description du contenu de la page." />
<meta property="og:url" content="https://example.com/votre-page" />Générateur de balises meta
Générez un bloc complet Open Graph, Twitter Card et balises meta standard en quelques secondes - avec aperçu en direct et avertissements d’audit SEO.
Erreurs fréquentes et comment les corriger
Même des développeurs expérimentés répètent les mêmes erreurs avec og:image. Voici les problèmes les plus fréquents et leurs corrections exactes.
Erreur 1 : utiliser un chemin relatif
<meta property="og:image" content="/images/og-cover.jpg" /><meta property="og:image" content="https://example.com/images/og-cover.jpg" />Erreur 2 : utiliser localhost dans un build de production
Cela arrive généralement lorsqu’une variable d’environnement de préproduction ou de développement local est validée dans le dépôt sans être remplacée pour la production.
<meta property="og:image" content="http://localhost:3000/og.jpg" />Erreur 3 : aucune og:image du tout
Sans og:image, les plateformes cherchent une image dans le contenu de la page - souvent avec de mauvais résultats. Fournissez toujours une og:image explicite sur chaque page susceptible d’être partagée. Vous pouvez utiliser l’Analyseur de balises meta d’Aback pour auditer instantanément n’importe quelle URL en ligne et vérifier si og:image est présente et bien formatée.
Erreur 4 : l’image renvoie un statut 4xx ou 5xx
Une URL absolue correcte en apparence mais cassée en pratique (404, 403, 500) produira le même résultat qu’aucune image : un aperçu vide. Vérifiez toujours que l’URL de l’image renvoie un 200 OK avec le bon en-tête `Content-Type`.
Erreur 5 : l’image est derrière une authentification
Les robots sociaux n’envoient ni cookie ni en-tête d’authentification. Si l’URL de votre og:image exige une connexion, ou se trouve sur un serveur de préproduction protégé par une authentification HTTP basique, le robot recevra un 401 ou le HTML de la page de connexion au lieu de l’image. Les fichiers og:image doivent toujours être accessibles publiquement, même lorsque la page elle-même est derrière un paywall.
Erreur 6 : de mauvaises dimensions d’image
Les images trop petites (moins de 200×200 px) peuvent être ignorées. Les images aux ratios inhabituels peuvent être recadrées ou affichées avec des bandes. Les dimensions universellement sûres sont 1200×630 px au ratio 1,91:1. Vous pouvez générer une og:image au bon format en quelques secondes avec le Générateur d’images OG.
| Problème | Symptôme | Correction |
|---|---|---|
| Chemin relatif | Aucune image au partage | Préfixez avec https://votredomaine.com |
| URL localhost | Aucune image au partage | Utilisez le domaine de production ; vérifiez les variables d’environnement |
| HTTP (au lieu de HTTPS) | Aucune image ou erreur de contenu mixte | Servez l’image en HTTPS |
| Image 404/403 | Aucune image au partage | Corrigez le chemin ou les permissions d’accès |
| Image protégée par authentification | Aucune image au partage | Déplacez l’image vers un chemin public du CDN |
| Mauvaises dimensions | Aperçu recadré ou absent | Utilisez un JPEG ou PNG de 1200×630 px |
| Pas d’og:image:width/height | Aperçu lent ou absent sur WhatsApp | Ajoutez og:image:width et og:image:height |
Comment vérifier que votre og:image est correcte
Configurer correctement la balise dans le code est une chose ; confirmer qu’elle fonctionne réellement en est une autre. Voici les vérifications les plus rapides.
Utilisez l’Analyseur de balises meta
L’Analyseur de balises meta d’Aback Tools vous permet de saisir n’importe quelle URL en ligne et de voir toutes les balises meta qu’elle émet, y compris og:image. Il vérifie la présence de la valeur, le caractère absolu de l’URL et signale les problèmes de format courants. C’est la vérification initiale la plus rapide.
Utilisez le Sharing Debugger de Facebook
Le Sharing Debugger de Facebook (`developers.facebook.com/tools/debug`) récupère et affiche les données Open Graph de n’importe quelle URL, montre exactement quelle image apparaîtra et permet de forcer un nouveau scan pour vider le cache. C’est la source de référence pour les aperçus Facebook et Instagram.
Utilisez le Post Inspector de LinkedIn
Le Post Inspector de LinkedIn (`linkedin.com/post-inspector`) remplit la même fonction pour les aperçus LinkedIn. Il est particulièrement utile car le comportement du robot LinkedIn diffère de celui de Facebook dans la gestion du cache et des redirections HTTPS.
Inspectez directement le code HTML
Affichez le code source (`Ctrl+U` / `Cmd+U`) ou utilisez les DevTools du navigateur pour lire le HTML brut. Trouvez la balise `og:image` et copiez sa valeur. Si elle ne commence pas par `https://`, elle échouera pour tous les robots.
Testez l’URL de l’image indépendamment
Collez l’URL de l’og:image directement dans un onglet du navigateur. Si vous obtenez un 404, une page de connexion ou autre chose que l’image, les robots recevront la même réponse. L’URL doit renvoyer l’image brute avec un 200 OK.
Analyseur de balises meta
Auditez n’importe quelle URL en ligne : présence d’og:image, format d’URL absolue, balises Twitter Card et plus de 15 autres signaux SEO en un seul scan.
og:image selon les plateformes
Chaque plateforme traite og:image un peu différemment. Comprendre ces différences vous aide à écrire une seule balise meta qui fonctionne partout.
| Plateforme | Taille min. | Taille recommandée | Format | Cache |
|---|---|---|---|---|
| Facebook / Instagram | 200×200 px | 1200×630 px | JPG, PNG, GIF | Persistant ; utilisez le Debugger pour le vider |
| 200×200 px | 1200×627 px | JPG, PNG | Persistant ; utilisez le Post Inspector | |
| 300×200 px | 1200×630 px | JPG, PNG | Par appareil ; difficile à vider | |
| Telegram | 200×200 px | 1200×630 px | JPG, PNG, WebP | Durable ; régénéré au repartage |
| Discord | 256×256 px | 1200×630 px | JPG, PNG, GIF | Court ; rafraîchissement automatique |
| Slack | 500×500 px | 1200×630 px | JPG, PNG | Par espace de travail ; vidé après ~30 jours |
| X (Twitter) | 144×144 px | 1200×600 px | JPG, PNG, WebP | ~7 jours ; utilisez le Card Validator pour le vider |
Note
Les og:images dynamiques
Un schéma de plus en plus courant consiste à générer les og:images dynamiquement par page - par exemple, l’og:image d’un article peut inclure le titre et le nom de l’auteur, générés côté serveur en PNG. Des frameworks comme Next.js le permettent avec l’API `ImageResponse` (`next/og`). Le résultat reste une URL absolue : la génération dynamique se fait sur le serveur et les robots ne voient qu’une URL d’image `https://` normale.
Si vous préférez une approche sans code, le Générateur d’images OG vous permet de concevoir une image d’aperçu social 1200×630 px avec votre propre texte, vos couleurs et votre mise en page, puis de la télécharger en PNG - prête à être envoyée sur votre CDN et référencée comme URL absolue.
og:image et le jeu complet de balises Open Graph
og:image fonctionne rarement seule. Les plateformes combinent l’ensemble des balises Open Graph pour décider d’afficher une carte de lien enrichie ou une simple URL. Si vous ajoutez og:image à une page, voici les autres balises à inclure en même temps :
- og:title - le titre de la carte de lien (correspond en général à `<title>` mais peut être plus court)
- og:description - un résumé d’une à deux phrases sous le titre ; vérifiez sa longueur avec l’Optimiseur de texte d’aperçu OG
- og:url - l’URL canonique de la page (utilisez la même que dans votre `<link rel="canonical">`)
- og:type - `website` pour la plupart des pages ; `article` pour les articles de blog
- og:site_name - le nom de votre site ou de votre marque
- og:image - l’URL absolue de votre image d’aperçu (le sujet de cet article)
- og:image:width et og:image:height - fortement recommandées pour un affichage plus rapide
- og:image:alt - texte alternatif descriptif pour l’accessibilité et un contexte lisible par les IA
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:title" content="Your Article Title" />
<meta property="og:description" content="A brief, compelling description under 155 characters." />
<meta property="og:url" content="https://example.com/blog/your-article" />
<meta property="og:image" content="https://example.com/og/your-article.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Visual description of the preview image" />
<!-- Repli Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og/your-article.jpg" />Vous pouvez générer et valider tout ce bloc - y compris og:image avec la vérification d’URL absolue - avec le Générateur de balises meta, ou valider une page existante avec l’Analyseur de balises meta.
Key takeaways
- og:image doit être une URL absolue : les chemins relatifs, les URL relatives au protocole et les URI de données échouent tous silencieusement.
- Utilisez toujours https:// : les images HTTP sont bloquées par les règles de contenu mixte et de nombreux robots les refusent.
- La taille recommandée pour og:image est 1200×630 px (ratio 1,91:1) et un poids inférieur à ~300 Ko en JPEG.
- Ajoutez og:image:width et og:image:height pour accélérer l’affichage de l’aperçu sur WhatsApp et Telegram.
- Dans l’App Router de Next.js, définissez metadataBase pour éviter les chemins relatifs ; dans le Pages Router, construisez l’URL complète avec une variable d’environnement.
- Vérifiez avec l’Analyseur de balises meta, le Sharing Debugger de Facebook et le Post Inspector de LinkedIn avant publication.
- Les robots ne peuvent atteindre ni localhost, ni un serveur de préproduction protégé, ni une image renvoyant 4xx/5xx : les fichiers og:image doivent être accessibles publiquement.