Meta-Tags-Generator

Erstelle, bearbeite und teste Open Graph + Twitter Card Meta-Tags in der Vorschau. Sieh, wie deine Seite auf Google, Facebook, X, LinkedIn, Pinterest und Slack aussieht, bevor du sie veröffentlichst.

Vorschau

Google

https://so-me.studio

Meta-Tags, Vorschau, Bearbeiten und Generieren

Mit Meta-Tags kannst du deine Inhalte bearbeiten und ausprobieren und dann in der Vorschau sehen, wie deine Webseite auf Google, Facebook, X und mehr aussehen wird!

X (Twitter)

Kein Bild

Von so-me.studio

Meta-Tags, Vorschau, Bearbeiten und Generieren

Mit Meta-Tags kannst du deine Inhalte bearbeiten und ausprobieren und dann in der Vorschau sehen, wie deine Webseite auf Google, Facebook, X und mehr aussehen wird!

Facebook

Kein Bild

so-me.studio

Meta-Tags, Vorschau, Bearbeiten und Generieren

Mit Meta-Tags kannst du deine Inhalte bearbeiten und ausprobieren und dann in der Vorschau sehen, wie deine Webseite auf Google, Facebook, X und mehr aussehen wird!

LinkedIn

Kein Bild

Meta-Tags, Vorschau, Bearbeiten und Generieren

so-me.studio

Pinterest

Kein Bild

Meta-Tags, Vorschau, Bearbeiten und Generieren

so-me.studio

Slack

so-me.studio

Meta-Tags, Vorschau, Bearbeiten und Generieren

Mit Meta-Tags kannst du deine Inhalte bearbeiten und ausprobieren und dann in der Vorschau sehen, wie deine Webseite auf Google, Facebook, X und mehr aussehen wird!

Meta-Tags entscheiden, wie deine Seite aussieht, wenn sie auf Social Media, in Suchergebnissen und in Chat-Vorschauen geteilt wird. Machst du sie falsch, sieht dein Link auf LinkedIn kaputt oder auf Slack unlesbar aus. Dieser kostenlose Meta-Tags-Generator zeigt dir deine Open Graph + Twitter Card Tags in der Vorschau auf jeder großen Plattform, Google, Facebook, X, LinkedIn, Pinterest, Slack, bevor du veröffentlichst.

Was Meta-Tags tatsächlich bewirken

Drei Kategorien von Meta-Tags steuern, wie deine Seite im Web erscheint. (1) SEO-Tags: <title> und <meta description> bestimmen deinen Auftritt in der Google-Suche. (2) Open-Graph-Tags (og:*) steuern die Vorschauen auf Facebook, LinkedIn, Slack und in den meisten Chat-Apps. (3) Twitter-Card-Tags (twitter:*) steuern speziell die Vorschauen auf X.

Ohne Meta-Tags raten die Plattformen: Meist ziehen sie zufälligen Text von deiner Seite und das erstbeste Bild, das sie finden. Das Ergebnis sieht kaputt aus. Mit den richtigen Meta-Tags kontrollierst du die gesamte Vorschau.

Diese Meta-Tags braucht jede Seite

Das absolute Minimum für eine saubere Vorschau: <title> (60 Zeichen), <meta name=description> (160 Zeichen), <meta property=og:title>, <meta property=og:description>, <meta property=og:image> (empfohlen: 1200×630), <meta property=og:url> und <meta property=og:type> („website“ für die meisten Seiten).

Für Twitter-spezifische Kontrolle: <meta name=twitter:card> (meist „summary_large_image“) sowie twitter:title, twitter:description und twitter:image als Überschreibungen, wenn du auf X eine andere Vorschau willst.

Der Generator erzeugt all das aus deinen Eingaben.

OG-Bild-Vorgaben, die überall funktionieren

1200×630 Pixel (Seitenverhältnis 1,91:1) funktionieren auf Facebook, LinkedIn, Twitter, Slack, Discord und iMessage. Kleinere Bilder werden automatisch seltsam zugeschnitten, größere herunterskaliert.

Die Dateigröße sollte unter 5 MB liegen, denn manche Plattformen lehnen größere Dateien ab. JPG oder PNG. Packe lesbaren Text direkt ins Bild: Viele Plattformen zeigen OG-Bilder im Feed vor jedem Begleittext an, das Bild muss seinen Nutzen also für sich allein vermitteln.

Meta-Tag-Vorschauen debuggen

Die meisten Plattformen cachen OG-Daten sehr aggressiv. Hast du deine Meta-Tags aktualisiert, aber es erscheint noch die alte Vorschau, erzwingst du mit diesen Debuggern eine Aktualisierung:

  • Facebook: Facebook Sharing Debugger (developers.facebook.com/tools/debug)
  • X: X Card Validator (cards-dev.twitter.com/validator)
  • LinkedIn: LinkedIn Post Inspector (linkedin.com/post-inspector)
  • Pinterest: Pinterest Rich Pin Validator (developers.pinterest.com/tools/url-debugger)
  • Google: Rich-Results-Test (search.google.com/test/rich-results)

Jeder Debugger stößt einen neuen Crawl deiner Seite an, damit sich die neuen Meta-Tags verbreiten.

Tipps, um das Beste aus diesem Tool herauszuholen

  • OG-Bild: 1200×630 px. Funktioniert auf jeder großen Plattform.
  • Füge lesbaren Text ins OG-Bild ein, denn viele Feed-Vorschauen zeigen das Bild vor dem Begleittext.
  • Titel: höchstens 60 Zeichen. Alles darüber schneidet Google ab.
  • Beschreibung: 150 bis 160 Zeichen. Es gilt dieselbe Kürzungsregel.
  • Lass nach dem Aktualisieren der Meta-Tags die Debugger der Plattformen laufen, um den Cache zu erneuern.

Häufig gestellte Fragen

Ist der Meta-Tags-Generator kostenlos?

Ja. Kostenlos, ohne Anmeldung, unbegrenzt.

Welche Größe sollte mein OG-Bild haben?

1200×630 Pixel (Seitenverhältnis 1,91:1). Funktioniert auf Facebook, LinkedIn, X, Slack, Discord und iMessage ohne automatischen Zuschnitt.

Brauche ich sowohl Open-Graph- als auch Twitter-Card-Tags?

Open Graph allein deckt die meisten Plattformen ab (X greift auf OG zurück, wenn Twitter-Tags fehlen). Ergänze Twitter-Card-Tags nur, wenn du auf X eine andere Vorschau willst als auf den übrigen Plattformen.

Warum erscheint mein aktualisierter Meta-Tag nicht in den Facebook-Vorschauen?

Facebook cacht OG-Daten. Nutze den Sharing Debugger von Facebook, um den Cache nach dem Aktualisieren der Tags zu erneuern.

Was ist der Unterschied zwischen Meta-Description und OG-Description?

Die Meta-Description erscheint in den Google-Suchergebnissen. Die OG-Description erscheint in Social-Media-Vorschauen. Beide können gleich oder verschieden sein; lege die OG-Description gezielt fest, wenn du für Social Media und Suche unterschiedliche Texte willst.

Verwandte Tools

Einmal planen.
Überall posten.

Schluss mit dem Tab-Chaos, entwirf, passe an und veröffentliche auf 20 Plattformen aus einem einzigen Kalender.

7 Tage kostenlos testenLive-Demo ausprobieren