Das Open Graph Protocol (OG) ist ein Satz von Meta-Tags, der 2010 von Facebook entwickelt wurde. Diese Tags befinden sich im <head>-Bereich deines HTML und teilen sozialen Plattformen genau mit, wie sie deinen Inhalt anzeigen sollen, wenn jemand einen Link teilt. Ohne sie versuchen Plattformen, eine Vorschau aus dem zusammenzusetzen, was sie auf der Seite finden, und das Ergebnis ist meistens nicht gut.
Wo Open Graph Tags in der Praxis auftauchen
Wenn jemand einen Link in Facebook, LinkedIn, WhatsApp, Telegram, Slack oder Discord einfügt, ruft die Plattform die Seite ab und liest die OG-Tags. Diese Tags bestimmen den Vorschau-Titel, die Beschreibung und das Bild, die im Beitrag oder der Nachricht erscheinen. Diese Vorschau ist oft der erste Eindruck, den Menschen von deinem Inhalt bekommen, daher ist es wichtig, sie zu kontrollieren. Ein Link mit einem klaren Bild und überzeugendem Titel bekommt deutlich mehr Klicks als einer mit einem kaputten Thumbnail oder einer generischen Beschreibung aus dem Seiten-Footer.
Erforderliche vs. optionale Open Graph Tags
Die Open-Graph-Spezifikation definiert vier erforderliche Eigenschaften:
og:title: Der Titel deines Inhalts, wie er in der sozialen Vorschau erscheinen soll.og:type: Der Typ des Inhalts. Standard ist „website", wenn er fehlt.og:image: Die URL des Bildes für die Vorschau.og:url: Die kanonische URL der Seite.
Darüber hinaus werden mehrere optionale Tags häufig verwendet:
og:description: Eine ein- bis zweisätzige Zusammenfassung der Seite.og:site_name: Der Name deiner gesamten Website (z. B. „InspectWP").og:locale: Sprache und Region (z. B.en_US,de_DE).og:video: Eine URL zu einer mit dem Inhalt verknüpften Videodatei.
Die og:type-Werte verstehen
Der og:type-Tag teilt Plattformen mit, welche Art von Inhalt die Seite repräsentiert. Die gängigsten Werte sind:
- website: Für die Startseite und allgemeine Seiten. Das ist der Standard, wenn kein Typ angegeben ist.
- article: Für Blogbeiträge, Nachrichtenartikel und schriftliche Inhalte mit Veröffentlichungsdatum. Dieser Typ ermöglicht zusätzliche Tags wie
article:published_time,article:authorundarticle:section. - product: Für E-Commerce-Seiten zur Beschreibung von Produkten. Unterstützt Tags wie
product:price:amountundproduct:price:currency. - profile: Für Seiten, die eine Person repräsentieren. Unterstützt
profile:first_nameundprofile:last_name.
og:image Anforderungen und Best Practices
Das Vorschaubild ist der visuell auffälligste Teil eines Social Shares, daher ist es wichtig, es richtig zu machen:
- Mindestgröße: Facebook empfiehlt mindestens 1200 x 630 Pixel für hochauflösende Displays. Bilder kleiner als 600 x 315 Pixel werden möglicherweise nicht richtig angezeigt oder erscheinen als kleines Thumbnail statt als große Karte.
- Seitenverhältnis: 1,91:1 ist der Standard für große Link-Vorschauen auf den meisten Plattformen. Quadratische Bilder (1:1) funktionieren auch, erzeugen aber ein anderes Layout.
- Dateigröße: Halte Bilder unter 8 MB. Facebook und LinkedIn können bei sehr großen Bildern langsam sein.
- Format: JPEG und PNG werden universell unterstützt. WebP funktioniert auf einigen Plattformen, aber nicht auf allen.
- Immer absolute URLs verwenden: Die Bild-URL muss mit
https://beginnen. Relative Pfade funktionieren nicht, weil die soziale Plattform das Bild von ihren eigenen Servern abruft.
Wie der Facebook Sharing Debugger funktioniert
Facebook cachet deine OG-Daten aggressiv. Wenn du deine OG-Tags aktualisierst, kann die alte Vorschau weiterhin angezeigt werden. Der Facebook Sharing Debugger (developers.facebook.com/tools/debug/) erlaubt dir, eine URL einzugeben und genau zu sehen, was Facebook davon liest. Du kannst auf „Scrape Again" klicken, um Facebook zu zwingen, die Seite neu abzurufen und seinen Cache zu aktualisieren. Dieses Tool ist auch wertvoll zum Debuggen von Problemen wie fehlenden Bildern oder Tags, die nicht korrekt geparst werden. LinkedIn hat ein ähnliches Tool namens Post Inspector.
Open Graph und Twitter Cards
Twitter (jetzt X) hat ein eigenes Meta-Tag-System namens Twitter Cards entwickelt. Twitter Card Tags verwenden das name-Attribut statt property:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Dein Seitentitel" />
<meta name="twitter:description" content="Eine kurze Beschreibung" />
<meta name="twitter:image" content="https://example.com/bild.jpg" />Die gute Nachricht: Twitter greift auf Open Graph Tags zurück, wenn Twitter Card Tags fehlen. Wenn du og:title hast, aber kein twitter:title, verwendet Twitter den OG-Titel. Allerdings hat der twitter:card-Tag selbst kein OG-Äquivalent, daher solltest du zumindest diesen einen Twitter-spezifischen Tag immer einbinden. Der Wert summary_large_image erzeugt die visuell ansprechendste Vorschau mit einem großen Bild über dem Text.
WordPress und Open Graph Tag Generierung
WordPress Core enthält standardmäßig keine Open Graph Tags. Du brauchst ein Plugin, um sie hinzuzufügen. Die beliebtesten Optionen sind:
- Yoast SEO: Generiert alle wesentlichen OG-Tags automatisch unter Verwendung von Beitragstitel, Auszug und Beitragsbild. Erlaubt die individuelle Anpassung von OG-Titel, Beschreibung und Bild pro Beitrag über den „Social"-Tab im Editor. Generiert auch Twitter Card Tags.
- Rank Math: Ähnlich wie Yoast, mit automatischer OG-Generierung und individuellen Anpassungen pro Beitrag. Enthält eine Social-Preview-Funktion, die zeigt, wie der Beitrag beim Teilen aussehen wird.
- The SEO Framework: Eine leichtgewichtige Alternative, die OG- und Twitter-Tags mit minimalem Setup generiert. Weniger Konfigurationsmöglichkeiten, aber solide Standardwerte.
Wenn du einen Page Builder wie Elementor oder ein Caching-Plugin verwendest, stelle sicher, dass die OG-Tags im gecachten HTML-Output vorhanden sind. Manche aggressiven Caching-Setups können Meta-Tags aus dem <head>-Bereich entfernen.
WooCommerce Produkt Open Graph Tags
Für WooCommerce-Shops werden OG-Tags noch wichtiger, weil Produktvorschauen Kaufentscheidungen direkt beeinflussen. Eine gut konfigurierte Produktseite sollte og:type auf „product" setzen, zusammen mit dem Produktnamen als Titel, einer überzeugenden Beschreibung und dem Hauptproduktbild. SEO-Plugins wie Yoast WooCommerce SEO oder Rank Math können diese automatisch generieren. Preis und Verfügbarkeit können ebenfalls über zusätzliche OG-Tags eingebunden werden, die manche Plattformen in der Vorschau anzeigen.
Häufige Open Graph Fehler
- Falsche Bildgröße: Ein Bild kleiner als 600 x 315 Pixel führt zu einem winzigen Thumbnail statt einer großen Kartenvorschau. Verwende immer die empfohlenen 1200 x 630 Pixel.
- Fehlender og:image-Tag: Ohne Image-Tag zeigen Plattformen entweder kein Bild oder wählen ein zufälliges Bild von der Seite, das eine Sidebar-Werbung oder ein Logo sein könnte und als Vorschau schlecht aussieht.
- Relative URLs: Alle OG-URLs müssen absolut sein.
/images/foto.jpgfunktioniert nicht; es musshttps://example.com/images/foto.jpgsein. - Doppelte OG-Tags: Zwei
og:title-Tags auf derselben Seite (z. B. von zwei verschiedenen Plugins) verursachen unvorhersehbares Verhalten. Prüfe den Seitenquelltext, um sicherzustellen, dass jeder OG-Tag nur einmal vorkommt. - Nicht testen nach Änderungen: OG-Daten werden von sozialen Plattformen gecachet. Nach dem Aktualisieren der Tags solltest du immer den Cache mit dem Facebook Debugger oder LinkedIn Post Inspector leeren, um zu überprüfen, ob die neuen Tags funktionieren.
Was InspectWP prüft
InspectWP scannt den <head>-Bereich deiner Seite und meldet, welche Open Graph und Twitter Card Tags vorhanden sind. Es zeigt die genauen Werte für jeden Tag an, sodass du leicht überprüfen kannst, ob Titel, Beschreibungen und Bild-URLs korrekt sind. Fehlende Social-Media-Meta-Tags werden als SEO-Verbesserungsmöglichkeit hervorgehoben, da Seiten ohne OG-Tags tendenziell weniger Engagement bekommen, wenn sie auf sozialen Plattformen geteilt werden.