Open Graph

Was ist das Open Graph Protocol?

Das Open Graph Protocol (OGP) ist ein 2010 von Facebook veröffentlichter Standard, über den Inhalte in sozialen Netzwerken angezeigt werden. Mit dem Open Graph Protocol können Webmaster definieren, wie bestimmte Links angezeigt werden. Das Open Graph Protocol stellt zu diesem Zweck zahlreiche Meta-Tags zur Verfügung, die in den Quellcode einer Webseite eingefügt werden.

Frei nach dem Motto sharing is caring muss festgehalten werden - eine Webseite deren Darstellung über die Open Graph Meta Tags optimiert wurde, wird öfter auf Facebook, Twitter & Co. geteilt!

Was sind Open Graph Tags und wieso sind diese wichtig?

Wenn eine URL von den Besuchern in einem sozialen Netzwerk (z.B. Facebook) geteilt wird, wird nur eine Vorschau angezeigt. Findet Facebook auf der Webseite keine Hinweise darauf, welche Inhalte geteilt und dargestellt werden sollen, definiert Facebook eigenständig passende Überschriften, Textabschnitte und ein Bild für die Anzeige aus.

Mit den sogenannten Open Graph Tags können Webseitenbetreiber vorgeben, welche Inhalte in der Vorschau auf Facebook dargestellt werden sollen. Ein Tag bedeutet übersetzt in etwa "Etikett". Mit diesem Etikett können bestimmte Inhalte einer Webseite markiert werden. Ein Facebook Tag funktioniert ähnlich wie die Label von schema.org. Mit diesem können Inhalte markiert werden, die in den Rich Snippets bei Google erscheinen sollen. Die wichtigsten Tags sind:

og:title - den Titel der URL definieren

Dieses Title Tag wird verwendet, um dem Netzwerk einen Titel vorzugeben. Dieser Titel kann, muss aber nicht mit dem eigentlichen Titel der Webseite übereinstimmen. Er ist frei wählbar. Dadurch ist es möglich, den Titel an die Erwartungen des Social Media Publikums anzupassen.

Der og:title kann eine maximale Länge von etwa 95 Zeichen haben. Empfehlenswert ist jedoch ein kürzerer Titel mit ca 50 Zeichen. Nach dieser Länge erfolgt ein Zeilenumbruch. Durch den Zeilenumbruch wird die Lesbarkeit in der Regel negativ beeinflusst. Das Titel-Tag kann wie folgt im Quellcode hinterlegt werden:

meta property="og:title" content="Besucher kaufen auf eBesucher"

og:site_name - den Name der URL definieren

Dieses Open Graph Tag kann verwendet werden, um den sozialen Netzwerken einen Seitennamen für die Anzeige vorzugehen. Dieses Tag ist sinnvoll, wenn die Webseite eine Unterseite einer größeren Webseite ist. Das soziale Netzwerk bezieht den Seitennamen ohne das Tag aus der URL. Das folgende og:site_name Tag gibt eBesucher als Seitennamen wieder.

meta property="og:site_name" content="eBesucher">

og:description - Kurzbeschreibung für soziale Netzwerke

Das og:description Tag ermöglicht dem Webmaster die Anpassung der Kurzbeschreibung des Inhaltes für die sozialen Netzwerke. Maximal etwa 300 Zeichen können für die Beschreibung auf Facebook verwendet werden. Je nachdem, wie lang der Titel und die URL der Webseite sind, steht jedoch weniger Platz zur Verfügung. Für das og:description Tag hat sich eine Textlänge von maximal 200 Zeichen bewährt. So kann sichergestellt werden, dass der Inhalt praktisch immer vollständig wiedergegeben wird. Im Unterschied zu den Meta-Descriptions von Webseiten ist der Inhalt des Open Graph Tag für die Suchmaschinen-Optimierung ohne Bedeutung. Das heißt, Keywords, die für die Webseite wichtig sind, haben keine Auswirkungen auf die SEO Optimierung.

og:type - Webseite, Article oder Video?

Das og:type Tag dient der Deklaration des Objekttyps. Beispielsweise "Website", "Article" oder "video.movie". Je nachdem, welcher Objekttyp deklariert wird, müssen gegebenenfalls weitere Eigenschaften dieses Objektes mit angegeben werden.

og:image - das wichtigste OG Tag

Das Open Graph Image Tag ist eines der wichtigsten Meta-Tags. Es definiert das Vorschaubild und ist damit für die Darstellung des Posts verantwortlich. Ein aussagekräftiges Bild ist ein wesentlicher Bestandteil der Vorschau einer Webseite und sollte Betrachter neugierig auf derem Inhalt machen. Es empfiehlt sich, das Vorschau-Bild festzulegen, da das Netzwerk ansonsten willkürlich ein Bild von der Webseite aussucht. Das Bild selbst muss nicht auf der Webseite vorhanden sein. In den Quellcode der Webseite wird das Tag beispielsweise wie folgt eingefügt:

meta property="og:image" content="https://url.de/og.png"

Open Graph Image - optimales Format für Vorschaubilder

Als optimales Format für das Vorschau-Bild (og:image ) auf Facebook gelten 1200 x 630 Pixel . Bei dieser Größe wird das Bild von den sozialen Netzwerken oberhalb von dem Title und der Description angezeigt. Wichtig im Zusammenhang mit der Definition eines Vorschaubildes ist das ergänzende alt-Tag. Dieses Tag enthält eine Beschreibung dessen, was auf dem Bild zu sehen ist. Der Text wird angezeigt, wenn die Anzeige von Bildern im Browser des Users deaktiviert ist und es wird von Screenreadern verwendet. Wenn ein bestimmtes Open Graph Image angegeben wird, sollte daher immer auch das og:image:alt -Tag angeben werden.

Wenn kein Bild in dieser Größe vorliegt, kann das Bild auch in der Größe 600 x 315 Pixel gepostet werden. Wichtig ist jedoch, dass das Seitenverhältnis (Ratio) gleich bleibt. Ist dies nicht gegeben, wird das Bild abgeschnitten und nur in Teilen eingeblendet. Die Mindestgröße eines Open Graph Image beträgt 200 x 200 Pixel und nicht zu empfehlen.

og:url - bestimme die URL

Mit dem og:url Tag wird die URL und damit die Web-Adresse der Webseite definiert, die geteilt wird. Dieses Tag wird immer dann verwendet, wenn für Webseiten mit gleichen Inhalten verschiedene Adressen verwendet werden. Dies ist häufig bei Onlineshops der Fall. Mit dem mit og:url Tag kann sichergestellt werden, dass immer die richtige Webseite verlinkt wird.

Der Open Graph Debugger - Überprüfen der geteilten Inhalte

Mit dem von Facebook zur Verfügung gestellten Sharing Debugger kann geprüft werden, ob die geteilten Website-Inhalte korrekt auf Facebook oder im Facebook Messenger angezeigt werden. Die zweite wichtige Funktion des Debuggers ist das Löschen alter Inhalte im Facebook Cache. Wenn eine Webseite bereits auf Facebook geteilt wurde, speichert die Plattform alle Inhalte in einem Cache. Änderungen an den Inhalten - beispielsweise ein neues Vorschaubild - werden nicht automatisch übernommen. Nur mithilfe des Debuggers können veraltete Inhalte im Facebook Cache gelöscht werden, sodass in der Folge die aktualisierten Inhalte gespeichert und angezeigt werden. Im Debugger ist dafür der Button Erneut scrapen vorgesehen. Um den Facebook Debugger nutzen zu können, ist ein Facebook Account erforderlich. Voraussetzung für die Prüfung ist, dass die Webseite bereits online ist.

OG Tags optimieren mit Open Graph Plugins

Wie so vieles im internet sind Open Graph Tags keine statische Angelegenheit. Es empfiehlt sich, die Bilder, Description und Titles regelmäßig zu prüfen. Standards können sich ändern oder schnell veralten. Darüber hinaus lässt sich der Erfolg von Open Graph Meta Tags gut über die Klickrate messen. Soziale Netzwerke bieten hier eigene Statistiken, mit denen die interaktion, Klickrate und das sogenannte Engagement gemessen werden kann. Für Content Management Systeme (CMS) wie Wordpress gibt es zur Verwaltung des Open Graph Meta Tags eigene Plugins. Ein Wordpress Plugin oder ein Joomla Plugin ist in der Regel kostenlos. Es empfiehlt sich insbesondere für Webmaster mit weniger Erfahrung.