Le plus grand consommateur de données Open Graph. Utilise og:title, og:description et og:image. L'image recommandée est de 1200×630 px avec un rapport d'aspect de 1,91:1 afin qu'elle s'affiche sans recadrage dans le fil d'actualité. Le cache est agressif — utilisez le Sharing Debugger pour rafraîchir après un changement.
Optimisez votre site Web avec les tags Open Graph
Découvrez comment le protocole Open Graph améliore le partage sur les réseaux sociaux
Qu'est-ce que Open Graph (OG) ?
- Le protocole Open Graph, communément appelé OGP, est crucial pour définir comment le contenu de votre site Web apparaît sur les réseaux sociaux. L'implémentation des tags Open Graph assure que des images, titres et descriptions spécifiques sont affichés lorsque votre contenu est partagé en ligne.
Taille d'image Open Graph optimale
- Pour maximiser l'impact sur les appareils haute résolution, utilisez des images Open Graph d'au moins 1200 pixels de large. Facebook, un leader des médias sociaux, recommande des images au ratio de 1.91:1 pour afficher l'image complète dans le fil d'actualité sans recadrage.
Intégration facile des balises Open Graph
- Intégrez facilement les balises Open Graph en utilisant des outils comme OpenGraph.dev. Générez et insérez les balises méta dans la section 'head' de votre site pour améliorer la visibilité de votre site sur les réseaux sociaux.
L'importance du Open Graph dans le SEO
- Les balises Open Graph optimisées augmentent considérablement la probabilité que votre contenu soit remarqué et cliqué sur les médias sociaux, générant ainsi plus de trafic vers votre site. Elles sont essentielles pour que votre contenu se démarque dans les flux de médias sociaux encombrés.
Que sont les balises Open Graph ?
Les balises Open Graph sont des éléments HTML
<meta> placés à l'intérieur de la balise <head> d'une page web qui décrivent comment la page doit apparaître lorsque son URL est partagée ailleurs — un fil Facebook, une publication X, une mise à jour LinkedIn, une discussion WhatsApp, un serveur Discord, un fil iMessage ou un canal Slack. Le protocole Open Graph a été initialement introduit par Facebook en 2010 et est depuis devenu la norme de facto pour les aperçus de liens sur pratiquement toutes les grandes plateformes. Un ensemble complet de balises méta Open Graph vous donne un contrôle total sur le titre, la description, l'image, le type et l'URL canonique qui apparaissent à l'intérieur de la carte d'aperçu enrichie — transformant un simple hyperlien en un extrait accrocheur qui surpasse systématiquement un lien nu en taux de clics.Un ensemble minimal viable de balises méta Open Graph
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short, compelling summary of the page." />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/article" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example" />
<meta property="og:locale" content="en_US" />Open Graph sur les plateformes sociales
Presque tous les grands réseaux sociaux et messageries lisent les métadonnées Open Graph, mais chacun applique ses propres règles concernant la taille des images, la mise en cache et les solutions de repli. Respectez l'exigence la plus stricte et le même ensemble d'images fonctionnera partout.
X (Twitter)
Se replie sur les balises Open Graph lorsque les méta Twitter Card sont absentes, mais pour obtenir une grande carte d'aperçu, vous devez également déclarer twitter:card à summary_large_image et twitter:image. L'image doit faire moins de 5 Mo et au moins 300×157 px ; 1200×630 est la valeur par défaut sûre.
Lit og:title, og:description, og:image et og:type. L'image doit faire moins de 5 Mo et au moins 1200×627 px (ratio 1,91:1). LinkedIn met en cache le premier crawl pendant environ sept jours — utilisez le Post Inspector pour forcer une nouvelle récupération après la publication de modifications.
WhatsApp & iMessage
Les deux messageries récupèrent les balises Open Graph via HTTPS et imposent un budget strict sur la taille des images. WhatsApp tronque tout ce qui dépasse ~300 Ko, alors optimisez l'image et déclarez og:image:width et og:image:height pour accélérer le rendu. iMessage préfère une image carrée 1:1 lorsqu'elle est disponible, donc envisagez de fournir les deux ratios via plusieurs balises og:image.
Discord, Slack & Telegram
Les trois rendent les aperçus à partir du trio standard og:title, og:description et og:image. Discord respecte également theme-color pour la couleur d'accent de la barre latérale. Telegram supprime les iframes et le JS — assurez-vous que vos balises sont présentes dans le HTML initial rendu côté serveur et non injectées à l'exécution.
Pinterest & Reddit
Pinterest étend Open Graph avec article:author et les types Rich Pin. Reddit récupère og:title et og:image lorsqu'un lien est soumis et utilise l'image comme vignette du post. Les deux privilégient les images au format portrait ou carré (de 2:3 à 1:1) plutôt que les bannières larges 1,91:1.
Ajouter des balises méta Open Graph à votre framework
Insérez ces extraits dans votre projet pour câbler les balises Open Graph dans les piles les plus courantes. Chaque exemple rend le même ensemble minimal viable côté serveur afin que les robots les voient au premier affichage.
Next.js (App Router)
ts// app/page.tsx
export const metadata = {
title: 'Your Page Title',
description: 'A short, compelling summary of the page.',
openGraph: {
title: 'Your Page Title',
description: 'A short, compelling summary of the page.',
url: 'https://example.com/article',
siteName: 'Example',
images: [{ url: 'https://example.com/preview.png', width: 1200, height: 630 }],
locale: 'en_US',
type: 'website'
}
}Nuxt 3
ts<script setup lang="ts">
useSeoMeta({
title: 'Your Page Title',
description: 'A short, compelling summary of the page.',
ogTitle: 'Your Page Title',
ogDescription: 'A short, compelling summary of the page.',
ogImage: 'https://example.com/preview.png',
ogUrl: 'https://example.com/article',
ogType: 'website',
ogLocale: 'en_US'
})
</script>Astro
astro---
const { title, description, image, url } = Astro.props
---
<head>
<title>{title}</title>
<meta name="description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />
<meta property="og:url" content={url} />
<meta property="og:type" content="website" />
</head>WordPress
php// functions.php — works without an SEO plugin
add_action('wp_head', function () {
if (!is_singular()) return;
global $post;
$img = get_the_post_thumbnail_url($post->ID, 'full') ?: '';
printf('<meta property="og:title" content="%s" />', esc_attr(get_the_title($post)));
printf('<meta property="og:description" content="%s" />', esc_attr(wp_trim_words($post->post_excerpt ?: $post->post_content, 30)));
printf('<meta property="og:image" content="%s" />', esc_url($img));
printf('<meta property="og:url" content="%s" />', esc_url(get_permalink($post)));
echo '<meta property="og:type" content="article" />';
});Questions fréquentes sur Open Graph
Réponses rapides aux questions que les développeurs et les équipes de contenu nous posent le plus souvent lors de l'implémentation des balises méta Open Graph.
- Les balises Open Graph aident-elles au SEO ?
- Les balises Open Graph ne sont pas un signal de classement direct dans la recherche Google, mais elles améliorent sensiblement les résultats SEO indirects. Des aperçus plus attrayants génèrent des taux de clics plus élevés, plus de partages et plus de liens entrants — autant d'éléments qui se répercutent sur le classement. Elles clarifient également le titre, l'image et la langue d'une page pour les robots d'indexation, réduisant le risque que Google choisisse une vignette sans rapport ou génère son propre extrait.
- Quelle est la différence entre Open Graph et Twitter Cards ?
- Open Graph est le standard multiplateforme. Twitter Cards est le format parallèle de X avec son propre espace de noms
twitter:*. X se replie sur Open Graph lorsque les balises spécifiques à Twitter sont absentes, il suffit donc pour la plupart des sites de publier Open Graph plus une seule déclarationtwitter:cardpour activer l'aperçu en grande image. - Quelle est la taille d'image Open Graph recommandée ?
- 1200×630 pixels (ratio 1,91:1) est la valeur par défaut sûre — elle satisfait Facebook, LinkedIn, les grandes cartes X, Slack et Discord sans recadrage. Gardez le fichier sous 1 Mo pour que WhatsApp et iMessage le récupèrent. Si votre audience est fortement orientée Pinterest, fournissez en plus une image portrait de 1000×1500.
- Pourquoi mon aperçu affiche-t-il l'ancienne image après l'avoir changée ?
- Chaque grande plateforme met en cache les données Open Graph. Facebook, LinkedIn et X se rafraîchissent selon des cadences différentes (de quelques minutes à une semaine). Utilisez le Sharing Debugger de Facebook, le Post Inspector de LinkedIn et le Card Validator de X pour forcer un nouveau scrape, et ajoutez un paramètre anti-cache à
og:imagelorsque vous remplacez une image à la même URL. - Les applications monopages (SPA) nécessitent-elles un rendu côté serveur pour Open Graph ?
- Oui, pour pratiquement toutes les plateformes sociales. WhatsApp, LinkedIn, Slack, Discord et Telegram n'exécutent pas JavaScript lorsqu'ils explorent une URL, donc les balises méta rendues uniquement côté client leur sont invisibles. Utilisez le SSR (Next.js, Nuxt, Astro), la génération statique ou un service dédié de pré-rendu pour vous assurer que les balises sont présentes dans la réponse HTML initiale.
- Que se passe-t-il si une page n'a aucune balise Open Graph ?
- La plateforme se rabat sur tout ce qu'elle peut extraire : le
<title>, lameta descriptionet la première image suffisamment grande trouvée dans le document. Les résultats sont imprévisibles — souvent la mauvaise image, un titre tronqué ou pas d'aperçu du tout. Ajouter ne serait-ce que trois balises (og:title,og:description,og:image) élimine l'incertitude. - Les noms des balises Open Graph sont-ils sensibles à la casse ?
- Oui. Utilisez exactement les minuscules définies par le protocole —
og:title, pasOG:Title. Les noms de propriétés avec une casse mixte sont silencieusement ignorés par la plupart des robots, ce qui est l'une des raisons les plus courantes pour lesquelles un aperçu cesse soudainement de fonctionner après un refactor. - Quels outils puis-je utiliser pour déboguer les balises Open Graph ?
- Au-delà de l'aperçu d'OpenGraph.dev, chaque plateforme propose son propre validateur : Facebook Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn Post Inspector (linkedin.com/post-inspector), la documentation X Cards sur developer.x.com, le Validateur Rich Pins de Pinterest et le @WebpageBot de Telegram pour vider son cache.