Im folgenden Artikel werde ich eine kurze Einführung in das Open Graph Protokoll machen und erklären, warum diese Technologie vor allem im E-Commerce von großer Bedeutung ist.
Anschließend wird eine Analyse der drei Shopsysteme aus meinem Portfolio ausgeführt und es wird erläutert, ob und wie die Systeme diese Technologie nutzen.
Was ist Open Graph?
Open Graph wurde bereits vor einigen Jahren, nämlich im Jahr 2010, von Facebook präsentiert. Es ist ein Protokoll, das anfänglich Facebook, aber mittlerweile die meisten Sozialen Netzwerke nutzen, um beim Teilen eines Links eine Art Vorschau zu generieren.
Die meisten werden das Konzept von WhatsApp, Messenger und auch vielen anderen Plattformen kennen:
Sobald man einen Link im Chat einfügt, ist kurz ein Lade-Icon zu sehen und direkt danach wird eine Vorschau der verlinkten Seite angezeigt. In der Regel sieht man dort dann den Titel, ein Bild und eine kurze Beschreibung.
Das Ziel ist offensichtlich: der User soll durch eine ansprechende Darstellung der zu erwartenden Webseite, dazu animiert werden, auf den Link zu klicken.
Im Foto kann man sehr eindrucksvoll erkennen, wie uninteressant und nichtssagend ein einfacher Link neben einer Vorschau generiert aus den Open Graph Informationen wirkt.
Welche Möglichkeiten bietet das Open Graph Protokoll?
Tatsächlich bietet das Open Graph Protokoll überaschend viele unterschiedliche Tags, mit denen man die verlinkte Seite sehr detailliert beschreiben kann. Eine vollständige Liste findet man hier: https://ogp.me/
Ich werde im Folgenden auf die wichtigsten Open Graph Tags eingehen, insbesondere für den E-Commerce Bereich.
| og:title | Dieses Tag definiert den Titel der Webseite. |
| og:image | Dieses Tag legt das Vorschaubild fest, das angezeigt wird, wenn eine Webseite geteilt wird. |
| og:description | Hier wird eine kurze Beschreibung hinterlegt, die dem User in wenigen Worten erläutern soll, was ihm auf der Seite erwartet. |
| og:type | Hier wird der Seitentyp hinterlegt. Das kann z.B. eine Website sein, ein Artikel, ein Video oder eben auch ein Produkt. |
| og:url | Hier wird die URL der Seite angegeben, die geteilt wird. |
Diese Informationen müssen im Head-Bereich der Webseite eingefügt werden und haben folgende Syntax.
Hier an einem Beispiel von KoRo verdeutlicht:
<meta property="og:type" content="product"/>
<meta property="og:site_name" content="KoRo"/>
<meta property="og:url" content="https://www.korodrogerie.de/haferkeks-mit-schokodrops-200-g"/><meta property="og:title" content="Haferkekse mit Schokolade kaufen | KoRo Germany"/>
<meta property="og:description" content="Unsere zuckerfreien Haferkekse sind angenehm süß ✓ Mit Maltit gesüßt ✓ Dunkle Schokodrops ✓ Vegan – Jetzt kaufen!" />
Je mehr Informationen man zur Verfügung stellt, desto besser kann der Link eingeordnet und entsprechend dargestellt werden.
Was passiert, wenn man Open Graph nicht einsetzt?
Wenn auf einer Webseite keine Open Graph Daten hinterlegt sind, dann versuchen die Sozialen Plattformen auf eigene Faust an relevante Informationen zu kommen. Das passiert mal mehr und mal weniger gut.
Ein mögliches Ergebnis dabei ist, dass die Plattform an überhaupt keine relevanten Infos kommt. Dann wird keine Vorschau generiert. Es wird lediglich der Link angezeigt.
Wenn man Glück hat, dann werden die Informationen korrekt ermittelt. Das passiert meistens mithilfe der Meta Felder für Titel und Beschreibung. Wenn diese Felder gut gepflegt sind, dann werden eine Vorschau generiert, die mit der Open Graph Vorschau vergleichbar ist.
Sind keine Meta Felder vorhanden oder sind die Meta Felder nicht korrekt befüllt, dann ist die Wahrscheinlichkeit sehr hoch, dass die ermittelten Informationen von schlechter Qualität sind und im schlimmsten Fall auch falsche Informationen anzeigen.
Ähnlich schwierig ist es auch mit dem Thumbnail (Vorschaubild). Wenn auf der Webseite nur ein Bild eingebunden ist, dann wird es in der Regel gut ausgehen. Sind mehrere Bilder auf der Webseite eingebunden, dann kann es ganz schnell passieren, dass das falsche Bild ausgewählt wird. Dieses Bild passt dann nicht mehr zu Vorschau und es entsteht der Eindruck einer qualitativ schlechten Webseite.
Vielleicht ist Ihnen schon mal ein verzerrtes Unternehmenslogo als Thumbnail aufgefallen.
Genau das ist das Ergebnis nicht vorhandener Open Graph Daten 😉
Welchen Einfluss hat Open Graph auf SEO?
Doch welchen Einfluss haben die Open Graph Informationen auf SEO und das Ranking bei den Suchmaschinen?
Die Antwort ist einfach: Überhaupt keinen! 😁
Zumindest in dem Sinne, dass Google und Co. diese Meta-Tags nicht berücksichtigen.
Warum das aber trotzdem von enormer Bedeutung für jeden Online-Shop ist, versuche ich im Folgenden zu beantworten.
Click Trough Rate
Open Graph ordnet man in den Bereich von Social-Media-Marketing ein. Vor allem, wenn man also sehr aktiv Marketing in den Sozialen Medien, wie Facebook, Instagram, Twitter usw. betreibt, sollte man unbedingt dafür sorgen, dass diese Plattformen diese Informationen zur Verfügung gestellt bekommen.
Der Grund ist hier nämlich die sogenannte Click Through Rate oder CTR. Sie beschreibt das Verhältnis der Anzahl der Anzeige zur Anzahl der Klicks eines Links. Mit anderen Worten: wenn der Link 100 mal angezeigt wird, wie oft wird er dann angeklickt?
Analysen haben ergeben, dass die CTR bei einer ansehnlichen Darstellung des Links signifikant höher ist als ohne Vorschau.
Verweildauer
Für die Relevanzbewertung, die Google durchführt, ist das ein wichtiger Maßstab. Die Relevanzbewertung führt Google mithilfe der Bounce-Rate und der Verweildauer aus.
Klickt ein User also auf den Link, um zu erfahren, was dahinter steckt und schließt die Seite direkt wieder, weil ihm der Inhalt doch nicht interessiert, dann sorgt er für eine höhere Bounce-Rate und reduziert auch die durchschnittliche Verweildauer. Für Google ist das ein Signal dafür, die Relevanz der Website zu reduzieren.
Open Graph in WooCommerce, Shopware 6 und OXID eShop
Und nun kommen wir zur wirklich interessanten Frage. Wie gehen die drei Shopsysteme Shopware, OXID eShop und WooCommerce mit Open Graph um?
OXID eShop
Was kann man verbessern?
Etwas unvorteilhaft ist, dass auf allen anderen Seiten das Vorschaubild aus dem Warenkorb Icon generiert wird. Hier gibt es auf jeden Fall noch Verbesserungspotenzial.
So könnte man auf den Kategorieseiten das hinterlegte Kategoriebild nutzen und wenn keines vorhanden ist, dann das Logo des Shops als Fallback verwenden. Das Warenkorb Icon ist an der Stelle etwas generisch und und bezieht sich nicht direkt auf den Shop, auf den verlinkt wird.
Da OXID mithilfe von Modulen sehr einfach zu erweitern ist, könnte man hier ohne Weiteres die oben ausgeführte Logik implementieren. Zusätzlich wäre denkbar, dass man im Shop-Backend zusätzliche Felder zur Verfügung stellt, wo der Shopbetreiber alternative Inhalte für die Open Graph Tags einpflegen kann.
Shopware 6
Ähnlich wie OXID hat auch Shopware einen kompletten Block im Template den Open Graph Informationen gewidmet.
Vom Umfang her ist es mit OXID zu vergleichen. In der Hauptdatei für die Meta Informationen (meta.html.twig) werden diese Informationen bereitgestellt. Auch hier gibt es für die Produktseite etwas abgeänderte Informationen. So wird dort ebenfalls sichergestellt, dass das Produktbild als Thumbnail genutzt wird.
Als Fallback hat man hier sinnvollerweise das Logo und nicht das Warenkorb Icon 😉
Was kann man verbessern?
Auch für Shopware wäre es denkbar, ein Plugin zu implementieren, das zusätzliche Felder im Admin zur Verfügung stellt, um alternative Artikelbeschreibungen oder auch Titel zu pflegen
WooCommerce
Nach Installation und Aktivierung wird beim Bearbeiten von Seiten, Beiträgen und Produkten ein zusätzlicher Block angezeigt, der Felder zum Bearbeiten der Meta Informationen bereitstellt.
In erster Linie geht es dabei um die Felder für Meta Beschreibung und Meta Titel aber es gibt auch eine Sektion für die Open Graph Informationen. Der Reiter nennt sich Social. Und das Schöne daran ist, dass man direkt die Vorschau angezeigt bekommt, die der Nutzer sieht, wenn er die Seite teilt.
Was kann man verbessern?
Leider sind aber solche Funktionen oft nur über externe Plugins erhältlich.
Fazit
Ich muss zugeben, dass ich vom Ergebnis positiv überrascht bin 😊
Alle 3 Shopsysteme sind solide aufgestellt, was die Open Graph Integration angeht. Es ist schön zu sehen, dass die Entwicklerteams ein Bewusstsein auch für solche Themen haben. Themen wie dieses werden nämlich oft stiefmütterlich behandelt, weil sie nicht direkt sichtbar im Shop sin.
Für Shopbetreiber, die sehr aktiv auf Social Media sind, würde ich aber empfehlen, einige Optimierungen vorzunehmen, um die Conversion Rate zu verbessern.
Wenn ein Rabatt z.B. direkt im Artikelnamen der generierten Vorschau zu sehen ist, dann wird die CTR tendenziell nach oben gehen 😉
