Open Graph löst eine wichtige Herausforderung des Social Media Marketings: Es ermöglicht Webmastern, genau zu definieren, wie diese Vorschau aussehen soll. Open Graph ist ein Internet-Protokoll und wurde von Facebook entwickelt. Inzwischen nutzen es auch andere soziale Plattformen wie Twitter.
Wenn jemand in einem sozialen Netzwerk einen Link teilt, enthält dieser Beitrag üblicherweise eine Überschrift, ein Beitragsbild und die URL. Soziale Plattformen generieren diese automatisch aus den vorhandenen Daten auf der Website.
Lange Zeit hatten Webmaster keinerlei Einfluss darauf, wie diese Vorschau aussieht. Dabei ist es für den Erfolg entscheidend, dass geteilte Beiträge und Seiten auch auf sozialen Netzwerken attraktiv wirken. Nur dann, wenn die Seite interessant erscheint und mit einer packenden Überschrift versehen ist, werden Leute daraufklicken.
Open Graph ermöglicht es, auf der eigenen Website bestimmte Tags vorzudefinieren, die dann dafür sorgen, dass der Beitrag alle wichtigen Daten inklusive eines passenden Fotos enthält. Dadurch müssen Facebook und Co. nicht selbst erraten, welche Daten besonders wichtig und passend sind. Stattdessen nutzen sie diejenigen, die der Webmaster vorsieht, weil er sie mit Open Graph eindeutig definiert hat.
Wenn du diese Möglichkeit nicht nutzt, zieht sich Facebook die Daten also selbst. Dieses Vorgehen ist jedoch sehr fehleranfällig. Denn Webmaster nutzen die bestehenden Möglichkeiten, die Facebook zum Erkennen wichtiger Daten hätte, teils unterschiedlich. Wenn eine Nachrichtenseite beispielsweise die H1 eher als strukturgebendes Element mit Keyword-Einsatz nutzt und die Headline in der H2 versteckt, führt die Übernahme der H1 zu einer unattraktiven Vorschau. Andere Websites nutzen hingegen die H1 als Überschrift.
Diese fehlende Einheitlichkeit erschwert es Facebook und Co., immer die richtigen Daten zu finden.
Darüber hinaus kannst du mit Open Graph auch Funktionen realisieren, die Facebook für dich nicht übernehmen würde. Beispielsweise hast du die Möglichkeit, ein Bilderkarussell zu erstellen, indem du einfach mehrere og:image-Tags nutzt.
Open Graph ist übrigens nicht nur dann für dich relevant, wenn du selbst im Social Media Marketing sehr aktiv bist. Jeder Webmaster sollte Open Graph nutzen. Denn so hast du in der Hand, wie deine Beiträge in den sozialen Netzwerken geteilt werden, sogar dann, wenn du sie selbst nicht teilst.
Open Graph-Tags kannst du ganz einfach im Quelltext deiner Website unterbringen. Sie gehören in den Header. Dafür musst du lediglich wissen, welche Daten du wie definieren kannst, und die Befehle dann an deine Wünsche anpassen.
Du startest dafür mit der folgenden Code-Zeile:
<html prefix=“og: http://ogp.me/ns#“>
So zeigst du an, dass du mit Open Graph arbeitest und Facebook entsprechende Hinweise in deinem Quelltext finden wird.
Die meisten Webmaster nutzen vor allem vier Open Graph-Tags: og:title, og:type, og:url und og:image.
Um beispielsweise den Titel deiner Website unterzubringen, würdest du den folgenden Code nutzen:
<meta property=“og:title“ content=“Der Titel deiner Website“ />
Die anderen Tags kannst du analog verwenden. Viele der älteren Tags sind vor allem dafür da, die mit den vier Haupt-Tags bereits gemachten Daten noch genauer zu definieren oder andere Medien wie Video oder Audio einzubinden. Es gibt zudem noch deutlich mehr Tags, einige von ihnen sind noch recht jung und wurden speziell ins Leben gerufen, um Autor und Quelle eines Beitrags besser zu kennzeichnen.
Du benötigst demzufolge in der Regel nicht alle Tags. Eine Handvoll reicht pro Seite oft schon aus.
– article:published_time Zeitpunkt, zu dem der Artikel veröffentlicht wurde
– article:publisher Quelle des Artikels
– article:author Autor des Artikels
– og:determiner Grammatikalischer Artikel vor dem Titel
– og:description Beschreibung der Website
– og:site_name Name des Online-Auftritts
– og:locale Land und Sprachangabe
– og:image:type Medientyp des Bildes
– og:image:width Breite in Pixeln
– og:image:height Höhe in Pixeln
– og:image:alt Alternativer Text zum Bild
– og:audio:secure_url sichere URL für eine Audiodatei
– og:audio:type Medientyp der Audiodatei
– og:audio:alt Alternativer Text zur Audiodatei
– og:video:secure_url Sichere URL zu einem Video
– og:video:type Medientyp des Videos
– og:video:width Breite des Videos in Pixeln
– og:video:height Höhe des Videos in Pixeln
Wenn du dich an den Quelltext nicht herantraust und eines der gängigen CMS benutzt, kannst du ein Plug-in herunterladen, dass dir dabei hilft, die Open Graph-Tags zu definieren und unterzubringen.
Wenn du kontrollieren möchtest, wie deine Inhalte angezeigt werden, kannst du Facebooks Sharing Debugger nutzen. Er zeigt dir als Vorschau, wie deine Seite nun geteilt werden würde: optimal, um Probleme ausfindig zu machen und auch zu beheben. Der Debugger unterstützt dich auch damit, dass er dir Warnungen anzeigt.
Wenn du ein Vorschaubild bei Facebook betrachtest, siehst du schnell, welche Tags besonders wichtig sind: og:title, og:type, og:image und og:url. Weil diese Tags besonders oft genutzt werden, sind sie häufige Fehlerquellen.
Mit og:title kannst du die genaue Überschrift der Vorschau bestimmen. Sie ist als zweiter Eyecatcher nach dem Beitragsbild entscheidend dafür, ob ein Mensch klickt oder nicht. Sie gibt wichtige Hinweise auf den Inhalt und weckt die Neugier. Deswegen solltest du diesen Tag immer nutzen und auch etwas Zeit für einen guten Titel verwenden.
og:image kann verhindern, dass sich Facebook einfach irgendein Bild von deiner Website als Vorschaubild zieht. Auch dieses Tag ist von großer Wichtigkeit, weil der erste Eindruck entscheidend ist.
Mit og:type legst du fest, um welche Art von Content es sich bei deiner Seite handelt: Eine Website, ein Video, ein Blogbeitrag oder etwas anderes. Diese Definition musst du oft noch mit weiteren Tags stärken und beispielsweise die Quelle für dein Video angeben.
In der og:url legst du die genaue URL fest, mit der der Beitrag geteilt werden soll. Auf diese Weise verhinderst du unnötig lange URLs, zudem werden alle Shares und Likes diesem Link zugeordnet. In der Regel handelt es sich hierbei um deine Canonical-URLs.
Open Graph-Tags müssen nicht vollständig vorhanden sein. Immerhin gibt es über 20 Tags, von denen nicht jedes immer relevant ist. Grundsätzlich kannst du auch ganz auf Open Graph-Tags verzichten oder Tags definieren, die für dich besonders wichtig sind. Du musst dir nur darüber im Klaren sein, dass du Gestaltungskontrolle abgibst und deine Beiträge möglicherweise nicht so ansprechend geteilt werden, wie sie sein könnten. Facebook kann dann wieder nur raten, welche Daten es heranziehen soll, und dementsprechend sind Fehler wahrscheinlicher.
Wenn du noch nicht weißt, welche Tags für dich wirklich wichtig sind, kann es sinnvoll sein, mit Facebooks Sharing Debugger zu experimentieren. So findest du konkret heraus, welche Tags sich wie auswirken und welche du für jede deiner Unterseiten integrieren solltest. Wenn du eines der bekannteren CMS nutzt, kannst du zudem durch Plug-ins automatisch Open Graph-Tags erstellen lassen.
Du musst dann nur noch kontrollieren, ob die übernommenen Daten deinen Wünschen entsprechen. Solche Plug-ins nehmen dir nicht nur viel Arbeit ab, sie sind zudem ein guter Reminder für diese kleine Aufgabe, die schnell mal untergeht.
Früher hat Facebooks Open Graph Debugger eine Warnung ausgegeben, wenn beide Verweistypen zu einer unterschiedlichen URL führten. Dies ist jedoch schon seit einigen Jahren nicht mehr der Fall. Es gibt also wenige Ausnahmen, bei denen eine Abweichung beider URLs sinnvoll ist.
Sinnvoll ist sie beispielsweise dann, wenn ein Unternehmen international tätig ist und verschiedene Sprachvarianten von ein und derselben URL besitzt. Dann enthält die Canonical-URL jeweils eine Kennzeichnung der Sprache, die Open Graph-URL ist jedoch sinnvollerweise immer die gleiche. Das funktioniert, weil Canonical-URLs zum Inhalt einer Seite führen, Open Graph-URLs hingegen auf ein Objekt verweisen.
Paginierte und gefilterte Resultate sind ein weiterer Grund, warum beide URLs sich unterscheiden könnten. Dann würde die Open Graph-URL die Filtermöglichkeiten enthalten, während die Canonical-URL auf die nicht paginierte oder ungefilterte Version verweist.
