Meta-Tag-Generator

Dieser Meta-Tag-Generator verwandelt ein kurzes Formular – Seitentitel, Beschreibung, URL, Bild, Seitenname, Twitter-Handle und Theme-Farbe – in einen fertig einfügbaren Block aus <head>-Tags, mit Live-Vorschauen für Google und Social Cards und Ein-Klick-Kopieren. Er richtet sich an Seitenbetreiber und Entwickler, die wissen, dass die Tags wichtig sind, aber nicht jedes Mal jeden Attributnamen nachschlagen wollen.

Was der Generator tatsächlich ausgibt

Das Tool schreibt fünf Tag-Gruppen, in dieser Reihenfolge:

1. Ein <title>-Element und ein <meta name="description">-Tag.
2. Ein <meta name="theme-color">-Tag, aber nur, wenn das Feld für die Theme-Farbe ausgefüllt ist.
3. Open-Graph-Tags: og:title, og:description, og:url, og:type fest auf website gesetzt, plus og:image und og:site_name, wenn diese Felder nicht leer sind.
4. Twitter-Card-Tags: twitter:card immer auf summary_large_image gesetzt, twitter:title, twitter:description, twitter:image, wenn ein Bild gesetzt ist, und twitter:site.
5. Sonst nichts.

Dieser Umfang ist wichtig. Die Ausgabe enthält keinen Canonical-<link>, keine Robots-Anweisung, keine hreflang-Alternates und keine strukturierten Daten. Das sind getrennte Anliegen, und eine Seite, die nur diese Tags trägt, kann dennoch unter der falschen URL indexiert werden, wenn ihr Canonical-Link fehlt.

Die Zeichenzähler lesen

Das Titelfeld ist auf 120 Zeichen begrenzt, das Beschreibungsfeld auf 320, aber die Zähler neben den jeweiligen Beschriftungen stehen bei 60 und 160. Der Farbwechsel an diesen Marken ist ein Anzeigehinweis, keine Grenze.

Feld	Zähler wird orange	Harte Eingabegrenze	Typisch angezeigt
Titel	über 60 Zeichen	120	ca. 50–60 Zeichen
Beschreibung	über 160 Zeichen	320	ca. 150–160 Zeichen

Beide Zähler zählen jedes Zeichen einschließlich Leerzeichen. Google kürzt Titel nach Pixelbreite statt nach fester Zeichenzahl, ein Titel in Großbuchstaben kann also früher abgeschnitten werden als derselbe Text in gemischter Schreibweise.

Praxisbeispiel: ein Rezept-Blogbeitrag

Angenommen, Sie geben ein:

• Titel: Fresh Sourdough Bread Recipe
• Beschreibung: A beginner-friendly sourdough recipe with a 24-hour rise, a crisp crust, and a soft, open crumb. Includes a printable checklist.
• URL: https://example.com/sourdough-bread/
• Bild: https://example.com/img/sourdough-1200x630.jpg
• Seitenname: Example Kitchen
• Twitter-Handle: @examplekitchen

Der Titelzähler zeigt 28, der Beschreibungszähler 133, beide bleiben also grau. Der erzeugte Block beginnt so:

<title>Fresh Sourdough Bread Recipe</title>
<meta name="description" content="A beginner-friendly sourdough recipe..." />
<meta property="og:title" content="Fresh Sourdough Bread Recipe" />
<meta property="og:description" content="A beginner-friendly sourdough recipe..." />
<meta property="og:url" content="https://example.com/sourdough-bread/" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://example.com/img/sourdough-1200x630.jpg" />
<meta property="og:site_name" content="Example Kitchen" />
<meta name="twitter:card" content="summary_large_image" />

Das Google-Vorschaufenster zeigt den blauen Titel, die grüne URL und den grauen Snippet. Die Social Card darunter zeigt das Bild über Domain und Beschreibung – ungefähr so, wie Facebook und LinkedIn es anordnen.

Wie sich Such- und Social-Vorschauen unterscheiden

Suchmaschinen lesen den <title> und die Meta-Beschreibung und erzeugen dann ihren eigenen Snippet, wenn die Beschreibung fehlt oder nicht hilfreich ist. Soziale Plattformen lesen zuerst die Open-Graph-Tags und greifen nur dann auf Seiteninhalte zurück, wenn diese fehlen. Twitter/X bevorzugt seine eigenen Card-Tags. Weil die beiden Empfänger unterschiedliche Tags lesen, kann eine Seite in Google perfekt aussehen, während sie in einer Chat-App als nackter Link erscheint – die übliche Ursache ist ein fehlendes og:image.

Häufige Fehler und Card-Entscheidungen

• Eine relative Bild-URL verwenden. og:image muss absolut sein, weil der Crawler sie von Ihrer Seite aus auflöst. Ein Pfad wie /img/card.png scheitert oft stillschweigend.
• og:url auf eine andere Seite zeigen lassen. Wenn Sie eine parametrisierte oder paginierte URL teilen, aber die kanonische URL in og:url schreiben, rechnen Shares die falsche Adresse an.
• Eine Beschreibung schreiben, die den Titel wiederholt. Die Aufgabe der Beschreibung ist, den Klick zu verdienen, nicht die Überschrift zu wiederholen.
• Das Theme-Farb-Feld vergessen. Es ist das einzige Tag, das die Browser-Oberfläche auf Mobilgeräten ändert; bleibt es leer, wird es einfach weggelassen.
• Annehmen, der Zähler schneide ab. Das tut er nie, ein überlanger Titel landet also genau so in Produktion, wie er eingegeben wurde.

Card-Typ und Bild wählen

summary_large_image ist in der Ausgabe fest vorgegeben, weil es ein breites Banner darstellt, das zu Artikeln, Produkten und Homepage-Shares passt. Ein quadratisches oder kleines Bild unter etwa 300 × 200 Pixel wirkt in diesem Feld gestreckt; liefern Sie daher entweder ein breites Bild oder ersetzen Sie den Card-Wert nach dem Kopieren durch summary. Halten Sie das Bild unter 5 MB – mehrere Plattformen verwerfen größere Dateien stillschweigend und lassen eine Vorschau mit Text, aber ohne Bild zurück.

Die Tags vor dem Ausliefern testen

Die Live-Vorschau spiegelt wider, was Sie eingegeben haben, nicht das, was ein Crawler abruft. Bestätigen Sie nach dem Deployment das echte Ergebnis:

• Fügen Sie die URL in einen Social-Card-Debugger ein und erzwingen Sie einen erneuten Scrape; zwischengespeicherte Vorschauen bleiben oft bestehen, nachdem Sie ein Tag korrigiert haben.
• Sehen Sie sich den Seitenquelltext an und suchen Sie nach og:image, um zu bestätigen, dass eine absolute URL und kein relativer Pfad im HTML gelandet ist.
• Laden Sie die Bild-URL direkt in einem Browser-Tab; wenn sie 404 liefert oder umleitet, sieht der Crawler denselben Fehler.
• Prüfen Sie, dass der Titel im Quelltext mit dem im Tool übereinstimmt, da ein CMS-Template den Seitennamen möglicherweise automatisch anhängt.

Eine fünfminütige Prüfung nach dem ersten Deployment verhindert das häufigste Symptom: einen Share, der einen Titel, aber kein Bild zeigt.

Verwandte Tools

• Favicon-Generator
• Text zu Slug
• HTML-Encoder