Kostenlos · SEO-Tools

Social-Share-Vorschau

Open-Graph- + Twitter-Card-Tags mit Live-Vorschaukarte im Facebook-/Twitter-Stil

Titel

Beschreibung

Bild-URL

Seiten-URL

Seitenname (optional)

Twitter-Card-Typ

Live-Vorschau

Kein Bild festgelegt

Ausgabe

Vier Plattformen, eine Wahrheit über die Share-Card

Facebook, X, LinkedIn und WhatsApp rendern OG-Tags unterschiedlich — alle vier Mockups ansehen und das schwächste vor der Veröffentlichung reparieren.

⚡

Ein Formular, zwei Tag-Sätze

Open-Graph-Tags für Facebook, LinkedIn und Slack sowie Twitter-Card-Tags für X entstehen zusammen aus einem Titel, einer Beschreibung, einem Bild und einer URL.

🔒

Kartenvorschau vor dem Teilen

Vorschaukarten rendern das Bild im Verhältnis 1.91:1 mit Domain, Titel und Beschreibung — das exakte Layout, das Nutzer sehen, wenn der Link geteilt wird, bevor etwas veröffentlicht ist.

🎯

Beide Kartenvarianten

Wählen Sie summary_large_image für ein vollbreites Bild oder die kompakte summary-Karte — der Generator gibt den passenden twitter:card-Wert samt Tags aus.

Häufige Fragen

Warum Open-Graph- und Twitter-Card-Tags gemeinsam generieren?

Twitter/X greift automatisch auf deine Open-Graph-Tags zurück, wenn eigene twitter:*-Tags fehlen – reale Share-Karten basieren also auf einem gemeinsamen Satz von Feldern. Sie separat auszufüllen würde nur dieselben Titel-/Beschreibungs-/Bildangaben doppelt erfassen.

Welche Bildgröße sollte ich verwenden?

1200×630px (ein Seitenverhältnis von etwa 1,91:1) ist die sichere Empfehlung für „summary_large_image“-Karten auf Facebook, Twitter/X, LinkedIn und Slack – kleinere oder ungünstig zugeschnittene Bilder können von den Plattformen unvorhersehbar beschnitten werden.

Werden meine Inhalte irgendwohin hochgeladen?

Nein – alles läuft mit reinem JavaScript direkt in deinem Browser. Nichts, was du eingibst, wird jemals an einen Server gesendet.

Was jede Plattform liest

Plattform	Primäre Quelle	Bildverhältnis
Facebook / LinkedIn	og:title, og:description, og:image	1.91:1 (min 200×200)
X / Twitter	twitter:card, sonst OG-Fallback	2:1 für large, 1:1 für summary
WhatsApp	og:title/image (Beschreibung oft verborgen)	nahezu quadratischer Zuschnitt

Markiert zu kleine Bilder, fehlende Dimensions-Tags (die erneutes Scrapen erzwingen) und Titel jenseits des jeweiligen Cut-off-Punkts des Netzwerks.

Was ist eine Social-Share-Vorschau?

Wenn jemand einen Link auf Facebook, X, LinkedIn oder Slack teilt, liest die Plattform Meta-Tags — Open Graph bei den meisten Netzwerken, Twitter Cards bei X — und baut daraus eine Karte mit Bild, Titel und Beschreibung. Ohne diese Tags wirkt die Karte falsch oder es erscheint nur eine nackte URL, was die Klickrate spürbar senkt. Dieses Tool erzeugt beide Tag-Sätze aus einem einzigen Formular und rendert Live-Vorschaukarten, sodass Sie vor dem Teilen genau sehen, wie Ihr Link aussieht. Marketingteams, Content-Abteilungen und Website-Betreiber nutzen es vor jedem Launch.

Was erzeugt wird

🖼️ Open-Graph- und Twitter-Card-Tags aus einem Satz Felder
📱 Live-Vorschaukarte im Facebook-/Twitter-Stil beim Tippen
🗂️ summary- oder Large-Image-Kartentyp für X wählbar
🔗 Unterstützung für og:url und og:site_name
📋 Einen kombinierten, einfügefertigen Tag-Block

Wann man vor dem Teilen prüft

Ein Produkt oder eine Landingpage launchen, das/die breit geteilt wird
Vor einer Kampagne prüfen, wie ein Artikel-Link aussieht
Kontrollieren, ob das gewählte Bild im 1.91:1-Format gut beschnitten wird
Eine Website prüfen, deren Share-Karten seit Monaten defekt sind

Alles wird in Ihrem Browser erzeugt; es werden keine Inhalte hochgeladen. Eine Eigenheit der Plattformen sollten Sie kennen: Soziale Netzwerke cachen die Metadaten einer URL. Nach dem Einfügen der Tags müssen Sie den Cache mit dem Debugging-Tool der jeweiligen Plattform aktualisieren, bevor die neue Karte erscheint.

Zuletzt aktualisiert · 2026-09-01