Was ist Open-Graph-Vorschau?

Open Graph Preview zeigt Ihnen genau, wie Ihre URL beim Teilen auf Facebook, Twitter, LinkedIn und anderen sozialen Plattformen aussieht. Geben Sie Ihre OG-Meta-Tag-Werte ein und sehen Sie ein Live-Mockup der Social-Share-Karte, bevor Sie veröffentlichen.

Die Vorschau liest deine og:title-, og:description-, og:image-, og:site_name- und og:url-Tags und bildet das tatsächliche Layout jedes Netzwerks nach. Facebook beschneidet Titel rund um 88 Zeichen, die große Twitter-Karte braucht ein 2:1-Verhältnis, und LinkedIn kürzt Beschreibungen nach etwa 200 Zeichen mit Auslassungspunkten.

Anleitung

1. Geben Sie Ihre Open-Graph-Tags ein: Titel, Beschreibung, Bild-URL, Seitenname und URL.
2. Sieh dir die Echtzeit-Vorschau für Google-Suche, Facebook, Twitter, LinkedIn, WhatsApp, Slack, Discord und Pinterest nebeneinander an.
3. Passen Sie die Titellänge, Beschreibung und Bildabmessungen an, bis die Vorschau auf allen Plattformen perfekt aussieht.

Wann verwenden

• Vor der Veröffentlichung eines Blogposts oder einer Marketingseite, die in Social Media geteilt wird.
• Beim Audit eines bestehenden Sites, dessen Sharing-Vorschau leer oder kaputt aussieht.
• Beim Design einer neuen OG-Bildvorlage, um zu prüfen, dass der Titel das Motiv nicht überdeckt.

Ergebnis

Bevor Sie Ihren neuen Blogbeitrag auf LinkedIn teilen, überprüfen Sie, ob das OG-Bild nicht unvorteilhaft beschnitten wird und die Beschreibung innerhalb von Twitters 200-Zeichen-Kartenlimit gut lesbar ist.

Häufige Fragen

Welche Größe sollte mein Open-Graph-Bild haben?

1200x630 Pixel ist der sichere Standard. Facebook und LinkedIn rendern es im Format 1,91:1, und die Twitter-Karte summary_large_image hält das gleiche Seitenverhältnis. Die Datei sollte unter 5 MB bleiben und JPEG oder PNG sein.

Warum aktualisiert Facebook die Vorschau nach geänderten Meta-Tags nicht?

Facebook cached OG-Daten rund 24 Stunden. Füge die URL in den Sharing Debugger von Meta ein und klicke «Scrape Again», um das Neuladen zu erzwingen. LinkedIn bietet dasselbe über den Post Inspector.

Brauche ich twitter:*-Tags, wenn ich schon og:*-Tags habe?

Twitter fällt auf og:title, og:description und og:image zurück, wenn twitter:*-Tags fehlen, eine Standardseite läuft also ohne sie. Ergänze twitter:card und twitter:image nur, wenn du eine eigene Überschrift oder ein anderes Bild gezielt für Twitter ausspielen willst.

Was ist der Unterschied zwischen summary und summary_large_image bei Twitter?

summary zeigt eine kleine quadratische Vorschau neben dem Text und passt zu Nachrichten und Artikeln. summary_large_image stellt ein breites Bild über den Text und eignet sich besser für visuelle Inhalte wie Landingpages oder Videos.

Kann ich ein animiertes GIF als og:image verwenden?

Die Netzwerke akzeptieren das GIF, zeigen aber nur das erste Einzelbild. Nimm ein statisches PNG oder JPEG, auf dem die wichtigste Information schon in dieser Einzelaufnahme sichtbar ist, oder wandle die Animation in ein kurzes MP4 um und referenziere es über og:video.

Ähnliche Tools