Meta-Tag-Generator

Was das Tool macht

Der Meta-Tag-Generator schreibt die Tags für den <head> einer HTML-Seite: das <title>-Element, die Meta-Description, Schlüsselwörter und Autor, eine robots-Anweisung, den kanonischen Link, eine Designfarbe, die Viewport- und Charset-Angaben, den vollständigen Satz Open-Graph-Tags (og:title, og:description, og:image, og:url, og:type, og:site_name, og:locale) sowie die Karten-Tags für X / Twitter.

Während du tippst, zeigt es, wie die Seite als Suchergebnis und als Social-Media-Karte aussehen könnte, und prüft typische Fehler: einen Titel über etwa 60 Zeichen, eine fehlende, zu kurze oder über etwa 160 Zeichen lange Beschreibung, eine relative kanonische URL, ein Vorschaubild ohne absolute URL oder ein falsch geschriebenes Gebietsschema bzw. eine ungültige Farbe. Alles läuft in deinem Browser, und die Vorschau lädt dein Bild absichtlich nicht – die Seite sendet also keine Netzwerkanfragen.

So funktioniert es

1. Fülle die Seitenangaben aus. Titel und Beschreibung sind das Wichtigste; die Zähler zeigen ihre Länge im Vergleich zu den üblichen Anzeigegrenzen. Ein Klick auf Beispiel zeigt einen vollständigen Fall.
2. Gib die kanonische URL der Seite und ein Vorschaubild an. Ein relativer Pfad wie /images/cover.jpg wird gegen die kanonische URL aufgelöst.
3. Wähle in den Optionen den Open-Graph-Typ (website für die meisten Seiten, article für Blogartikel), die Kartengröße, ob Suchmaschinen die Seite indexieren und ihren Links folgen dürfen und welche Tag-Gruppen enthalten sein sollen.
4. Lies die Hinweise unter dem HTML, prüfe die Vorschauen und kopiere das HTML in deine Seitenvorlage.

Die Optionen stehen in der Adresse der Seite, das Formular wird im Browser gespeichert – du kannst also später weitermachen oder einen Link mit denselben Einstellungen teilen.

Beispiel

Die Beispielseite erzeugt Tags wie diese (gekürzt):

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sourdough Bread for Beginners — Step-by-Step Guide</title>
<meta name="description" content="Bake your first sourdough loaf at home: …">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/recipes/sourdough-for-beginners">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Sourdough Bread for Beginners — Step-by-Step Guide">
<meta property="og:image" content="https://example.com/images/sourdough-loaf.jpg">
<meta property="og:locale" content="en_US">

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@examplekitchen">

Die Werte werden HTML-maskiert, sodass Anführungszeichen und Et-Zeichen im Titel das Markup nicht zerstören, und das Gebietsschema en-US wird in die von Open Graph erwartete Form en_US gebracht.

Tipps

• Schreibe für jede Seite einen eigenen Titel und eine eigene Beschreibung; Dubletten machen Suchergebnisse schwer unterscheidbar.
• Stelle die wichtigsten Wörter an den Anfang des Titels, denn lange Titel werden am Ende gekürzt.
• Die kanonische URL sollte genau die Adresse sein, die indexiert werden soll – mit Protokoll und deiner bevorzugten Variante mit oder ohne www.
• robots auf noindex nimmt eine Seite aus den Suchergebnissen, aber nur, wenn Crawler sie weiterhin abrufen können: Sperre sie nicht zusätzlich in der robots.txt.