Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Marketing

Open Graph: So lassen sich geteilte Links anpassen

    Open Graph: So lassen sich geteilte Links anpassen

Mit dem Teilen von Links in sozialen Netzwerken kann man Freunde, Fans und Follower auf interessante Seiten aufmerksam machen. Dabei wird jeweils eine Überschrift, ein Beschreibungstext und – falls vorhanden – ein Bild zum geteilten Link veröffentlicht. Mit dem Open Graph lassen sich all diese Informationen – einschließlich der URL des Links – individuell anpassen.

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.

Open Graph auf Website hinzufügen

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.

Open Graph: Logo
Open Graph Logo

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.

Open Graph und die sozialen Netzwerke

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?

Weiterführende Links zum Thema Open Graph:

Finde einen Job, den du liebst zum Thema Social Media, Online Marketing

4 Reaktionen
Andreas Tübner

Vielen Dank für die ausführliche Darstellung!

Antworten
jpustkuchen
jpustkuchen

Finally:
<html prefix="og: http://ogp.me/ns#">

Antworten
jpustkuchen
jpustkuchen

Sorry für die Fehldarstellung, hier der Code mit (hoffentlich korrektem Escaping und meinem richtigen Login (Sorry!!):

<html prefix&eq;"og: http://ogp.me/ns#">

p.S. eine Vorschau - Funktion wäre dann doch manchmal nützlich, wenn auch blöd für die Usability.

Antworten
Julian Pustkuchen

Hallo liebe t3n Redaktion,

ein super Artikel, schön kurz und auf den Punkt gebracht. Da ich mich derzeit beruflich ausgiebiger mit dem Thema Semantic Web beschäftige, ist mir noch eine Kleinigkeit aufgefallen, die ihr ergänzen solltet:
Die Angabe des Kataloges, damit der Präfix "og:" auch korrekt zugeordnet werden kann.

Vielleicht beachtet Facebook dies nicht streng, aber um dem Standard zu entsprechen, sollte noch im - Tag folgende Angabe zum Katalog gemacht werden:

Es wäre schön, wenn ihr den Artikel vielleicht noch um diesen Punkt ergänzen könntet.

Grüße,
Julian

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen