Was sind Meta-Tags und warum sie schreiben?
Meta-Tags sind unsichtbare Anweisungen im `<head>`-Bereich deiner Seite. Sie sagen Google, welchen Titel er in Suchergebnissen zeigen soll, Facebook, welches Bild fuer die Vorschau zu nutzen ist, und dem Browser, welche Sprache der Inhalt hat. Ohne sie waehlt Google seinen eigenen Titel (meist schlechter als deiner), und die Facebook-Vorschau zeigt einen Link ohne Bild, die Domain statt des Titels.
Hier fuellst du ein Formular aus, schaltest die Sektionen an, die du brauchst (Basic, OpenGraph, Twitter Card, Article), und siehst rechts vier Vorschauen, wie dein Link in Google-Treffern, auf Facebook, X (Twitter) und LinkedIn aussehen wird. Du kopierst den fertigen HTML-Block und fuegst ihn zwischen `<head>` und `</head>` deiner Seite ein.
Titel und Description fuer eine Suchmaschine sind die mit Abstand kostenguenstigste SEO-Optimierung. Ein gut geschriebenes Paar hebt CTR um 20 bis 50 % an, ohne den Seiteninhalt anzufassen.
So benutzt du es
- Mit Basic anfangen: einen Titel eingeben (max 60 Zeichen, Google schneidet laengere ab) und eine Description (140 bis 160 Zeichen). Das erscheint in Google-Treffern.
- OpenGraph aktivieren und og:image eingeben (URL eines 1200x630-px-Bildes). Ohne das zeigen Facebook, LinkedIn und Slack eine Vorschau ohne Thumbnail.
- Twitter Card aktivieren, `summary_large_image` waehlen (grosse Karte mit grossem Bild). Deinen Handle (@deine-firma) im Site-Feld eintragen.
- Ist die Seite ein Blogpost, Article aktivieren und Publish-/Modify-Datum sowie Autor eintragen.
- Rechts siehst du Live-Vorschauen fuer 4 Plattformen. Titel-/Description-Laenge justieren, Warnungen pruefen, den ganzen HTML-Block kopieren und in `<head>` deiner Seite einfuegen.
Wann dieses Tool hilft
Typische Situationen, in denen es sich lohnt, einen vollen Meta-Tag-Satz zu generieren:
- Neuer Blogpost. Titel, Description, og:image eintippen, Publish-/Modify-Datum setzen und den HTML-Block ins CMS kopieren (WordPress hat SEO-Yoast-/Rank-Math-Felder, Next.js hat `generateMetadata`).
- Stellenanzeige. HR teilt den Link auf LinkedIn, die Vorschau muss professionell aussehen. Ohne og:image zeigt LinkedIn nur die Domain.
- Produkt-Landingpage. Die Ad-Kampagne braucht saubere Vorschauen in Facebook Ads. og:type=product, og:image mit einem starken Foto, og:price (via og:price:amount + og:price:currency) eintragen.
- SEO-Audit beim Kunden. Schluesselseiten pruefen, fuer jede einen frischen Meta-Block generieren, das HTML an die Entwickler zum Deployen uebergeben.
- Landingpage fuer eine Mobile-App. Vor App-Store-/Google-Play-Launch pruefen, wie der Link aussieht, wenn jemand ihn in iMessage oder Slack einfuegt.
- Internationale Seite. Fuer jede Sprachversion einen eigenen Block mit `og:locale=de_DE` (oder `en_US`) generieren, damit Facebook weiss, welche Version zu zeigen ist.
Nach dem Deploy pruefen, wie es aussieht mit der OpenGraph-Vorschau. Wenn du auch strukturierte Daten (JSON-LD) generierst, nimm den JSON-LD-Schema-Builder.