Meta-Tag-Generator
Erzeugen Sie SEO-Meta-Tags, Open-Graph- und Twitter-Card-Tags für Ihre Website.
Über Meta-Tags
Meta-Tags liefern Metadaten über Ihre HTML-Seite. Sie helfen Suchmaschinen, Ihre Inhalte zu verstehen, steuern, wie Ihre Seiten in den Suchergebnissen erscheinen, und definieren, wie Link-Vorschauen in den sozialen Medien aussehen. Ein gut optimierter Satz Meta-Tags kann die Klickraten aus Suche und Social Sharing verbessern. Halten Sie Titel unter 60 Zeichen und Beschreibungen unter 160 Zeichen für die beste Darstellung in den Suchergebnissen.
Die vier Familien der <head>-Metadaten
Der <head> einer modernen HTML-Seite trägt typischerweise Metadaten in vier Eimern, die jeweils einem anderen Publikum dienen:
- Dokument-Grundlagen, was jeder Browser braucht:
<title>,<meta charset="utf-8">,<meta name="viewport">,<meta name="description">. - SEO-Direktiven, was Suchmaschinen-Crawler lesen:
<meta name="robots">,<link rel="canonical">, der Seitentitel, der als SERP-Link endet. - Open Graph, was Facebook, LinkedIn, Slack, Discord, iMessage und die meisten anderen Share-Link-Clients rendern:
og:title,og:description,og:image,og:url,og:type,og:site_name. - Twitter Card, was X / Twitter für geteilte Links rendert, mit Fallback auf OG-Tags, wenn nicht vorhanden:
twitter:card,twitter:title,twitter:image,twitter:site,twitter:creator.
Dieser Generator gibt alle vier Familien aus einem einzigen Formular aus. Die Ausgabe lässt sich direkt in den <head> jeder HTML-Datei einfügen: einfügen, speichern, deployen. Für eine tiefere Beschäftigung speziell mit Open Graph zeigt das dedizierte Open Graph Vorschau-Werkzeug Live-Renderings auf den Plattformen.
Titel und Beschreibung: Wie lang sollten sie sein?
Google Search Central ist eindeutig in der Antwort: Es gibt kein hartes Maximum. Snippets werden einfach so gekürzt, dass sie in die Gerätebreite passen. Die Regeln 60 Zeichen für Titel und 160 für Beschreibung sind Branchenkonventionen, abgeleitet vom in Googles SERPs beobachteten Pixelbreiten-Abschneiden (~580 Pixel auf dem Desktop). In der Praxis:
- Titel, ziele auf 50–60 Zeichen. Breite Großbuchstaben (W, M, großes A) verbrauchen mehr Pixel-Raum als schmale Buchstaben (i, l, t), also können zwei 60-Zeichen-Titel mit sehr unterschiedlichen sichtbaren Breiten gerendert werden.
- Beschreibung, 150–160 Zeichen auf dem Desktop, ~120 mobil. Stelle die Schlüsselinformation nach vorne, damit sie das mobile Abschneiden überlebt.
- Die Länge beeinflusst das Ranking nicht; sie beeinflusst nur, wie viel von deinem Snippet ein Suchender vor dem Klick sieht.
Das robots-Meta-Tag: Was es tatsächlich steuert
Anders als das obsolete keywords-Tag (siehe unten) ist <meta name="robots"> quicklebendig; Google unterstützt es ausdrücklich. Häufige Werte:
index, follow, der Standard. Die Seite kann in der Suche erscheinen; Crawler folgen ihren Links.noindex, diese Seite aus den Suchergebnissen ausschließen. Nützlich für Dankeseiten, interne Tools, paginierte Archive, Suchergebnisseiten, und alles andere, was nicht mit deinem echten Inhalt konkurrieren soll.nofollow, Links auf dieser Seite nicht folgen. Selten die richtige Wahl auf ganzer Seitenebene; meist pro Link überrel="nofollow"angewendet.noindex, nofollow, beides. Die stärkste Privatsphäre-Haltung für eine öffentlich erreichbare Seite.noarchive, in den Suchergebnissen keine zwischengespeicherte Kopie zeigen.nosnippet, kein Beschreibungs-Snippet zeigen, nur den Titel.
Für Google-spezifische Überschreibungen verwende <meta name="googlebot"> mit denselben Werten. Beachte, dass noindex auch als HTTP-X-Robots-Tag-Header ausgedrückt werden kann, was der richtige Ort dafür auf PDFs, Bildern und anderen nicht-HTML-Ressourcen ist, wo du kein Meta-Tag hinzufügen kannst.
Warum kanonische URLs wichtig sind
<link rel="canonical"> sagt Suchmaschinen, welche Version einer Seite die «offizielle» ist, wenn mehrere URLs identischen oder fast identischen Inhalt liefern. Häufige Fälle, die ein Canonical brauchen:
- Mit oder ohne abschließenden Schrägstrich (
/pagevs./page/). - HTTP vs. HTTPS (Legacy-Weiterleitungen lassen manchmal beide indexierbar).
- WWW vs. Apex (
www.example.comvs.example.com). - Tracking-Parameter (
?utm_source=...,?ref=...), die endlos «verschiedene» URLs erzeugen. - Paginierung, Sortierreihenfolgen, Filter-Parameter, die denselben Inhalt in anderer Reihenfolge erzeugen.
- Syndizierter Inhalt, der auf mehreren Seiten erneut veröffentlicht wird (das Canonical zeigt auf das Original).
Ohne Canonical wählt Google selbst eine Version und kann die falsche wählen. Die kanonische URL muss absolut sein (vollständiges https://) und genau mit der URL übereinstimmen, die du indexiert haben willst.
Tags, die du 2026 weglassen kannst
<meta name="keywords">, Google hat seit September 2009 ausdrücklich erklärt, dass es das keywords-Meta-Tag nicht als Ranking-Signal verwendet. Bing geht weiter: Es behandelt übermäßiges Keyword-Stuffing in diesem Tag als Spam-Signal. Es einzubauen schadet dem SEO nicht, hilft aber auch nicht; das Feld existiert in diesem Generator für Nutzer, deren Unternehmensvorlagen es noch erwarten.<meta http-equiv="refresh">für Weiterleitungen, verwende stattdessen ordentliche HTTP-301/302-Weiterleitungen vom Server. Meta-Refresh verzögert die Weiterleitung und verwirrt manche Barrierefreiheits-Tools.<meta http-equiv="X-UA-Compatible">, nur für Internet-Explorer-Kompatibilität nötig, was kein Thema mehr ist.<meta name="revisit-after">, von großen Crawlern nie respektiert. Reiner Cargo-Kult.<meta name="generator">, nur informativ; sagt der Welt, womit deine Seite gebaut wurde. Manchmal ein Sicherheitssignal, das es wert ist, entfernt zu werden.
Die zwei Tags, die jede Seite wirklich braucht
Über <title> und <meta name="description"> hinaus sind zwei Tags für eine moderne Webseite nicht verhandelbar:
<meta charset="UTF-8">, sollte in den ersten 1024 Bytes des Dokuments erscheinen, idealerweise als erstes Kind von<head>. Der HTML Living Standard verlangt es für korrekte Zeichenbehandlung. Ohne es können Browser die Codierung raten und falsch liegen, besonders bei nicht-lateinischen Schriften.<meta name="viewport" content="width=device-width, initial-scale=1">, sagt mobilen Browsern, die Seite in der tatsächlichen Gerätebreite zu rendern, statt aus einem fiktiven 980-Pixel-Desktop-Layout herauszuzoomen. Ohne es sieht jeder mobile Nutzer eine winzige herausgezoomte Version deiner Seite, die kaum benutzbar ist.
Open Graph und Twitter Cards in Kürze
Eine kurze Zusammenfassung; für die Tiefe nutze das Open Graph Vorschau-Werkzeug. Die vier laut ogp.me erforderlichen OG-Tags: og:title, og:type, og:image, og:url. Optional, aber empfohlen: og:description, og:site_name. Bilddimensionen: 1200×630 (1,91:1) ist die plattformübergreifend sicherste Größe.
Für X / Twitter: füge twitter:card = summary_large_image ein (die moderne Karte mit voller Breite), und X greift bei fehlenden Twitter-spezifischen Tags für alles andere auf die OG-Tags zurück. Die eigenständige Twitter-Card-Validator-Vorschau wurde von X am 2. August 2022 entfernt; verifiziere stattdessen, indem du die URL in den Tweet-Composer einfügst.
Strukturierte Daten sind eine andere Aufgabe
JSON-LD strukturierte Daten (mit schema.org-Vokabularen) treiben die reichen Google-Ergebnisse an: Rezeptkarten, Produktinfos mit Sternebewertungen, FAQ-Snippets in der Suche, Breadcrumb-Pfade. Es ist von Meta-Tags getrennt und lebt in einem <script type="application/ld+json">-Block, nicht in einem <meta>-Tag. Beides wird empfohlen; eines ersetzt nicht das andere. Meta-Tags steuern den grundlegenden Titel / die Beschreibung / die Share-Karte; strukturierte Daten schalten die reicheren Formate frei.
Häufige Fehler
meta keywordseinbauen und einen SEO-Vorteil erwarten. Google kündigte 2009 an, dass es nicht verwendet wird. Über zwanzig Jahre später steckt es noch in alten Vorlagen; entfernen oder ignorieren.<link rel="canonical">vergessen. Wenn deine URL Tracking-Parameter oder alternative Versionen hat, wählt Google selbst eine. Ohne Canonical ist die gewählte Version vielleicht nicht die mit all deinen eingehenden Links.- Verschiedene Titel in
<title>,og:titleundtwitter:title. Technisch nicht falsch, aber inkonsistent. Der saubere Standard ist ein Titel, geteilt zwischen allen dreien. - Generisches Site-Logo als
og:imageauf jeder Seite. Jede Seite verdient ein einzigartiges Bild, das zu ihrem Inhalt passt; ein einziges Logo über die ganze Site produziert langweilige Share-Vorschauen. - Fehlendes
viewport-Meta auf mobilausgerichteten Seiten. Mobile Browser rendern die Seite in fiktiver Desktop-Breite und zoomen heraus. Die Nutzererfahrung ist furchtbar. <meta http-equiv="refresh">für Weiterleitungen verwenden. HTTP 301/302 vom Server ist der richtige Weg; Meta-Refresh ist langsamer und barrierefrei-feindlich, und viele Crawler behandeln es für Ranking-Zwecke inkonsistent.- Titel länger als ~580 Pixel (~60 Zeichen breit). Von Google mit Auslassungszeichen abgeschnitten; der abgeschnittene Teil ist für Suchende nicht sichtbar.
- Vergessen, dass Single-Page-Apps server-gerenderte oder vor-gerenderte Meta-Tags brauchen. Viele Social-Media-Crawler (Facebook, LinkedIn, Slack, Discord) führen kein JavaScript aus. Tags, die durch Client-side JS geschrieben werden, sind für sie nicht sichtbar.
Häufig gestellte Fragen
Hilft das keywords-Meta-Tag noch dem SEO?
Nein. Googles Matt Cutts kündigte im September 2009 an, dass <meta name="keywords"> nicht als Ranking-Signal verwendet wird. Bing behandelt übermäßiges Keyword-Stuffing in diesem Tag als Spam-Signal. Das Feld ist in diesem Generator für die Kompatibilität mit älteren Vorlagen und CMS-Workflows enthalten, die es noch erwarten; sicher, leer zu lassen.
Was ist der Unterschied zwischen Meta Description und OG Description?
Das HTML-<meta name="description"> ist das, was Suchmaschinen als Snippet unter deinem Seitentitel in den Ergebnissen verwenden. Die Open-Graph-og:description ist das, was Social-Media-Share-Karten anzeigen. Sie können der gleiche Text sein (und sind es meist), aber du kannst verschiedene Versionen schreiben, wenn dein Such- und dein Social-Publikum unterschiedliche Rahmungen erwarten.
Mein JavaScript schreibt die Meta-Tags nach dem Seitenladen. Ist das OK?
Für Googles Hauptcrawler (Googlebot) ja; Googlebot rendert JavaScript und sieht die Post-Render-Meta-Tags. Für Social-Media-Crawler (Facebook, LinkedIn, Slack, Discord, WhatsApp) im Allgemeinen nein; die meisten von ihnen führen JavaScript nicht aus und sehen nur das anfängliche HTML. Wenn deine Seite eine Single-Page-App ist, brauchst du serverseitiges Rendering, Pre-Rendering oder einen Dienst wie Prerender.io, um sicherzustellen, dass Social-Media-Crawler die richtigen Meta-Tags sehen.
Wo genau gehen diese Tags hin?
In den <head> deines HTMLs, idealerweise nahe am Anfang. <meta charset> sollte in den ersten 1024 Bytes stehen. <meta name="viewport"> direkt danach. Dann <title>, <meta name="description">, robots, canonical, OG-Tags, Twitter-Tags. Die Reihenfolge im <head> ist für SEO egal, sobald charset und viewport früh genug stehen.
Sollte ich mir wegen des Meta-Refresh-Tags Sicherheitssorgen machen?
Es ist an sich kein Sicherheitsrisiko, aber ein schlechtes Muster. Serverseitige HTTP-301/302-Weiterleitungen sind schneller, behandeln Referrer-Header korrekt und sind barrierefrei-freundlicher. Verwende Meta-Refresh nur, wenn du keine serverseitige Kontrolle über Weiterleitungen hast (ein statischer Host im GitHub-Pages-Stil ohne Weiterleitungs-Konfig).
Werden meine Meta-Tags auf einen Server hochgeladen?
Nein. Der Generator läuft komplett in deinem Browser. Deine Titel-, Beschreibungs-, URL- und Bildfelder bleiben auf deiner Maschine; das Ausgabe-Snippet wird lokal komponiert und auf Anfrage in deine Zwischenablage kopiert. Das ist wichtig, weil Entwurfs-Tags oft unveröffentlichte Seiten-URLs, interne Produktnamen oder Pre-Launch-Marketing-Texte enthalten, die nicht durch einen Drittanbieter-Server fließen sollen.
Verwandte Tools
Open-Graph-Vorschau
Vorschau anzeigen, wie Ihr Link auf Facebook, Twitter und LinkedIn erscheint. OG-Tags erzeugen.
Robots.txt-Generator
Eine robots.txt-Datei mit User-Agent-Regeln, Allow/Disallow-Pfaden, Sitemaps und Crawl-Verzögerungen erstellen.
URL-Slug-Generator
Beliebigen Text in einen sauberen, URL-freundlichen Slug umwandeln. Behandelt Akzente, Sonderzeichen und mehr.