Open-Graph-Karten-Vorschau — Social-Share-Tester
Sehen Sie, wie Ihre Seite beim Teilen auf Facebook, X/Twitter, LinkedIn und WhatsApp aussehen wird — alle vier Vorschauen nebeneinander. Passen Sie Titel, Beschreibung und Bild an und beobachten Sie jede Plattform live.
Open-Graph-Karten-Vorschau — Sehen Sie Ihre Seite in Jedem Sozialen Netzwerk
Bevor Sie einen Link in sozialen Medien teilen, sehen Sie genau, wie er auf Facebook, X (Twitter), LinkedIn und WhatsApp erscheinen wird — alle vier Karten nebeneinander gerendert. Passen Sie Titel, Beschreibung, Bild und URL an und beobachten Sie jede Vorschau live aktualisieren. Dies ist der schnellste Weg, um sicherzustellen, dass Ihre Open-Graph-Tags überall großartig aussehende Shares erzeugen.
Warum jede Plattform anders aussieht
- Facebook: großes Bild (1,91:1), Domain in Großbuchstaben über dem Titel, graue Info-Leiste darunter
- X / Twitter: große Summary-Karte mit Bild oben, leichteres und abgerundetes Design
- LinkedIn: großes Bild, blau getönte Info-Leiste, mehr Fokus auf den Titel
- WhatsApp: kompakte Karte mit einem kleinen quadratischen Thumbnail rechts — sehr anderes Layout
Empfohlene Abmessungen
- Bild: 1200×630 px (Verhältnis 1,91:1) — funktioniert für Facebook, Twitter (summary_large_image) und LinkedIn
- Titel: zielen Sie auf 50–70 Zeichen, damit er nirgends abgeschnitten wird
- Beschreibung: 100–150 Zeichen sind ein sicherer Sweet Spot
- WhatsApp schneidet aggressiv ab — halten Sie den Anfang des Titels aussagekräftig
So verwenden Sie es
- Tippen oder fügen Sie Ihren Titel, Ihre Beschreibung und URL ein
- Fügen Sie eine Bild-URL ein oder klicken Sie auf „Hochladen“, um ein lokales Bild zu testen (es bleibt in Ihrem Browser)
- Jede Plattform zeigt ihre eigene Vorschau mit ihren echten Schriftarten, Farben und Seitenverhältnissen
- Iterieren Sie, bis jede Vorschau großartig aussieht — speichern Sie diese Werte dann in den
<meta>-Tags Ihrer Seite
Die Open-Graph-Tags dahinter
Die hier gezeigten Werte entsprechen diesen Meta-Tags auf Ihrer Seite:
<meta property="og:title" content="..."><meta property="og:description" content="..."><meta property="og:image" content="..."><meta property="og:url" content="..."><meta name="twitter:card" content="summary_large_image">
Verwenden Sie unseren Meta-Tags-Generator, um das vollständige HTML zu erstellen, sobald Sie mit den Vorschauen zufrieden sind.
Datenschutz
Dieses Tool läuft vollständig in Ihrem Browser. Hochgeladene Bilder bleiben lokal — nichts wird an einen Server gesendet.