Ohne Angabe von Open-Graph-Eigenschaften suchen sich Facebook und Co. die zu veröffentlichenden Informationen selbst zusammen. Dabei wird der Titel entweder aus den Meta-Angaben oder aus dem Seitentitel gezogen. Der Beschreibungstext wird ebenfalls aus den Meta-Angaben oder dem Body extrahiert. Sind Bilder auf der Seite eingebunden, wird das erste Bild, das gefunden wird, angezeigt.

In den meisten Fällen dürften die Angaben, die sich die sozialen Netzwerke da heraussuchen, durchaus angemessen sein. Mit Open Graph gibt es jedoch die Möglichkeit, all diese Angaben individuell festzulegen.

Angaben zum Open Graph werden als Meta-Angaben in den Header der jeweiligen HTML-Seite gesetzt. Mit folgendem Quelltext lassen sich individuelle Werte für die genannten Angaben festlegen:

<meta property="og:title" content="Titel des geteilten Links" />
<meta property="og:description" content="Beschreibnungstest des geteilten Links" />
<meta property="og:image" content="http://www.example.org/og_image.png" />

Sind diese Angaben gemacht, werden diese immer bei geteilten Links angezeigt. Es lassen sich auf diese Weise die darzustellenden Informationen gezielt für das Teilen auf sozialen Netzwerken anpassen.

Außerdem kann die Angabe von Open-Graph-Eigenschaften das Teilen von Links beschleunigen. Denn ohne die Angabe „og:image“ liest Facebook zum Beispiel erst einmal alle Bilder der Seite ein, um dann das erste dazustellen. Je nach dem wie viele Bilder vorhanden sind, kann das eine kleine Weile dauern.

Und wer dennoch mehr als ein Bild anbieten möchte, kann meherer Meta-Angaben mit „og:image“ untereinander einfügen.

Neben den drei genannten Meta-Angaben, von denen „og:title“ und „og:image“ laut Open-Graph-Protokoll erforderlich sind, gibt es zwei weitere erforderliche Angaben:

<meta property="og:type=" content="website" />
<meta property="og:url" content="http://www.example.com/page.html" />

Die Angabe „og:type“ gibt an, worum es sich bei dem Link handelt. In den meisten Fällen dürfte der Wert „website“ in Ordnung sein. Alternativ lässt sich als Typ zum Beispiel auch „video“ oder „audio“ angeben. Eine genaue Auflistung gibt es auf der Website des Open-Graph-Protokolls.

Die Angabe „og:url““ ist in der Regel identisch mit der URL der jeweiligen Seite, auf der die Angabe steht. Aber auch hier lässt sich eine abweichende URL angeben. Wer zum Beispiel erzwingen möchte, dass ausschließlich die Startseite einer Webpräsenz geteilt wird, kann auf jede Seite der Webpräsenz die jeweilige URL angeben.

Die beiden großen sozialen Netzwerke Facebook und Google+ unterstützen das Open-Graph-Protokoll und akzeptieren die oben genannten Angaben. Auch das Business-Netzwerk XING unterstützt das Protokoll. Bei XING ist es sogar so, dass ein Bild nur dann angezeigt wird, wenn es explizit über den Open Graph angegeben wurde.

Facebook bietet einen Debugger an, mit dem man die korrekte Einbindung der Open-Graph-Angaben testen kann. Auch Google bietet mit seinem Rich Snippet Testing Tool eine Möglichkeit an, mit der man einsehen kann, welche Informationen Google extrahiert.

Mit OpenGrapg.In gibt es zudem einen unabhängigen Dienst, mit dem die Open-Graph-Eigenschaften einer URL getestete werden können.

Nutzt ihr die Möglichkeit, über Open Graph die Darstellung geteilter Links anzupassen? Wie setzt ihr Open Graph für Webprojekte ein?