Balises Open Graph : configurer og:image et obtenir de beaux aperçus de liens

Par SEOgrinder · Publié le 4 novembre 2026 · 11 min de lecture

Réponse courte : Les balises Open Graph sont des balises meta placées dans l'en-tête d'une page, qui indiquent aux réseaux sociaux et aux messageries quels titre, description et image afficher quand quelqu'un partage un lien. Le protocole en exige quatre (og:title, og:type, og:image et og:url), et og:description mérite d'être ajoutée. Utilisez une image d'au moins 1200 × 630 pixels et de moins de 8 Mo, donnez son adresse https complète et placez chaque balise dans le HTML que votre serveur envoie, pas dans un JavaScript exécuté plus tard. Un effet sur le classement n'est pas démontré : les balises décident de l'apparence d'un lien partagé.

Que sont les balises Open Graph ?

Open Graph est un protocole qui permet à une page web de se décrire comme un objet : avec un titre, un type, une image et une adresse. D'après ogp.me, le protocole a été créé à l'origine chez Facebook. Vous l'utilisez en ajoutant des balises meta dans le head de la page. Quand quelqu'un colle votre lien dans une publication ou dans une conversation, la plateforme récupère la page, lit ces balises et construit la carte d'aperçu à partir d'elles. Sans elles, la plateforme doit deviner quels titre, description et image utiliser.

Le protocole nomme quatre propriétés obligatoires pour chaque page, plus une facultative mais généralement recommandée :

Balise	Ce qu'elle contient	Statut
og:title	Le titre de l'objet, tel qu'il doit apparaître dans l'aperçu	Obligatoire
og:type	Le genre d'objet, par exemple `website` ou `article`	Obligatoire
og:image	L'adresse de l'image qui représente la page	Obligatoire
og:url	L'adresse canonique de la page, utilisée comme identifiant permanent	Obligatoire
og:description	Une description de une à deux phrases	Facultative, généralement recommandée

La valeur de og:type compte au-delà de l'étiquette. D'après ogp.me, le type choisi peut entraîner d'autres propriétés. Pour article, le protocole liste des champs comme article:published_time et article:modified_time. D'autres balises facultatives sont og:site_name (le nom de l'ensemble du site) et og:locale (la langue des balises, en_US par défaut).

Le HTML minimal pour les balises Open Graph

Voici un jeu complet que vous pouvez adapter. (L'exemple d'ogp.me définit aussi un attribut prefix sur l'élément html ; les grandes plateformes lisent les balises sans lui.) Il se place dans l'élément head, à côté de votre balise title habituelle :

<head>
  <title>Balises Open Graph : configurer og:image</title>
  <meta property="og:title" content="Balises Open Graph : configurer og:image">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/balises-open-graph">
  <meta property="og:image" content="https://example.com/images/balises-open-graph.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Une carte d'aperçu de lien avec image, titre et description">
  <meta property="og:description" content="Les quatre balises Open Graph obligatoires, les règles de taille d'image et le test d'un aperçu de lien.">
  <meta property="og:site_name" content="Exemple">
</head>

Quelques remarques sur les détails :

og:url est un identifiant permanent. ogp.me la définit comme l'URL canonique de l'objet. Utilisez la même adresse que dans votre lien canonical, sans paramètres de suivi.
Écrivez l'adresse de l'image en entier. Tous les exemples d'ogp.me utilisent une adresse complète. Un chemin relatif comme /images/carte.png dépend de la façon dont chaque robot le résout : ne comptez pas là-dessus.
La largeur et la hauteur aident. D'après la documentation de Facebook, ces deux balises permettent à son robot d'afficher l'image immédiatement, sans devoir d'abord la télécharger et la traiter.
Ajoutez og:image:alt. ogp.me indique qu'une page qui précise une image devrait aussi préciser ce qu'elle représente (une description, pas une légende).

Les règles d'og:image : taille, fichier et adresse

Facebook publie les chiffres les plus clairs, sur sa page consacrée aux images dans les liens partagés. Ils servent de référence pour le reste de cette section :

La taille minimale autorisée est de 200 × 200 pixels.
Le fichier ne doit pas dépasser 8 Mo.
Pour un affichage optimal sur les appareils haute résolution, utilisez au moins 1200 × 630 pixels.
Utilisez au minimum 600 × 315 pixels pour obtenir des publications de lien avec une grande image. Les images plus petites s'affichent quand même, mais beaucoup plus petites.
Gardez un rapport largeur/hauteur le plus proche possible de 1,91 : 1, pour que l'image entière apparaisse sans recadrage. 1200 × 630 donne environ 1,905 : 1, c'est pourquoi cette taille est le choix habituel.
Le robot n'accepte que les encodages gzip et deflate : vérifiez donc que votre serveur ou votre CDN répond avec l'un des deux.

Ce sont les règles de Facebook. D'autres applications et messageries lisent les mêmes balises, mais cet article ne documente pas leurs limites : testez donc là où cela compte pour vous. À titre de repère, les pages du blog de SEOgrinder utilisent une image d'aperçu de 1200 × 630 pixels.

Deux autres conditions concernent l'accès, pas la taille. L'image doit être publique : aucune connexion exigée pour y accéder, et aucune règle du robots.txt qui bloque le dossier où elle se trouve. Si un robot ne peut pas récupérer le fichier, l'aperçu n'a pas d'image, aussi bon que soit le fichier.

Donnez à chaque page ses propres balises Open Graph

Comme og:url est l'identifiant permanent d'un objet, elle doit être différente sur chaque page. Il en va de même pour le reste :

og:title doit nommer le sujet de cette page, pas le nom de tout le site.
og:description doit résumer cette page en une ou deux phrases.
og:image doit montrer quelque chose qui convient à la page. Gardez une image par défaut pour les pages qui n'ont pas la leur.
og:type peut lui aussi varier : website pour une page d'accueil, article pour un article de blog ou une actualité.

Quelle que soit votre technologie, générez les balises à partir des données de chaque page au lieu de les saisir à la main. Un petit exemple en Node :

const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');

function openGraphTags(page) {
  return [
    ['og:title', page.title],
    ['og:type', page.type || 'website'],
    ['og:url', `https://example.com${page.path}`],
    ['og:image', page.image || 'https://example.com/images/default-card.png'],
    ['og:description', page.description],
  ].filter(([, content]) => content != null && content !== '').map(([property, content]) => `<meta property="${property}" content="${esc(content)}">`).join('\n');
}

La fonction esc compte : sans elle, un titre contenant un guillemet fermerait l'attribut trop tôt et casserait la balise. Si vous utilisez un CMS, cherchez le champ qui définit l'image de partage page par page. Le résultat que vous contrôlez reste le même : les balises dans le HTML envoyé.

Les balises Open Graph doivent figurer dans le HTML envoyé

Beaucoup de sites modernes envoient une coquille HTML presque vide et laissent JavaScript construire la page dans le navigateur. Google sait gérer cela : d'après sa documentation JavaScript, la recherche rend les pages avec une version « evergreen » (maintenue à jour) de Chromium. La même page indique aussi que le rendu côté serveur ou le pré-rendu reste une bonne idée, parce que tous les robots ne savent pas exécuter JavaScript.

Pour les robots d'IA, il existe une mesure : en décembre 2024, Vercel et MERJ ont constaté qu'aucun des grands robots d'IA qu'ils avaient étudiés n'exécutait JavaScript. C'est un instantané de 2024, qui n'a pas été confirmé de nouveau depuis. Pour les aperçus de liens, la règle sûre découle de la même logique : si vos balises n'apparaissent qu'après l'exécution d'un script, un robot qui n'exécute pas de scripts ne les voit jamais. SEOgrinder signale ces pages sous la forme « La page n’est construite que dans le navigateur », en précisant que de nombreux robots d'IA n'exécutent pas JavaScript et voient une page presque vide.

Vous pouvez le tester en dix secondes :

curl -sL https://example.com/ | grep -io '<meta[^>]*og:[^>]*>'

Si les balises reviennent, elles sont dans le HTML tel qu'il est envoyé. Si rien ne revient alors que les balises apparaissent dans les outils de développement du navigateur, un script les ajoute trop tard. Utilisez « Afficher le code source » dans le navigateur pour le même test : il montre le HTML envoyé, pas la page vivante que montrent les outils de développement. La solution consiste à effectuer le rendu sur le serveur ou à générer les pages à l'avance, de sorte que le titre, le texte et les balises figurent dans la première réponse.

Comment tester l'aperçu de votre lien

Le Sharing Debugger de Facebook montre quelles balises le robot a lues et les erreurs éventuelles. Il demande une connexion à Facebook. D'après la documentation de Facebook sur les images, y passer une URL récupère aussi les métadonnées à l'avance, ce qui compte à cause de la mise en cache :

Facebook met chaque image en cache d'après son adresse. Si vous remplacez une image, utilisez une nouvelle URL pour la nouvelle, sinon l'ancienne reste affichée.
Ne supprimez pas l'ancienne image, car des publications existantes peuvent encore pointer vers elle.
Changer l'image associée à une URL ne met pas à jour l'aperçu des anciens partages. Ceux-ci doivent être actualisés.
Le robot doit avoir vu une image au moins une fois avant de pouvoir l'afficher. Sans récupération préalable, la première personne qui partage un lien risque de ne pas voir l'image.

Avant de publier, parcourez cette liste :

Récupérez la page avec curl et vérifiez que les cinq balises figurent dans la première réponse.
Ouvrez l'adresse de l'image seule. Elle doit se charger sans connexion, avec le statut 200.
Contrôlez la taille : au moins 1200 × 630 pixels, moins de 8 Mo.
Passez la page dans le Sharing Debugger et lisez les erreurs et les avertissements.
Recommencez pour une page de chaque type : la page d'accueil, un article, un produit.

Comment SEOgrinder vérifie les balises Open Graph

Saisissez l'adresse d'une page publique dans SEOgrinder : le rapport inclut un « Aperçu social », qui montre l'apparence de la page quand elle est partagée. L'outil lit vos balises, charge l'image, puis indique ce qu'il trouve. Il ne demande aucun compte et ne coûte rien. Voici les constats qui comptent ici :

Aperçu de partage incomplet liste ce qui manque parmi l'image, le titre et la description.
L’image d’aperçu ne se charge pas apparaît quand l'image répond par un statut d'erreur. Le constat nomme ce statut et indique les causes habituelles : une mauvaise adresse, une connexion exigée devant le fichier ou un blocage dans le robots.txt. Selon le constat, les liens apparaissent alors sur LinkedIn, WhatsApp et X sans image.
L’image d’aperçu est très petite apparaît en dessous de 600 × 315 pixels (Facebook n'affiche alors qu'une petite vignette) et signale à part les images inférieures au minimum de 200 × 200.
La page n’est construite que dans le navigateur est le constat pour les pages qui construisent leur interface dans le navigateur.

SEOgrinder ne peut pas vous montrer comment chaque réseau dessine la carte. Il vérifie les balises et le fichier, c'est-à-dire la partie que vous maîtrisez. Pour le rendu final, utilisez le débogueur.

Erreurs fréquentes

Un chemin d'image relatif. Utilisez l'adresse complète avec https://.
Une image impossible à récupérer. Une connexion exigée, une règle de pare-feu ou une ligne du robots.txt sur le dossier des images laisse l'aperçu sans image.
Une image trop petite. En dessous de 600 × 315 pixels, elle s'affiche petite ; en dessous de 200 × 200, elle risque de ne pas s'afficher du tout.
Pas de description. og:description est facultative dans le protocole, mais sans elle la plateforme devine.
Les mêmes balises sur chaque page. Chaque article ressemble alors à la page d'accueil quand il est partagé, et og:url n'identifie plus rien.
Remplacer l'image sous la même adresse. Facebook met en cache d'après l'URL : publiez donc le nouveau fichier sous un nouveau nom.
Des balises qui n'existent qu'après l'exécution de JavaScript. Placez-les dans le HTML envoyé.
Des guillemets non échappés dans les valeurs. Ils ferment l'attribut et tronquent la balise.
Une adresse de suivi dans og:url. La balise doit contenir l'adresse canonique.

Questions fréquentes

Les balises Open Graph sont-elles un facteur de classement ?

Rien ne le prouve. Open Graph décide de l'apparence d'un lien partagé sur les réseaux sociaux et dans les messageries. Rien dans les sources utilisées ici ne le relie au classement.

Quelle taille d'og:image faut-il utiliser ?

1200 × 630 pixels, avec un rapport largeur/hauteur proche de 1,91 : 1 et moins de 8 Mo. Cela répond à la recommandation de Facebook et correspond à la taille de l'image d'aperçu des pages du blog de SEOgrinder.

Ai-je besoin d'og:description ?

Le protocole la présente comme facultative et généralement recommandée. Sans elle, la plateforme doit deviner une description à partir de votre page : écrivez-en donc une.

Pourquoi mon ancienne image s'affiche-t-elle encore ?

Facebook met les images en cache d'après leur adresse. Publiez la nouvelle image sous une nouvelle URL, puis passez la page dans le Sharing Debugger. Les anciens partages ne sont pas mis à jour automatiquement.

Et twitter:card ?

Cette balise ne fait pas partie du protocole Open Graph. Le conseil de correction de SEOgrinder pour un aperçu incomplet suggère aussi de régler twitter:card sur summary_large_image. Cet article ne traite pas des règles de X : consultez la documentation de X.

Un agent de codage peut-il ajouter les balises à ma place ?

Il peut faire la partie mécanique : écrire les balises dans vos gabarits et les contrôler avec curl. Dans le rapport, Confier à l’IA produit les constats sous forme d'ordre de mission en Markdown, avec une condition d'achèvement vérifiable (« Terminé quand ») pour chaque tâche. Choisir l'image et trouver les mots reste votre travail. La méthode est détaillée dans notre article sur la correction des erreurs SEO avec un agent de codage IA.

Votre prochaine étape

Lancez l'analyse gratuite sur votre page d'accueil et regardez l'aperçu social ainsi que les constats listés plus haut. Traitez-les dans l'ordre, publiez une nouvelle image sous une nouvelle adresse si vous devez en remplacer une, et passez la page dans le Sharing Debugger. Relancez ensuite l'analyse pour confirmer que l'aperçu est complet.