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 einfuegt, 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 ueberzeugendem 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 fuer die Vorschau.og:url: Die kanonische URL der Seite.
Darueber hinaus werden mehrere optionale Tags haeufig verwendet:
og:description: Eine ein- bis zweisaetzige 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 verknuepften Videodatei.
Die og:type-Werte verstehen
Der og:type-Tag teilt Plattformen mit, welche Art von Inhalt die Seite repraesentiert. Die gaengigsten Werte sind:
- website: Fuer die Startseite und allgemeine Seiten. Das ist der Standard, wenn kein Typ angegeben ist.
- article: Fuer Blogbeitraege, Nachrichtenartikel und schriftliche Inhalte mit Veroeffentlichungsdatum. Dieser Typ ermoeglicht zusaetzliche Tags wie
article:published_time,article:authorundarticle:section. - product: Fuer E-Commerce-Seiten zur Beschreibung von Produkten. Unterstuetzt Tags wie
product:price:amountundproduct:price:currency. - profile: Fuer Seiten, die eine Person repraesentieren. Unterstuetzt
profile:first_nameundprofile:last_name.
og:image Anforderungen und Best Practices
Das Vorschaubild ist der visuell auffaelligste Teil eines Social Shares, daher ist es wichtig, es richtig zu machen:
- Mindestgroesse: Facebook empfiehlt mindestens 1200 x 630 Pixel fuer hochaufloesende Displays. Bilder kleiner als 600 x 315 Pixel werden moeglicherweise nicht richtig angezeigt oder erscheinen als kleines Thumbnail statt als grosse Karte.
- Seitenverhaeltnis: 1.91:1 ist der Standard fuer grosse Link-Vorschauen auf den meisten Plattformen. Quadratische Bilder (1:1) funktionieren auch, erzeugen aber ein anderes Layout.
- Dateigroesse: Halte Bilder unter 8 MB. Facebook und LinkedIn koennen bei sehr grossen Bildern langsam sein.
- Format: JPEG und PNG werden universell unterstuetzt. 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 "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 aehnliches 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 zurueck, 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-Aequivalent, daher solltest du zumindest diesen einen Twitter-spezifischen Tag immer einbinden. Der Wert summary_large_image erzeugt die visuell ansprechendste Vorschau mit einem grossen Bild ueber dem Text.
WordPress und Open Graph Tag Generierung
WordPress Core enthaelt standardmaessig keine Open Graph Tags. Du brauchst ein Plugin, um sie hinzuzufuegen. 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 ueber den "Social"-Tab im Editor. Generiert auch Twitter Card Tags.
- Rank Math: Aehnlich wie Yoast mit automatischer OG-Generierung und individuellen Anpassungen pro Beitrag. Enthaelt 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 Konfigurationsmoeglichkeiten, 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 koennen Meta-Tags aus dem <head>-Bereich entfernen.
WooCommerce Produkt Open Graph Tags
Fuer 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 ueberzeugenden Beschreibung und dem Hauptproduktbild. SEO-Plugins wie Yoast WooCommerce SEO oder Rank Math koennen diese automatisch generieren. Preis und Verfuegbarkeit koennen ebenfalls ueber zusaetzliche OG-Tags eingebunden werden, die manche Plattformen in der Vorschau anzeigen.
Haeufige Open Graph Fehler
- Falsche Bildgroesse: Ein Bild kleiner als 600 x 315 Pixel fuehrt zu einem winzigen Thumbnail statt einer grossen Kartenvorschau. Verwende immer die empfohlenen 1200 x 630 Pixel.
- Fehlender og:image-Tag: Ohne Image-Tag zeigen Plattformen entweder kein Bild oder waehlen ein zufaelliges Bild von der Seite, das eine Sidebar-Werbung oder ein Logo sein koennte, das als Vorschau schlecht aussieht.
- Relative URLs: Alle OG-URLs muessen 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. Pruefe den Seitenquelltext, um sicherzustellen, dass jeder OG-Tag nur einmal vorkommt. - Nicht testen nach Aenderungen: 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 ueberpruefen, ob die neuen Tags funktionieren.
Was InspectWP prueft
InspectWP scannt den <head>-Bereich deiner Seite und meldet, welche Open Graph und Twitter Card Tags vorhanden sind. Es zeigt die genauen Werte fuer jeden Tag an, sodass du leicht ueberpruefen kannst, ob Titel, Beschreibungen und Bild-URLs korrekt sind. Fehlende Social-Media-Meta-Tags werden als SEO-Verbesserungsmoeglichkeit hervorgehoben, da Seiten ohne OG-Tags tendenziell weniger Engagement bekommen, wenn sie auf sozialen Plattformen geteilt werden.