Balise méta et générateur OpenGraph
Créez les balises méta dont une page a besoin pour les résultats de recherche et les aperçus sociaux : titre, description, URL canonique, balises Open Graph et carte Twitter. Remplissez les champs, voyez le balisage s'assembler au fur et à mesure que vous tapez et collez le bloc dans l'en-tête de votre page.
Enter Page Metadata Details
Google & Social Card Live Preview
https://mywebsite.com
My Awesome Website — Premium Tools
Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads.
mywebsite.com
My Awesome Website — Premium Tools
Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads.
<!-- Primary Meta Tags --> <title>My Awesome Website — Premium Tools</title> <meta name="title" content="My Awesome Website — Premium Tools" /> <meta name="description" content="Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads." /> <!-- Open Graph / Facebook --> <meta property="og:type" content="website" /> <meta property="og:url" content="https://mywebsite.com" /> <meta property="og:title" content="My Awesome Website — Premium Tools" /> <meta property="og:description" content="Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads." /> <meta property="og:image" content="https://mywebsite.com/og-image.png" /> <!-- Twitter --> <meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:url" content="https://mywebsite.com" /> <meta property="twitter:title" content="My Awesome Website — Premium Tools" /> <meta property="twitter:description" content="Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads." /> <meta property="twitter:image" content="https://mywebsite.com/og-image.png" />
Comment ça marche
- 1
Saisissez le titre et la description de la page que vous souhaitez afficher sur les moteurs de recherche et les plateformes sociales.
- 2
Ajoutez l'URL canonique et l'URL de l'image d'aperçu : les deux doivent être des chemins absolus et non relatifs.
- 3
Passez en revue les balises générées, y compris les équivalents de la carte Open Graph et Twitter.
- 4
Copiez le bloc et collez-le dans l'élément head de votre page.
Avantages et avantages clés
Une source, trois consommateurs
Les résultats de recherche, les cartes Open Graph et Twitter sont générés ensemble à partir de la même entrée, ils ne peuvent donc pas se séparer.
Corriger les noms de balises
Open Graph utilise des attributs de propriété et Twitter utilise des attributs de nom – une distinction qu'il est facile de se tromper manuellement.
Commentaires immédiats
Le balisage s'assemble au fur et à mesure que vous tapez, afin que vous puissiez voir le bloc terminé avant de le coller.
Sortie indépendante du framework
Balises HTML simples qui fonctionnent dans un site statique, un modèle, un champ CMS ou une page écrite à la main.
Pourquoi les gens l’utilisent
- Ajout de balises d'aperçu social à une page de destination qui est actuellement partagée sous forme de carte vierge.
- Définition d'une URL canonique sur une page accessible à plusieurs adresses.
- Préparer les balises méta d'un site client avant de le remettre.
- Apprendre quelles balises sont réellement importantes en les voyant générées ensemble.
Formats et options pris en charge
| Balises générées | titre, méta description, lien canonique, Open Graph (og:title, og:description, og:url, og:image), balises de la carte Twitter |
|---|---|
| Sortie | HTML brut que vous collez dans l'élément head |
Confidentialité et traitement des données
Les balises sont assemblées à partir de votre saisie dans le navigateur. Les URL et le texte que vous saisissez ne sont ni envoyés à notre serveur ni enregistrés.
Limites et choses à savoir
- Les titres et les descriptions sont réécrits par les moteurs de recherche lorsqu'ils jugent un extrait différent plus utile : ces balises constituent une contribution importante et non une garantie.
- L'image d'aperçu doit être une URL absolue accessible publiquement. Les robots sociaux ne peuvent pas récupérer localhost, une page authentifiée ou un chemin relatif.
- Les plateformes sociales mettent en cache les aperçus. Après avoir modifié les balises, vous devez généralement regratter l'URL dans le propre outil de débogage de la plateforme avant que la nouvelle carte n'apparaisse.
Dépannage
La carte sociale affiche toujours l'ancien contenu
Il s'agit d'un cache côté plateforme. Re-grattez l'URL dans le débogueur de partage de la plateforme pour forcer une actualisation : la modification des balises à elle seule ne l'efface pas.
Aucune image n'apparaît dans la carte d'aperçu
Vérifiez que og:image est une URL HTTPS absolue, accessible publiquement et suffisamment grande (1200x630 est la norme de sécurité). Les images petites ou bloquées sont supprimées silencieusement.
Google affiche une description différente
Google génère un extrait qu'il juge plus pertinent par rapport à la requête. Assurez-vous que la description résume avec précision la page ; il sera utilisé plus souvent lorsqu’il correspond à l’intention.
Meta Tag Generator — Title, Description & Open Graph Tags
Generate a complete set of SEO meta tags — title, meta description, canonical, Open Graph and Twitter Card — and copy them straight into your page head. A free meta tag generator with live length feedback so nothing gets truncated in the search snippet.
- Title and meta description with length guidance — live character counts keep you inside the roughly 60-character title and 155-character description that search engines display without cutting off.
- Open Graph tags for social sharing — og:title, og:description, og:image and og:url control exactly how a link previews on Facebook, LinkedIn, Slack and WhatsApp.
- Twitter Card markup — summary and large-image card tags so shared links render with a proper preview instead of a bare URL.
- Copy-paste ready HTML — the output is a valid block of head markup, ready for a template, a static site or a CMS SEO field.
- No sign-up, no plugin — everything is generated in your browser — a practical option when the site has no SEO plugin installed.
Free and unlimited. Generate the matching permalink with the URL Slug Generator and the site icon with the Favicon Generator.
Questions fréquemment posées
Why does Google show a different description than mine?
Google rewrites snippets when it judges another passage more relevant to the query. A description that accurately summarises the page gets used far more often than one written purely for keywords.
What size should the og:image be?
1200x630 is the safe standard. It must be an absolute, publicly reachable HTTPS URL — social crawlers cannot fetch localhost, a relative path or a page behind authentication.
I updated my tags but the shared card is unchanged. Why?
Social platforms cache previews. Re-scrape the URL in the platform's own sharing debugger to force a refresh; changing the tags alone will not clear their cache.
Où dois-je coller ces balises méta ?
Collez l'extrait HTML généré dans la section <head> de vos pages Web.
Pourquoi Google affiche-t-il une description différente de la mienne ?
Google réécrit les extraits lorsqu'il juge un autre passage plus pertinent pour la requête. Une description qui résume avec précision la page est utilisée beaucoup plus souvent qu'une description écrite uniquement pour des mots-clés.
Quelle doit être la taille de l'image og: ?
1200x630 est la norme de sécurité. Il doit s'agir d'une URL HTTPS absolue et accessible au public : les robots d'exploration des réseaux sociaux ne peuvent pas récupérer localhost, un chemin relatif ou une page derrière l'authentification.
J'ai mis à jour mes tags mais la carte partagée est inchangée. Pourquoi?
Les plateformes sociales mettent en cache les aperçus. Re-grattez l'URL dans le débogueur de partage de la plateforme pour forcer une actualisation ; changer les balises à lui seul ne videra pas leur cache.
Outils associés
Générateur de codes QR
Transformez n'importe quel lien ou texte en un code QR scannable
Générateur de Glassmorphisme CSS
Générez des effets d'interface utilisateur en verre modernes et du code CSS
Convertisseur de casse de texte
Basculer entre UPPER, lower, Title et camelCase
Générateur d'espace réservé Lorem Ipsum
Générer un texte d'espace réservé factice pour les mises en page de l'interface utilisateur