Open Graph Tags – praktische Tipps für Deine Website

Was sind Open Graph Tags?

Beim Teilen von Inhalten auf Facebook und anderen sozialen Netzwerken kommt es, wie auch auf Suchergebnisseiten, auf die Klickattraktivität an. Neben Title und Description können in sozialen Netzwerken noch weitere Elemente wie Vorschau-Bilder definiert werden. Eine optimierte und auf die Zielgruppe zugeschnittene Vorschau des geteilten Artikels führt zu deutlichen Verbesserungen der CTR. Diese Attribute für das attraktive Ausspielen der Inhalte auf sozialen Netzwerken wie Facebook werden Open Graph genannt.

Mit Open Graph Tags, oder auch og-Tags genannt, hinterlegst Du Elemente im Quellcode bzw. markierst Elemente im Header. Das Markup wird dann für die Anzeige von Title, Description und Vorschaubild im Social Graph verwendet. Das Open Graph Protocol wird nicht nur von Facebook, sondern auch von Twitter unterstützt.

Im Herbst 2010 wurde das Open Graph Protocol von Facebook erstmals eingeführt und ersetzte den bis dahin gültigen Standard "Facebook Connect" zur Verifizierung von Facebook Profilen auf Websites.

Ein weiterer Vorteil von Open Graph Tags: Wenn Nutzer Links Deiner Website in sozialen Netzwerken teilen, wird automatisch eine optimale Vorschau generiert.

Welche Open Graph Tags gibt es?

og:title

Das og:title-Element wird neben dem Bild am prominentesten bei einem Facebook Post angezeigt. Aus diesem Grund solltest Du Dir hier besondere Mühe geben, um Deine Zielgruppe in den sozialen Netzwerken möglichst passend anzusprechen und dadurch die CTR Deiner Shared Posts zu steigern! Beachte auch die maximale Zeichenlänge von 95 Zeichen. Wenn Du einen Zeilenumbruch vermeiden willst, bleibst Du am besten bei maximal 50 Zeichen. Kurze Title wirken ohnehin besser.

Ein Praxis-Beispiel für den Quellcode:

og:description

Ähnlich wie die Meta Description einer Webseite kann mit og:description eine eigene Description für soziale Netzwerke bereitgestellt werden. Keywords, egal ob Primär- oder Sekundärkeywords, sind jedoch in diesem Fall irrelevant, es werden auch keine Keywords gefettet. Die Description sollte aussagekräftig sein, möglichst zum Klick animieren und dem Nutzer bereits einen Eindruck geben, was ihn erwartet (um ihn im Anschluss nicht zu enttäuschen und die Nutzersignale stückweise zu verschlechtern). Maximale Zeichenlänge für das Description Open Graph-Tag: 297 Zeichen!

Ein Praxis-Beispiel für den Quellcode:

og:image

Als besonders klickattraktiver Teil der Open Graph-Tags ist og:image sehr wichtig. Wähle hierfür also ein ansprechendes Bild aus, das die User zum Klicken oder Teilen anregt. Um die Darstellung im Stream der Zielgruppe möglichst komplett steuern zu können, wird vor allem für Social-relevante Inhalte ein eigens angefertigtes og:image empfohlen. Das Artikelbild, welches auch auf der Website selbst verwendet wird, hat meist noch gute Optimierungsmöglichkeiten. Wenn Du bspw. auf Facebook das og:image-Tag nicht definierst, können Nutzer in der Social-Vorschau selbst ein Bild auswählen. Da in dieser oftmals auch Werbebanner, Icons oder sonstige Elemente der Seite zur Auswahl stehen, sollte die Definition des Open Graph Images Pflicht für Dich sein.

Abbildung 1: Beispiel von Open Graph bei casper.com

Welche Bilder für die eigene Website geeignet sind, findest du vor allem durch ständiges Ausprobieren heraus. Durch ein gut aufgesetztes Tracking kannst Du ganz einfach prüfen, welches Bild in Deinen Open Graph Tags am besten performt bzw. geklickt wurde. Das og:image zeigt am besten schon, welcher Inhalt im Artikel behandelt wird. Title und Description sollen dann im zweiten Schritt zum Klick führen.

Good to know: Wird auf XING kein og:image verwendet, wird gar nicht erst versucht, ein Bild auf der Website als Vorschau zu finden. Um auf XING ein Vorschaubild für einen geteilten Link anzuzeigen, ist das og:image-Element also erforderlich.

Das richtige Format von Open Graph Bildern

Um das og:image-Tag möglichst optimal in Facebook zu präsentieren, sollten auch die verwendeten Formate und Größen berücksichtigt werden. Facebook verwendet zurzeit ein 1,91:1 Format für Bilder im Feed. Aber auch bei der Größe gibt es noch einiges zu beachten:

1. So sollte es sein: mind. 1200 x 630 Pixel mit einem 1,91:1 Format – Bild wird groß im Newsfeed angezeigt, auch auf hochauflösenden Geräten ist die Darstellung sehr gut

2. OK: 600 x 315 Pixel – Bild wird groß im Newsfeed angezeigt, Darstellung auf hochauflösenden Geräten ist jedoch nicht ideal – in Ordnung, wenn Bild nicht in höherer Auflösung verfügbar

3. Minimum: 200 x 200 Pixel – Bild wird als kleines Quadrat angezeigt – nicht zu empfehlen

Abbildung 2: Verwendete Formate und Größen von og:images

Solltest Du mit kleinen Bildern arbeiten und diese mit Texten bestücken, sollten diese möglichst zentral positioniert werden, um im Facebook-Stream auch sichtbar dargestellt (und nicht abgeschnitten) zu werden.

og:url

Einige bezeichnen die Listung des og:url-Tags eventuell als redundant zur Canonical-Verwendung. Da teilweise jedoch mehrere URLs verwendet werden (durch Social Media Kampagnen-Tracking zum Beispiel) ist es wichtig, dies durch das Open Graph Protocol anzugeben, um sozialen Netzwerken bessere Anhaltspunkte zur Edge Rank Berechnung (Facebook) zu geben. Da soziale Netzwerke auch mit alternativen Anhaltspunkten (z.B. Canonical URL) arbeiten, ist es bei Social-relevanten Seiten empfehlenswert, wenn Du og:url im Quellcode vor dem Canonical Tag auflistest. Mittlerweile kommen alle großen Netzwerke auch mit einer anderen Reihenfolge klar, jedoch gab es noch vor einiger Zeit Probleme, sodass falsche URLs im Facebook-Stream gelandet sind.

Ein Praxis-Beispiel für den Quellcode:

og:type

In den meisten Fällen kannst Du für og:type die Ausprägungen “website”, “blog” oder “article” verwenden. Solltest Du jedoch mit weiteren Medien wie Musik, Videos, Büchern oder Ähnlichem arbeiten, lohnt sich das genauere Betrachten der og:type Eigenschaften auf jeden Fall. In diesem Beitrag geht es um die Optimierung der Open-Graph-Tags von HTML Dokumenten.

og:type würde dann so aussehen:

Debugger für Open Graph Tags

Sehr praktisch für die Optimierung Deiner Open Graph Tags ist der Facebook Object Debugger. Dieser zeigt Dir an, welche Informationen Facebook zu einer URL gespeichert hat beziehungsweise wie die URL im Stream angezeigt wird. Um den Debugger zu verwenden, benötigst Du ein gültiges Facebook-Konto.

Wichtigste Funktion des Open Graph Debuggers: ”Fetch new scrape information”. Diese Funktion ist vor allem dann wichtig, wenn viel getestet und optimiert wird und dient als "Cache löschen"-Funktion innerhalb des Open Graph Protocols. Facebook speichert Informationen zwischen. Werden also og:title, og:image oder sonstige Elemente angepasst, kann es lange dauern, bis diese von Facebook korrekt angezeigt werden. Mit "Fetch new scrape information" können zwischengespeicherte Informationen gelöscht und neu geladen werden.

Abbildung 3: Beispiel für Facebook Debugger-Nutzung

Ähnlich funktioniert es auch bei den og-Twitter-Tags. Um die Vorschau für Deine Twitter-Shares zu testen, kannst du den Twitter Card Validator verwenden.

Tipp: Mit der Ryte Suite hast Du die Möglichkeit, Deine Open Graph Tags zu analysieren. Hierfür verwendest Du am besten die Ryte Social Reports.

Fazit

Mit Open Graph Tags optimierst Du Deinen Auftritt in sozialen Netzwerken, wenn URLs Deiner Website geteilt werden. Du benötigst dafür nur wenige Handgriffe und kannst bei CMS wie WordPress ganz einfach mit Plugins arbeiten.

Happy Optimizing im Social Graph!