Du möchtest Deine Website-Inhalte auf sozialen Medien teilen? In diesem Artikel stellen wir Dir wichtige Tipps zum Einbinden von Open Graph Tags vor, damit Du in Zukunft mehr aus Deinen Social Shares machen kannst!
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.
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! Damit Dein Titel immer korrekt angezeigt wird, sollte er nicht länger als 65 Zeichen sein.
Ein Praxis-Beispiel für den Quellcode:
<meta property="og:title" content="Open Graph Tags – praktische Tipps für Deine Website"/>
Ä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). Facebook empfiehlt für die Beschreibung zwei bis vier Sätze. Halte die Zeichenlänge für das Description Open Graph-Tag also am besten bei ca. 200 Zeichen.
Ein Praxis-Beispiel für den Quellcode:
<meta property="og:description" content="Im Ryte Magazin findest du brandaktuelle Tipps rund um Open Graph Tags.">
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.
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:
Abbildung 2: Formate und Größen für Facebook 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.
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:
<meta property="og:url" content="https://de.ryte.com/magazine/dieser-beitrag">
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:
<meta property="og:type" content="article">
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: Überprüfung der og-Tags im Facebook Debugger
Ä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 bzw. den Tweet Composer verwenden.
Tipp: Du kannst Deine Open Graph Tags auch in Ryte analysieren. Hierfür verwendest Du am besten die Ryte Social Reports in der Einzelseiten-Analyse.
Abbildung 4: Überprüfung der OG-Tags in der Ryte Einzelseiten-Analyse
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 in Social Graph!
Theorie ist gut – Praxis ist besser! Jetzt Webseite analysieren mit Ryte.
Dieser Artikel wurde ursprünglich im Oktober 2019 veröffentlicht und zuletzt im März 2023 aktualisiert.
Veröffentlicht am 07.03.2023 von Philipp Roos.
Philipp ist ein erweitertes Mitglied der Ryte Familie und unterstützt Ryte mit dem neuesten SEO-Knowhow. Der studierte Germanist ist glücklich, dass das Zeitalter vorbei ist, in dem unlesbare, mit Keywords vollgestopfte Webtexte für Spitzenrankings gesorgt haben.