Une image Open Graph (ou OG Image) est l'image de prévisualisation qui s'affiche lorsque vous partagez un lien sur les réseaux sociaux comme Facebook, LinkedIn, Twitter ou dans les messageries comme WhatsApp et Slack.
Sans image Open Graph configurée, les réseaux sociaux affichent soit une image aléatoire de votre page, soit aucune image du tout - ce qui rend vos partages beaucoup moins attractifs et réduit drastiquement le taux de clics.
Le protocole Open Graph a été créé par Facebook en 2010 pour standardiser la façon dont les pages web sont représentées sur les réseaux sociaux. Aujourd'hui, il est utilisé par pratiquement tous les réseaux sociaux et applications de messagerie.
Les statistiques sont sans appel :
Sans image Open Graph définie, vous laissez les réseaux sociaux choisir aléatoirement une image de votre page. Le résultat peut être :
Avec une OG Image, vous contrôlez exactement ce que vos visiteurs verront avant même de cliquer.
Une image Open Graph soignée envoie un signal fort : votre site est professionnel, vous soignez les détails, et votre contenu vaut la peine d'être lu.
Sur le site d'Art Conseil, j'ai implémenté des images Open Graph automatiques grâce à Nuxt SEO. Résultat :
| Plateforme | Format recommandé | Ratio |
|---|---|---|
| 1200 x 630 px | 1.91:1 | |
| 1200 x 627 px | 1.91:1 | |
| 1200 x 675 px | 16:9 | |
| 1200 x 630 px | 1.91:1 |
Gardez vos éléments importants (texte, logo) dans une zone de sécurité centrale de 1000 x 500 pixels, car certaines plateformes peuvent rogner les bords de l'image.
Ajoutez ces meta tags dans le <head> de vos pages :
<head>
<meta property="og:title" content="Titre de votre page" />
<meta property="og:description" content="Description de votre page" />
<meta property="og:image" content="https://votre-site.com/image-og.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://votre-site.com/page" />
<meta property="og:type" content="website" />
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Titre de votre page" />
<meta name="twitter:description" content="Description de votre page" />
<meta name="twitter:image" content="https://votre-site.com/image-og.jpg" />
</head>
Si vous utilisez Nuxt, Nuxt SEO automatise complètement la génération des OG Images :
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxtjs/seo'],
site: {
url: 'https://votre-site.com',
name: 'Nom de votre site'
},
ogImage: {
enabled: true,
fonts: [
'Inter:400',
'Inter:700'
]
}
})
Nuxt SEO génère automatiquement une OG Image unique pour chaque page avec le titre, sans avoir à créer manuellement des centaines d'images.
❌ Trop de texte (illisible sur mobile) ❌ Images de stock génériques ❌ Logo trop petit ❌ Texte trop près des bords ❌ Fond blanc uni (peu attractif)
✅ Message clair et concis ✅ Visuels originaux ou illustrations ✅ Logo visible mais discret ✅ Marges généreuses ✅ Fond coloré ou dégradé
Avant de publier, testez vos OG Images avec ces outils :
Les images Open Graph n'impactent pas directement le référencement Google, mais elles ont un effet indirect majeur :
Un bon taux de clics depuis les réseaux sociaux augmente votre trafic global, ce qui peut indirectement améliorer votre positionnement dans les résultats de recherche.
Sur mes projets comme Art Conseil, j'utilise systématiquement le module OG Image de Nuxt SEO qui :
Résultat : chaque page du site dispose d'une OG Image professionnelle sans avoir à les créer manuellement.
Pour les sites avec beaucoup de contenu (blogs, e-commerce), créer manuellement une OG Image par page est impossible. La solution : la génération dynamique.
Les images Open Graph sont un élément souvent négligé mais crucial de toute stratégie web. Elles représentent la première impression que vos visiteurs auront de votre contenu avant même de cliquer.
Investir du temps dans des OG Images de qualité, c'est :
Avec des outils comme Nuxt SEO, la mise en place est rapide et le bénéfice immédiat. Sur des projets comme Art Conseil, les OG Images automatiques ont transformé les partages sociaux en véritable canal d'acquisition.
Pour aller plus loin :
Cet article vous a-t-il été utile ?
Vos retours sont complètement anonymes et m'aident à améliorer mon contenu
Qu'est-ce que Google Search Console ?
Découvrez Google Search Console, l'outil gratuit de Google pour analyser et optimiser la visibilité de votre site web dans les résultats de recherche. Guide complet pour débutants.
Qu'est-ce que les Meta tags ?
Découvrez les Meta tags, ces éléments HTML invisibles qui optimisent le référencement et l'affichage de votre site web. Guide complet pour comprendre et utiliser les Meta tags.