Meta Tag Generator: SEO-Meta-Tags erstellen

Was ist der Meta Tag Generator?

Ich nutze dieses Tool jedes Mal, wenn ich eine neue Seite veröffentliche und vorher sehen will, wie sie in Google, auf Facebook und auf Twitter wirklich aussieht. Das Tool erzeugt den vollständigen HTML-Meta-Tag-Block (Basic SEO, Open Graph, Twitter Card) und rendert pixelgenaue Vorschauen jeder Plattform nebeneinander. Du füllst den Input-Tab aus, kopierst aus Output und prüfst alles in Preview.

Hauptfunktionen

Das Tool erzeugt aus einem einzigen Eingabesatz drei Tag-Blöcke. Der Basic SEO-Block deckt <meta name="title">, <meta name="description">, <meta name="keywords">, <meta name="author">, <meta name="robots"> und <link rel="canonical"> ab. Der Open Graph-Block deckt og:title, og:description, og:type, og:url, og:image, og:site_name und og:locale ab, mit Typ-Optionen für website, article, product, video und music. Der Twitter Card-Block deckt twitter:card, twitter:site, twitter:creator, twitter:title, twitter:description und twitter:image ab und unterstützt sowohl Summary als auch Summary Large Image.

Zeichenzähler führen dich zu den richtigen Längen. Title zeigt aktuell/60 und färbt sich grün im Bereich 30–60, gelb unter 30, rot über 60. Description nutzt dasselbe Schema mit einem Ziel von 120–160 Zeichen. Drei Live-Vorschauen aktualisieren sich beim Tippen: eine Google-SERP-Vorschau im echten Link-Blau (#1a0dab), URL-Grün (#006621) und Description-Grau (#545454); eine Facebook-Vorschau, die die 1.91:1-Bildkarte mit dem von dir bereitgestellten OG-Bild rendert; und eine Twitter-Card-Vorschau, die je nach Card-Type-Einstellung zwischen Summary und Summary Large Image wechselt.

Das Robots-Dropdown bietet die vier Standard-Direktivkombinationen: index, follow (Standard), index, nofollow, noindex, follow und noindex, nofollow. Der Output-Tab teilt Basic, Open Graph und Twitter in separate Bereiche mit eigenen Copy-Buttons, plus ein Copy All für den kombinierten Block.

Wie du den Meta Tag Generator nutzt

Schritt 1: Den Input-Tab ausfüllen

Öffne den Demnächst verfügbar: Meta Tag Generator. Das Tool startet auf dem Input-Tab mit drei Bereichen.

Basic-SEO-Bereich:

• Title: Dein Seitentitel. Der Zeichenzähler aktualisiert sich in Echtzeit. Halte ihn zwischen 30–60 Zeichen (grün), um Abschneiden in Suchergebnissen zu vermeiden. Beispiel: TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole (53 Zeichen, grün).
• Description: Deine Meta-Description. Ziele auf 120–160 Zeichen (grüner Bereich) für vollständige Anzeige. Beispiel: TrailMaster Pro boots combine a Vibram outsole with Gore-Tex waterproofing for serious hikers and trail runners. Free shipping over $75. (137 Zeichen, grün).
• Keywords: Komma-getrennte Keywords. Moderne Suchmaschinen ignorieren dieses Tag weitgehend, aber es schadet nicht, es einzufügen. Beispiel: hiking boots, trail running, waterproof boots, vibram outsole.
• Author: Optionaler Autorname.
• Robots: Wähle aus den vier Robots-Direktivkombinationen. Lass index, follow für öffentliche Inhalte. Nutze noindex, nofollow für private Seiten, Admin-Bereiche oder doppelte Inhalte, die nicht indexiert werden sollen.
• Canonical URL: Die bevorzugte URL für diese Seite. Gib die vollständige absolute URL ein (z. B. https://example.com/products/trailmaster-pro).

Schritt 2: Open-Graph-Tags konfigurieren

Scrolle zum Open-Graph-Bereich:

• OG Type: Wähle "website" für Startseiten und allgemeine Seiten, "article" für Blogposts, "product" für E-Commerce-Seiten.
• OG Site Name: Der Anzeigename deiner Site (z. B. "TrailMaster Outdoor Gear").
• OG Image: Die vollständige URL des Sharing-Bilds. Facebook empfiehlt 1200×630 Pixel. Wenn du eine erreichbare URL angibst, rendert die Facebook-Vorschau das echte Bild.
• OG URL: Die kanonische URL für Open Graph, normalerweise dieselbe wie deine Canonical URL.

Schritt 3: Twitter-Card-Tags konfigurieren

Scrolle zum Twitter-Cards-Bereich:

• Twitter Card Type: "Summary" zeigt ein kleines quadratisches Thumbnail. "Summary Large Image" zeigt ein großes 2:1-Bild, die bessere Wahl für die meisten Inhalte mit visuellen Assets.
• Twitter Site: Der Twitter/X-Username der Site (z. B. @trailmaster).
• Twitter Creator: Der Twitter/X-Username des Autors.

Schritt 4: Den Output-Tab prüfen

Klicke auf den Output-Tab. Drei Bereiche zeigen die generierten Tags:

Basic-Tags-Beispiel:

<meta name="title" content="TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole" />
<meta name="description" content="TrailMaster Pro boots combine a Vibram outsole with Gore-Tex waterproofing for serious hikers and trail runners. Free shipping over $75." />
<meta name="keywords" content="hiking boots, trail running, waterproof boots, vibram outsole" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://example.com/products/trailmaster-pro" />

Open-Graph-Tags-Beispiel:

<meta property="og:type" content="product" />
<meta property="og:url" content="https://example.com/products/trailmaster-pro" />
<meta property="og:title" content="TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole" />
<meta property="og:description" content="TrailMaster Pro boots combine a Vibram outsole..." />
<meta property="og:image" content="https://example.com/images/trailmaster-og.jpg" />
<meta property="og:site_name" content="TrailMaster Outdoor Gear" />
<meta property="og:locale" content="en_US" />

Klicke auf Copy All, um den vollständigen Tag-Block zum Einfügen in dein <head> zu erhalten.

Schritt 5: Im Preview-Tab verifizieren

Wechsle zum Preview-Tab. Drei Live-Vorschauen rendern gleichzeitig:

• Google-SERP-Vorschau: Zeigt den Title in Blau, die Canonical URL in Grün und die Description auf zwei Zeilen in Grau gekürzt. Dies entspricht dem Desktop-Suchergebnisformat. Wenn dein Title 60 Zeichen überschreitet, wird er hier sichtbar abgeschnitten – ein klares Signal zum Kürzen.
• Facebook-Card-Vorschau: Zeigt das OG-Bild (falls bereitgestellt und ladbar), die Site-Domain in Großbuchstaben, den Title fett und die Description.
• Twitter-Card-Vorschau: Zeigt das twitter:card-Format (Small oder Large Image), die URL-Domain, den Title und die Description. Das Vorschaubild stammt aus twitterImage, falls gesetzt, sonst aus ogImage.

Praktische Beispiele

Beispiel 1: Blogpost

Für einen Blogpost mit dem Titel "10 Best Hikes in the Scottish Highlands":

• Title: 10 Best Hikes in the Scottish Highlands - Complete Guide (53 Zeichen, grün)
• Description: The 10 most rewarding hiking routes in the Scottish Highlands, from Ben Nevis to the Isle of Skye. Trail grades, maps, and kit lists included. (143 Zeichen, grün)
• OG Type: article
• Robots: index, follow

Die SERP-Vorschau bestätigt, dass der Title ohne Abschneiden passt und die Description die zwei verfügbaren Zeilen füllt.

Beispiel 2: E-Commerce-Produktseite

Für eine Produktseite wird der OG-Type auf "product" gesetzt und eine Bild-URL bereitgestellt. Die Facebook-Vorschau rendert das Produktbild im 1.91:1-Verhältnis mit Site-Name, Produkt-Title und Description. Die Twitter-Large-Image-Card zeigt dasselbe Bild im 2:1-Crop.

Beispiel 3: Private Staging-Seite

Für eine Staging-Umgebungsseite, die noch nicht indexiert werden soll, setze Robots auf noindex, nofollow. Der generierte Output enthält <meta name="robots" content="noindex, nofollow" /> und weist Suchmaschinen-Crawler an, die Seite nicht zu indexieren oder Links zu folgen, selbst wenn sie sie entdecken.

Tipps und Best Practices

• OG-URL und Canonical-URL abgleichen: Verwende dieselbe absolute URL für og:url und das Canonical <link>-Tag. Diskrepanzen können dazu führen, dass Social Sharing auf die falsche URL verweist.
• Title-Länge wegen Truncation: Google kürzt Titles, die in Desktop-Ergebnissen breiter als ungefähr 600px rendern. Das 30–60-Zeichen-Ziel ist ein zuverlässiger Proxy dafür; Grün heißt sicher.
• OG-Bilddimensionen: Das Tool generiert das og:image-Tag für jede URL, prüft aber keine Bildmaße. Nutze ein 1200×630-Pixel-Bild für Facebook und ein 1200×600-Bild für Twitter Large Image Cards.
• twitter:image fällt auf og:image zurück: Im Preview-Tab nutzt die Twitter-Card dein twitter:image, falls vorhanden, sonst og:image. Setze nur dann ein separates twitter:image, wenn du unterschiedliche Social-Bilder pro Plattform willst.
• Keywords-Meta-Tag: Das <meta name="keywords">-Tag wird generiert, aber von Google und Bing seit 2009 weitgehend ignoriert. Inkludiere es der Vollständigkeit halber, aber investiere keine Zeit in dessen Optimierung.

Häufige Probleme und Troubleshooting

Title-Counter zeigt rot, Description ist okay: Title ist über 60 Zeichen. Kürze ihn oder verschiebe Details in die Description. Der Title-Counter zeigt aktuell/60 (long) in Rot als klares Signal.

Description-Counter zeigt gelb: Description ist unter 120 Zeichen. Google ersetzt sie eventuell durch einen eigenen Snippet aus deinem Seiteninhalt. Füge 20–40 weitere Zeichen relevanten Inhalts hinzu.

OG-Bild erscheint nicht in Facebook-Vorschau: Der Preview-Tab lädt die echte Bild-URL in einem <img>-Tag. Wenn die URL aus deinem Browser nicht öffentlich erreichbar ist (z. B. eine lokale Entwicklungs-URL), zeigt der Bildbereich "No image"-Platzhaltertext. Das Tag wird trotzdem korrekt im Output generiert.

Twitter-Vorschau zeigt nur eine kleine Card trotz großem Bild: Der Twitter-Card-Type ist auf "Summary" statt "Summary Large Image" gesetzt. Wechsle das Twitter-Card-Type-Dropdown auf "Summary Large Image", um die 2:1-Vorschau zu sehen.

Generierte Tags erscheinen leer im Output-Tab: Fülle mindestens Title und Description im Input-Tab aus. Die Ausgabe enthält nur nicht-leere Felder; ein leeres Title-Feld erzeugt kein Title-Tag.

Datenschutz und Sicherheit

Meta Tag Generator läuft vollständig in deinem Browser. Die Tag-Generierung nutzt Reacts useMemo-Hook, um Output reaktiv aus deinem Input zu berechnen, ohne Server-Roundtrip. Wenn du eine OG-Bild-URL angibst, lädt der Preview-Tab dieses Bild direkt aus der Quell-URL ohne Proxy. Supporter-Mitglieder können benannte Presets über lokalen IndexedDB-Speicher sichern und wiederherstellen.

Häufig gestellte Fragen

Was sind die optimalen Zeichenlängen für Title und Description?

Das Tool nutzt 30–60 Zeichen für Title (grüner Bereich) und 120–160 Zeichen für Description (grüner Bereich). Diese entsprechen den typischen gerenderten Pixel-Breitenlimits, die Google für SERP-Snippets nutzt. Titles unter 30 Zeichen (gelb) gelten möglicherweise als dünn; über 60 (rot) werden eventuell abgeschnitten. Descriptions unter 120 (gelb) führen eventuell dazu, dass Google einen eigenen Auszug nutzt; über 160 (rot) werden abgeschnitten.

Generiert das Tool alle Open-Graph-Eigenschaften?

Das Tool generiert die Kern-OG-Tags: og:type, og:url, og:title, og:description, og:image, og:site_name und og:locale. Es generiert keine artikelspezifischen Tags wie article:published_time oder produktspezifischen Tags wie product:price. Diese fügst du nach dem Kopieren des Outputs manuell hinzu.

Welche OG-Locale-Werte sind verfügbar?

Die Standard-OG-Locale ist en_US. Das Locale-Feld ist ein Texteingabefeld, in das du jeden gültigen Locale-Code eingeben kannst (z. B. fr_FR, de_DE, ja_JP). Das Tool beschränkt dieses Feld nicht auf ein Dropdown.

Welche Twitter-Card-Typen unterstützt das Tool?

Das Tool generiert summary (kleines quadratisches Thumbnail, Title, Description und Site-Name) und summary_large_image (vollbreites 2:1-Bild mit Title, Description und Site-Name). Es unterstützt nicht die veralteten app- und player-Card-Typen.

Kann ich nur die Open-Graph-Tags ohne die Basic-SEO-Tags kopieren?

Ja. Der Output-Tab zeigt drei separate Bereiche (Basic, Open Graph, Twitter), jeder mit eigenem Copy-Button. Klicke auf den Copy-Button im Open-Graph-Bereich, um nur diese Tags zu kopieren. Nutze "Copy All" für alles kombiniert.

Wie füge ich die generierten Tags zu meiner Site hinzu?

Füge die kopierten Tags innerhalb des <head>-Bereichs deines HTML ein. Wenn du ein CMS wie WordPress, Shopify oder Webflow nutzt, füge sie in das benutzerdefinierte <head>-Code-Feld in deinen Theme-Einstellungen ein oder nutze ein SEO-Plugin, das benutzerdefinierte Meta-Tags akzeptiert. Für Frameworks wie Next.js füge sie in die <Head>-Komponente ein oder nutze die metadata-API.

Verwandte Tools

• Demnächst verfügbar: Page SEO Analyzer: Auditiert die aktuellen Meta-Tags, Heading-Struktur und On-Page-SEO-Signale einer existierenden Live-Seite, um Lücken zu identifizieren, die deine neuen Meta-Tags adressieren sollten.
• Demnächst verfügbar: SERP-Vorschau: Dediziertes SERP-Vorschau-Tool zur Feinjustierung von Title- und Description-Anzeige vor und nach dem Aktualisieren deiner Meta-Tags.
• Demnächst verfügbar: Schema-Generator: Füge strukturierte Daten-Markup neben deinen Meta-Tags hinzu, um Rich Results in Google Search für Artikel, Produkte, Events und mehr zu ermöglichen.

Probiere den Meta Tag Generator jetzt: Demnächst verfügbar: Glyph Widgets Meta Tag Generator