kittokit
DE
DEV-TOOL

Meta-Tag Generator — HTML, JSX, Astro, Svelte

Title, Description, Open Graph, Twitter Card, Schema.org JSON-LD und hreflang — vier Framework-Outputs (HTML, JSX, Astro, Svelte) mit 4-Wege-Live-Vorschau.

Lokal im Browser Alle Tags werden in deinem Browser generiert. Keine URL wird an Drittserver gesendet, keine Eingaben gespeichert, keine Tracker.
AEO-Preset: FAQPage für AI-Search Erzeugt drei FAQPage-Einträge, die ChatGPT, Perplexity und Google AI Overviews als Citation-Quellen mit höherer Wahrscheinlichkeit übernehmen.

Eingaben

Basis
Open Graph
Twitter Card
Erweitert

Live-Vorschau

Browser-Tab
Dein Seitentitel
Google-SERP
example.com Dein Seitentitel Deine Meta-Description erscheint hier — beschreibt den Seiteninhalt in 140–220 Zeichen.
Facebook-Card
1200 × 630
example.com Dein Seitentitel Deine Meta-Description erscheint hier — beschreibt den Seiteninhalt in 140–220 Zeichen.
Twitter-Card
1200 × 630
Dein Seitentitel Deine Meta-Description erscheint hier — beschreibt den Seiteninhalt in 140–220 Zeichen. example.com

Ausgabe

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

So funktioniert es
  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.

Datenschutz

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

Erzeugt SEO-Meta-Tags vollständig im Browser. Title und Description mit Längen-Validator (30–60 / 140–220 Zeichen), Open Graph mit 1.91:1-Aspekt-Hinweis, Twitter Card mit Card-Typ-Wahl. Vier-Wege Live-Vorschau: Browser-Tab, Google-SERP, Facebook-Card und Twitter-Card. Schema.org JSON-LD für Article, WebSite, Product, FAQPage, HowTo und Organization als Tab im selben Tool. hreflang-Builder mit x-default-Pflicht für mehrsprachige Sites. Copy-Buttons pro Framework — HTML, JSX, Astro-Fragment, Svelte `<svelte:head>`.

01 — Anleitung

Wie benutzt du dieses Tool?

  1. Title, Description und Canonical-URL eingeben — der Validator zeigt Länge und URL-Status live.
  2. Open Graph und Twitter Card im selben Block ergänzen: Bild-URL absolut, 1200 × 630 px empfohlen.
  3. In der Vorschau Browser-Tab, Google-SERP, Facebook-Card und Twitter-Card simultan prüfen.
  4. Output-Tab wählen — HTML, JSX, Astro-Fragment oder Svelte `<svelte:head>` — und per Klick kopieren.
  5. Für mehrsprachige Sites den hreflang-Tab öffnen und Sprachen plus `x-default` eintragen.

Was leistet der Meta-Tag Generator?

Der Meta-Tag Generator erzeugt vier Output-Formate parallel: vollständiges HTML, React-konformes JSX (mit self-closing Tags), Astro-Fragment (zum Einfügen in <head> oder <Fragment slot="head">) und Svelte <svelte:head>-Block. Du arbeitest in einem einzigen Formular, kopierst aber genau die Syntax, die zu deinem Stack passt. Die Live-Vorschau zeigt simultan, wie deine Seite im Browser-Tab, in der Google-SERP, in einer Facebook-Karte und in einer Twitter-Card aussehen wird — bevor du sie deployst.

Drei Eigenschaften unterscheiden das Tool von der Konkurrenz, die in der Recherche analysiert wurde:

  • Pure-Client + Schema.org JSON-LD im selben Tool: Sieben analysierte Konkurrenten generieren Tags, aber nur einer enthält überhaupt Schema-Markup — und der nutzt das veraltete itemprop-Format direkt im HTML. Wir liefern modernes JSON-LD in einem dedizierten Tab für Article, WebSite, Product, FAQPage, HowTo und Organization. JSON-LD ist seit Jahren der Schema-Markup-Standard von Google, Bing und Schema.org selbst.
  • Framework-Copy-Switcher: Web-Entwicklung lebt heute zwischen Stacks. React-Projekte erwarten JSX-Syntax mit />-Closing, Astro-Sites brauchen Fragment-Imports, Svelte-Komponenten erwarten den <svelte:head>-Wrapper. Wir generieren alle vier Outputs aus derselben Eingabe — kein Konkurrent macht das.
  • Hreflang-Builder + AEO-FAQPage-Preset integriert: Hreflang lebt bei der Konkurrenz in separaten Spezial-Tools. Wir bauen es als Tab in dieselbe Oberfläche, mit Pflicht-x-default und URL-Validation pro Zeile. Das AEO-Preset lädt drei vorgefertigte FAQPage-Einträge für KI-Search-Optimierung — wichtig, weil Google FAQ-Rich-Snippets in der klassischen SERP im Mai 2026 deprecated hat, FAQPage-Schema aber für KI-Suchmaschinen wertvoll bleibt.

Die Bedienung folgt dem Refined-Minimalism-Prinzip: Privacy-Badge oben, Input-Formular gruppiert in Basis / Open Graph / Twitter Card / Erweitert, Live-Vorschau in 2 × 2-Grid, Output-Tabs mit Copy-Button, dezente Validator-Eyebrows pro Feld. Kein Tracking, kein Konto, kein Server-Roundtrip.

Welche Tags emittiert der Generator?

Das Tool deckt 14 Tag-Typen ab, geordnet nach SEO-Wichtigkeit:

BlockTagPflicht?Hinweis
Basis<title>Pflicht30–60 Zeichen, Keyword vorne
Basis<meta name="description">Pflicht140–220 Zeichen, mit USP
Basis<meta name="author">optionalPersonennamen
Basis<meta name="robots">optionalleer = index, follow
Basis<link rel="canonical">empfohlenabsolute https-URL
Open Graphog:title, og:description, og:type, og:url, og:site_name, og:localePflichtidentisch zu Basis-Title
Open Graphog:image, og:image:altempfohlen1200 × 630 px, absolute https-URL
Twitter Cardtwitter:cardPflichtsummary oder summary_large_image
Twitter Cardtwitter:site, twitter:title, twitter:description, twitter:image, twitter:image:altempfohlen@-Handle optional
Mobiletheme-coloroptionalHex-Wert für Android-Chrome

Validator-Eyebrows prüfen pro Feld: Title-Länge (Warnung bei < 30 oder > 60), Description-Länge (Warnung bei < 140 oder > 220), Canonical-URL (Warnung bei http statt https, Info bei Trailing-Slash), OG-Image (Warnung bei http statt https), OG-Image-Alt (Warnung bei leer wenn Image gesetzt), theme-color (Warnung wenn kein Hex), Twitter-Site (Info bei führendem @).

Wie funktioniert die Schema.org JSON-LD-Generierung?

Im Tab „Schema.org JSON-LD” wählst du einen der sechs Schema-Typen, die für 95 % aller Websites relevant sind. Jeder Typ hat ein eigenes Sub-Formular mit typ-spezifischen Feldern — und füllt die generischen Felder (Name, URL, Bild) automatisch aus deinen Basis-Eingaben:

Article ist für Blog-Posts, Magazin-Beiträge und Nachrichten-Artikel. Pflichtfelder sind headline, author und datePublished. Optional dateModified für aktualisierte Artikel. Der Author wird automatisch als Person-Objekt strukturiert.

WebSite ist für die Startseite einer Domain. Liefert name, description und url. Wird oft als Einzel-Schema auf der Root-Seite genutzt, manchmal kombiniert mit Organization und BreadcrumbList.

Product ist für E-Commerce. Pflichtfelder sind name, description, image. Wenn price und priceCurrency gesetzt sind, wird zusätzlich ein Offer-Sub-Schema mit Preis und Währung emittiert — Google nutzt das für Preis-Rich-Snippets. brand als optionales Brand-Objekt.

FAQPage liefert eine Liste von Question-/Answer-Paaren. Jede Frage wird zu einem Question-Node mit acceptedAnswer-Sub-Node. Reihen mit leerer Frage oder leerer Antwort werden ignoriert. Das AEO-Preset lädt drei vorgefertigte Einträge zum Start.

HowTo liefert eine durchnummerierte Schritt-Anleitung mit position, optionalem name und Pflicht-text pro Schritt. Wird für Rezept-Seiten, Tutorial-Seiten und Anleitungen genutzt.

Organization liefert Marken-Information mit name, url und optionalem logo. Wird typischerweise als Single-Schema im Footer der gesamten Site eingebunden oder direkt im <head> der About-Seite.

Das Tool produziert pretty-printed JSON mit 2-Space-Indentation und wrappt das Ergebnis in einen <script type="application/ld+json">-Block — zum direkten Einfügen in <head> deiner Seite.

Wie funktioniert die hreflang-Generierung?

Im hreflang-Tab fügst du pro Sprache eine Zeile mit BCP-47-Code und absoluter URL ein. Die drei vorausgefüllten Zeilen — de, en, x-default — sind ein guter Startpunkt für eine zweisprachige DE/EN-Site. Du fügst weitere Zeilen über den + Zeile-Button hinzu (z. B. en-US, en-GB, de-AT, de-CH, fr, es).

Pflicht ist hreflang="x-default" als Fallback-URL für alle Sprachen, die nicht explizit gemappt sind. Ohne x-default riskierst du in Google’s Internationalisierungs-Reports Warnungen. Best Practice ist, x-default auf die englischsprachige Variante zu setzen, da englisch die häufigste Browser-Sprache der Welt ist.

Pro Zeile wird die URL gegen den nativen URL-Parser geprüft. Ungültige Zeilen werden im Output stillschweigend übersprungen — das verhindert kaputte Output-Blocks, falls du noch tippst. Der Output ist eine Liste von <link rel="alternate" hreflang="X" href="Y">-Tags, die du direkt in <head> jeder Sprach-Variante einfügst. Reziprozität ist Pflicht: jede Variante muss alle anderen Varianten verlinken, sonst ignoriert Google das hreflang-Cluster.

Was das Tool nicht macht: keine automatische URL-Detection (z. B. via Site-Crawl), keine Bulk-CSV-Import. Beides ist Phase-2-Material, wenn echte User-Demand sichtbar wird.

Warum AEO-Optimierung für KI-Search wichtig ist

Answer Engine Optimization (AEO) ist das jüngere Schwesterkonzept zu SEO. Während SEO Klicks auf Google-Ergebnisse optimiert, optimiert AEO die Wahrscheinlichkeit, in KI-Antworten von ChatGPT, Perplexity, Claude und Google AI Overviews zitiert zu werden. Studien zur generativen Suchmaschinen-Optimierung zeigen, dass strukturierte FAQPage-Daten die Citation-Rate um 41–67 % erhöhen — weil KI-Modelle gerne aus Quellen mit klarer Frage-Antwort-Struktur ziehen.

Drei Hebel sind dabei besonders wirksam:

  • FAQPage-Schema mit voice-search-tauglichen Direkt-Antworten. Die ersten 10 Wörter der Antwort müssen die Frage direkt beantworten; danach folgt die Detail-Erklärung. Smart-Speaker und KI-Assistenten lesen oft nur die ersten Sätze vor.
  • Authoritative Quellen im Body verlinken (Wikipedia, Standards wie RFC oder W3C, gov-Domains). Die Princeton GEO-Studie zeigt +40 % Visibility-Boost durch Source-Citations.
  • Klare Schema-Struktur statt Marketing-Sprache. Definition zuerst, Use-Case danach, Vergleich zuletzt — KI-Modelle bevorzugen extractable Content.

Google hat im Mai 2026 die FAQ-Rich-Snippets in der klassischen SERP deprecated. Das bedeutet nicht, dass FAQPage-Schema tot ist — es bedeutet nur, dass der Klassik-SERP-Vorteil entfällt. Für AI-Search bleibt FAQPage einer der wichtigsten Schema-Typen.

Welche Lücken hat das Tool bewusst?

Drei Dinge macht der Generator nicht:

  • Kein URL-Scan / Existing-Tag-Audit: Konkurrenten wie metatags.io oder opengraph.xyz fetchen die Ziel-URL serverseitig, um existing Tags zu extrahieren. Das verletzt unsere Pure-Client-Doktrin und sendet pre-launch-URLs an Dritte. Wenn du existing Tags brauchst, nutze die DevTools deines Browsers (view-source:) oder einen lokalen Crawler.
  • Kein OG-Image-Generator: Der Generator erzeugt Tags, nicht Bilder. Für ein OG-Bild brauchst du eine eigene Canvas-Pipeline oder ein Design-Tool. Eine separate kittokit-Lösung kommt bei Bedarf — vorerst trage die fertige Bild-URL hier ein.
  • Keine erweiterten Schema-Typen wie LocalBusiness, Recipe, Event, JobPosting: Diese sechs Top-Typen decken 95 % der Use-Cases ab. Spezial-Schemas kommen in ein eigenes Tool, sobald die Nachfrage spürbar ist. Bis dahin liefert die kanonische Schema.org-Doku die Felder, die du händisch ergänzen kannst.
  • Kein Bulk-CSV-Modus: Ein Tool, eine Seite, ein Tag-Block. Bulk-Generation von Tag-Blöcken aus einer CSV ist Phase-2, falls Marketing-Teams ≥10 Anfragen pro Quartal melden.

Was das Tool stattdessen liefert: vollständige, korrekt escapte HTML-Strings, die du direkt in deinen Build-Prozess einbauen kannst. Alle vier Framework-Outputs nutzen identische Escape-Regeln (<, >, &, ", '), sodass du keine doppelte Sanitization brauchst.

Zuletzt aktualisiert:

Das könnte dir auch gefallen