Générateur de balises Open Graph

Les balises Open Graph sont ces petits bouts de HTML qui déterminent l'apparence de votre page lorsqu'elle est partagée sur Facebook, LinkedIn, Slack, Discord ou X (Twitter). Renseignez un titre, une description, une URL, une image et quelques options ci-dessous, observez l'aperçu de la carte se mettre à jour instantanément, puis copiez les balises <meta> générées directement dans le <head> de votre page. Tout se passe dans votre navigateur — rien n'est envoyé à un serveur.

En quoi consiste cet outil ?

Open Graph est un protocole, créé à l'origine par Facebook, qui permet à n'importe quelle page web de se décrire elle-même via un petit ensemble de balises <meta property="og:..."> placées dans le <head> du HTML. Lorsqu'un lien est collé dans une application sociale, un client de discussion ou un outil de messagerie, celui-ci lit ces balises pour construire la carte d'aperçu — titre, description et image — plutôt que de deviner à partir du contenu brut de la page.

Twitter (X) utilise un jeu de balises apparenté mais distinct, <meta name="twitter:...">, pour contrôler spécifiquement l'aperçu d'un lien sur sa plateforme. La plupart des sites définissent les deux : les balises Open Graph pour une large compatibilité, et les balises Twitter Card pour affiner l'aperçu sur X (par exemple en choisissant une grande image plutôt qu'un petit résumé).

Sans ces balises, un lien partagé n'affiche aucun aperçu, ou la plateforme tente de deviner un titre et une image à partir du contenu brut de la page — en choisissant souvent le mauvais titre, une image aléatoire du corps du texte, ou rien du tout. Définir explicitement og:title, og:description et og:image vous donne un contrôle total sur la façon dont votre contenu est présenté avant même qu'on ne clique dessus.

Pourquoi l'utiliser ?

Aperçu en direct — visualisez exactement à quoi ressemblera la carte de partage pendant que vous tapez, avant toute publication.
Génère à la fois les balises Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name) et les balises Twitter Card en une seule fois.
Couvre les champs réellement lus par les plateformes : titre, description, URL canonique, image, nom du site, type de contenu et style de carte Twitter.
Fonctionne entièrement côté client — votre titre, votre description et vos URL ne quittent jamais votre navigateur.
Gratuit, sans connexion, sans limite d'utilisation — copiez le résultat et collez-le dans votre HTML.

Mode d'emploi

Saisissez le titre de votre page et une description courte (visez moins de ~60 caractères pour le titre, ~155–160 pour la description).
Saisissez l'URL canonique de la page et l'URL absolue de l'image d'aperçu (les URL d'image doivent être complètes, par exemple https://example.com/image.jpg, pas un chemin relatif).
Définissez éventuellement le nom du site, choisissez un og:type (website, article, product, profile, video, music) et un type de Twitter Card (summary ou summary_large_image).
Vérifiez la carte d'aperçu en direct pour confirmer que le titre, la description et l'image s'accordent bien.
Cliquez sur « Copier » et collez les balises <meta> générées dans le <head> de votre page, juste avant la balise fermante </head>.

Exemple

Entrée

Titre : « 10 outils gratuits pour développeurs que vous utiliserez vraiment »
Description : « Une sélection d'outils dans le navigateur pour JSON, regex, UUID et plus — aucune installation requise. »
URL : https://example.com/blog/dev-tools
Image : https://example.com/images/dev-tools-cover.jpg

Résultat

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

Seuls les champs que vous renseignez sont inclus : laisser le nom du site vide omet simplement og:site_name du résultat.

Erreurs courantes à éviter

Absence totale d'og:image — sans elle, la plupart des plateformes n'affichent aucune image d'aperçu, ou récupèrent une image aléatoire de la page, ce qui paraît souvent cassé ou peu professionnel.
Utiliser un chemin d'image relatif comme /images/cover.jpg au lieu d'une URL complète comme https://example.com/images/cover.jpg — les robots sociaux ne peuvent généralement pas résoudre les chemins relatifs.
Mauvais ratio d'image — une image carrée ou verticale est recadrée maladroitement lorsque la plateforme la force dans le cadre paysage 1,91:1 ; concevez toujours votre image de partage proche de 1200×630.
Titres ou descriptions tronqués — gardez og:title sous ~60 caractères et og:description sous ~155–160 caractères pour éviter une coupure avec des points de suspension sur la plupart des plateformes.
Oublier de mettre à jour les aperçus en cache — après avoir modifié les balises og d'une page déjà en ligne, l'ancien aperçu peut persister dans le cache de Facebook ou LinkedIn jusqu'à ce que vous forciez manuellement une nouvelle exploration avec leurs outils de débogage.

Où chaque balise est utilisée

og:title, og:description et og:image sont les trois balises que presque toutes les plateformes lisent pour construire un aperçu. og:url indique aux robots le lien canonique auquel associer l'aperçu, ce qui importe si le même contenu est accessible via plusieurs URL. og:site_name affiche une petite étiquette (comme le nom de la publication ou de la marque) au-dessus du titre sur certaines plateformes, comme Facebook.

og:type modifie le type d'objet que représente la page pour les robots prenant en charge le modèle d'objet plus riche d'Open Graph — par exemple, article active og:article:published_time et og:article:author sur les plateformes qui les lisent, bien que la plupart des aperçus sociaux ignorent ces champs supplémentaires et n'utilisent que le trio titre/description/image.

twitter:card contrôle la mise en page spécifiquement sur X : summary affiche une petite vignette carrée à côté du texte, tandis que summary_large_image affiche une image pleine largeur au-dessus du texte — ce dernier choix est presque toujours préférable pour un contenu avec une image de couverture significative.

Foire aux questions

Quelle taille doit avoir mon og:image ?

1200×630px est la taille recommandée — assez grande pour les écrans haute densité, et proche du ratio d'environ 1,91:1 utilisé par Facebook, LinkedIn et X pour le recadrage. Gardez le fichier sous 5–8 Mo, utilisez JPG ou PNG, et assurez-vous que l'URL de l'image soit une URL absolue complète, pas un chemin relatif — la plupart des robots ne résolvent pas correctement les chemins relatifs.

Pourquoi mon aperçu ne s'affiche-t-il pas lors du partage du lien ?

Les causes les plus fréquentes sont : og:image manquant, une URL d'image relative plutôt qu'absolue, le robot bloqué par robots.txt, ou la plateforme qui affiche une version en cache d'un ancien aperçu. Facebook et LinkedIn mettent tous deux les aperçus en cache de façon agressive — utilisez le Sharing Debugger de Facebook ou le Post Inspector de LinkedIn pour forcer une nouvelle exploration après avoir mis à jour vos balises.

Quelle est la différence entre les balises og: et twitter: ?

Les balises og: (og:title, og:description, og:image, etc.) font partie du standard Open Graph, lu par Facebook, LinkedIn, Slack, Discord, WhatsApp et la plupart des autres plateformes. Les balises twitter: sont le format propre à Twitter/X. Si twitter:title ou twitter:image sont absentes, X se rabat automatiquement sur la balise og: équivalente — mais définir les deux explicitement vous donne plus de contrôle, notamment le choix de summary_large_image pour une grande image d'aperçu.

Quel og:type dois-je utiliser ?

« website » est le choix par défaut le plus sûr pour la plupart des pages, y compris les pages d'accueil et le contenu général. Utilisez « article » pour les billets de blog et les actualités (cela active des balises supplémentaires spécifiques aux articles, comme la date de publication), « product » pour les pages e-commerce, et « profile » pour les pages de profil personnel ou utilisateur. Le type affecte surtout les propriétés Open Graph supplémentaires valides, pas l'apparence de base de la carte d'aperçu.

Cet outil stocke-t-il ou envoie-t-il mes données quelque part ?

Non. Toute la génération se fait localement dans votre navigateur, en JavaScript. Rien de ce que vous saisissez n'est transmis, enregistré ou stocké — fermer l'onglet efface tout.