Skip to content

Générateur de balises meta & Open Graph

Générez des balises Open Graph, Twitter Card et SEO avec un aperçu en direct pour Google, Facebook et X. 100 % gratuit, dans le navigateur, sans inscription — copiez-collez le code.

Sans pistage Fonctionne dans le navigateur Gratuit
Tout s'exécute dans votre navigateur. Votre contenu et l'URL de votre image ne quittent jamais cette page — pas de téléversement, pas d'inscription.
SEO de base
Open Graph (Facebook, LinkedIn…)
X (Twitter) Card
Avancé et icônes
Vérifications
    Balises <head> générées
     
    Importer depuis un <head> existant (analysé localement, rien de téléversé)
    Vérifier après le déploiement : Facebook LinkedIn Google Rich Results
    Sortie des balises et spécifications des plateformes vérifiées par rapport au protocole Open Graph (ogp.me), à Google Search Central et à la documentation de partage actuelle de Facebook, X, LinkedIn et Discord. — Go Tools Team · 15 juil. 2026

    Que sont les balises meta et Open Graph ?

    Les balises meta sont des fragments de HTML placés dans le <head> de votre page qui la décrivent aux navigateurs, aux moteurs de recherche et aux plateformes sociales. Les balises SEO classiques sont le <title>, la meta description et le lien canonique. Les balises Open Graph (og:title, og:type, og:image, og:url et les autres) forment un protocole, à l'origine créé par Facebook, qui contrôle le titre, la description et l'image affichés lorsque votre lien est partagé — et presque toutes les plateformes les lisent, y compris LinkedIn, Slack, Discord, WhatsApp, Pinterest et Telegram.

    Twitter/X utilise ses propres balises twitter:card mais se rabat sur vos balises Open Graph lorsqu'elles sont absentes : un bon jeu de balises OG plus une seule valeur twitter:card couvre donc tous les réseaux. Ce générateur écrit toutes ces balises, ajoute des données structurées JSON-LD optionnelles et affiche le résultat en direct — vous n'avez ainsi jamais à les rédiger à la main ni à deviner l'apparence d'un partage.

    Spécifications d'images et de balises sociales par plateforme

    Open Graph (Facebook et LinkedIn)

    Les deux lisent og:title, og:description, og:image et og:url. Image recommandée : 1200×630 (1,91:1). Facebook met en cache ~30 jours ; LinkedIn ~7 jours — re-scannez avec leurs débogueurs après le déploiement.

    X (Twitter) Card

    twitter:card est obligatoire (summary_large_image ou summary). X se rabat sur og:* pour le reste. Une seule image 1200×630 fonctionne à la fois pour OG et X ; les images de moins de 300×157 rétrogradent une grande carte en une petite.

    Slack et Discord

    Slack lit d'abord Twitter Card puis Open Graph et peut afficher deux champs supplémentaires via twitter:label/data. Discord lit Open Graph et est le seul à utiliser theme-color pour la barre d'accentuation de l'intégration.

    WhatsApp et Telegram

    WhatsApp a besoin d'og:title et d'og:image avec les métadonnées près du début du HTML ; Telegram lit Open Graph et n'affiche de façon fiable que les images JPEG ou PNG.

    Rich Pins Pinterest

    Pinterest lit Open Graph ou Schema.org. Un Rich Pin Article a besoin d'og:type=article ainsi que d'article:published_time et d'article:author — tous générés ici lorsque vous choisissez le type article.

    Extrait de recherche Google

    L'aperçu SERP en direct sur ordinateur et mobile mesure votre titre et votre description en pixels — et non seulement en caractères — pour que vous repériez le risque de troncature avant Google.

    Exemples de balises meta

    Page d'accueil d'un site web

    Title: Acme — Ship faster
    Description: The all-in-one platform for modern teams.
    URL: https://acme.com
    Image: https://acme.com/og/home.png (1200×630)
    <title>Acme — Ship faster</title>
    <meta name="description" content="The all-in-one platform for modern teams.">
    <link rel="canonical" href="https://acme.com">
    
    <meta property="og:title" content="Acme — Ship faster">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://acme.com/og/home.png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:url" content="https://acme.com">
    
    <meta name="twitter:card" content="summary_large_image">

    Une page d'accueil n'a besoin que des quatre balises Open Graph obligatoires, plus un titre, une description et une balise canonique. Comme l'image fait 1200×630, la largeur et la hauteur sont renseignées automatiquement, si bien que le tout premier partage sur Facebook s'affiche instantanément au lieu de rester vide.

    Article de blog (avec article:* + JSON-LD)

    og:type: article
    Title: The Complete Guide to Open Graph Tags
    Author: Ada Lovelace
    Published: 2026-07-15
    <meta property="og:title" content="The Complete Guide to Open Graph Tags">
    <meta property="og:type" content="article">
    <meta property="og:image" content="https://blog.example.com/og/guide.png">
    <meta property="og:url" content="https://blog.example.com/open-graph-guide">
    <meta property="article:published_time" content="2026-07-15T00:00:00Z">
    <meta property="article:author" content="Ada Lovelace">
    
    <meta name="twitter:card" content="summary_large_image">
    
    <script type="application/ld+json">{ "@type": "Article", "headline": "The Complete Guide to Open Graph Tags", "datePublished": "2026-07-15T00:00:00Z" }</script>

    Choisir le type article débloque les propriétés article:published_time et article:author et génère le JSON-LD Article correspondant, de sorte que les moteurs de recherche et les Rich Pins Pinterest obtiennent des données structurées sans effort.

    Twitter/X hérite d'Open Graph

    twitter:card: summary_large_image
    Inherit title/description/image from OG: on
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@acme">

    X lit vos balises Open Graph lorsque la balise twitter:* correspondante est absente : vous n'avez donc besoin que de twitter:card. Le générateur n'émet jamais de twitter:image vide, ce qui casserait ce mécanisme de repli.

    Comment ajouter des balises Open Graph à votre site

    1. 1

      Saisissez le titre, la description et l'URL

      Tapez le titre de votre page, la meta description et l'URL canonique. La jauge de pixels indique s'ils tiennent dans l'extrait de recherche Google.

    2. 2

      Ajoutez une og:image et choisissez le type

      Collez l'URL d'une image 1200×630 et choisissez website, article, product ou profile — les champs Open Graph et le JSON-LD correspondants apparaissent automatiquement.

    3. 3

      Vérifiez les aperçus en direct

      Basculez entre les onglets Google, Facebook, X, LinkedIn, Slack et Discord pour voir exactement l'apparence de votre lien avant de le publier.

    4. 4

      Copiez dans votre

      Copiez le bloc complet de balises (ou une seule section) et collez-le dans le de votre HTML. Vérifiez après le déploiement avec les débogueurs Facebook et LinkedIn.

    Erreurs Open Graph courantes

    Chemin og:image relatif

    Un chemin comme /cover.png fonctionne dans votre éditeur mais reste vide au partage, car les robots ont besoin d'une URL absolue.

    ✗ Incorrect
    <meta property="og:image" content="/cover.png">
    ✓ Correct
    <meta property="og:image" content="https://example.com/cover.png">

    og:url manquante

    Sans og:url canonique, les compteurs de partage se répartissent entre plusieurs variantes d'URL et les plateformes peuvent choisir la mauvaise adresse.

    ✗ Incorrect
    <!-- no og:url -->
    ✓ Correct
    <meta property="og:url" content="https://example.com/page">

    Image trop petite ou mauvais rapport

    Facebook ignore les images en dessous de 200×200 et rogne tout ce qui s'éloigne de 1,91:1.

    ✗ Incorrect
    600×600 og:image
    ✓ Correct
    1200×630 og:image (1.91:1)

    Oublier twitter:card

    Même avec des balises Open Graph complètes, X n'affiche aucune carte si twitter:card n'est pas définie.

    ✗ Incorrect
    <!-- OG only, no twitter:card -->
    ✓ Correct
    <meta name="twitter:card" content="summary_large_image">

    Une twitter:image vide casse le repli

    Une twitter:image vide empêche X de se rabattre sur og:image — omettez la balise au lieu de la laisser vide.

    ✗ Incorrect
    <meta name="twitter:image" content="">
    ✓ Correct
    <!-- omit it; X uses og:image -->

    Charset placé trop tard

    La déclaration de charset doit apparaître dans les 1024 premiers octets du document, sinon elle est ignorée.

    ✗ Incorrect
    <meta charset> after many tags
    ✓ Correct
    <meta charset="utf-8"> first in <head>

    Cas d'usage courants

    Lancer une landing page
    Générez le bloc head complet pour une nouvelle page marketing afin qu'elle soit soignée dès que quelqu'un partage le lien sur X, LinkedIn ou Slack.
    Aperçus de blog et d'articles
    Ajoutez article:published_time, article:author et le JSON-LD Article pour que les publications soient éligibles aux Rich Pins Pinterest et aux cartes sociales enrichies.
    Réparer un partage cassé
    Importez vos balises actuelles, repérez l'og:image manquante ou la mauvaise dimension dans le panneau de vérifications, corrigez-la, et re-scannez avec les liens vers les débogueurs.
    Extraits head pour frameworks
    Copiez un jeu de balises propre et correct à insérer dans un site statique, un modèle de CMS ou un partial head rendu côté serveur.

    Comment fonctionne le générateur

    Aperçu en direct, dans le navigateur
    Chaque carte est rendue à partir des valeurs que vous saisissez, jamais en récupérant votre URL. Les aperçus restent ainsi instantanés et privés, et c'est la seule façon honnête de prévisualiser avant qu'une page ne soit déployée.
    Jauge SERP précise au pixel
    Google tronque les titres et les descriptions selon la largeur en pixels, pas le nombre de caractères. Un canvas mesure votre texte dans la même police, de sorte que la jauge passe à l'orange exactement au moment où l'extrait serait coupé.
    Vérification d'image côté client
    L'URL de votre og:image est chargée dans un objet Image de votre navigateur pour lire sa largeur et sa hauteur réelles, puis comparée à 1200×630 et au rapport d'aspect de la carte. Les images cross-origin indiquent tout de même leur taille, si bien que la vérification fonctionne sans aucun téléversement.
    Jeu de balises complet et moderne
    SEO de base, Open Graph, Twitter Card et JSON-LD dans un seul bloc, avec le charset émis en premier pour qu'il tienne dans les 1024 premiers octets. Les balises héritées comme meta keywords sont désactivées par défaut.

    Bonnes pratiques des balises meta

    Utilisez des URL HTTPS absolues
    og:image et og:url doivent être des URL https://… complètes. Les chemins relatifs fonctionnent en local mais s'affichent vides lorsqu'un robot récupère la page en ligne.
    Définissez toujours og:image:width et height
    Déclarer les dimensions permet aux plateformes de mettre en page la carte immédiatement, de sorte que le premier partage n'est pas vide pendant qu'elles récupèrent l'image de façon asynchrone.
    Gardez la balise canonique et og:url identiques
    Faites pointer les deux vers l'unique URL canonique pour que les compteurs de partage et les signaux de recherche ne soient pas répartis entre plusieurs variantes d'URL.
    Rédigez pour le budget en pixels
    Visez un titre d'environ 50 à 60 caractères et une description d'environ 155 — mais fiez-vous à la jauge de pixels, puisque Google mesure la largeur, pas le nombre de caractères.
    Générez les balises côté serveur
    Les robots de Facebook, LinkedIn, WhatsApp, Telegram et Discord n'exécutent pas de JavaScript : les balises Open Graph doivent donc figurer dans le HTML statique ou rendu côté serveur.

    Questions fréquentes

    Qu'est-ce qu'un générateur de balises meta ?
    Un générateur de balises meta crée les balises HTML qui vont dans le <head> de votre page — le <title>, la meta description, le lien canonique, les balises Open Graph pour Facebook et LinkedIn, et les balises Twitter/X Card. Cet outil les génère toutes en même temps, affiche un aperçu en direct de l'apparence de votre lien sur Google, Facebook, X, LinkedIn, Slack et Discord, et vous laisse copier le code en un clic. Tout s'exécute dans votre navigateur.
    Comment ajouter des balises Open Graph à mon site web ?
    Renseignez votre titre, votre description, votre URL canonique et une URL d'og:image, choisissez le type Open Graph, puis copiez les balises générées et collez-les à l'intérieur du <head> de votre HTML. Comme les robots de Facebook, LinkedIn, WhatsApp et Telegram n'exécutent pas de JavaScript, les balises doivent être présentes dans le HTML rendu côté serveur ou statique, et non injectées par des scripts côté client.
    Quelle taille doit avoir une image Open Graph ?
    La taille recommandée pour og:image est de 1200×630 pixels, un rapport d'aspect de 1,91:1, qui satisfait aussi la carte summary_large_image de X. Facebook ignore les images inférieures à 200×200 et affiche un petit carré pour tout ce qui est en dessous de 600×315. Incluez toujours og:image:width et og:image:height pour que le premier partage s'affiche instantanément, et servez l'image en HTTPS à une URL publique qui n'est pas bloquée par robots.txt.
    La balise twitter:card est-elle obligatoire ?
    Oui — twitter:card est la seule balise Twitter/X que vous devez inclure, sans quoi X n'affichera aucune carte, même si vos balises Open Graph sont présentes. Réglez-la sur summary_large_image pour une grande image ou sur summary pour une petite vignette carrée. Pour tout le reste (titre, description, image), X se rabat sur vos balises og:*, si bien que cet outil les omet par défaut pour garder un balisage propre.
    Les balises meta aident-elles le référencement (SEO) ?
    Le <title> et la balise canonique comptent pour le SEO ; la meta description n'est pas un facteur de classement direct, mais elle influence le taux de clic en façonnant l'extrait de recherche. Les balises Open Graph et Twitter Card n'affectent pas le classement Google, mais elles contrôlent l'apparence de vos liens lorsqu'ils sont partagés, ce qui génère du trafic social. Google peut réécrire votre titre dans les résultats : rédigez-en un clair et unique, et placez les mots importants en premier.
    Cet outil téléverse-t-il mon contenu ou mes images ?
    Non. Tout est généré localement dans votre navigateur avec JavaScript. Votre titre, votre description et l'URL de votre image ne quittent jamais la page — pas de serveur, pas de téléversement et pas de compte. L'og:image est chargée uniquement dans votre propre navigateur pour l'aperçu et pour lire ses dimensions.
    Puis-je importer des balises meta que j'ai déjà ?
    Oui. Ouvrez le panneau Importer, collez vos balises <meta> existantes, et l'outil les analyse localement avec l'analyseur HTML du navigateur pour remplir le formulaire — aucune requête réseau, rien de téléversé. C'est l'alternative respectueuse de la vie privée aux outils qui récupèrent une URL en direct depuis leur serveur.
    Pourquoi mon aperçu mis à jour affiche-t-il toujours l'ancienne image sur Facebook ou LinkedIn ?
    Les plateformes mettent en cache les données Open Graph : Facebook pendant environ 30 jours, LinkedIn pendant environ 7 jours. Après le déploiement, re-scannez la page avec le Facebook Sharing Debugger ou le LinkedIn Post Inspector pour rafraîchir le titre, la description et l'image mis en cache. Les liens vers les débogueurs sont listés sous le code généré.