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.
Schritt für Schritt
- Tragen Sie Titel, URL, Beschreibung und Bild-URL ein. Alternativ laden Sie ein Bild hoch.
- Geben Sie bei Bedarf einen Website-Namen an.
- Vergleichen Sie die Vorschau für Facebook, X/Twitter, LinkedIn und WhatsApp nebeneinander und passen Sie die Texte an.
Häufige Fragen
Welche Bildgröße ist empfehlenswert?
Als Standard für Vorschaubilder gilt etwa 1200 × 630 Pixel im Seitenverhältnis von rund 1,91 zu 1. Damit sehen Karten auf den meisten Plattformen gut aus.
Warum sieht mein Link in Netzwerken anders aus?
Jede Plattform schneidet Bild und Texte unterschiedlich zu. Zudem speichern Netzwerke Vorschauen zwischen, sodass Änderungen erst nach einer Aktualisierung sichtbar werden.
Wird mein Bild hochgeladen?
Das Bild wird in Ihrem Browser angezeigt und nicht auf einen Server geladen.