Skip to main content

Meta Tag Generator

Generate complete HTML meta tags including Open Graph and Twitter Card tags.

Geprüft von · Zuletzt geprüft

0/60 characters
0/160 characters

Open Graph Tags

Twitter Card

So verwendest du den Meta-Tag-Generator

  1. Fülle den SEO-Kernblock - gib deinen Seiten-<title>, Meta-Description, Canonical-URL und optionale Autoren- und Robots-Direktiven ein. Der Zeichenzähler neben Titel und Description wird bernsteinfarben, sobald du die Pixel-Budgets überschreitest, bei denen Google kürzt.
  2. Aktiviere den Open-Graph-Block - füge og:title, og:description, og:image, og:url und og:type hinzu. Diese werden von Facebook, LinkedIn, Slack, Discord, iMessage und WhatsApp verwendet, wenn dein Link eingefügt wird.
  3. Aktiviere den Twitter/X-Block - wähle summary oder summary_large_image, dann füge bei Bedarf twitter:site- und twitter:creator-Handles hinzu.
  4. Setze Viewport und Sprache - der Generator gibt <meta name="viewport" content="width=device-width, initial-scale=1"> und einen <html lang>-Hinweis aus, den du in deine Vorlage einfügen kannst.
  5. Kopiere die Ausgabe - das rechte Panel zeigt den fertigen Block als einfügbares HTML. Füge ihn in <head> vor render-blockierenden Skripten ein.

Was der Generator tatsächlich erzeugt

Die Ausgabe ist kein einzelnes Tag - es ist ein Bündel von etwa einem Dutzend Elementen, das vier verschiedene Spezifikationen in einem <head> zusammenführt. Das klassische <title> und <meta name="description"> stammen aus dem von WHATWG gepflegten HTML Living Standard. Die Open-Graph-Eigenschaften folgen dem ogp.me-Schema, das Facebook 2010 veröffentlichte und das der Rest des sozialen Webs übernahm. Die twitter:*-Tags folgen der Twitter- (jetzt X-) Cards-Markup-Referenz. Das link rel="canonical"-Element ist in RFC 6596 spezifiziert.

Alle drei Engines (Googlebot, Bingbot und die verschiedenen Social-Scraper) lesen den <head> mit einfachen HTML-Parsern und führen kein JavaScript aus, bevor sie Metadaten ernten, daher müssen die Tags in der initialen Server-Antwort vorhanden sein. Der Generator respektiert dies, indem er statisches HTML erzeugt; es gibt keine Laufzeitinjektion. Wenn du mit einem Framework wie Astro, Next.js oder SvelteKit renderst, füge die Ausgabe in den server-gerenderten Head-Slot statt in einen clientseitigen Effekt ein.

Wann du dieses Werkzeug verwenden solltest

  • Beim Starten einer neuen Landing-Page, wenn du eine vollständige Metadaten-Basis in einem Einfügevorgang möchtest, statt durch Dokumente für jeden Tag-Namen zu suchen.
  • Bei der Migration eines CMS, wenn du seitenspezifische Metadaten konsistent über Tausende von URLs neu generieren musst.
  • Bei der Analyse eines Wettbewerbers - füge seinen wahrscheinlichen Titel und seine Description ein, überprüfe den gerenderten Tag-Block und vergleiche ihn mit dem, was Google tatsächlich anzeigt.
  • Beim Prototyping einer Share-Card - sieh die genaue Paarung von og:image und twitter:image, bevor du sie in deine Build-Pipeline einbindest.
  • Beim Unterrichten eines jüngeren Entwicklers oder Marketers, was der Metadaten-Block enthalten soll, ohne ihm ein 40-seitiges SEO-PDF zu übergeben.

Häufige Fallstricke

  • Titel über 60 Zeichen schreiben - Google kürzt bei etwa 600 Pixeln Breite, was 50-60 Zeichen für die meisten Schriften entspricht. Breite Glyphen wie M und W verbrauchen das Budget schneller als i und l.
  • og:- und twitter:-Werte wörtlich duplizieren - du kannst, und Twitter fällt auf OG zurück, wenn Twitter-spezifische Tags fehlen, aber LinkedIn liest beide und der erste gewinnt auf jeder Plattform unterschiedlich.
  • Eine relative og:image-URL verwenden - das Open-Graph-Protokoll erfordert absolute URLs. Scraper lösen Pfade nicht gegen die Seiten-URL auf.
  • og:image:width und og:image:height vergessen - ohne sie überspringt Facebook manchmal die Vorschau, während es die Dimensionen nachholt, und der erste Share sieht kaputt aus.
  • robots auf noindex, nofollow setzen und sich wundern, warum nichts rankt - das ist die häufigste selbst verursachte SEO-Verletzung nach einer Staging-zu-Produktions-Migration.
  • canonical auf eine andere Seite zeigen - Google behandelt dies als starkes Signal, die aktuelle URL vollständig aus seinem Index zu entfernen.

Wie Suchmaschinen Meta-Tags tatsächlich verwenden

Google Search Central dokumentiert jeden unterstützten Tag in seiner Referenz "Special tags that Google understands". Das title-Element beeinflusst den Ergebnis-Snippet, ist aber allein kein Ranking-Faktor. meta description wurde von Google seit 2009 ausdrücklich als kein Ranking-Signal bestätigt, kontrolliert aber den Snippet etwa 62-68% der Zeit laut Ahrefs- und SISTRIX-Studien; den Rest der Zeit schreibt Google ihn aus Seitentextinhalt um, den er für relevanter zur Abfrage hält. Das meta keywords-Tag wird von Google und Bing ignoriert und wird seit 2009 bzw. 2014 ignoriert - der Generator gibt es trotzdem aus, weil Yandex und einige vertikale Engines es noch konsultieren.

Alternativen und wann sie gewinnen

Für eine einmalige Seite ist das Handschreiben der Tags in deinem Editor schneller als jedes Werkzeug. Für eine CMS-gestützte Website baken Plugins wie Yoast SEO für WordPress, RankMath oder Astros astro-seo-Integration Metadaten in die Vorlage ein, sodass die Felder zum Commit-Zeitpunkt erzwungen werden und nicht in ein Formular getippt werden. Wenn du Metadaten aus CMS-Feldern steuern musst (Produktseiten, Blog-Posts), skaliert ein vorlagenbasierter Ansatz besser. Dieses Werkzeug gewinnt bei einmaligen Landing-Pages, statischen Mikro-Sites und Spike-Arbeit, wo die Einrichtung eines Plugins übertrieben wäre. Zur Validierung des Ergebnisses nach dem Einfügen verwende Google Search Console URL-Inspektion, Facebooks Sharing Debugger und LinkedIns Post Inspector.

Häufig gestellte Fragen

Welche Meta-Tags liest Google tatsächlich?

Google dokumentiert die unterstützten Tags auf der Google Search Central "Special tags"-Referenzseite. Die Kurzliste umfasst <code>title</code>, <code>meta description</code>, <code>meta robots</code> (mit <code>index</code>, <code>noindex</code>, <code>follow</code>, <code>nofollow</code>, <code>max-snippet</code>, <code>max-image-preview</code>), <code>link rel="canonical"</code>, <code>meta viewport</code> und <code>meta http-equiv="content-language"</code>. Alles andere, was Googlebot sieht, wird gespeichert, aber nicht direkt für Ranking oder Anzeige verwendet.

Wie lang sollte mein Title-Tag sein?

Ziele auf 50-60 Zeichen. Google kürzt den angezeigten Titel bei etwa 600 Pixeln Breite, und da Title-Schriften proportional sind, hängt die genaue Zeichenzahl von den Glyphen ab. Ahrefs analysierte 2022 1 Million SERPs und stellte fest, dass die durchschnittliche angezeigte Titellänge 55 Zeichen betrug. Platziere das Hauptkeyword in den ersten 30 Zeichen, damit es mobile Kürzungen überlebt.

Ist das Meta-Keywords-Tag noch nützlich?

Google ignoriert <code>meta keywords</code> seit September 2009, als Matt Cutts dies in einem öffentlichen Beitrag bestätigte. Bing ignoriert es seit 2014. Yandex liest es noch. Der Generator gibt es aus, weil die Kosten null sind und einige Nicht-Google-Engines sowie manche internen Enterprise-Suchsysteme es noch konsultieren, aber erwarte keinen Google-Ranking-Effekt.

Verwendet Google immer meine Meta-Description?

Nein. Studien von Ahrefs, SISTRIX und Portent setzen die Umschreibungsrate zwischen 32% und 68%, abhängig von der Abfrage. Google schreibt die Description um, wenn ein aus deinem Seitenkörper extrahierter Snippet für die spezifische Suchanfrage relevanter erscheint. Du kannst Google nicht zwingen, deine zu verwenden, aber eine Description, die direkt zu Head-Term-Abfragen passt, wird wahrscheinlicher beibehalten.

Was ist der Unterschied zwischen Open-Graph- und Twitter-Card-Tags?

Open Graph ist ein Protokoll, das ursprünglich von Facebook 2010 unter <code>ogp.me</code> veröffentlicht wurde und jetzt als De-facto-Standard gilt. Twitter Cards sind ein X-spezifisches Markup, das vor OG existiert und den <code>twitter:</code>-Namensraum verwendet. Twitter fällt auf OG zurück, wenn Twitter-spezifische Tags fehlen, daher sind die minimal notwendigen Metadaten ein vollständiger OG-Block plus <code>twitter:card</code> auf entweder <code>summary</code> oder <code>summary_large_image</code> gesetzt.

Warum zeigt meine Facebook-Vorschau ein altes Bild?

Facebook speichert Open-Graph-Daten pro URL bis zu 30 Tage. Das Ändern von <code>og:image</code> und erneutes Teilen aktualisiert die Vorschau nicht - du musst eine Neubeschaffung über den Sharing Debugger unter <code>developers.facebook.com/tools/debug/</code> erzwingen, was Facebook veranlasst, die Seite erneut zu scrapen und den Cache zu leeren. LinkedIn hat seinen eigenen Post Inspector für denselben Zweck.

Worauf sollte der Canonical-Tag genau zeigen?

Auf die bevorzugte indizierbare Version der Seite, angegeben als absolute URL. Selbst-Canonicals (der Canonical zeigt auf die aktuelle URL) sind gültig und empfohlen. Wenn du Duplikate konsolidierst (Tracking-Parameter, Sortierreihenfolgen, Druckversionen), zeigt der Canonical auf dem Duplikat auf den Master. Zeige keinen Canonical auf eine URL, die <code>noindex</code> enthält oder <code>301</code> weiterleitet - das Signal wird mehrdeutig und Google könnte es ignorieren.

Werden meine Daten irgendwo hochgeladen?

Nein. Der Generator läuft vollständig in deinem Browser. Es gibt keinen <code>fetch()</code>-Aufruf in der Komponente - der HTML-String wird durch eine reine JavaScript-Funktion zusammengebaut, die deine Formularwerte übernimmt und ein Template-Literal zurückgibt. Du kannst dies überprüfen, indem du das DevTools-Netzwerkfeld öffnest und auf ausgehende Anfragen beim Tippen wartest; es gibt keine.

Spielt die Reihenfolge von Meta-Tags im Head eine Rolle?

Für Google und Social-Media-Scraper nicht - sie parsen den gesamten <code>&lt;head&gt;</code> zuerst. Für Browser-Performance ja: Platziere <code>meta charset</code> in den ersten 1024 Bytes, <code>viewport</code> früh und <code>preconnect</code> oder <code>preload</code> vor render-blockierenden Stylesheets.

Kann ich Meta-Tags statt einer Sitemap verwenden?

Nicht für die Entdeckung. Eine sitemap.xml teilt Crawlern mit, welche URLs auf deiner Website existieren; Meta-Tags sprechen nur für die Seite, die sie enthält. <code>meta robots</code> steuert, ob eine bestimmte Seite indiziert wird, und <code>link rel="canonical"</code> konsolidiert doppelte URLs, aber keines davon hilft Googlebot, Seiten zu finden, die er noch nicht kennt. Verwende eine Sitemap für die Entdeckung und Meta-Tags für die seitenspezifische Steuerung.

Sollte ich <code>http-equiv</code> oder name-basiertes Meta-Refresh verwenden?

Bevorzuge eine serverseitige HTTP-301- oder 302-Weiterleitung gegenüber <code>&lt;meta http-equiv="refresh"&gt;</code>. Meta-Refresh verzögert die Weiterleitung clientseitig, verwirrt den Zurück-Button und ist ein schlechtes Signal für Suchmaschinen; Google behandelt Meta-Refreshes mit langer Verzögerung als weiche 200er, die kein PageRank sauber weitergeben. Eine Server-Weiterleitung ist sauberer und schneller.

Benötige ich separate Meta-Tags für Mobil und Desktop?

Nein. Mobile-First-Indexierung (Standard seit 2023) bedeutet, dass Google primär die mobile Version crawlt und deren Metadaten verwendet. Schreibe einen Satz Tags für beide, füge ein responsives <code>viewport</code> ein und vermeide User-Agent-Sniffing - Google behandelt es als Cloaking.

Mehr SEO & Web Tools

Google SERP Preview

Preview how your page appears in Google search results with character count indicators.

Open tool

Heading Structure Analyzer

Extract and visualize H1-H6 heading hierarchy with SEO issue detection.

Open tool

Hreflang Tag Generator

Generate hreflang link tags for multilingual websites with x-default support.

Open tool

Keyword Density Checker

Analyze word frequency with single words, bigrams and trigrams with density percentages.

Open tool

Open Graph Preview

Preview how your page looks when shared on Facebook and LinkedIn.

Open tool

Readability Checker

Free reading level checker and writing grade level analyzer. Flesch-Kincaid, Flesch Reading Ease, Gunning Fog and Coleman-Liau scores in one place.

Open tool