Open Graph im E-Commerce – Vergleich WooCommerce, Shopware und OXID

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.

Übersicht

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:titleDieses Tag definiert den Titel der Webseite.
og:imageDieses Tag legt das Vorschaubild fest, das angezeigt wird, wenn eine Webseite geteilt wird.
og:descriptionHier wird eine kurze Beschreibung hinterlegt, die dem User in wenigen Worten erläutern soll, was ihm auf der Seite erwartet.
og:typeHier wird der Seitentyp hinterlegt. Das kann z.B. eine Website sein, ein Artikel, ein Video oder eben auch ein Produkt.
og:urlHier 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!" />
				
			
Open Graph Protokoll am Beispiel von KoRo
Ansehnliche Vorschau eines Links mithilfe von Open Graph

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

Ein weiterer wichtiger Punkt ist die VerweildauerUser, die mithilfe der generierten Vorschau bereits wissen, was sie hinter dem Link erwartet, werden tendenziell länger auf der Seite verweilen als User, die erst auf den Link klicken müssen, um zu schauen, was sich dahinter verbirgt.


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

Im OXID Shop ist Open Graph fester Bestandteil. In der Hauptdatei des Themes (base.tpl) befindet sich ein Block, der auf jeder Seite des Shops die Open Graph Meta Daten bereitstellt. Es gibt eine Unterscheidung zwischen den Seitentypen.
 
So wird auf der Produktdetailseite zusätzlich das Meta Tag für den Typ „Produkt“ (property=“og:type“ content=“product“) ergänz und es wird zudem das Bild des Produktes in den Tag für das Image hinterlegt. Das stellt sicher, dass die Vorschau das korrekte Produktbild beinhaltet.
 
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.

Während eines Sales möchte man eventuell auch in der Open Graph Beschreibung darauf aufmerksam machen 😉
 

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?
Im Großen und Ganzen ist Shopware ähnlich wie OXID aufgestellt. Die Informationen sind etwas ausführlicher und logischer aufgebaut. Zudem nutzt Shopware auch Tags, die von Twitter entwickelt wurden und die den selben Zweck erfüllen. Hier gibt es die Dokumentation dazu.
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

Da WordPress und somit auch WooCommerce keine Template Engine nutzen, wird diese Herausforderung durch ein Plugin gelöst. Ich kann das Yoast SEO Plugin empfehlen, das es in einer kostenlosen und einer kostenpflichtigen Version mit mehr Funktionen gibt.

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?
Hier hätte ich mir gewünscht, dass WordPress zumindest eine Basis Version von Open Graph als Standard zur Verfügung stellt. Ausreichend wäre, wenn man den Titel aus dem Seitennamen und die Beschreibung aus dem Excerpt (Auszug) zieht und per Default zur Verfügung stellt.
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 😉

Kostas Strigkos

Lassen Sie uns mal sprechen.

In einem kurzen, kostenlosen Erstgespräch finden wir heraus, ob und wie ich Sie bei Ihrem Vorhaben unterstützen kann.