Meta-Tag-Generator
Erstelle SEO-, Open-Graph-, Artikel- und Twitter-Card-Meta-Tags mit Live-Längenzählern für Titel und Beschreibung sowie Robots-, Theme-Color- und Autor-Optionen.
Meta-Tag-Generator — Trage Titel, Beschreibung, kanonische URL, Bild und Seitenname deiner Seite ein und erhalte einen direkt einfügbaren Block aus SEO-, Open-Graph- und Twitter-Card-Meta-Tags für deinen HTML-Head. Live-Vorschauen für die Google-SERP und die Social-Card zeigen, wie die Seite in der Suche und beim Teilen aussehen wird. Alles wird in deinem Browser erzeugt — nichts von deiner Seite wird hochgeladen. Live-Zähler prüfen Titel und Beschreibung gegen die empfohlenen Längen, optionale Felder ergänzen Robots-, Viewport-, Charset-, Theme-Color- und Autor-Tags sowie artikelspezifische Open-Graph-Tags, und das Tool liest deine Bild-URL, um vor einem fehlenden oder ungewöhnlich großen Vorschaubild zu warnen.
Was ist Meta-Tag-Generator?
Der Meta-Tag-Generator ist ein kostenloses Online-Tool, das ein paar Seitenangaben in einen vollständigen Satz HTML-Meta-Tags verwandelt: die standardmäßigen SEO-Tags (title, meta description, kanonischer Link), Open-Graph-Tags (og:title, og:description, og:type, og:url, og:image, og:site_name) und Twitter-Card-Tags (twitter:card, twitter:title, twitter:description, twitter:image). Marketer, Blogger und Entwickler nutzen ihn beim Veröffentlichen einer Seite oder eines Artikels, um zu steuern, wie er in den Google-Suchergebnissen erscheint und wie sich sein Link auf Facebook, LinkedIn, X/Twitter, Slack und Discord entfaltet. Wähle den og:type (website, article, product, profile oder video.other) und den twitter:card-Stil (summary, summary_large_image, app oder player), und das Tool schreibt nur die Zeilen für die Felder, die du ausfüllst. Es gibt reine HTML-Tags aus — es crawlt deine Website nicht und liest die Seite nicht für dich aus. Live-Zähler warnen, wenn der Titel (etwa 60 Zeichen) oder die Beschreibung (etwa 160) zu lang wird, und das Tool lädt deine Bild-URL, um die tatsächliche Pixelgröße zu lesen und vor einem fehlenden oder zu großen/kleinen Bild zu warnen. Optionale Felder ergänzen eine Robots-Direktive, Viewport- und UTF-8-Charset-Tags, eine Theme-Color und einen Autor sowie article:published_time, article:author und article:section, wenn og:type article ist.
So verwendest du Meta-Tag-Generator
- Gib deinen Seitentitel ein — daraus entstehen die Tags <title>, og:title und twitter:title.
- Schreibe eine Meta-Beschreibung (etwa 150–160 Zeichen) für die Tags description, og:description und twitter:description.
- Gib die kanonische URL der Seite und eine absolute Bild-URL für die Linkvorschau ein.
- Füge deinen Seitennamen hinzu und wähle og:type und twitter:card aus den Dropdown-Menüs.
- Kopiere den erzeugten HTML-Block aus dem Ausgabefeld und füge ihn in den <head> deiner Seite ein.
- Nutze die Google-SERP- und Social-Card-Vorschauen, um vor der Veröffentlichung zu prüfen, wie das Ergebnis aussieht.
- Beobachte die Live-Längenzähler für Titel und Beschreibung und öffne die ⚙-Optionen, um Robots-, Viewport-, Charset-, Theme-Color-, Autor- oder Artikel-Tags hinzuzufügen.
Beispiele
Tags für einen Blogartikel
Eingabe
Titel: How to Bake Sourdough Beschreibung: A beginner's guide to baking sourdough bread at home. URL: https://blog.example.com/sourdough og:type: article
Ausgabe
<title>How to Bake Sourdough</title> <meta name="description" content="A beginner's guide to baking sourdough bread at home." /> <link rel="canonical" href="https://blog.example.com/sourdough" /> <meta property="og:title" content="How to Bake Sourdough" /> <meta property="og:type" content="article" /> <meta name="twitter:card" content="summary_large_image" />
Social-Card mit großem Bild
Eingabe
Bild: https://example.com/og.png twitter:card: summary_large_image
Ausgabe
<meta property="og:image" content="https://example.com/og.png" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://example.com/og.png" />
Sonderzeichen werden maskiert
Eingabe
Titel: Tips & Tricks for "Pros"
Ausgabe
<title>Tips & Tricks for "Pros"</title>
Artikel mit Robots- und Artikel-Tags
Eingabe
Titel: How to Bake Sourdough og:type: article Robots: index, follow article:published_time: 2024-05-01T09:00 article:section: Food
Ausgabe
<meta name="robots" content="index, follow" /> <meta property="og:type" content="article" /> <meta property="article:published_time" content="2024-05-01T09:00" /> <meta property="article:section" content="Food" />
Häufig gestellte Fragen
- Welche Meta-Tags werden erzeugt?
- Es erzeugt standardmäßige SEO-Tags (<title>, meta description und einen kanonischen Link), Open-Graph-Tags (og:title, og:description, og:type, og:url, og:image, og:site_name) und Twitter-Card-Tags (twitter:card, twitter:title, twitter:description, twitter:image). Nur die Zeilen für die Felder, die du ausfüllst, werden aufgenommen, sodass du nie leere Platzhalter-Tags erhältst.
- Was ist der Unterschied zwischen og:type und twitter:card?
- og:type teilt den Plattformen mit, welche Art von Objekt die Seite ist — website, article, product, profile oder video.other —, was sich darauf auswirkt, wie sich der Link entfaltet. twitter:card bestimmt das Layout auf X/Twitter: summary ist ein kleines Vorschaubild, summary_large_image zeigt ein großes Bannerbild, während app und player für Apps und Medien gedacht sind. Wähle die Kombination, die zu deinem Inhalt passt.
- Muss die Bild-URL absolut sein?
- Ja. og:image und twitter:image müssen vollständige absolute URLs sein, die mit https:// beginnen, weil Scraper sie von außerhalb deiner Website abrufen — ein relativer Pfad wie /og.png lädt nicht. Für beste Ergebnisse verwende für große Karten ein 1200×630-Bild.
- Crawlt oder liest dieses Tool meine Live-Seite?
- Nein. Es formatiert nur die Werte, die du eingibst, in HTML-Meta-Tags. Es ruft, crawlt oder analysiert keine URL — die kanonische URL und die Bild-URL werden wortwörtlich in die Tags geschrieben und nicht aufgerufen.
- Werden meine Daten an einen Server gesendet?
- Nein. Die Tags werden vollständig in deinem Browser mit JavaScript erstellt. Nichts, was du eingibst — einschließlich unveröffentlichter Titel, URLs oder Beschreibungen — wird hochgeladen, gespeichert oder irgendwohin gesendet, sodass die Nutzung auf privaten oder noch nicht veröffentlichten Seiten sicher ist.
- Wie lang sollten Titel und Beschreibung sein?
- Ziele auf etwa 60 Zeichen oder weniger beim Titel und rund 120–160 bei der Beschreibung; Suchmaschinen kürzen längeren Text. Das Tool zeigt für beide einen Live-Zähler, der von einem OK-Zustand auf eine Warnung umschaltet, sobald du die empfohlene Länge überschreitest.
- Welche zusätzlichen Meta-Tags kann ich hinzufügen und wie funktionieren die Bildwarnungen?
- Öffne die ⚙-Optionen, um eine Robots-Direktive (index/follow-Voreinstellungen), ein Viewport-Tag, ein UTF-8-Charset-Tag, eine Theme-Color und einen Autor hinzuzufügen; wenn og:type article ist, kannst du auch article:published_time, article:author und article:section ergänzen. Das Tool lädt außerdem deine Bild-URL im Browser, zeigt die tatsächliche Pixelgröße und warnt, wenn das Bild fehlt oder weit vom empfohlenen 1200×630 abweicht.
Verwandte Tools
Hreflang-Tag-Generator
Erstellt hreflang-Link-Tags für eine mehrsprachige Seite aus einer Liste von Sprach-URL-Paaren, mit optionalem x-default und einem selbstreferenzierenden Tag.
JSON-LD-Generator
Erzeuge gültige strukturierte JSON-LD-Daten für die Schemas Article, Product, FAQPage, HowTo, LocalBusiness, Event, Recipe, BreadcrumbList und Organization aus einem einfachen Formular.
Keyword-Dichte-Prüfer
Analysiere Worthäufigkeit und Keyword-Dichte für Phrasen aus 1, 2 oder 3 Wörtern – mit Stoppwortfilter und Ziel-Keyword-Suche.
Open Graph & Social-Card-Vorschau
Sieh dir an, wie sich ein Link auf X, LinkedIn, Slack, Discord und Facebook aus Titel, Beschreibung, Bild-URL und Seiten-URL zu einer Social Card entfaltet.