Notre générateur de balises Open Graph et Twitter Card produit instantanément le code HTML à coller dans le <head> de votre page pour contrôler l’apparence de vos liens lorsqu’ils sont partagés sur Facebook, LinkedIn, Twitter/X, WhatsApp, Slack, Discord ou Telegram. Aperçu visuel en temps réel, code prêt à copier, gratuit et sans inscription.
Pourquoi les balises Open Graph sont essentielles
Quand quelqu’un partage l’URL de votre site sur un réseau social ou dans une messagerie, la plateforme lit automatiquement les balises Open Graph (protocole ouvert créé par Facebook en 2010) dans le HTML de votre page et affiche un aperçu avec une image, un titre et une description. Sans ces balises, le partage affiche une preview vide, grise ou tronquée qui décourage les clics.
Les balises Open Graph sont devenues un standard de facto. Elles sont reconnues par Facebook, LinkedIn, Pinterest, WhatsApp, iMessage, Slack, Discord, Telegram et la plupart des outils de partage. Twitter/X utilise son propre système (Twitter Cards) mais la configuration est similaire.
Les balises Open Graph indispensables
| Balise | Rôle | Remarque |
|---|---|---|
og:title | Titre du partage | 50 à 60 caractères, différent du H1 si besoin |
og:description | Description courte | 150 à 200 caractères, tronqué au-delà |
og:url | URL canonique | Doit correspondre à l’URL réelle |
og:image | Image de la preview | Obligatoire pour des previews visuelles |
og:type | Type de contenu | website, article, product, profile… |
og:site_name | Nom du site | Affiché sous le titre (Facebook/LinkedIn) |
og:locale | Langue du contenu | fr_FR, en_US, es_ES… |
La balise og:image en détail
L’image est l’élément le plus important de votre preview : c’est elle qui attire l’œil dans un fil d’actualité rempli de liens. Les bonnes pratiques en 2026 :
- Dimensions idéales : 1200 × 630 pixels. Ratio 1,91:1. C’est le format attendu par Facebook, LinkedIn, Twitter (card summary_large_image) et la plupart des plateformes.
- Poids : moins de 5 Mo, idéalement sous 1 Mo pour accélérer le crawl.
- Format : JPG ou PNG. WebP fonctionne aussi mais certaines plateformes anciennes ne le lisent pas encore.
- URL absolue : toujours
https://example.com/cover.jpget non/cover.jpg. - Contenu lisible au petit format : si votre image contient du texte, il doit rester lisible à 400 px de large. Évitez les images floues ou trop détaillées.
- Zone de sécurité : Twitter coupe parfois 5-10 % des bords. Gardez les éléments importants au centre.
Twitter Cards : les 4 types
| Type | Usage | Format image |
|---|---|---|
summary | Preview classique avec petite image carrée | 120 × 120 px min |
summary_large_image | Preview avec grande image paysage (recommandé) | 300 × 157 px min, 1200 × 628 idéal |
app | Promotion d’une app mobile | Icônes de l’App Store / Play Store |
player | Video player embarqué | Nécessite approbation Twitter |
Dans 90 % des cas, summary_large_image est le bon choix : la preview occupe plus de place dans le fil, ce qui augmente le taux de clic.
Comment tester ses balises avant publication
Après avoir collé votre code dans le <head> de votre page et mis à jour en ligne, testez votre preview avec les outils officiels des plateformes :
- Facebook Sharing Debugger :
developers.facebook.com/tools/debug— rafraîchit le cache Facebook de votre URL - LinkedIn Post Inspector :
linkedin.com/post-inspector— idem pour LinkedIn - Twitter Card Validator (déprécié, mais encore utile) ou tester directement en postant sur X
- OpenGraph.xyz : outil tiers qui simule le rendu sans avoir besoin de poster réellement
Important : ces plateformes mettent en cache les previews. Si vous modifiez vos balises après un premier partage, il faut explicitement rafraîchir le cache via le debugger (sinon les anciens visuels restent affichés pendant des jours).
Les erreurs classiques à éviter
- URL relative pour l’image. Toujours mettre l’URL complète
https://..., jamais/assets/cover.jpg. - Image en HTTP sur un site HTTPS. Les navigateurs modernes bloquent le contenu mixte. L’image doit aussi être en HTTPS.
- Balises en double. Certains plugins CMS ajoutent leurs propres balises. Si vous en ajoutez manuellement, vérifiez qu’il n’y a pas de conflit avec Yoast SEO, Rank Math, All in One SEO…
- Description trop longue. Les plateformes tronquent à 200 caractères (parfois moins). Restez concis et termine par un appel à l’action.
- Image trop lourde. Au-dessus de 5 Mo, les crawlers abandonnent et la preview tombe en erreur.
- Manque de og:type. Sans cette balise, certaines plateformes affichent un type par défaut peu flatteur ou refusent la preview riche.
Foire aux questions
Dois-je ajouter les balises manuellement si j’utilise Yoast SEO ?
Non. Yoast SEO, Rank Math et les principaux plugins SEO génèrent automatiquement les balises Open Graph et Twitter Card à partir du titre, de la description et de l’image mise en avant de votre page. Notre générateur est utile pour du HTML statique, des pages sur-mesure ou pour vérifier le rendu avant publication.
Où coller le code généré ?
Dans la section <head> de votre page HTML, de préférence juste après les balises meta charset et meta viewport. Sur WordPress, un thème enfant ou un plugin de type « Insert Headers and Footers » permet d’injecter ce code sans modifier les fichiers sources.
Puis-je avoir une image Open Graph différente par article ?
Oui, c’est même recommandé. Chaque page devrait avoir ses propres balises Open Graph avec son titre, sa description et son image spécifiques. Les plugins SEO WordPress le font automatiquement pour chaque article.
Que se passe-t-il si je n’ai pas de balise og:image ?
Les plateformes essaient de trouver une image dans le contenu de la page (première image du HTML généralement). Le résultat est imprévisible : icône du site, logo, image peu flatteuse. Toujours définir explicitement une og:image pour garder le contrôle.
Les données sont-elles envoyées à un serveur ?
Non. Toute la génération se fait localement dans votre navigateur. Vos titres, descriptions et URLs ne sont jamais transmis.
