Meta Tag Generator

Was macht der Meta Tag Generator und welchen Code liefert er?

Ein Meta Tag Generator macht aus einem kurzen Formular die Tags, die in den Head Bereich einer Seite gehören. Sie tippen Title, Description, Adresse und Bild nur einmal ein. Das Tool verteilt die Angaben dann auf drei Gruppen: SEO Tags für Suchmaschinen, Open Graph Tags für Facebook, LinkedIn oder WhatsApp und Card Tags für X (Twitter). So schreiben Sie nichts dreifach und vermeiden kaputte Anführungszeichen.

Ich nutze das Tool vor allem in zwei Situationen. Zum einen kurz bevor eine neue Landingpage live geht. Zum anderen, wenn ein Kunde sagt: "Unser geteilter Link sieht kaputt aus." In der SEO Beratung prüfen mein Team und ich außerdem früh, ob jede Seite einen eigenen Title, eine eigene Description und einen Canonical Tag trägt.

• Zähler: messen den Title an 60 und die Description an 160 Zeichen, während Sie tippen.
• Vorschau: zeichnet ein ungefähres Google Ergebnis und eine Share Karte.
• Kernfelder: zählen, wie viele von Title, Description, URL und Bild fertig sind.
• Sauberer Code: leere Felder erzeugen keine Zeile, Sonderzeichen wie Anführungszeichen maskiert das Tool.

Wie lang sollten Title und Meta Description sein?

Eine feste Zeichengrenze gibt es nicht. Google setzt für das Title Element und die Meta Description kein Längenlimit. Allerdings kürzt Google beide in den Ergebnissen, damit sie in die Gerätebreite passen. Das heißt: Entscheidend ist die Breite in Pixeln, nicht die Zahl der Zeichen. Zum Beispiel brauchen breite Buchstaben wie M und W deutlich mehr Platz als i oder l.

Die 60 und 160 Zeichen im Tool sind deshalb ein praktischer Richtwert. Der Zähler bleibt bis 90 % des Grenzwerts grün, wird auf den letzten 10 % gelb und danach rot. Die Google Vorschau kürzt den Title bei etwa 580 und die Description bei etwa 920 Pixeln. Einen genauen Vergleich von Desktop und Mobil liefert die Google SERP Vorschau.

In der Praxis halte ich mich an drei Regeln:

• Das wichtigste Wort steht vorn; fällt etwas weg, dann lieber der Markenname am Ende.
• Der erste Satz der Description sagt, was die Seite bietet, denn mobil kann Google früher kürzen.
• Keine Keyword Listen. Laut Google erscheinen Descriptions aus reinen Suchbegriffen seltener als Snippet.

Wie Sie Title und Description Schritt für Schritt formulieren, zeige ich mit Beispielen im Beitrag Meta Title und Meta Description schreiben.

Wie steuern Open Graph Tags die Vorschaukarte?

Fügen Sie einen Link in Facebook, LinkedIn, WhatsApp oder Slack ein, ruft die Plattform Ihre Seite auf und liest die Open Graph Tags. Fehlen sie, wählt sie stattdessen selbst ein Bild und etwas Text. Das Ergebnis ist oft ein unpassendes Logo oder eine Zeile aus dem Menü. Konkret nennt das Open Graph Protokoll vier Pflichtangaben: og:title, og:type, og:image und og:url.

Das Tool ergänzt diese vier zudem um Description, Website Name und Sprachcode. Beim Seitentyp gibt es zwei Optionen:

• Website: für Startseite, Leistungs- und Produktseiten. Laut dem Sharing Leitfaden von Meta ist das auch der Standardwert, wenn og:type fehlt.
• Artikel (article): für Blogbeiträge und News.

Bei X läuft es allerdings etwas anders. X sucht zuerst nach twitter: Tags und nimmt sonst das Open Graph Gegenstück. Die einzige Ausnahme ist twitter:card, denn für den Kartentyp gibt es kein Open Graph Gegenstück. Deshalb schreibt das Tool diese Zeile immer, mit der großen Bildkarte als Standard. Für die kleine Karte mit quadratischem Bild wählen Sie im Feld X Kartentyp die Option Kleines Bild.

Was über die Tags hinaus Besucher aus sozialen Netzwerken bringt, beschreibe ich im Beitrag Website Traffic aus Social Media.

Welche Größe und welche Adresse braucht das og:image?

Die Entwicklerdokumentation von Meta empfiehlt Bilder mit mindestens 1200 x 630 Pixeln für eine gute Darstellung auf hochauflösenden Bildschirmen. Für Linkbeiträge mit großem Bild liegt das Minimum bei 600 x 315 Pixeln. Halten Sie das Seitenverhältnis nahe 1.91:1, damit der Feed das ganze Bild zeigt. Zudem sollte die Datei kleiner als 8 MB sein.

Häufiger als die Größe sehe ich allerdings Fehler bei der Adresse:

• Vollständige URL: Der Wert von og:image beginnt mit https://. Bei einem relativen Pfad wie /img/cover.jpg zeigt das Tool unter dem Feld einen Hinweis.
• Öffentliche Datei: Das Bild darf nicht in einem Ordner mit Login liegen oder für Crawler gesperrt sein. Lädt der Tab Share Karte das Bild nicht, prüfen Sie zuerst diesen Punkt.
• Wichtiges in die Mitte: Die kleine Karte kann das Bild quadratisch zuschneiden. Setzen Sie Text und Logo deshalb nahe an die Mitte.

Das Open Graph Protokoll empfiehlt außerdem: Wer og:image angibt, sollte auch og:image:alt angeben. Das Tool schreibt den Alternativtext nur, wenn eine Bild URL vorhanden ist, und übernimmt ihn zusätzlich in twitter:image:alt. Zum Verkleinern oder Komprimieren der Datei eignet sich das Tool Bild verkleinern.

Wie arbeiten Canonical und Robots Tag zusammen?

Der Canonical Tag nennt die bevorzugte Version, wenn mehrere URLs zum selben Inhalt führen. Google wertet rel="canonical" als starkes Signal, aber nicht als verbindlichen Befehl. Laut der Dokumentation von Google gelten drei Regeln:

• Verwenden Sie absolute statt relativer URLs.
• Setzen Sie den Tag nur in den Head Bereich.
• Geben Sie auch auf der bevorzugten Seite einen Canonical an, der auf sie selbst zeigt.

Beim Robots Tag ist index,follow der Standard. Den Wert auszuschreiben bewirkt nichts, schadet aber auch nicht. Das Tool bietet drei Optionen:

• Normale Seiten im Livebetrieb: index,follow.
• Interne Suchergebnisse oder eine Dankeseite, die nicht im Index stehen sollen, deren Links aber zählen: noindex,follow.
• Testseiten oder Kampagnenentwürfe, die ganz draußen bleiben sollen: noindex,nofollow.

Zwei Hinweise noch. Sperrt die robots.txt das Crawling einer Seite, sieht Google deren noindex nicht. Zudem rät Google davon ab, die Wahl des Canonicals über noindex zu steuern. Die robots.txt erstellen Sie mit dem robots.txt Generator, Ihre URL Liste mit dem XML Sitemap Generator. Den technischen Gesamtblick fasse ich in Technisches SEO: 10 Tipps zusammen.

Wie bauen Sie den Code aus dem Meta Tag Generator in Ihre Website ein?

Fügen Sie den Code in den Head Bereich der Seite ein, vor das schließende Head Tag. Google erwartet Meta Tags im Head und als gültiges HTML. Bei einer handgeschriebenen Seite war es das schon. In einem CMS oder Baukasten prüfen Sie zuerst die vorhandenen Tags:

1. Öffnen Sie die Seite und rufen Sie den Quelltext auf (Strg+U in Chrome).
2. Suchen Sie im Quelltext nach title, canonical und og:image.
3. Schreibt Ihr Theme oder SEO Plugin diese Zeilen bereits, fügen Sie keinen zweiten Satz ein. Tragen Sie die Werte aus dem Tool stattdessen in die Felder des Plugins ein.
4. Kopieren Sie nur fehlende Zeilen und prüfen Sie danach, dass jeder Tag genau einmal im Quelltext steht.

Achten Sie vor allem auf einen Punkt: og:url und Canonical sollten dieselbe saubere Adresse enthalten. Meta beschreibt og:url als URL ohne Sitzungsvariablen und Tracking Parameter; Likes und Shares sammeln sich an genau dieser Adresse. Auch wenn Sie Kampagnenlinks mit dem UTM Generator markieren, gehören UTM Parameter nicht in diese beiden Felder.

Bauen Sie gerade eine neue Website? In unseren Webdesign Projekten verankern wir diese Tags für jeden Seitentyp in der Vorlage. So muss später niemand Head Code von Hand schreiben, wenn eine neue Seite online geht.

Warum bleibt die Linkvorschau veraltet und wie aktualisieren Sie sie?

Plattformen lesen einen Link zunächst beim ersten Teilen aus und speichern das Ergebnis dann zwischen. Selbst nach einer Korrektur erscheinen alter Titel oder altes Bild deshalb eine Weile weiter. Meta weist außerdem darauf hin, dass es Bilder anhand ihrer URL zwischenspeichert. Für ein neues Bild nach der Veröffentlichung brauchen Sie folglich eine neue URL.

So gehe ich vor:

• Facebook: Geben Sie den Link im Sharing Debugger ein und lassen Sie die Seite erneut auslesen. Der Debugger zeigt Fehler und liest die Seite neu ein.
• X: Fügen Sie den Link in das Beitragsfeld ein; die Kartenvorschau erscheint, ohne dass Sie posten. Die Vorschau im alten Card Validator hat X entfernt.
• LinkedIn: Tragen Sie die URL im Post Inspector ein, damit LinkedIn die Seite erneut liest.
• Neues Bild: Laden Sie die Datei unter einem neuen Namen hoch und tragen Sie diese Adresse bei og:image ein.

Bleibt die Vorschau trotzdem alt, liegt die Ursache oft an der Seite selbst. Zum Beispiel kann eine Weiterleitung den Crawler auf eine andere Adresse schicken. Jeden Sprung eines Links zeigt der Redirect Checker.