t3n News Marketing

Open Graph: So lassen sich geteilte Links anpassen

Open Graph: So lassen sich geteilte Links anpassen

Mit dem Teilen von Links in 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.

Open Graph: So lassen sich geteilte Links 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:

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
4 Antworten
  1. von Julian Pustkuchen am 10.11.2011 (17:43 Uhr)

    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 Teilen
  2. von julian.pustkuchen am 10.11.2011 (17:47 Uhr)

    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 Teilen
  3. von julian.pustkuchen am 10.11.2011 (17:48 Uhr)

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

    Antworten Teilen
  4. von Andreas Tübner am 16.11.2011 (17:43 Uhr)

    Vielen Dank für die ausführliche Darstellung!

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Social Networks
Facebook-Alternativen: Social Networks für jeden Geschmack
Facebook-Alternativen: Social Networks für jeden Geschmack

Noch immer ist Facebook die unangefochtene Nummer Eins der sozialen Netzwerke, mit rund 1,5 Milliarden aktiven Nutzern weltweit. Doch auch die Konkurrenz ist umtriebig. Zur „Themenwoche … » weiterlesen

t3n-Daily-Kickoff: Hat Facebook News nicht angezeigt? Das Social-Network bestreitet
t3n-Daily-Kickoff: Hat Facebook News nicht angezeigt? Das Social-Network bestreitet

Während ihr geschlafen habt, ist einiges passiert da draußen. Der t3n-Daily-Kickoff bringt euch deshalb jeden Morgen auf den neuesten Stand – pünktlich zum ersten Kaffee des Tages und live aus … » weiterlesen

t3n-Daily-Kickoff: Nach LinkedIn weiteres Social Network gehackt, 427 Millionen Passwörter gestohlen
t3n-Daily-Kickoff: Nach LinkedIn weiteres Social Network gehackt, 427 Millionen Passwörter gestohlen

Während ihr geschlafen habt, ist einiges passiert da draußen. Der t3n-Daily-Kickoff bringt euch deshalb jeden Morgen auf den neuesten Stand – pünktlich zum ersten Kaffee des Tages und live aus … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?