Open Graph: So lassen sich geteilte Links anpassen
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.
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.
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?
Bitte beachte unsere Community-Richtlinien
Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.
Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.
Dein t3n-Team
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
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.
Finally:
<html prefix=“og: http://ogp.me/ns#„>
Vielen Dank für die ausführliche Darstellung!