Das Open Graph Protokoll im Überblick

  • Social Media Marketing
  • Webentwicklung

Das Open Graph Protokoll ist eine offene Schnittstelle, die es ermöglicht Inhalte bzw. Webseiten semantisch zu klassifizieren. Andere Anwendungen – wie bspw. Facebook – können diese auslesen und verwerten. Im folgenden Artikel sollen die Eckpunkte möglichst einfach und verständlich erklärt werden.

Foto: © Crew / unsplash.com

Das Open Graph Protokoll ist eine offene Schnittstelle, die es ermöglicht Inhalte bzw. Webseiten semantisch zu klassifizieren. Andere Anwendungen – wie bspw. Facebook – können diese auslesen und verwerten. Im folgenden sollen die Eckpunkte möglichst einfach und verständlich erklärt werden.

Inhaltsübersicht

  1. Einleitung
  2. Obligatorische Meta-Tags
  3. Optionale Meta-Tags
  4. Objekt Typen
  5. Debugging
  6. Links

1. Einleitung

Wer bspw. den Like Button von Facebook auf seiner Webseite integrieren möchte, kann erst mit dem Open Graph Protokoll alle Möglichkeiten voll ausnutzen. Als (einfachere) Alternative lässt sich der Like Button auch über eine iFrame Lösung implementieren, dies hat jedoch entschiedene Nachteile. Alle im Folgenden Diskutierten Informationen können bei dieser Methode nicht übermittelt werden. Abgesehen davon wird mit hoher Wahrscheinlichkeit in Zukunft das Open Graph Protokoll auch von vielen anderen Webseiten eingesetzt werden.

Wer sich dazu entscheidet das Open Graph Protokoll auf seiner Webseite zu implementieren beginnt mit folgender Modifizierung ganz am Anfang jedes Dokuments:

<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"> 

Diese Angabe ist wichtig, damit Facebook und andere Anwendungen "erkennen", dass auf dieser Seite das Open Graph Protokoll eingesetzt wird. Alle weiteren Informationen werden in Form von Meta Tags im Head eines jeden Dokuments eingefügt, was im Folgenden ausführlich erklärt wird.

2. Obligatorische Meta-Tags

Es gibt vier Meta-Tags die vom Open Graph Protokoll als obligatorisch vorgeschrieben sind. Folgendermaßen können Sie diese auf Ihrer Webseite einbinden:

<head> <title>...</title> <meta property="og:title" content="..."/> <meta property="og:type" content="..."/> <meta property="og:url" content="..."/> <meta property="og:image" content="..."/> </head> 
  • og:title
    Der Titel des Dokuments. Er sollte kurz und möglichst aussagekräftig sein.
  • og:type
    Der Typ des Dokuments. Eine Übersicht der möglichen Werte finden sie hier unter 5.
  • og:url
    Die URL zu dem Dokument (Permalink).
  • og:image
    URL zu einem Bild. Kann sich um das Logo der Webseite handel, oder einer Grafik, die dem Artikel zugehört.

Facebook erfordert noch weitere Meta-Tags:

<head> ... <meta property="og:site_name" content="..."/> <meta property="fb:admins" content="..."/> <meta property="fb:app_id" content="..."/> <meta property="og:description" content="..."/> </head> 
  • og:site_name
    Der Name der Webseite.
  • fb:admins
    Facebook Benutzer-ID, oder Username der Administratoren. Mehrere werden durch Kommata getrennt.
  • fb:app_id
    ID der Facebook Applikation.
  • og:description
    Eine Beschreibung des Inhalts.

3. Optionale Meta-Tags

Neben den erforderlichen (obligatorischen) Meta-Tags, gibt es weitere optionale mit denen sich noch mehr Informationen angeben lassen.

Adressangaben
MIt folgenden Metag Tags lässt sich der Ort und die Adresse genau bestimmen. Dies ist besonders interessant für Bars, Hotels, Geschäfte etc., da davon auszugehen ist, dass Facebook mit seinem Dienst "Places" (noch nicht veröffentlicht) eine Art Branchenverzeichnis plant.

<head> ... <meta property="og:latitude" content="..."/> <meta property="og:longitude" content="..."/> <meta property="og:street-address" content="..."/> <meta property="og:locality" content="..."/> <meta property="og:region" content="..."/> <meta property="og:postal-code" content="..."/> <meta property="og:country-name" content="..."/> </head> 

Kontaktangaben
Zusätzlich lassen sich auch Kontaktangaben mache, die wahrscheinlich ebenfalls in Zukunft von Facebook Places ausgewertet und veröffentlich werden.

<head> ... <meta property="og:email" content="..."/> <meta property="og:phone_number" content="..."/> <meta property="og:fax_number" content="..."/> </head> 

4. Objekt Typen

Folgende Parameter können bei dem Meta-Tag og:type angegeben werden:

 

Aktivitäten

  • activity
  • sport

Geschäfte

  • bar
  • company
  • cafe
  • hotel
  • restaurant

Gruppen

  • cause
  • sports_league
  • sports_team

Organisationen

  • band
  • government
  • snon_profit
  • school
  • university

Menschen

  • actor
  • athlete
  • author
  • director
  • musician
  • politician
  • public_figure

Orte

  • city
  • country
  • landmark
  • state_province

Produkte und Unterhaltung

  • album
  • book
  • drink
  • food
  • game
  • product
  • song
  • movie
  • tv_show

Webseiten

  • blog
  • website
  • article

5. Debugging

Um zu testen, welche Daten woher aus einer Seite extrahiert werden, stellt Facebook ein kleines Tool zur Verfügung, mit dem die Angaben einfach geprüft werden.

Open Graph Debugging-Tool von Facebook:
http://developers.facebook.com/tools/lint/

Open Graph Dokumentation auf Facebook (Englisch):
http://developers.facebook.com/docs/opengraph

Offizielle Open Graph Webseite (Englisch):
http://opengraphprotocol.org