Guide complet des balises Open Graph - og:title, image et Twitter Cards (2026)

Quand quelqu'un colle votre URL dans Facebook, LinkedIn, Slack, Discord ou iMessage, ces apps ne devinent pas a partir de la page visible. Elles cherchent des balises Open Graph dans le head HTML : titre, description, image, type et URL canonique. Bien faites, la carte ressemble a un apercu designe. Absentes, vous avez une image au hasard, un titre coupe, ou aucune carte. Ce guide parcourt le protocole, les balises qui comptent, la difference avec le title HTML et la meta description, et les erreurs qui cassent l'apercu. Pour du markup a coller, utilisez le Generateur de balises Open Graph - tout tourne dans le navigateur, rien n'est envoye.

Que sont les balises Open Graph

Open Graph est un petit vocabulaire de meta tags. Chaque balise est une paire nom/valeur dans le head du document. Le nom utilise le prefixe og:. Les crawlers des apps sociales fetchent l'URL publique, lisent ces balises et construisent une carte : image en haut ou sur le cote, titre, description, et souvent le nom du site. Le protocole est ne chez Facebook. C'est devenu le format de partage par defaut sur presque tout le web.

• Facebook et Instagram lisent og:* en premier pour les apercus de lien.
• LinkedIn, Slack, Discord, Telegram et iMessage reutilisent les memes balises.
• X (Twitter) peut retomber sur Open Graph, mais twitter:* gagne quand les deux existent.
• Les moteurs utilisent encore le title HTML et la meta description pour la SERP. OG sert aux partages, pas au lien bleu sur Google.

Une balise ressemble a meta property="og:title" content="Votre titre de partage". La property est la cle. Le content est la valeur. Les caracteres speciaux de la valeur doivent etre echapper pour que le HTML reste valide. Le generateur s'occupe de cet echappement.

Les quatre balises dont chaque page a besoin

L'objet de base Facebook demande quatre properties. S'il en manque une, ou si elle est vide, beaucoup de crawlers inventent un fallback - ou affichent une carte cassee.

• og:title - le titre de la carte. Court et precis. Il peut differer du title HTML que vous voulez sur Google.
• og:type - le type d'objet. website est le defaut pour une home ou une landing. article convient a un article de blog.
• og:image - une URL https absolue vers l'image. Les chemins relatifs (/images/og.png) echouent : le crawler n'a pas de contexte de page.
• og:url - l'URL canonique de cet objet. Elle doit matcher l'URL publique partagee, avec https et l'hote prefere (www ou apex).

Ces quatre-la sont le minimum. Une carte avec seulement un titre et sans image a l'air inachevee. Une carte avec image et un titre vague gaspille le clic.

Extras recommandes

• og:description - une ou deux phrases sous le titre. Visez environ 70 a 200 caracteres. Ce n'est pas forcement la meme chaine que votre meta description.
• og:site_name - votre marque. LinkedIn et Slack l'affichent souvent sous le titre pour que la source soit claire.
• og:locale - langue et region avec un underscore, par exemple en_US, es_ES ou pt_BR. Utilisez-le quand la page n'est pas en anglais.

Vous pourrez plus tard ajouter des champs riches du type (article:author, product:price:amount). Commencez par le set de base. Un objet de base complet bat un objet product a moitie rempli.

Valeurs og:type que vous utiliserez vraiment

Le type dit au crawler comment traiter l'URL. Un mauvais type casse rarement la carte, mais il change quels extras ont du sens et comment certaines apps groupent l'objet.

• website - homes, index de categorie et landings generiques.
• article - billets, news et guides how-to. Associez une URL datee et une image unique.
• product - une fiche produit ou une page de prix. Titre clair et image hero.
• profile - page de personne ou d'auteur.

En cas de doute, website est sur. N'inventez pas de types custom. Les crawlers ignorent les noms inconnus.

Regles og:image

L'image est la premiere chose vue. Une image faible ou absente est la raison la plus courante d'un partage quelconque.

• Utilisez 1200 x 630 pixels pour une carte paysage. Ce ratio (environ 1.91:1) est celui que Facebook et LinkedIn attendent.
• Restez au-dessus de 600 x 315 pour que le crawler ne bascule pas vers une miniature minuscule.
• L'URL doit etre absolue et https. Hebergez le fichier sur un CDN public ou votre origine. Un mur de login ou un blocage robots.txt cache l'image.
• Gardez le fichier raisonnable (bien sous 8 Mo). PNG ou JPEG conviennent. Evitez WebP si d'anciens caches Facebook doivent encore le fetch.
• Placez le sujet au centre. Certaines apps recadrent les cotes sur mobile.

Twitter Cards vs Open Graph

X peut lire og:title, og:description et og:image. Il a aussi ses propres balises twitter:*. Si les deux sont presentes, twitter:* gagne sur X et og:* gagne partout ailleurs. C'est pour cela que la plupart des pages emettent les deux.

• twitter:card - summary_large_image quand vous avez une image large, ou summary sinon.
• twitter:title, twitter:description, twitter:image - en general les memes valeurs que les og:* correspondants.
• Vous n'avez pas besoin d'un handle Twitter pour une carte large-image basique.

Si vous ne publiez que de l'Open Graph, X affichera souvent quand meme une carte. Si vous ne publiez que des tags Twitter, Facebook et LinkedIn n'afficheront rien. Open Graph est la base partagee. Les tags Twitter sont la couche extra pour X.

OG vs title HTML vs meta description

Trois chaines, trois jobs. Les melanger, c'est avoir un bon extrait SERP et une carte Slack faible - ou l'inverse.

• Title HTML - le titre du resultat de recherche et l'onglet du navigateur. Ciblez ici les requetes transactionnelles ou informatives.
• Meta description - l'extrait SERP sous ce titre. Google peut le reecrire.
• og:title et og:description - la carte sociale. Ecrivez pour quelqu'un qui a deja le lien, pas pour un mot-cle.

Une page d'outil peut garder un title HTML transactionnel (Generateur de balises Open Graph gratuit) et un og:title plus clair (Generer des balises Open Graph pour cet article). Un billet peut faire l'inverse. Verifiez l'extrait SERP avec le Verificateur de meta-description et apercu SERP. Verifiez la carte de partage avec les balises OG.

Exemple concret

Un article sur Open Graph lui-meme pourrait utiliser ces valeurs. Une fois collees dans le head de l'URL publique, un crawler devrait voir un objet complet.

• og:title - Les balises Open Graph expliquees
• og:description - Ce que font og:title, og:image, og:url et og:type, plus Twitter Cards et taille d'image.
• og:type - article
• og:url - https://www.toolsminify.com/blog/open-graph-tags-complete-guide
• og:image - un PNG ou JPEG 1200 x 630 en https
• og:site_name - ToolsMinify
• og:locale - fr_FR
• twitter:card - summary_large_image, avec le meme titre, description et image

Guillemets et esperluettes dans un titre doivent devenir " et & dans l'attribut content. Si vous ecrivez les balises a la main et que la page ne parse plus, cet echappement est le premier endroit a regarder.

Erreurs courantes

• og:image ou og:url relatives. Les deux doivent etre absolues.
• og:url qui ne matche pas le lien partage (http vs https, apex vs www, prefixe de locale manquant).
• Une image sous 200 x 200, ou un recadrage 1:1 que LinkedIn met ensuite en boite.
• Balises dans le body au lieu du head. Les crawlers regardent le head.
• Bloquer l'image ou la page dans robots.txt. Les crawlers sociaux doivent aussi les fetch.
• Cache Facebook perime. Apres un changement, rescrapez l'URL dans le Sharing Debugger. Les autres apps ont leur propre cache.
• og:title en double et en conflit. La premiere gagne en general, et ce ne sera pas celle que vous voulez.
• Mettre des secrets ou un brouillon inedit dans og:description. Les balises sont publiques des que l'URL l'est.

Questions frequentes

Les balises Open Graph sont-elles un facteur de ranking Google ?

Pas directement. Google utilise le title HTML, la meta description et le contenu pour la recherche. Les balises OG aident a partager la page avec une carte propre. De meilleurs partages peuvent amener des liens et des visites. C'est un effet indirect, pas un interrupteur de ranking.

Quelles balises Open Graph sont requises ?

Commencez par og:title, og:type, og:image et og:url. Ajoutez og:description, og:site_name et og:locale quand vous les avez. Des balises vides sont pires que des balises absentes.

Quelle taille pour og:image ?

1200 x 630 pixels est le format paysage habituel. Restez au-dessus de 600 x 315. Utilisez une URL https absolue. Centrez le sujet pour que le recadrage mobile ne coupe pas le texte de l'image.

Faut-il des Twitter Cards si j'ai deja Open Graph ?

X peut lire les balises OG, mais twitter:card plus titre, description et image vous donnent un controle explicite sur ce reseau. Facebook et LinkedIn ignorent twitter:* et ont toujours besoin de og:*. Emettez les deux quand vous pouvez.

Pourquoi Facebook affiche-t-il encore l'ancienne image ?

Facebook met en cache le premier scrape. Changez l'URL de l'image (ou attendez), puis passez l'URL dans le Sharing Debugger Facebook pour demander un nouveau scrape. LinkedIn et Slack ont des caches similaires. Changer seulement les octets du fichier a la meme URL ne suffit souvent pas.

Ou coller le HTML ?

Dans le head du document HTML public, ou dans l'API de metadata de votre framework pour qu'il rende dans le head. Les balises doivent etre visibles sur l'URL exacte definie comme og:url. Pour le pas-a-pas du generateur, voir Comment utiliser le Generateur de balises Open Graph.

Construire les balises dans le navigateur

Remplissez titre, description, URL et image, puis copiez le HTML en direct. Rien n'est envoye :

• Generateur de balises Open Graph - construire og:* et des Twitter Cards optionnelles, avec apercu social.
• Comment utiliser le Generateur de balises Open Graph - guide pas a pas du meme outil.
• Verificateur de meta-description et apercu SERP - verifier l'extrait de recherche, pas la carte de partage.
• Generateur de slugs - slugs d'URL propres pour la page que vous allez partager.
• Tous les outils SEO - l'index complet de la categorie.