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.
Importer depuis un <head> existant (analysé localement, rien de téléversé)
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
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
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
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
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.
<meta property="og:image" content="/cover.png">
<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.
<!-- no og:url -->
<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.
600×600 og:image
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.
<!-- OG only, no twitter:card -->
<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.
<meta name="twitter:image" content="">
<!-- 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.
<meta charset> after many tags
<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 ?
Comment ajouter des balises Open Graph à mon site web ?
Quelle taille doit avoir une image Open Graph ?
La balise twitter:card est-elle obligatoire ?
Les balises meta aident-elles le référencement (SEO) ?
Cet outil téléverse-t-il mon contenu ou mes images ?
Puis-je importer des balises meta que j'ai déjà ?
Pourquoi mon aperçu mis à jour affiche-t-il toujours l'ancienne image sur Facebook ou LinkedIn ?
Outils connexes
Voir tous les outils →Générateur & Constructeur de commande cURL
Web & API
Construisez des commandes curl dans votre navigateur — méthode, en-têtes, authentification et corps, obtenez instantanément une commande prête à copier. Préréglages Bearer, POST JSON, upload. Gratuit, privé, sans inscription.
Générateur htpasswd — bcrypt, Apache MD5 (apr1), Basic Auth
Web & API
Générez des entrées htpasswd avec bcrypt, Apache MD5 (apr1), SHA-1 et plus. Obtenez des configs Apache, nginx et Docker prêtes à coller. 100 % dans votre navigateur — aucun envoi.
Convertisseur de Base — Binaire, Hex, Décimal & Octal
Outils de conversion
Convertissez entre binaire, hexadécimal, décimal, octal et toute base (2-36) instantanément. Gratuit, privé, 100 % dans votre navigateur.
Décodeur et Encodeur Base64
Encodage et formatage
Décodez et encodez en Base64 en ligne gratuitement. Conversion en temps réel, support UTF-8 et émojis. 100 % privé, dans votre navigateur.
Convertisseur Base64 en Image
Encodage et formatage
Décodez une chaîne Base64 ou un URI de données en image dans votre navigateur. Aperçu, dimensions et MIME, puis téléchargement en PNG, JPG, GIF, SVG. Sans envoi.
Générateur et vérificateur de hachage Bcrypt
Outils de sécurité
Générez et vérifiez des hachages bcrypt en ligne — coût ajustable, préfixes $2b$/$2a$/$2y$. 100 % dans votre navigateur ; mot de passe jamais envoyé.