Wenn du einen Link auf WhatsApp, LinkedIn, Facebook oder in Slack teilst, erscheint meist eine schicke Vorschaukarte: ein großes Bild, eine Überschrift und ein kurzer Beschreibungstext. Diese Karte ist kein Zufall – du kannst sie vollständig selbst bestimmen. Möglich macht das das Open-Graph-Protokoll, eine Sammlung von Meta-Tags, die ursprünglich von Facebook eingeführt wurde und heute praktisch überall ausgelesen wird.
Was ist Open Graph?
Open Graph (kurz OG) ist ein offener Standard, der Webseiten ein einheitliches Format gibt, um sich gegenüber sozialen Netzwerken zu beschreiben. Die Tags stehen im <head> der Seite und beginnen alle mit dem Präfix og:. Wird dein Link geteilt, lesen die Plattformen diese Tags aus und bauen daraus die Vorschaukarte.
Ohne Open-Graph-Tags raten die Plattformen selbst, welches Bild und welcher Text passen – mit oft unschönen Ergebnissen: ein zufälliges Logo, ein abgeschnittener Satz oder gar kein Bild. Mit den richtigen Tags behältst du die Kontrolle über deinen ersten Eindruck.
Die wichtigsten Open-Graph-Tags
- og:title – Die Überschrift der Vorschaukarte. Darf vom HTML-Title abweichen und sollte knackig sein.
- og:description – Der Beschreibungstext unter der Überschrift, idealerweise ein bis zwei Sätze.
- og:image – Die wichtigste Zutat: das Vorschaubild. Es zieht die meiste Aufmerksamkeit.
- og:url – Die kanonische URL der Seite, damit geteilte Varianten auf dieselbe Adresse zeigen.
- og:type – Der Inhaltstyp, etwa
websiteoderarticle.
Wie deine Karte am Ende aussieht, kannst du vorab testen: Mit dem Open Graph Preview trägst du Titel, Beschreibung, URL und Bild ein und siehst sofort eine realistische Vorschau, wie der Link beim Teilen wirkt.
Das og:image richtig dimensionieren
Das Bild entscheidet maßgeblich über die Wirkung. Bewährt hat sich ein Format von 1200 × 630 Pixeln im Seitenverhältnis 1,91:1. Diese Größe wird von den meisten Plattformen als große, formatfüllende Karte angezeigt.
- Mindestens 600 × 315 Pixel, sonst zeigen einige Netzwerke nur eine kleine Karte.
- Wichtige Inhalte (Logo, Text) nicht zu nah an den Rand legen – manche Plattformen beschneiden leicht.
- Dateigröße im Rahmen halten, damit das Bild schnell lädt.
- Eine absolute URL zum Bild angeben, keinen relativen Pfad.
Das passende Seitenverhältnis und neue Pixelmaße rechnest du schnell mit dem Aspect Ratio Rechner aus, wenn du ein vorhandenes Bild zuschneiden möchtest.
Twitter Cards: der nahe Verwandte
X (ehemals Twitter) nutzte lange ein eigenes System namens Twitter Cards mit Tags wie twitter:card und twitter:image. In den meisten Fällen greift X heute auf die Open-Graph-Tags zurück, falls die Twitter-spezifischen fehlen. Ein zusätzliches twitter:card mit dem Wert summary_large_image stellt sicher, dass die große Bildkarte erscheint.
Warum die Vorschau manchmal nicht aktualisiert
Plattformen speichern die ausgelesenen OG-Daten zwischen (Caching). Änderst du deine Tags, kann die alte Vorschau hartnäckig erhalten bleiben. Die großen Netzwerke bieten dafür eigene Debugging-Werkzeuge an, mit denen du das Auslesen erzwingen und den Cache leeren kannst. Plane das ein, bevor du eine wichtige Kampagne startest.
So gehst du vor
Setze auf jeder wichtigen Seite vollständige Open-Graph-Tags, gestalte ein 1200 × 630 großes Vorschaubild und kontrolliere das Ergebnis vor der Veröffentlichung mit dem Open Graph Preview. Da Open Graph eng mit den klassischen Suchsnippets zusammenhängt, lohnt sich parallel ein Blick auf unsere Anleitung zum Meta Description Checker. Weitere SEO- und Social-Helfer findest du in der Webtools-Sammlung.
Häufige Fragen
Brauche ich Open Graph für SEO?
Open-Graph-Tags sind kein direkter Rankingfaktor. Sie verbessern aber, wie deine Inhalte in sozialen Netzwerken aussehen, was indirekt zu mehr Klicks, Shares und Reichweite führen kann.
Was passiert ohne og:image?
Die Plattform sucht selbst ein Bild auf der Seite – oft ein zufälliges oder gar keines. Das Ergebnis ist meist deutlich weniger attraktiv als eine gezielt gestaltete Karte.
Kann ich für jede Seite ein anderes Bild setzen?
Ja, und das solltest du auch. Ein zur Seite passendes og:image wirkt relevanter und steigert die Klickbereitschaft beim Teilen.