Meta-Tags-Generator
Der Meta-Tags-Generator erzeugt Title-Tag, Meta Description, Meta Robots, Canonical-Tag und Viewport und prüft die Längen in Zeichen und geschätzten Pixeln.
Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.
Meta-Tags richtig setzen
Der Meta-Tags-Generator erzeugt die Grundausstattung für den <head> einer Seite: Zeichensatz, Viewport, den Title-Tag, die Meta Description, Meta Robots für die Indexierung und den Canonical-Tag. Während Sie tippen, zählt er Zeichen und schätzt zusätzlich die Breite in Pixeln, denn Suchmaschinen kürzen Titel nach der dargestellten Breite, nicht nach einer festen Zeichenzahl. Als Faustregel gelten für den Titel etwa 50 bis 60 Zeichen und für die Beschreibung etwa 120 bis 160 Zeichen.
Der Viewport-Eintrag width=device-width, initial-scale=1 sorgt dafür, dass Mobilgeräte die Seite in ihrer echten Breite darstellen statt verkleinert. Meta Robots mit index, follow entspricht dem Standardverhalten; nötig ist die Zeile vor allem für noindex oder für erweiterte Angaben wie max-image-preview:large, mit der große Vorschaubilder erlaubt werden. Der Canonical-Tag nennt die bevorzugte Adresse, wenn derselbe Inhalt unter mehreren Adressen erreichbar ist, etwa mit und ohne Parameter.
Wie Titel und Beschreibung in der Trefferliste aussehen, zeigt die SERP-Snippet-Vorschau. Für Linkvorschauen in sozialen Netzwerken ergänzen Sie Open-Graph-Tags mit dem Open-Graph-Generator. Grenzen: Suchmaschinen müssen die Beschreibung nicht übernehmen und schreiben Titel teils um. Meta Keywords gibt der Generator bewusst nicht aus, weil Google sie nicht auswertet.
Anleitung: Meta-Tags-Generator in 5 Schritten
- Seitentitel und Meta Description eintragen und die Angaben zu Zeichen und geschätzten Pixeln beachten.
- Die Canonical-URL als absolute Adresse und optional den Autor angeben.
- Indexierung, „Links folgen“ und die Vorschau in Suchergebnissen einstellen.
- Sprache der Seite und Theme-Farbe festlegen sowie charset, Viewport und theme-color an- oder abwählen.
- Die Meta-Tags für den head-Bereich kopieren und in die Seite einfügen.
Typische Anwendungsfälle
- Neue Landingpage: Title-Tag und Meta Description in passender Länge schreiben, bevor die Seite online geht.
- Seiten aus dem Index halten: Danke-Seiten oder Testseiten mit noindex auszeichnen.
- Doppelte Inhalte: Mit dem Canonical-Tag die Hauptadresse festlegen, wenn eine Seite auch mit Parametern erreichbar ist.
- Snippet überarbeiten: Titel und Beschreibung von Seiten mit wenig Klicks in den Suchergebnissen neu formulieren.
Häufige Fragen
Wie lang sollten Title und Meta Description sein?
Als Faustregel etwa 50 bis 60 Zeichen für den Titel und 120 bis 160 Zeichen für die Beschreibung. Entscheidend ist die Breite in Pixeln: Google kürzt Titel auf dem Desktop bei rund 600 Pixeln. Der Generator schätzt diese Breite mit der Schrift Arial.
Brauche ich Meta Robots mit index, follow?
Nein, das ist das Standardverhalten. Die Zeile schadet nicht, wichtig wird sie aber erst bei noindex, nofollow oder erweiterten Angaben wie max-image-preview:large.
Wofür ist der Canonical-Tag gut?
Er nennt die bevorzugte Adresse einer Seite, wenn derselbe Inhalt unter mehreren Adressen erreichbar ist, etwa mit Tracking-Parametern oder Sortierung. Er ist ein Hinweis an Suchmaschinen, keine Weiterleitung. Die Adresse sollte absolut sein, also mit https:// beginnen.
Was bewirkt der Viewport-Tag?
Ohne ihn stellen Mobilbrowser eine Seite wie auf einem breiten Bildschirm dar und verkleinern sie. Mit width=device-width, initial-scale=1 nutzt die Seite die echte Gerätebreite, was für responsives Design nötig ist.
Soll ich noch Meta Keywords eintragen?
Google wertet das Keywords-Tag seit vielen Jahren nicht aus. Es verrät höchstens Mitbewerbern Ihre Suchbegriffe. Der Generator lässt es deshalb weg.
Wie setze ich eine Seite auf noindex?
Mit <meta name="robots" content="noindex"> im head-Bereich; im Generator wählen Sie dafür bei Indexierung noindex. Die Seite darf dann nicht per robots.txt gesperrt sein, sonst sieht die Suchmaschine die Anweisung nicht.
Warum zeigt Google eine andere Beschreibung als meine Meta Description?
Google wählt das Snippet je nach Suchanfrage und nimmt oft eine Textstelle der Seite, die besser zur Anfrage passt. Eine Beschreibung, die den Inhalt treffend zusammenfasst, wird häufiger übernommen.
Das könnte auch helfen
Farbumwandler
HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.
ÖffnenFarbpalette aus Bild
Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.
ÖffnenKontrast prüfen (WCAG)
Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.
ÖffnenCSS-Gradient-Generator
Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.
ÖffnenBox-Shadow-Generator
CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.
ÖffnenFlexbox-Generator
Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.
Öffnen