Rédigez des balises Open Graph et Twitter Card avec un aperçu social en direct.
Dernière mise à jour
Mode rédaction — remplissez le formulaire, regardez les aperçus, copiez les balises.
Champs des meta tags
Recommandé 1200×630, moins de 8 Mo, URL absolue (https).
Aperçu en direct
CODDY.TECH
Learn to code by doing — Coddy
Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy.
Balises <head> générées
<title>Learn to code by doing — Coddy</title>
<meta name="description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." />
<link rel="canonical" href="https://coddy.tech" />
<!-- Open Graph (Facebook, LinkedIn, Discord, Slack) -->
<meta property="og:title" content="Learn to code by doing — Coddy" />
<meta property="og:description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://coddy.tech" />
<meta property="og:image" content="https://storage.googleapis.com/coddy-15505.appspot.com/public/coddy-logo-trans.png" />
<meta property="og:image:alt" content="Coddy — Learn to code by doing" />
<meta property="og:site_name" content="Coddy" />
<meta property="og:locale" content="en_US" />
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Learn to code by doing — Coddy" />
<meta name="twitter:description" content="Free interactive coding lessons in Python, JavaScript, and more. Practice in the browser, earn certificates, and build real projects with Coddy." />
<meta name="twitter:image" content="https://storage.googleapis.com/coddy-15505.appspot.com/public/coddy-logo-trans.png" />
<meta name="twitter:image:alt" content="Coddy — Learn to code by doing" />
<meta name="twitter:site" content="@coddy_tech" />
C'est quoi un générateur d'aperçu Open Graph ?
Quand vous partagez un lien dans n'importe quelle app moderne — un post, un DM, un canal Slack — la plateforme va chercher l'URL et en extrait un petit bloc de métadonnées pour afficher une *carte de partage* : le titre, une description, une image et le nom du site. Ces métadonnées ne viennent pas du contenu visible de la page ; elles proviennent d'un ensemble précis de balises <meta> dans le <head>. Le protocole Open Graph, inventé à l'origine par Facebook en 2010, en définit la plupart. X (anciennement Twitter) en ajoute quelques-unes avec les préfixes twitter:. LinkedIn, Discord, Slack, iMessage, WhatsApp et Pinterest lisent tous les mêmes balises, avec de petites variations.
Bien renseigner ces balises est un travail à faire une seule fois par page, mais il a un impact démesuré. Une page sans image Open Graph a l'air cassée quand on la partage. Un titre trop long se fait couper au milieu d'un mot. Le mauvais ratio d'og:image est letterboxé par toutes les plateformes. Cet outil vous laisse ajuster ces valeurs avec des aperçus en direct, pour que vous voyiez les problèmes de troncature et de recadrage *avant* de mettre la page en production.
Tout tourne en local. L'état du formulaire, les aperçus et le HTML généré ne quittent jamais votre navigateur — collez des URL avant lancement et du texte non publié sans vous inquiéter des fuites.
Ce que vous allez apprendre en l'utilisant
Les balises Open Graph utilisent l'attribut property (<meta property="og:title">), tandis que les balises SEO standard et Twitter Card utilisent name (<meta name="description">, <meta name="twitter:card">).
Les balises de titre et de description doivent être renseignées à *trois* endroits quand le trafic de partage compte : SEO standard (title, meta description), Open Graph (og:title, og:description) et Twitter (twitter:title, twitter:description).
og:image doit faire 1200×630, être servi en HTTPS et avoir une URL absolue — les chemins relatifs échouent quand d'autres serveurs récupèrent la page.
Comment rédiger des balises Open Graph, étape par étape
1
Écrivez un titre court et percutant
Visez 50 à 60 caractères. Facebook tronque autour de 95 caractères et X autour de 70. Mettez la valeur en avant, pas la marque — "Comment déployer avec Cloudflare Workers" vaut mieux que "Blog Coddy · Guide de déploiement".
2
Écrivez une description en une phrase
Visez 120 à 155 caractères. La plupart des plateformes tronquent autour de 200. Utilisez des phrases complètes — la description apparaît sous le titre dans chaque carte, et les fragments coupés font inachevé.
3
Définissez l'URL canonique
Utilisez l'URL https:// absolue de la page elle-même, pas un lien de tracking ou de redirection. Les crawlers Open Graph suivent og:url pour dédupliquer les partages — une URL canonique garde les compteurs de partages et les aperçus cohérents.
4
Fournissez une URL d'image absolue
1200×630 est la taille idéale pour les cartes summary_large_image sur X et les cartes standard sur Facebook et LinkedIn. PNG ou JPEG, moins de ~5 Mo. Utilisez toujours une URL absolue — les chemins relatifs échouent parce que le crawler social attaque l'URL depuis son propre serveur.
5
Copiez les balises générées
Collez le bloc du panneau **Balises <head> générées** dans le <head> de votre page. Après déploiement, validez avec le débogueur de chaque plateforme (Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector) et forcez un recrawl si vous changez l'image plus tard.
Référence des balises Open Graph et Twitter Card
Les balises ci-dessous couvrent tout ce que les plateformes sociales lisent aujourd'hui. Les balises marquées property= font partie du protocole Open Graph ; celles marquées name= sont les variantes SEO standard / Twitter Card. Spécifications de référence : Open Graph, X Cards.
Balise
Utilisée par
Recommandé
Notes
og:title
FB, LinkedIn, Slack, Discord
50-60 caractères
Retombe sur <title> si absente — renseignez-la quand même.
og:description
FB, LinkedIn, Slack, Discord
120-155 caractères
Retombe sur meta description si absente.
og:image
Toutes les plateformes
1200×630, < 5 Mo, HTTPS, URL absolue
Doit être une URL absolue — les chemins relatifs échouent.
og:image:alt
Accessibilité
Décrivez l'image
Utilisée par les lecteurs d'écran et certaines plateformes.
og:url
FB, LinkedIn
URL canonique en https://
Sert à dédupliquer les partages malgré les variantes de query string.
Affiché comme la petite attribution au-dessus/en-dessous de la carte.
twitter:card
X
summary_large_image
summary pour une petite vignette carrée, summary_large_image pour la mise en page en bannière.
twitter:title
X
Identique à og:title
X retombe sur og:title si absente — renseignez les deux par sécurité.
twitter:description
X
Identique à og:description
Retombe sur og:description si absente.
twitter:image
X
Identique à og:image
Retombe sur og:image si absente.
twitter:site
X
@votremarque
Le handle X de l'éditeur — alimente certaines analytics.
Motifs Open Graph à essayer
Article de blog
Mettez **og:type** à article, ajoutez **Auteur** et **Date de publication** dans la section dédiée aux articles, et utilisez une image de couverture 1200×630. Les aperçus se mettent à jour pour montrer le rendu de la carte sur chaque plateforme.
og:type=article débloque les balises spécifiques aux articles (article:published_time, article:author) que certaines plateformes (Discord, LinkedIn) utilisent pour faire ressortir l'attribution. Twitter les ignore mais ne se plaint pas.
Page produit ou landing
Gardez **og:type** sur website. Utilisez le nom du produit comme titre, une proposition de valeur en une phrase comme description, et un visuel hero ou une capture d'écran recadrée comme image.
Les landing pages n'ont pas besoin de métadonnées d'article. L'élément le plus cliqué sur une carte de landing partagée est généralement l'image, alors investissez dans un visuel 1200×630 propre.
Page de documentation
Titre : "Concept — Section · Docs". Description : une phrase qui explique le concept. Image : une couverture générique de docs ou une capture d'écran de l'UI concernée.
Les pages de docs se partagent dans les canaux Slack et les fils X. Une image de couverture de docs cohérente les rend reconnaissables dans un feed chargé, avant même que le titre soit lu.
Erreurs Open Graph fréquentes
Utiliser une URL og:image relative comme /images/cover.png. Les crawlers sociaux attaquent votre page depuis *leurs* serveurs — les chemins relatifs pointent vers le domaine de la plateforme sociale et renvoient 404. Utilisez toujours une URL absolue en https://.
Oublier twitter:card. Sans elle, X retombe sur une carte minimale sans image. Ajoutez twitter:card=summary_large_image pour obtenir la bannière que pratiquement toutes les marques veulent.
Sauter la balise og:image:alt. Elle ne coûte rien, aide les utilisateurs de lecteurs d'écran, et quelques plateformes l'affichent comme texte alternatif sur la carte rendue.
FAQ Aperçu Open Graph
C'est quoi Open Graph ?
Open Graph est un protocole publié par Facebook en 2010 qui permet à une page web de se décrire elle-même avec un petit ensemble de balises <meta> — titre, description, image, type, etc. Toutes les grandes plateformes sociales et de chat le lisent aujourd'hui, ce qui en a fait le standard de fait pour les métadonnées de cartes de partage.
Twitter Cards vs Open Graph — faut-il les deux ?
Livrez les deux. X (Twitter) retombe de ses balises twitter: sur les balises og: équivalentes quand celles spécifiques à X manquent, donc on peut techniquement s'en sortir avec juste Open Graph. Mais ajouter twitter:card, twitter:site et twitter:creator vous donne un contrôle plus fin sur le rendu de la carte sur X.
Quelle taille pour og:image ?
1200×630 pixels (un ratio 1.91:1) est la taille la plus sûre. Facebook, LinkedIn et X affichent tous bien ce ratio. Gardez le fichier sous ~5 Mo et servez-le en HTTPS à une URL absolue — les chemins relatifs échouent quand d'autres serveurs récupèrent votre page.
Pourquoi mon aperçu ne se met-il pas à jour sur Facebook ?
Facebook cache les cartes de partage de façon très agressive. Après avoir changé les meta tags, collez l'URL dans le Facebook Sharing Debugger et cliquez sur *Scrape Again*. La même astuce marche pour X avec le Card Validator et pour LinkedIn avec le Post Inspector.
Google utilise-t-il les balises Open Graph ?
Pour le ranking, non — le crawler de Google lit le contenu de la page, votre <title> et la meta description. Google récupère occasionnellement og:image pour la recherche d'images et les surfaces Discover, mais ce n'est pas un signal de classement.
Puis-je générer une image différente par page automatiquement ?
Oui — la plupart des frameworks supportent les images Open Graph dynamiques. Next.js a son API OG Image Generation, SvelteKit et Astro ont des motifs similaires. Générez l'image au moment de la requête et cachez-la agressivement — les crawlers sociaux time-out rapidement.
