Voici comment ajouter des balises Open Graph : placez un petit ensemble de balises meta og: dans la section <head> de votre page, donnez-leur un titre, une description et une image de 1200x630 pixels, puis validez le résultat avant de partager. Open Graph est le protocole qui contrôle ce que Facebook, LinkedIn, Discord, Slack et la plupart des autres plateformes affichent lorsque quelqu'un colle votre lien. Sans cela, votre lien ressemble à du texte brut ou à une vignette cassée.
Ce guide vous fournit l'ensemble exact de balises à copier-coller (sans plugin, sans CMS requis), les tailles d'image qui s'affichent correctement sur chaque plateforme, et la solution au problème le plus courant : l'aperçu qui refuse de se mettre à jour car une plateforme a mis en cache l'ancienne version. À la fin, vous saurez comment ajouter des balises Open Graph manuellement et les vérifier sur tous les principaux réseaux.
Ce que font réellement les balises Open Graph#
Open Graph (souvent abrégé en OG) est un protocole de balisage introduit par Facebook en 2010. Il vous permet, en tant que propriétaire de page, de décider exactement comment votre URL est représentée lorsqu'elle est partagée. Au lieu qu'un robot devine un titre et prenne une image au hasard, il lit vos valeurs déclarées.
Lorsque quelqu'un colle votre lien dans un post, un message ou un chat, la plateforme récupère votre page, lit les balises og: dans le <head> et construit une carte de prévisualisation à partir de celles-ci. Cette carte est votre première impression. Une carte propre avec une image nette attire les clics. Une URL nue est ignorée.
Point clé : Les balises Open Graph n'affectent pas directement votre classement Google. Elles influencent le taux de clics et les partages sur les réseaux sociaux et les plateformes de chat, ce qui est un canal de trafic différent et très réel.
Quelles plateformes lisent Open Graph#
Presque toutes, avec une exception historique. La liste ci-dessous couvre les huit surfaces qui intéressent la plupart des gens et le protocole que chacune utilise.
| Plateforme | Lit Open Graph ? | Remarques |
|---|---|---|
| Oui | Le consommateur original d'OG ; utilise le Débogueur de partage pour actualiser | |
| Oui | Lit og:title, og:description, og:image ; possède son propre Inspecteur de posts | |
| X (Twitter) | Oui, avec repli sur Twitter Card | Préfère les balises twitter:, se rabat sur og: |
| Discord | Oui | Construit des embeds riches à partir des balises OG |
| Slack | Oui | Déplie les liens en utilisant les balises OG |
| Oui | Aperçu miniature à partir de og:image | |
| iMessage | Oui | Aperçu de lien riche à partir d'OG |
| Oui, plus ses propres balises | Lit OG mais prend aussi en charge les métadonnées Rich Pins |
La conclusion pratique : si vous configurez correctement vos balises Open Graph, vous couvrez la grande majorité des surfaces de partage avec un seul bloc de balisage.
Les balises Open Graph essentielles dont vous avez besoin#
Vous n'avez pas besoin de dizaines de balises. Cinq balises OG principales, accompagnées d'un petit bloc Twitter Card, couvrent presque tous les cas réels. Voici l'ensemble minimal et correct à insérer dans votre <head>.
<!-- Open Graph core -->
<meta property="og:title" content="Titre de votre page ici" />
<meta property="og:description" content="Un résumé d'une à deux phrases qui mérite le clic." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/votre-page" />
<meta property="og:type" content="website" />
<!-- Twitter Card (X lit ces balises, utilise og: si absentes) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Titre de votre page ici" />
<meta name="twitter:description" content="Un résumé d'une à deux phrases qui mérite le clic." />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />
Quelques points importants à comprendre sur ce bloc, car les détails sont ce qui casse les aperçus :
- Les balises
og:utilisentproperty, les balises Twitter utilisentname. Cela piège beaucoup de monde.<meta property="og:title">est correct ;<meta name="og:title">est techniquement faux et certains robots d'indexation l'ignorent. og:urldoit être l'URL canonique absolue. Utilisez l'adresse complètehttps://, pas un chemin relatif. C'est le lien vers lequel pointe l'aperçu.og:imagedoit aussi être une URL absolue. Un chemin relatif comme/og.jpgne sera pas résolu lorsqu'un robot externe récupère votre page.twitter:carddéfini sursummary_large_imagevous donne la grande carte bannière. Si vous l'omettez, X affiche une petite vignette carrée à la place.
Balises optionnelles utiles pour les articles#
Si la page est un article de blog plutôt qu'une page générique, deux balises supplémentaires apportent de la finesse et débloquent des intégrations enrichies sur certaines plateformes.
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Votre Marque" />
<meta property="article:published_time" content="2026-06-25T08:00:00Z" />
Définissez og:type sur article pour les articles et sur website pour les pages d'accueil, les pages d'atterrissage et les outils. Le og:site_name affiche votre marque au-dessus ou en dessous du titre sur plusieurs plateformes, ce qui renforce la reconnaissance lors des partages.
The og:image Size That Renders Correctly Everywhere#
The image is the part people get wrong most often, and it is the part that matters most visually. There is one safe specification that works across every major platform.
Use 1200 x 630 pixels at a 1.91:1 aspect ratio. This is the size Facebook recommends, and it renders cleanly on LinkedIn, X (as a large image card), Discord, and Slack without awkward cropping. Keep important text and faces away from the very edges, because some platforms apply a slight crop.
Here is a quick cheatsheet for the platforms with stricter or different expectations.
| Use case | Recommended size | Aspect ratio | Notes |
|---|---|---|---|
| Universal OG image | 1200 x 630 | 1.91:1 | The default that works almost everywhere |
| X large summary card | 1200 x 628 | ~1.91:1 | Effectively the same as the universal size |
| X small summary card | 144 x 144 minimum | 1:1 | Only if you set twitter:card to summary |
| 1200 x 627 | ~1.91:1 | Treat 1200 x 630 as safe | |
| Discord / Slack | 1200 x 630 | 1.91:1 | Scales the universal image down cleanly |
A few image rules that prevent broken or fuzzy previews:
- Keep the file under about 5 MB. Facebook and others may skip images that are too large, leaving you with no preview image at all.
- Use JPG or PNG. WebP support is inconsistent across crawlers, so for OG images specifically, stick to the safe formats even if your site uses WebP elsewhere.
- Serve it over HTTPS. A mixed-content
http://image inside an HTTPS page can be dropped. - Make the dimensions explicit. Adding
og:image:widthandog:image:heighthelps platforms reserve the right space and render faster.
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
If you want to lay out a branded card the right size without opening a design tool, the free meta tag and Open Graph generator builds the full tag block and shows you exactly how the 1200x630 image will sit inside the preview.
Comment ajouter des balises Open Graph étape par étape#
Cette procédure fonctionne pour tout site où vous pouvez modifier le <head> HTML : un site codé à la main, un générateur de site statique, un modèle personnalisé ou un framework comme Next.js ou Astro. Aucun plugin requis. Suivez ces étapes pour ajouter des balises Open Graph à partir de zéro et confirmer qu'elles fonctionnent.
Étape 1 : Rédigez votre titre et votre description#
Décidez d'abord du texte exact. Votre og:title peut différer de votre balise <title> et de votre méta-description SEO, et c'est souvent souhaitable. Le titre et la description OG sont rédigés pour un humain qui fait défiler un fil d'actualité, alors rendez-les percutants et axés sur les avantages.
Gardez og:title sous environ 60 à 90 caractères pour éviter qu'il ne soit tronqué, et og:description entre 110 et 200 caractères selon la plateforme. Plus court est plus sûr. Si vous voulez voir comment la longueur affecte également l'extrait de recherche, notre guide sur la longueur et la largeur en pixels des méta-descriptions couvre les seuils de troncature en détail.
Étape 2 : Créez et hébergez votre og:image#
Concevez une image de 1200x630 pixels avec votre titre, votre logo et un fond épuré. Exportez-la en JPG ou PNG, puis téléchargez-la à un endroit avec une URL HTTPS stable et publique. Cela peut être votre propre serveur, un dossier /images/ ou un CDN.
Copiez l'URL absolue complète de l'image téléchargée. Vous la collerez dans og:image et twitter:image. Ouvrez l'URL directement dans un navigateur pour confirmer qu'elle se charge sans écran de connexion ni redirection, car les robots d'exploration ne peuvent pas se connecter.
Étape 3 : Collez les balises dans votre head#
Insérez le bloc complet de balises de la section ci-dessus dans le <head> de votre page, idéalement en haut avec vos autres méta-balises. Remplacez les valeurs fictives par votre vrai titre, description, URL d'image et URL canonique de la page.
<head>
<meta charset="utf-8" />
<title>Titre de votre page ici</title>
<meta property="og:title" content="Titre de votre page ici" />
<meta property="og:description" content="Un résumé qui mérite le clic." />
<meta property="og:image" content="https://exemple.com/og-image.jpg" />
<meta property="og:url" content="https://exemple.com/votre-page" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://exemple.com/og-image.jpg" />
</head>
Si vous utilisez un framework, définissez ces balises via l'API head ou metadata du framework plutôt que de modifier le HTML brut. Les noms des balises restent identiques quelle que soit la méthode d'injection.
Étape 4 : Validez avant de partager#
Ne supposez pas que cela fonctionne. Chaque plateforme expose un outil de débogage qui récupère votre page et affiche la carte exacte qu'elle rendra. Testez votre URL via ces outils avant de publier quoi que ce soit :
- Facebook Sharing Debugger pour Facebook et la plupart des consommateurs OG génériques.
- LinkedIn Post Inspector pour les aperçus LinkedIn.
- L'aperçu de carte X (Twitter), visible en collant le lien dans un brouillon de publication.
Ces validateurs signalent également les balises manquantes ou mal formées, ils servent donc de vérificateur d'erreurs. Si la carte semble incorrecte, corrigez la balise qu'ils signalent et relancez.
Étape 5 : Prévisualisez sur toutes les plateformes à la fois#
Utiliser trois débogueurs distincts pour chaque lien devient vite fastidieux. Pour voir à quoi ressemblera une URL sur toutes les grandes plateformes en un seul coup d'œil, collez-la dans un outil de prévisualisation multi-plateforme. L'outil de prévisualisation SERP et social affiche votre titre, description et image OG côte à côte, vous permettant de repérer une image recadrée ou un titre tronqué en quelques secondes, et non après un échec de publication.
Résoudre le problème de cache "L'image ne se met pas à jour"#
C'est le problème Open Graph le plus frustrant, et presque personne ne documente la vraie solution. Vous avez mis à jour votre og:image, vous avez republié le lien, et l'ancienne image (ou aucune image) s'affiche encore. Les balises sont correctes. Alors pourquoi ça ne marche pas ?
La réponse est le cache. Lorsqu'une plateforme récupère votre URL pour la première fois, elle stocke les données OG sur ses propres serveurs pour ne pas avoir à re-explorer à chaque partage. Modifiez les balises plus tard, et la plateforme continue de servir sa copie obsolète jusqu'à l'expiration du cache, ce qui peut prendre des jours.
La solution est de forcer la plateforme à ré-explorer votre page. Vous n'attendez pas ; vous demandez au cache de se rafraîchir.
Voici comment vider le cache sur les plateformes qui en ont un :
- Facebook : Ouvrez le Facebook Sharing Debugger, collez votre URL, et cliquez sur "Scrape Again". Cela force une nouvelle récupération et met à jour l'aperçu immédiatement.
- LinkedIn : Utilisez le LinkedIn Post Inspector. Passer votre URL dedans déclenche une nouvelle récupération. LinkedIn met habituellement en cache pendant environ 7 jours.
- X (Twitter) : X expire les caches de cartes tout seul, généralement en quelques jours. Il n'y a plus de bouton de rafraîchissement manuel public, donc changer l'URL de l'image est la solution fiable.
- Discord et Slack : Les deux mettent en cache les aperçus. L'astuce fiable est de changer le nom du fichier image ou d'ajouter une chaîne de requête (par exemple
og-image.jpg?v=2), ce que la plateforme traite comme une toute nouvelle URL sans cache.
L'astuce de la chaîne de requête (?v=2, ?v=3) est la solution de repli universelle. Comme le cache est lié à l'URL exacte de l'image, une nouvelle URL contourne l'entrée obsolète sur toutes les plateformes à la fois. Associez cela à une nouvelle récupération manuelle sur Facebook et LinkedIn, et votre aperçu se met à jour partout.
Pourquoi votre image n'est peut-être jamais apparue#
Si l'aperçu était cassé dès le premier partage, le cache n'est pas en cause. Vérifiez ces points dans l'ordre :
- URL d'image relative.
og:imagedoit être absolue (https://...), pas/og.jpg. - Image derrière une authentification ou une redirection. Les robots ne peuvent pas suivre les connexions. Ouvrez l'URL de l'image dans une fenêtre de navigation privée pour confirmer.
- Fichier trop volumineux ou mauvais format. Restez sous ~5 Mo et utilisez JPG ou PNG.
- Balise utilisant
nameau lieu deproperty. Rappelez-vous : les balisesog:nécessitentproperty, pasname. - Balises injectées par JavaScript après le chargement. De nombreux robots n'exécutent pas JS, donc les balises OG doivent être dans le HTML rendu par le serveur, pas ajoutées côté client.
Ce dernier point piège beaucoup d'applications monopages. Si vos balises n'apparaissent qu'après l'hydratation de React ou Vue, rendez-les côté serveur ou pré-rendez la page pour que le robot les voie dans la réponse HTML initiale.
Générer le bloc de balises complet sans codage manuel#
Écrire les balises à la main une fois est bon pour comprendre. Le faire pour chaque page est répétitif et facile à mal faire (une property manquante, une URL relative, une Twitter Card oubliée). Un générateur supprime le travail fastidieux tout en vous laissant le contrôle des valeurs.
Le générateur de balises Open Graph et meta vous permet de saisir votre titre, description et URL d'image, puis produit le bloc complet et correct avec les balises og: et twitter: prêtes à coller. Il utilise correctement property et name, rend les URLs absolues et inclut les balises de dimensions d'image pour un rendu plus rapide sur les plateformes.
Ensuite, passez le résultat dans l'outil de prévisualisation sociale et SERP pour confirmer que la carte est correcte avant sa mise en ligne. Cette boucle en deux étapes, générer puis prévisualiser, est la façon de livrer des aperçus de liens qui fonctionnent du premier coup, au lieu de les déboguer en public après qu'un post soit déjà sorti avec un rendu cassé.
Conclusion#
Apprendre à ajouter des balises Open Graph revient à suivre une routine courte et reproductible : insérez les cinq balises og: essentielles ainsi qu'un bloc Twitter Card dans votre <head>, pointez og:image vers une image JPG ou PNG absolue de 1200x630, puis validez avec le débogueur de chaque plateforme avant de partager. Lorsqu'un aperçu refuse de se mettre à jour, la cause est presque toujours une copie en cache, et la solution est un nouveau scan forcé ou une nouvelle URL d'image, pas de la patience.
Maîtrisez ces bases et chaque lien que vous partagez, sur Facebook, LinkedIn, X, Discord, Slack et au-delà, affichera une carte propre et personnalisée qui attire les clics. Générez les balises, prévisualisez la carte et publiez en toute confiance.
Foire aux questions#
Où placer les balises Open Graph dans mon HTML ?
Les balises Open Graph se placent dans la section <head> de votre page, avec vos autres balises meta. Elles doivent être présentes dans le HTML rendu par le serveur pour que les robots externes puissent les lire, car la plupart des robots n'exécutent pas le JavaScript qui ajoute des balises après le chargement de la page.
Quelle est la taille correcte pour og:image ? Utilisez 1200 x 630 pixels avec un rapport d'aspect de 1,91:1. Cette taille unique s'affiche correctement sur Facebook, LinkedIn, X, Discord et Slack sans recadrage gênant. Gardez le fichier sous environ 5 Mo, utilisez JPG ou PNG, et servez-le via HTTPS avec une URL absolue.
Pourquoi l'aperçu de mon lien n'affiche-t-il pas d'image ?
Les causes les plus courantes sont une URL og:image relative au lieu d'une URL absolue https://, une image derrière une connexion ou une redirection, un fichier trop volumineux, ou l'utilisation de name au lieu de property sur les balises og:. Si l'image était correcte mais a changé et ne se met pas à jour, la plateforme a mis en cache l'ancienne version et vous devez forcer un nouveau scan.
Comment mettre à jour un aperçu Open Graph mis en cache ?
Utilisez le Débogueur de partage de Facebook et cliquez sur "Scraper à nouveau", puis exécutez l'URL via l'Inspecteur de publications de LinkedIn pour déclencher une nouvelle récupération. Pour Discord, Slack ou tout cache récalcitrant, changez le nom du fichier image ou ajoutez une chaîne de version comme ?v=2, que la plateforme traite comme une nouvelle URL sans cache obsolète.
Dois-je ajouter des balises Twitter Card si j'ai déjà des balises Open Graph ?
Pas strictement, car X utilise vos balises og: par défaut si les balises Twitter Card sont absentes. Mais ajouter twitter:card défini sur summary_large_image en vaut la peine, car cela force l'affichage d'une grande image bannière au lieu d'une petite vignette, ce qui donne de meilleurs résultats dans le fil d'actualité.
Les balises Open Graph aident-elles mon référencement Google ? Non, les balises Open Graph n'influencent pas directement le classement Google. Elles contrôlent l'apparence de vos liens sur les réseaux sociaux et les plateformes de chat, ce qui génère des clics et des partages. Ce trafic de référence et de marque est précieux en soi, mais il s'agit d'un canal distinct des signaux de classement organique.
