Anzeige
Anzeige
Ratgeber
Artikel merken

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.

Von Denis Potschien
2 Min. Lesezeit
Anzeige
Anzeige

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

Anzeige
Anzeige

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.

Anzeige
Anzeige
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.

Anzeige
Anzeige

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:

Anzeige
Anzeige
<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.

Anzeige
Anzeige

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?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
4 Kommentare
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

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
Julian Pustkuchen

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

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

Antworten
Andreas Tübner

Vielen Dank für die ausführliche Darstellung!

Antworten
Abbrechen

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige