kittokit
FR
DEV-TOOL

Générateur de Meta Tags — HTML, JSX, Astro, Svelte

Title, Description, Open Graph, Twitter Card, Schema.org JSON-LD et hreflang — quatre sorties framework (HTML, JSX, Astro, Svelte) avec aperçu en direct sur quatre canaux.

Runs locally in your browser Every tag is generated in your browser. No URL is sent to a third-party server, no input is stored, no trackers.
AEO preset: FAQPage for AI search Loads three FAQPage entries that ChatGPT, Perplexity, and Google AI Overviews are more likely to cite.

Inputs

Basics
Open Graph
Twitter Card
Advanced

Live preview

Browser tab
Your page title
Google SERP
example.com Your page title Your meta description appears here — describes the page in 140–220 characters.
Facebook card
1200 × 630
example.com Your page title Your meta description appears here — describes the page in 140–220 characters.
Twitter card
1200 × 630
Your page title Your meta description appears here — describes the page in 140–220 characters. example.com

Output

<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
<meta name="twitter:card" content="summary_large_image">

Comment ça marche
  1. 01

    Text oder Code einfügen

    Füge deinen Inhalt in das Eingabefeld ein oder tippe direkt.

  2. 02

    Automatische Verarbeitung

    Das Tool verarbeitet den Inhalt sofort und zeigt das Ergebnis.

  3. 03

    Ergebnis kopieren

    Kopiere das Ergebnis mit einem Klick in die Zwischenablage.

Confidentialité

Alle Berechnungen laufen direkt in deinem Browser. Keine Daten werden auf Server übertragen.

Produit des balises SEO entièrement dans le navigateur. Title et Description avec validateur de longueur (30 à 60 / 140 à 220 caractères), Open Graph avec indication du ratio 1,91:1, Twitter Card avec choix du type de carte. Aperçu en direct sur quatre canaux : onglet de navigateur, page de résultats Google, carte Facebook et carte Twitter.

01 — Mode d’emploi

Comment utiliser cet outil ?

  1. Saisissez Title, Description et URL canonique — le validateur affiche en direct la longueur et l'état de l'URL.
  2. Complétez Open Graph et Twitter Card dans le même bloc : URL d'image absolue, 1200 × 630 px recommandé.
  3. Vérifiez simultanément dans l'aperçu l'onglet de navigateur, le résultat Google, la carte Facebook et la carte Twitter.
  4. Choisissez l'onglet de sortie — HTML, JSX, fragment Astro ou `<svelte:head>` Svelte — et copiez d'un clic.
  5. Pour les sites multilingues, ouvrez l'onglet hreflang et saisissez les langues plus `x-default`.

Que fait le générateur de Meta Tags ?

Le générateur produit quatre formats de sortie en parallèle : HTML complet, JSX conforme à React (avec balises auto-fermantes), fragment Astro (à insérer dans <head> ou dans <Fragment slot="head">) et bloc Svelte <svelte:head>. Vous travaillez dans un seul formulaire et copiez exactement la syntaxe qui colle à votre stack. L’aperçu en direct montre simultanément l’apparence dans l’onglet du navigateur, dans la SERP Google, dans une carte Facebook et dans une Twitter Card — avant tout déploiement.

Trois propriétés distinguent l’outil de la concurrence analysée :

  • 100 % côté client + Schema.org JSON-LD dans le même outil : sept concurrents analysés génèrent des balises, mais un seul propose un balisage de schéma — et il utilise le format itemprop obsolète directement dans le HTML. Nous livrons du JSON-LD moderne dans un onglet dédié pour Article, WebSite, Product, FAQPage, HowTo et Organization. JSON-LD est depuis des années le standard de balisage de schéma chez Google, Bing et Schema.org.
  • Sélecteur de copie multi-frameworks : le développement web vit aujourd’hui entre stacks. Les projets React attendent du JSX avec auto-fermeture />, les sites Astro veulent des imports de fragments, les composants Svelte veulent le wrapper <svelte:head>. Nous produisons les quatre sorties à partir de la même entrée — aucun concurrent ne le fait.
  • Constructeur hreflang + préréglage AEO FAQPage intégrés : chez les concurrents, hreflang vit dans des outils spécialisés séparés. Nous le mettons dans un onglet de la même interface, avec x-default obligatoire et validation d’URL par ligne. Le préréglage AEO charge trois entrées FAQPage pour l’optimisation moteurs de réponses — important parce que Google a déprécié les FAQ Rich Snippets dans la SERP classique en mai 2026, mais le schéma FAQPage reste précieux pour les moteurs IA.

L’utilisation suit le principe du minimalisme raffiné : badge de confidentialité en haut, formulaire d’entrée groupé en Base / Open Graph / Twitter Card / Avancé, aperçu en grille 2 × 2, onglets de sortie avec bouton de copie, indicateurs discrets du validateur par champ. Pas de tracking, pas de compte, pas d’aller-retour serveur.

Quelles balises le générateur émet-il ?

L’outil couvre 14 types de balises, classées par importance SEO :

BlocBaliseObligatoire ?Indication
Base<title>obligatoire30 à 60 caractères, mot-clé en tête
Base<meta name="description">obligatoire140 à 220 caractères, avec USP
Base<meta name="author">optionnelnom de personne
Base<meta name="robots">optionnelvide = index, follow
Base<link rel="canonical">recommandéURL https absolue
Open Graphog:title, og:description, og:type, og:url, og:site_name, og:localeobligatoireidentique au title de base
Open Graphog:image, og:image:altrecommandé1200 × 630 px, URL https absolue
Twitter Cardtwitter:cardobligatoiresummary ou summary_large_image
Twitter Cardtwitter:site, twitter:title, twitter:description, twitter:image, twitter:image:altrecommandéidentifiant @ optionnel
Mobiletheme-coloroptionnelvaleur hex pour Chrome Android

Les indicateurs du validateur vérifient chaque champ : longueur du title (avertissement si < 30 ou > 60), longueur de la description (avertissement si < 140 ou > 220), URL canonique (avertissement si http au lieu de https, info si barre oblique finale), OG-Image (avertissement si http), OG-Image-Alt (avertissement si vide alors que l’image est posée), theme-color (avertissement si non hex), Twitter-Site (info en cas de @ initial).

Comment fonctionne la génération Schema.org JSON-LD ?

Dans l’onglet « Schema.org JSON-LD », vous choisissez un des six types de schéma qui couvrent 95 % des sites. Chaque type a son sous-formulaire avec des champs spécifiques — et remplit automatiquement les champs génériques (nom, URL, image) à partir de vos saisies de base :

Article sert aux billets de blog, articles de magazine et actualités. Champs obligatoires : headline, author et datePublished. Optionnel : dateModified pour les articles mis à jour. L’auteur est automatiquement structuré comme objet Person.

WebSite sert à la page d’accueil d’un domaine. Livre name, description et url. Souvent utilisé en schéma unique sur la racine, parfois combiné à Organization et BreadcrumbList.

Product sert au commerce en ligne. Champs obligatoires : name, description, image. Si price et priceCurrency sont définis, un sous-schéma Offer est ajouté avec prix et devise — Google s’en sert pour les Rich Snippets de prix. brand comme objet de marque optionnel.

FAQPage livre une liste de paires Question/Answer. Chaque question devient un nœud Question avec un sous-nœud acceptedAnswer. Les lignes à question ou réponse vide sont ignorées. Le préréglage AEO charge trois entrées prêtes à l’emploi.

HowTo livre un mode d’emploi numéroté avec position, name optionnel et text obligatoire par étape. Sert aux pages de recettes, tutoriels et notices.

Organization livre une information de marque avec name, url et logo optionnel. Typiquement intégré comme schéma unique en pied de page de l’ensemble du site ou directement dans le <head> de la page À propos.

L’outil produit du JSON formaté avec indentation à 2 espaces et enveloppe le résultat dans un bloc <script type="application/ld+json"> — prêt à insérer dans le <head> de votre page.

Comment fonctionne la génération hreflang ?

Dans l’onglet hreflang, ajoutez une ligne par langue avec un code BCP 47 et une URL absolue. Les trois lignes pré-remplies — de, en, x-default — sont un bon point de départ pour un site bilingue DE/EN. Vous ajoutez d’autres lignes via le bouton + Ligne (par exemple en-US, en-GB, de-AT, de-CH, fr, es).

hreflang=\"x-default\" est obligatoire comme URL de repli pour toutes les langues non explicitement mappées. Sans x-default, vous prenez le risque d’avertissements dans les rapports d’internationalisation de Google. Bonne pratique : placer x-default sur la variante anglaise, car l’anglais est la langue de navigateur la plus fréquente au monde.

Chaque URL est validée avec l’analyseur d’URL natif. Les lignes invalides sont silencieusement ignorées dans la sortie — ce qui évite des blocs de sortie cassés en cours de saisie. La sortie est une liste de balises <link rel="alternate" hreflang="X" href="Y"> à insérer dans le <head> de chaque variante linguistique. La réciprocité est obligatoire : chaque variante doit lier toutes les autres, sinon Google ignore le cluster hreflang.

Ce que l’outil ne fait pas : pas de détection automatique d’URL (par exemple via un crawl du site), pas d’import CSV en masse. Les deux sont matière de phase 2 si une demande utilisateur réelle se manifeste.

Pourquoi l’optimisation AEO compte pour la recherche IA

L’Answer Engine Optimization (AEO) est le concept frère plus jeune du SEO. Là où le SEO optimise les clics sur les résultats Google, l’AEO optimise la probabilité d’être cité dans les réponses IA de ChatGPT, Perplexity, Claude et Google AI Overviews. Les études sur l’optimisation pour la recherche générative montrent que les données FAQPage structurées augmentent le taux de citation de 41 à 67 % — parce que les modèles IA puisent volontiers dans des sources à structure question-réponse claire.

Trois leviers sont particulièrement efficaces :

  • Schéma FAQPage avec des réponses directes adaptées à la recherche vocale. Les dix premiers mots de la réponse doivent répondre directement à la question ; vient ensuite l’explication détaillée. Les enceintes connectées et assistants IA lisent souvent seulement les premières phrases.
  • Sources autoritaires liées dans le corps (Wikipédia, normes comme RFC ou W3C, domaines gouvernementaux). L’étude Princeton sur la GEO indique +40 % de visibilité grâce aux citations de sources.
  • Structure de schéma claire plutôt que langue marketing. Définition d’abord, cas d’usage ensuite, comparaison à la fin — les modèles IA préfèrent du contenu extractible.

Google a déprécié en mai 2026 les FAQ Rich Snippets dans la SERP classique. Cela ne signifie pas que le schéma FAQPage est mort — cela signifie seulement que le bonus SERP classique disparaît. Pour la recherche IA, FAQPage reste l’un des types de schéma les plus importants.

Quelles lacunes l’outil assume-t-il ?

Trois choses que le générateur ne fait pas :

  • Pas de scan d’URL ni d’audit de balises existantes : des concurrents tels que metatags.io ou opengraph.xyz récupèrent l’URL cible côté serveur pour extraire les balises existantes. Cela viole notre doctrine 100 % côté client et envoie des URLs pré-lancement à des tiers. Si vous avez besoin des balises existantes, utilisez les outils de développeur de votre navigateur (view-source:) ou un crawler local.
  • Pas de générateur d’image OG : le générateur produit des balises, pas des images. Pour une image OG, il faut votre propre chaîne canvas ou un outil de design. Une solution kittokit séparée viendra à la demande — d’ici là, saisissez l’URL d’image prête à l’emploi ici.
  • Pas de types de schéma avancés comme LocalBusiness, Recipe, Event, JobPosting : ces six types principaux couvrent 95 % des cas d’usage. Les schémas spécialisés entrent dans un outil dédié dès que la demande se fait sentir. D’ici là, la documentation canonique de Schema.org liste les champs à compléter à la main.
  • Pas de mode CSV en masse : un outil, une page, un bloc de balises. La génération en masse de blocs de balises à partir d’un CSV est matière de phase 2 si des équipes marketing signalent au moins dix demandes par trimestre.

Ce que l’outil livre en revanche : des chaînes HTML complètes et correctement échappées, prêtes à intégrer dans votre processus de build. Les quatre sorties framework utilisent des règles d’échappement identiques (<, >, &, ", '), ce qui évite toute double sanitisation.

Dernière mise à jour :

Vous pourriez aussi aimer