SEO

Strukturierte Daten durch JSON-LD via Tag Manager

Strukturierte Daten kennt jeder. Zumindest sollte sie jeder kennen, der sich mit Online Marketing beschäftigt. Neben Formaten wie RDFa und Mikroformaten gibt es auch noch die JavaScript-Variante JSON-LD. Ein kurzer Exkurs zu den drei Varianten:

Was ist unter Mikroformaten zu verstehen?

Mikroformate werden direkt im HTML-Code „verbaut“ und blähen so den gesamten Quelltext auf. Es ist die älteste Variante zur Auszeichnung von Daten und wird nur noch recht selten verwendet, z. B. in Systemen wie Jimdo oder WIX, da es hier nicht möglich ist, entsprechende seitenspezifische JavaScript-Codes einzufügen, sondern nur ganzheitliche Anweisungen. Dieses Format hat – bildlich gesprochen – schon etwas Staub angesetzt.

Die Implementierung wird wie erwähnt direkt im HTML-Quellcode mithilfe des Vokabulars von Schema.org vorgenommen. So ist innerhalb des Quelltextes zwar sofort erkennbar, was ausgezeichnet wurde, aber wie schon erwähnt wird der Quellcode unnötigerweise aufgebläht. Daher ist ganz genau darauf zu achten, dass hierbei mit einer erhöhten Ladezeit gerechnet werden muss, wenn die Auszeichnung vorgenommen wird.

Beispiel:

<code><div itemscope itemtype=“http://data-vocabulary.org/Person“>Ich heiße <span itemprop=“name“>Markus Fritzsche</span>.

Meine Website lautet: <a href=“http://www.example.com“ itemprop=“url“>www.example.com</a>. Ich arbeite in <span itemprop=“address“ itemscope itemtype=“http://data-vocabulary.org/Address“>

<span itemprop=“locality“>Hofheim am Taunus</span> in

<span itemprop=“region“>Hessen</span>

</span>

und arbeite als <span itemprop=“title“>SEO-Berater</span>bei der Firma <span itemprop=“affiliation“>ReachX GmbH </span>.

</div></code>

RDFa – Was verbirgt sich dahinter?

RDFa ist die Abkürzung für Resource Description Framework in Attributes. Wie die Mikroformate wird auch RDFa direkt in den Quelltext geschrieben. Es sind sozusagen Mikroformate in einer anderen Hülle.

Verschiedene Systeme wie z. B. Drupal haben RDFa von Haus aus direkt mit einprogrammiert. Ein weltweit bekanntes Unternehmen, nämlich Facebook, nutzt ebenfalls RDFa. Bei Facebook wird RDFa im Rahmen des Open Graph Protocol eingesetzt. Seit Anfang November 2011 wird RDFa auch von Schema.org unterstützt. CMS-Systeme wie z. B. WordPress oder Joomla! unterstützen die Verwendung des Auszeichnungstyps RDFa über Plugins.

RDFa ist neuer als die Mikroformate, genießt aber lediglich ein Nischendasein.

Beispiel:

<code> <p >JSON-LD der Google-Liebling

JSON-LD steht für JavaScript Object Notation for Linked Data. Es handelt sich dabei um einen JavaScript-Code, der einfach ohne große Mühe auf der Webseite eingebunden werden kann. Zur Einbindung von JSON-LD gibt es diverse Möglichkeiten. Die Einbindung kann direkt über den <head>-Bereich, durch diverse Plugins des verwendeten Systems oder durch den Google-Tag-Manager erfolgen. Egal, wie die Einbindung erfolgt: JSON-LD ist das von Google bevorzugte Format für die strukturierten Daten. Es ist nicht bewiesen, aber davon auszugehen, dass Google Seiten mit JSON-LD besser bewertet als Seiten mit anderen Auszeichnungsmethoden.

Beispiel:

<code> <script type=“application/ld+json“>{ „@context“: „http://schema.org“,

„@type“: „TechArticle“,

„articleBody“: “ Amazon SEO – So stehen Deine Produkte auf der Pole Position!“,

„image“: „https://www.omt.de/wp-content/uploads/2018/05/omt.de-header-amazonseo.jpg“,

„wordCount“: „2000“,

„alternativeHeadline“: „Was ist Amazon SEO?“,

„author“: „https://www.omt.de/speaker/mario-jung/“,

„copyrightHolder“: „https://www.omt.de/“,

„copyrightYear“: „2018“,

„creator“: „https://www.omt.de/“,

„datePublished“: „04.05.2018“,

„genre“: „Amazon SEO“,

„headline“: “ Amazon SEO – So stehen Deine Produkte auf der Pole Position!“,

„isBasedOn“: „https://www.omt.de/amazon-seo/“,

„isBasedOnUrl“: „https://www.omt.de/amazon-seo/“,

„keywords“: „Amazon SEO“,

„sourceOrganization“: {

„@type“: „Organization“,

„name“: „Online Marketing Tag – OMT“,

„url“: „https://www.omt.de/“,

„logo“: „https://www.omt.de/wp-content/uploads/2017/10/omt-logo-150-79.png“,

„foundingDate“: „2014“,

„founders“: [

{

„@type“: „Person“,

„name“: „Mario Jung“

}],

„address“: {

„@type“: „PostalAddress“,

„streetAddress“: „Nordring 29“,

„addressLocality“: „Hofheim am Taunus“,

„addressRegion“: „Hessen“,

„postalCode“: „65719“,

„addressCountry“: „DE“

}

}</script>

</code>

Welche Auszeichnungen mit JSON-LD sind möglich?

JSON-LD basiert auf dem Vokabular von Schema.org. Der größte Vorteil von JSON-LD ist, dass sich der Code nicht im Quelltext des <body>-Bereichs, sondern im <head> einer Seite befindet. Folgende Bereiche können mit strukturierten Daten ausgezeichnet werden:

Article
Blog Post
Book
Breadcrumb
Email Message
Event
1. Venue
2. Concert
3. Concert: Multiple Performers (Verwendung bei Bands oder Orchestern)
Job Posting
Local Business
News Article
Organization
Person
Product
Recipe
Social Network Profiles
Web Page
Video

Zu den meisten oben aufgeführten Punkten gibt es noch eine Vielzahl weiterer Kindelemente. Stellen wir uns nun mal vor, wir wollen ein Rezept mit strukturierten Daten auszeichnen. Dafür gibt es das Element „Recipe“. Hier können dann sämtliche Zutaten und Anweisungen, die das Rezept enthält, ausgezeichnet werden. Durch die Auszeichnung besteht die Möglichkeit, dass sich zudem ein Featured Snippet bildet.

Durch die Auszeichnung der Website mit strukturierten Daten vergrößern sich die Suchergebnisse und neben Bewertungssternen werden auch Bilder angezeigt.

Auch Videos können mit strukturierten Daten ausgezeichnet werden. Diese werden dann ebenfalls prominent hervorgehoben.

Wie können strukturierte Daten erzeugt werden?

Klar ist es mühsam, sich die einzelnen „Vokabeln“ aus Schema.org zusammenzubauen. Doch hierfür gibt es eine Vielzahl an Generatoren, die einem das Leben leichter machen. Eine kleine Zusammenfassung der aus meiner Sicht besten Generatoren, wenn es um JSON-LD und strukturierte Daten geht, gibt es hier:

JSON-LD Generator https://jsonld.com/json-ld-generator/
Rich Snippets und Schema-Generator http://rich-snippet-generator.de/index.php
Schema Markup Generator (JSON-LD) https://technicalseo.com/seo-tools/schema-markup-generator/

Wo können die strukturierten Daten auf Richtigkeit geprüft werden?

Für diese Frage hat Google eine Antwort und mit dem „Google Testtool für strukturierte Daten“ (https://search.google.com/structured-data/testing-tool/u/0/) ein eigenes Prüf-Center geschaffen. Neben der Prüfung einer URL besteht auch die Möglichkeit, nur das Code-Snippet auf fehlerfreie Programmierung zu testen. In einem Splitscreen wird hier auf der linken Seite der Quellcode und auf der rechten Seite die Auswertung angezeigt.

Google Testtool für strukturierte Daten

Prüfungsergebnis Startseite

JSON-LD Ausgabe für Organization

Prüfungsergebnis Produktseite Suchmaschinenoptimierung – Article

JSON-LD und die Bedeutung für die Suchmaschinenoptimierung

JSON-LD und im Allgemeinen strukturierte Daten haben eine große Bedeutung im Rahmen der Suchmaschinenoptimierung. Nicht nur, dass die Ergebnisse durch angezeigte Bilder, Bewertungssterne oder Breadcrumbs und Sitelinks innerhalb der SERPs mehr Platz einnehmen und so die Konkurrenz auf Abstand halten; nein, auch die Klickrate (CTR à Click-Through-Rate) erhöht sich um ein Vielfaches. Durch diese Maßnahme wird sich über kurz oder lang eine erhebliche Trafficsteigerung im organischen Traffic einstellen. Durch bessere Klickraten werden auch verbesserte Nutzerdaten erzeugt, die im Nachgang auch zu besseren Rankings verhelfen.

Bing plant Testtool für JSON-LD

Noch ist es nicht verfügbar, aber die Suchmaschine Bing ist dabei, ein Tool zu entwickeln, dass es innerhalb der Bing Webmaster Tools möglich machen soll, strukturierte Daten, die per JSON-LD angelegt worden sind, darüber zu verifizieren. Bing hat bestätigt, dass JSON-LD unterstützt wird, es aber noch keinen genauen Zeitplan gibt, wann die Verifizierungsmöglichkeit innerhalb der Webmaster Tools verfügbar ist. Nichtsdestotrotz ist es ein großartiger Schritt von Bing, auch JSON-LD zu unterstützen. So können sich alle Webseitenbetreiber auf das gängige JSON-LD-Format stürzen und nutzen. Andere Formate wie Mikrodaten und RDFa gehören somit der Vergangenheit an und belasten nicht länger den Quellcode im <body>-Bereich.

Implementierung von strukturierten Daten mittels Google Tag Manager

Wem der händische Aufwand je Seite zu aufwändig ist, dem kann geholfen werden. Dank dem Einsatz des Google Tag Managers kann so spielend leicht das richtige Markup auf jede Seite gebracht werden. Dies geschieht in 5 Schritten:

Schritt 1: Erstellung des JSON-LD Markups

Zu Beginn muss ein JSON-LD Markup erstellt werden, so als sollte es auf Einer Seite im Head-Bereich eingebunden werden. Welche Teile davon dynamisch gefüllt werden sollen ist von dem jeweiligen Typ abhängig. Im Tag Manager muss ein neues Tag vom Typ „Benutzerdefiniertes HTML“ angelegt werden. Wichtig ist hier, dass die Option „document.write“ aktiviert ist. Die gelb markierten Felder werden später mit Variablen dynamisch gefüllt.

Anlage Skript innerhalb des Tags „Benutzerdefiniertes HTML“

Schritt 2: Aufbau der einzelnen Variablen

Für jedes Feld, dass dynamisch gefüllt werden soll, muss eine eigene Variable angelegt werden. Die Auswahl fällt hier auf den Variablen-Typ „DOM-Element“. Die Methode, nach der die Elemente gefüllt werden sollen, wird als CSS-Selektor festgelegt. Im Bereich Element-Selektor wird dann noch das entsprechende HTML-Tag angegeben, z. B.: h1 für die Überschrift. Den Variablen muss immer ein einzigartiger Name zugewiesen werden, um so später innerhalb des Scripts zugeordnet werden zu können.

Variable für H1-Überschrift anlegen

Schritt 3: Auszeichnung des Skriptes mit Variablen

Sämtliche angelegte Variablen, die das Skript dynamisch füllen sollen, müssen nun an die richtigen stellen gebracht werden. Hier greifen dann die Variablen auf die zuvor festgelegten CSS-Selektoren und füllen ganz dynamisch das JSON-LD-Skript aus. Dies bezweckt, dass jede Seite dank dieses Skripts nun individuelle strukturierte Auszeichnungsdaten bekommt.

Einbindung der Variablen in das Skript

Schritt 4: Strukturierte Daten, aber wann und wo?

Nachdem nun alle Variablen im Skript verbaut wurden, muss noch über den Trigger festgelegt werden, wann und auf welchen Seitentypen dieses Skript ausgeführt werden soll.

Schritt 5: Testing und veröffentlichen von JSON-LD

Wenn alle Anpassungen getätigt sind, kann über den Vorschaumodus des Tag Managers genau geprüft werden, ob die strukturierten Daten auch dort ausgespielt werden, wo es zuvor festgelegt wurde. Wenn dem der Fall ist, kann die Containeränderung veröffentlicht werden. Nach dem Livegang des Container-Updates kann über das Tool zum Test der strukturierten Daten von Google geprüft werden, ob die gewünschten dynamischen Inhalte innerhalb des Skripts ausgelesen und eingeschrieben werden.

Fazit

Eine Website ohne strukturierte Daten ist wie ein Fußballspiel ohne Ball. Beides funktioniert nicht wirklich. Die Website funktioniert zwar vom Aussehen her, wird aber innerhalb der SERPs nur wenige Erfolge aufweisen. Dadurch, dass Bing nun auch verstärkt auf JSON-LD setzt, macht es dies den Webseitenbetreibern einfacher, da nur noch eine Auszeichnungsvariante benötigt wird. Immer daran denken: Die Auszeichnung der Daten dient einem größeren Platz in den SERPs und verhilft zu einer höheren CTR. Es ist möglich, mehrere Daten auszuzeichnen, sei es ein Artikel, dem noch eine Organisation dazugegeben wird, oder ein Video, das mit ausgezeichnet wird. Alles, was möglich ist, sollte auch eine Auszeichnung erhalten, um so das beste Snippet für den Suchenden innerhalb der SERPs zu bieten. Die Auszeichnung über den Google Tag Manager mag am Anfang etwas aufwändig sein, die dort investierte Zeit zahlt sich aber im Nachhinein aus und erweist sich als richtige Entscheidung.

Sascha Behmueller

Sascha Behmüller ist der Experte für Conversion Rate Optimierung und PPC-Maßnahmen bei der ReachX GmbH. Seit April 2017 ist er Geschäftsführer und zuständig für die Leitung unserer Agentur. Zuvor hat er knapp 10 Jahre Berufserfahrung als Produkt- und Online Marketing Manager in Unternehmen wie Vodafone, Deutsche Telekom und 1&1, sowie Gazprom Energy gesammelt. In dieser Zeit hat er es sich zur Aufgabe gemacht, den Kunden in den Mittelpunkt seiner Arbeit zu stellen, sei es in der Produktentwicklung oder in der Online-Ansprache. Mit Conversion-Rate-Optimierung setzt er sich seit mehreren Jahren auseinander und ist für seine Kunden stets auf der Suche nach den neuesten Erkenntnissen aus dem Bereich der CRO. Im Blog berichtet Sascha auch über Themen wie Google Analytics, AdWords und den Google Tag Manager, da diese für ihn sehr wichtige Tools zur Conversionoptimierung darstellen.