Meta-Tag Generator
Open Graph Meta-Tags
Twitter Card Meta-Tags
So verwenden Sie Meta-Tag Generator
- 1
Grundlagen ausfüllen
Geben Sie im Abschnitt „Wesentliche Meta-Tags“ Ihren Seitentitel, Ihre Beschreibung, Schlüsselwörter, den Autor und die Robots-Anweisung ein.
- 2
Tags für soziale Medien hinzufügen
Füllen Sie die Felder für Open Graph und Twitter Card aus, einschließlich Titeln, Beschreibungen und Bild-URLs, um zu steuern, wie die Seite beim Teilen aussieht.
- 3
Erzeugte Tags prüfen
Beobachten Sie, wie sich das Meta-Tag-Markup im Ausgabebereich live aufbaut, während Sie in jedes Feld tippen.
- 4
In Ihren <head> einfügen
Klicken Sie auf „Meta-Tags kopieren“ und fügen Sie das erzeugte HTML in den head-Bereich Ihrer Seite ein.
Der vollständige Leitfaden zu HTML-Meta-Tags für SEO
Was Meta-Tags sind und wohin sie gehören
Meta-Tags sind HTML-Elemente, die im head-Bereich einer Seite stehen und das Dokument für Browser, Suchmaschinen und soziale Netzwerke beschreiben, nicht für menschliche Besucher. Sie werden auf der Seite selbst nie dargestellt. Der Browser liest sie, bevor er irgendetwas zeichnet, weshalb die Platzierung wichtig ist: Jedes Tag, das dieser Generator erzeugt, sollte in das head-Element eingefügt werden, idealerweise weit oben, vor allen rendernblockierenden Skripten. Insbesondere das title-Element und die charset-Deklaration sollten so früh wie möglich erscheinen, denn Browser müssen die Zeichencodierung kennen, bevor sie das übrige Markup parsen.
Zwei der wichtigsten Metadaten sind streng genommen gar keine Meta-Tags. Das title-Element (title) und der kanonische Link (link rel="canonical") sind eigenständige Elemente, gehören aber in denselben head-Block und sind zentral dafür, wie eine Seite verstanden wird. Dieses Tool konzentriert sich auf die Tags für Titel, Beschreibung, Viewport, Robots, Open Graph und Twitter Card, die zusammen die Metadaten abdecken, die für Suche und Social wirklich etwas bewegen.
Das title-Tag: Ihr wichtigstes On-Page-Signal
Das title-Element ist das stärkste On-Page-SEO-Signal, das Sie steuern. Es ist das, was Google üblicherweise als die blaue anklickbare Überschrift in den Suchergebnissen anzeigt, und was im Browser-Tab erscheint. Streben Sie etwa 50 bis 60 Zeichen an, oder rund 580 Pixel, damit es in der Ergebnisseite nicht mit einem Auslassungszeichen abgeschnitten wird. Setzen Sie das wichtigste Schlüsselwort nach vorne, schreiben Sie für einen Menschen, der entscheidet, ob er klickt, und halten Sie jeden Titel auf Ihrer Website einzigartig. Standardtext wie ein zu Beginn jedes Titels wiederholter Markenname verschwendet die wertvollste Fläche, die Sie haben.
Ein häufiger Fehler ist, das title-Tag und die H1-Überschrift als austauschbar zu behandeln. Sie dienen unterschiedlichen Zielgruppen: Der Titel ist für das Such-Snippet und den Tab, während die H1 die Überschrift auf der Seite ist. Sie dürfen sich unterscheiden, und oft sollten sie das auch, denn die ideale Formulierung für die Klickrate in einem Suchergebnis ist nicht immer die beste Überschrift für jemanden, der bereits auf der Seite ist.
Meta-Beschreibung: Klicks, nicht Rankings
Die Meta-Beschreibung beeinflusst die Rankings nicht direkt, aber sie beeinflusst stark die Klickrate, und die zählt. Behandeln Sie sie wie Werbetext: Fassen Sie die Seite zusammen, nehmen Sie das wichtigste Schlüsselwort auf, damit es fett hervorgehoben werden kann, wenn es zur Suchanfrage passt, und geben Sie einen Grund zum Klicken. Halten Sie sie bei etwa 150 bis 160 Zeichen; längere Beschreibungen werden abgeschnitten, und Google schreibt Beschreibungen, die fehlen, doppelt vorkommen oder schlecht zur Anfrage passen, häufig um, indem es stattdessen ein Snippet aus dem Seiteninhalt zieht.
Weil Google Ihre Beschreibung ignorieren und eine eigene zusammensetzen kann, verlassen Sie sich für kritische Informationen nicht darauf. Schreiben Sie dennoch eine starke, denn eine überzeugende Beschreibung, die überdauert, schlägt oft ein automatisch erzeugtes Snippet. Stopfen Sie sie niemals mit Schlüsselwörtern voll; das löst eine Umschreibung aus und liest sich für Nutzer wie Spam.
Das Robots-Meta-Tag und die Crawl-Steuerung
Das Robots-Meta-Tag sagt Suchmaschinen, was sie tun sollen, sobald sie eine Seite gecrawlt haben. Die häufigsten Werte sind index/noindex (ob die Seite in den Ergebnissen erscheinen darf) und follow/nofollow (ob die Links darauf Linkkraft weitergeben sollen). Ein Wert wie noindex, follow hält eine Seite aus dem Index heraus, lässt Crawler aber weiterhin ihre Links verfolgen, was für dünne Seiten wie interne Suchergebnisse oder druckfreundliche Varianten nützlich ist. Weitere Anweisungen sind noarchive, nosnippet und max-snippet zur feinen Steuerung, wie ein Ergebnis dargestellt wird.
Eine wichtige Unterscheidung: Das Robots-Meta-Tag steuert das Indexieren, während robots.txt das Crawlen steuert. Sie sind nicht austauschbar. Sperren Sie eine URL in robots.txt, sieht Google ein noindex-Tag auf dieser Seite möglicherweise nie, weil es die Seite nicht crawlen kann, um es zu lesen, und die URL kann weiterhin als bloßer Link in den Ergebnissen erscheinen. Um eine Seite zuverlässig aus der Suche zu entfernen, lassen Sie sie crawlbar und wenden noindex an.
Viewport, Charset und die technischen Grundlagen
Das Viewport-Tag, width=device-width, initial-scale=1.0, ist es, das eine Seite für Mobilgeräte responsiv macht. Ohne es stellen mobile Browser die Seite in Desktop-Breite dar und verkleinern sie, was winzigen Text und ein schlechtes mobiles Erlebnis erzeugt. Da Google die mobile Version von Seiten zuerst indexiert, ist ein fehlendes oder falsch konfiguriertes Viewport-Tag ein echtes Ranking- und Nutzbarkeitsproblem, kein kosmetisches. Die charset-Deklaration, fast immer UTF-8, stellt sicher, dass Sonderzeichen und Emoji korrekt dargestellt werden statt als Mojibake.
Diese beiden Tags sind klein, aber unverhandelbar. Setzen Sie den Viewport auf die Gerätebreite, vermeiden Sie es, die Nutzerskalierung mit maximum-scale oder user-scalable=no zu deaktivieren (was der Barrierefreiheit schadet), und deklarieren Sie auf jeder Seite die UTF-8-Codierung.
Open Graph und Twitter Cards für Social-Vorschauen
Open-Graph-Tags (die og:-Familie) steuern, wie Ihr Link aussieht, wenn er in Facebook, LinkedIn, Slack, Discord und viele andere Plattformen eingefügt wird. Der Kernsatz ist og:title, og:description, og:image, og:url und og:type. Twitter-Card-Tags (die twitter:-Familie) tun dasselbe für X, wobei twitter:card auf summary_large_image gesetzt die auffälligste Option ist. Stellen Sie ein og:image von rund 1200 mal 630 Pixel bereit und verwenden Sie dafür stets absolute URLs; relative Bildpfade sind der mit Abstand häufigste Grund, weshalb eine Vorschau kein Vorschaubild anzeigt.
Soziale Plattformen speichern zwischen, was sie auslesen, sodass Sie nach dem Ändern dieser Tags die Seite oft mit dem Debugging-Tool der Plattform erneut auslesen lassen müssen (zum Beispiel mit dem Sharing Debugger von Facebook), um die alte Vorschau zu leeren. Fehlt ein Tag, greifen die meisten Plattformen auf den Standardtitel und die Standardbeschreibung zurück, doch das Ergebnis ist eine schlichtere, weniger klickfreundliche Karte.
Tags, die nicht mehr helfen, und häufige Fehler
Das meta-keywords-Tag ist für SEO tot. Google hat vor Jahren bestätigt, dass es Meta-Keywords vollständig ignoriert, und weil es Ihre Zielbegriffe offen an Mitbewerber verriet, ist es auszufüllen bestenfalls sinnlos und schlimmstenfalls ein kleines Informationsleck. Dieser Generator enthält ein Keywords-Feld der Vollständigkeit halber und für Altsysteme, doch erwarten Sie davon keinen Ranking-Vorteil. Andere Alt-Tags wie meta revisit-after und meta author haben auf Google-Rankings ebenfalls keinen Einfluss.
Die häufigsten echten Fehler sind: doppelte Titel und Beschreibungen über viele Seiten hinweg, Titel und Beschreibungen, die die Anzeigegrenzen überschreiten und abgeschnitten werden, fehlende kanonische Tags auf Seiten, die über mehrere URLs erreichbar sind, relative URLs in og:image und das versehentliche Ausliefern eines seitenweiten noindex, das aus einer Staging-Umgebung übrig geblieben ist. Bestätigen Sie stets den endgültig gerenderten head mit der Quelltextansicht oder den Entwicklertools Ihres Browsers, da JavaScript-Frameworks Meta-Tags manchmal einfügen oder überschreiben, nachdem das ursprüngliche HTML geladen wurde.
Häufig gestellte Fragen
Welche Meta-Tags erstellt dieser Generator?
Wofür sind Open-Graph- und Twitter-Card-Tags da?
Wie lang sollten mein Titel und meine Beschreibung sein?
Welche Bildgröße sollte ich für OG-Tags verwenden?
Wohin füge ich die erzeugten Tags ein?
Verwandte Tools
Machen Sie weiter mit diesen praktischen Tools