- Was sind Open-Graph-Tags?
- Warum solltest du Open-Graph-Tags einsetzen?
- Wer hat's erfunden? Open-Graph-Tags für Facebook
- Extrasüppchen 1: Twittercards mit speziellen Tags
- Extrasüppchen 2: Google+
- Drum prüfe, wer einen Link teilt: Wichtige Tools zur Kontrolle
- Von der Theorie zur Praxis: Wie setzt man das praktisch um?
- Fazit
Was sind Open-Graph-Tags?
Open-Graph-Tags sind Meta-Angaben für eine Website. Diese stehen im sogenannten Header der Seite im Quelltext, also zwischen dem öffnenden und schließenden <head>-Tag. Sie sind nicht direkt auf der Seite sichtbar, sondern es sind vielmehr Zusatzinformationen, die von verschiedenen Crawlern ausgelesen und verwertet werden können.
Wahrscheinlich kennst du andere Meta-Angaben, wie die Seitenbeschreibung oder die Keywords. In meinem Blogbeitrag zur On-Page-Optimierung tauchen ein paar der Begriffe bereits auf. Die Open-Graph-Tags sind ähnlich. Sie legen Angaben fest wie Titel, Beschreibung, Bild, Seitentyp etc. Entwickelt wurden sie vor einigen Jahren von Facebook, um das Zusammenspiel von Website und Facebook zu verbessern.
Twitter hat zwar eigene Meta-Tags entwickelt und auch Google+ setzt mit Schema.org auf einen anderen Standard (dazu unten mehr), aber auch diese beiden Social-Media-Plattformen verstehen die OG-Tags von Facebook. Wenn Du also für Twitter und Google+ nichts gesondert angibst, greifen die OG-Tags als Fallback-Lösung.
Die offizielle Seite zu den Open Graph Tags findest du übrigens unter: http://ogp.me/
Warum solltest du Open-Graph-Tags einsetzen?
Wir alle wollen, dass sich unsere Inhalte, an denen wir mit viel Herzblut gearbeitet haben, verbreiten und von vielen Menschen gesehen werden. Social-Media-Plattformen spielen dabei eine wichtige Rolle.
Nun soll aber die Darstellung beim Teilen deiner Inhalte nicht dem Zufall unterliegen. Du kannst nicht davon ausgehen, dass sich jeder beim Teilen die Mühe macht, die Angaben anzupassen und vielleicht noch ein anderes Bild hochzuladen, um deine Beiträge ins rechte Licht zu rücken.
Daher solltest du selber dafür sorgen, dass deine Beiträge optimal für das Teilen vorbereitet sind. Dazu gehört dann auch z.B. ein alternatives Bild in anderem Format, wenn dein Bild auf der Seite nicht den Vorgaben der diversen Plattformen entspricht. Das kann der Fall sein, wenn Du auf Deiner Seite Hochkantbilder einsetzt, die vom Format her z.B. nicht zu den rechteckigen oder quadratischen Vorschaubildern bei Facebooks Linkbeiträgen passen.
Die Bildformate für die diversen Social-Media-Plattformen ändern sich regelmäßig. Die 2016 gültigen Formate findest Du hier: http://makeawebsitehub.com/social-media-image-sizes-cheat-sheet/
Eine optimierte Darstellung von Link-Beiträgen stellt Links optisch ansprechender dar. Das verleitet natürlich eher dazu, auf Links wirklich zu klicken. Du kannst damit also die Klickrate (Click-Through-Rate , kurz CTR) und die Konversionsrate günstig beeinflussen.
Konversion bezeichnet die Umwandlung des Status einer Zielperson in einen neuen Status. Für deine Website bedeutet das, dass eine Zielperson vom Besucher z.B. zum Newsletterabonnenten oder Käufer wird.
Wer hat's erfunden? Open-Graph-Tags für Facebook
Hier siehst du typische Meta-Angaben für einen Facebooklink:
<meta property="og:title" content="Hier kommt der Titel hin" />
<meta property="og:type" content="article" />
<meta property="og:url" content="Hier kommt der Link hin" />
<meta property="og:image" content="Hier kommt der Link zum Bild hin" />
<meta property="og:description" content="Hier kommt die Beschreibung rein" />
Wenn du diesen Code als Kopiervorlage verwendest, so ersetze bitte den entsprechenden Bereich bei content="..." mit deinen Angaben.
Der Titel sollte ungefähr 60 Zeichen haben. Es muß nicht zwangsweise der originale Seitentitel sein. Du kannst ihn für das Teilen optimieren.
Die gängigsten Typen sind wohl website, article oder product. Aber es gibt noch einiges mehr. In der Facebook-Dokumentation findest Du eine entsprechende Liste: https://developers.facebook.com/docs/reference/opengraph/.
Achte bei den Links zur Seite und auch zum Bild darauf, dass diese nicht blockiert sind, z.B. über die robots.txt-Datei.
Die Beschreibung sollte ca. 200 bis 300 Zeichen lang sein und auf den Inhalt neugierig machen.
Beim Bild entscheidet die Größe über die letztendliche Darstellung bei Facebook. Ausreichend große Bilder werden im Linkbeitrag rechteckig im Querformat dargestellt. Ist das Bild klein, so wird es quadratisch zugeschnitten und kleiner neben den Link dargestellt. Die empfohlene Größe für eine optimale Darstellung (Stand 2016) ist 1200px x 628px.
Hier siehst Du Beispiele für die verschiedenen Darstellungen:
Die hier genannten Meta-Tags sind sozusagen ein Standardset. Es gibt noch einige mehr, die man bei Bedarf ergänzen kann.
Extrasüppchen 1: Twittercards mit speziellen Tags
Mit Tittercards kannst du genauso wie bei Facebook Links besonders darstellen und damit visuell mehr hervorheben als ein normaler Textlink.
Wie schon gesagt, versteht Twitter zwar die OG-Tags von Facebook, hat aber selber ein Set an eigenen Tags zur Verfügung gestellt.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="<Hier kommt der @Twitteraccount hin>">
<meta name="twitter:creator" content="<Hier kann ein separater Autorenaccount angegeben werden>">
<meta name="twitter:url" content="<Hier kommt der Link hin>"/>
<meta name="twitter:title" content="<Hier kommt der Titel hin>">
<meta name="twitter:description" content="<Hier kommt die Beschreibung hin>">
<meta name="twitter:image" content="<Hier kommt der Link zum Bild hin>">
Mit twitter:card legst du den Typ fest. Hier gibt es folgende Typen zur Auswahl:
- summary: Titel, Beschreibung, kleines Thumbnail (quadratisch)
- summary_large_image: Titel, Beschreibung, großes Foto (rechteckig)
- app: direkter Aufruf im Appstore
- player: für Video oder Audio
Player-Cards werden von Twitter noch einmal gesondert überprüft, bevor sie veröffentlicht werden (siehe dazu: https://dev.twitter.com/cards/troubleshooting#whitelisting).
Normalerweise wirst du deinen Twitteraccount bei site angeben. Der Tag creator ist optional und kann dann eingesetzt werden, wenn auf einer Seite mehrere Autoren publizieren.
url, title, description und image müßtest du nicht extra angeben, weil Twitter sich diese Informationen auch aus den OG-Tags ziehen kann. Es macht aber manchmal Sinn, die Angaben für verschiedene Social-Media-Plattformen getrennt zu optimieren.
Bei Twitter darf die Beschreibung maximal 200 Zeichen lang sein.
Auch bei Twitter mußt du bei den Links darauf achten, dass sie nicht blockiert sind (siehe oben).
Unter https://dev.twitter.com/cards/markup sind alle Twittercard-Tags aufgelistet und zusätzlich auch die Fallback-OG-Tags.
Hier siehst du, wie ein Link mit Twittercards dargestellt werden kann. Allerdings werden die Links nicht automatisch so angezeigt. Im Twitterstream am Rechner muß man den Tweet erst ausklappen, um die Twittercard zu sehen.
Unter iOS in der Twitter-App sind im Stream zumindest die Bilder zu sehen. Im eigenen Profil ist die ganze Karte zu sehen, allerdings ohne Beschreibung. Wenn ein vorbereiteter Link-Tweet aber direkt über den Permalink aufgerufen, in einer Website eingebettet oder in der Timeline von Twitter oben angeheftet wird, so erscheint er komplett in voller Schönheit. Du siehst also: Twitter macht es etwas kompliziert.
Hier siehst Du den gleichen Tweet in der Website eingebettet:
Facebook-Gruppen richtig nutzen: Tipps und Tricks zur Gruppensuche und -nutzung #facebook https://t.co/PXRiHSYWP2
— Web & Wissen (@webundwissen) 27. Januar 2016
Extrasüppchen 2: Google+
Google+ macht mit den OG-Tags schon einen guten Job, setzt aber selber auf Schema.org. So sieht das dann als Beispiel aus:
<meta itemprop="name" content="<Hier kommt der Titel hin>">
<meta itemprop="description" content="<Hier kommt die Beschreibung hin>">
<meta itemprop="image" content="<Hier kommt der Link zum Bild hin>">
Drum prüfe, wer einen Link teilt: Wichtige Tools zur Kontrolle
Nicht immer läuft bei der Aufbereitung der Links alles glatt. Daher stellen die verschiedenen Plattformen auch Testtools zur Verfügung, mit denen man Links vorab testen kann.
Hier für die drei Plattformen, die wir uns bisher angeschaut haben:
- Twitter: https://dev.twitter.com/docs/cards/validation/validator
- Facebook: https://developers.facebook.com/tools/debug
- Google+: http://www.google.com/webmasters/tools/richsnippets
Besonders den Facebook-Debugger möchte ich dir ans Herz legen. Er ist die erste Anlaufstelle, wenn es mit Links auf Facebook nicht klappt. Er zeigt dir nicht nur eine Vorschau des Link-Beitrags, sondern gibt dir auch Hinweise auf Fehler und dient zum Löschen des Caches.
Wenn du also im Nachhinein z.B. das Bild in einem Beitrag wechselst, musst du bei Facebook erst den Cache leeren, um das neue Bild bei Link-Beiträgen angezeigt zu bekommen. Dazu dient der Button „Fetch new scrape information“. Gleiches gilt, wenn du noch unveröffentlichte Beiträge in Facebook vorausplanst. Hier kann Facebook die Informationen zum Link nicht erreichen und die Darstellung wird dadurch fehlerhaft. Nach dem Veröffentlichen mußt du also den Link einmal durch den Debugger schicken.
Der Twittervalidator ist nicht ganz so umfangreich. Er zeigt nur eine Vorschau und ggf. Fehler. Die Informationen der Twittercards werden von den Twitter-Crawlern regelmäßig reindexiert.
Das Testtool von Google ist Bestandteil der Search Console (ehemals Webmaster Tools) und ein allgemeines Tool zum Testen von sogenannten Rich Snippets, nicht speziell für Links.
Von der Theorie zur Praxis: Wie setzt man das praktisch um?
Die meisten Webseiten laufen über Content-Management-Systeme. Für diese gibt es entsprechende Plugins oder Module, mit denen man die OG-Tags steuern kann. Für Wordpress erledigt das z.B. das SEO Plugin von Yoast. Aber auch mit Jetpack kann man Twittercards zum Laufen bringen.
Jutta Beyer von der Contentkiste hat mir in einem Kommentar (siehe unten) noch weitere Wordpress-Plugins genannt, mit denen man OG-Tags eingeben kann: das SEO-Plugin wpSEO und das Plugin „Facebook Open Graph, Google+ and Twitter Card Tags“. Vielen Dank für den Hinweis! Als nicht Wordpress-Bloggerin bin ich da nicht immer up-to-date.
Problematisch ist das für Blogger-Nutzer. OG-Tags sind hier nicht implementiert. Wenn du sie nutzen willst, musst du selber dein Template anpassen. Wie das geht, wird im Artikel „Facebook Open-Graph-Tags für Blogger“ beschrieben. Aber Achtung: am besten erstmal an einer Testseite ausprobieren und unbedingt eine Sicherung vorher machen.
Fazit
Mit Open-Graph-Tags übernimmst du selber die Kontrolle darüber, wie deine Inhalte beim Teilen auf Social-Media-Plattformen aussehen. Eine Optimierung lohnt sich also auf alle Fälle. Hierbei solltest Du die verschiedenen Plattformen mit ihren unterschiedlichen Standards berücksichtigen. Erweiterungen von Content Management Systemen nehmen Dir einen Großteil der Arbeit ab. Du solltest allerdings auch hier genau wissen, was du wo einstellen kannst und welche Auswirkungen es hat.
Bildquelle: bella67 / pixabay
Hallo Katharina,
toller Artikel, diese Fragen (vor allem zu Vorschaubildern) höre ich auch sehr oft.
Für WordPress kann ich noch zwei Plugins empfehlen, das SEO-Plugin wpSEO, hier können seit einiger Zeit auch Open Graph Infos eingegeben werden und mit dem Plugin "Facebook Open Graph, Google+ and Twitter Card Tags" habe ich auch gute Erfahrungen gemacht.
LG Jutta
Herzlichen Dank für den Hinweis, Jutta! Ich habe es im Text ergänzt.
LG
Katharina
Hallo Katharina,
das finde ich auch einen sehr wichtigen Punkt, Beiträge optimal für das Teilen vorzubereiten. Wird leider oft nicht gemacht und wie Du schreibst, gibt sich nicht jeder die Mühe, etwas beim Teilen anzupassen. 2 Punkte stören mich beim Teilen besonders. Wenn ich Bilder und Infografiken pinne, stelle ich oft fest, dass ich den Text für das Bild anpassen muss, weil es keine gute Beschreibung oder einen Alternativtext gibt. Beim Teilen über Twitter passiert es auch häufig, dass
- der Twittername des Autors nicht automatisch erscheint, falsch ist oder "@" fehlt,
- statt dem Twitternamen ein langer Name des Blogs erscheint, der den Tweet zu lang macht und gekürzt oder gelöscht werden muss,
- eine Beschreibung über den Inhalt fehlt.
Wenn technisch möglich, würde ich immer so anpassen, dass jemand, der teilen möchte, eine kurze Inhaltsbeschreibung, den Link und den Twitterusernamen hat.
Viele Grüße
Claudia
Hallo Claudia,
vielen Dank für diese tolle Ergänzung! Auch Pinterest sollte man mit guten Bildbeschreibungen beachten. Das mit den Teilen per Button zu Twitter ist nicht immer leicht zu optimieren, glaube ich. Da wird ja oft pauschal nur Beitrags- und Seitentitel genommen - ist bei mir dann auch zu lang...
Herzliche Grüße
Katharina
Hallo!
Guter Artikel.
Leider kann man den Facebook-Debugger nur nutzen wenn man ein Facebookkonto hat. Ich habe keins mehr (aus Protest gegen Facebooks Zwangs-App gelöscht).
Gruß, René
Hallo René,
wozu sollte FB jemanden ein Tool zur Verfügung stellen, der eh nicht an FB interessiert ist? Nicht bei FB zu sein ist völlig ok und nachvollziehbar, aber Du kannst nicht einerseits nein dazu sagen, aber andererseits doch davon profitieren wollen — passt nicht zusammen. Entweder oder.
Wenn es Dir wichtig ist, dass Deine Beiträge, die von anderen evtl. bei FB geteilt werden, gut ausschauen, musst Du halt fehlerfrei die entsprechenden Daten auf Deiner Seite erstellen und dann hoffen. Darauf vertrauen, dass andere die Linkvorschau anpassen, wenn sie teilen, würde ich nicht.
Gruß
Katharina
Werbung bekommt man von Facebook trotzdem. ;-) Spricht ja nichts dagegen.
Ich selber profitiere übrigens nicht von meinem Internetauftritt. Aber andere sollen davon profitieren können. Da es mit Google bisher nicht so richtig funktioniert hat versuch ich es mal mit einer sauberen Darstellung in den sozialen Netzwerken.
Hallo Katharina,
sehr guter, verständlicher Artikel.
Bei google+ kann ich leider, trotz Extrasüppchen 2: Google+, die Einträge nicht ändern!
Text schein von fb zu kommen, obwohl dieser inzwischen geändert wurde, wird keine Änderung übernommen.
Deinen Artikel kann man bei twitter nicht teilen, da der tweet mehr als 140 Zeichen hat!
Grüße Manfred