XXL Guide: JSON-LD
Strukturierte Daten werden für die Suchmaschinenoptimierung immer wichtiger. Denn Suchmaschinen wie Google können diese Daten auslesen und für die Anreicherung von Suchmaschinenergebnissen (Rich Snippets) oder für spezielle Ergebnisse wie den Knowledge Graph verwenden.
Um diese Vorteile zu nutzen, solltest Du Deinen Content mit Markups auszeichnen. Eine Möglichkeit, um strukturierte Daten einfach zu markieren, bietet JSON-LD. In diesem Guide erfährst Du alles Wichtige, um Deinen Webcontent optimal für Google & Co. aufzubereiten.
Was ist der Unterschied zwischen JSON und JSON-LD?
Hinter dem Kürzel JSON verbirgt sich der Begriff "JavaScript Object Notation". Dabei handelt es sich um ein spezielles, von JavaScript abgeleitetes Datenformat, das den Austausch von textbasierten Informationen erlaubt. Dieses Format kann sowohl von Menschen als auch Maschinen leicht ausgelesen und verarbeitet werden. Als Nebenform von JavaScript muss JSON selbst ein JavaScript sein und so im Quellcode hinterlegt werden.
Ein großer Vorteil von JSON besteht darin, dass das Datenformat plattformübergreifend genutzt werden kann. Heute kommt es hauptsächlich für die Übertragung und Speicherung von strukturierten Daten zum Einsatz. Ebenso können Web-Apps oder Webanwendungen mit JSON-Objekten genutzt werden.
Charakteristisch für JSON ist die Syntax, die überwiegend aus Namen-Wert-Paaren besteht. Ein Objekt wird dabei mit geschweiften Klammern markiert. Innerhalb des Objektes können wiederum individuelle Properties, also Eigenschaften, definiert werden. Für jede Property gibt es einen Wert, der durch einen Doppelpunkt getrennt ist. JSON wurde deshalb in den letzten Jahren immer beliebter, weil seine Struktur einfacher ist als zum Beispiel XML.
JSON-LD hingegen steht für "JavaScript Object Notation für Linked Data". Dahinter verbirgt sich eine Möglichkeit, um strukturierte Daten in eine Webseite einzubinden. JSON-LD verfügt seit 2010 über eine W3C-Standard-Notation. Die Spezifikation der Auszeichnungssprache wurde von Manu Sporny entwickelt.
Im Gegensatz zu anderen Auszeichnungsmethoden für strukturierte Daten wie Microformats, RDFa und Microdata wird nicht der Quellcode direkt ausgezeichnet, sondern die Meta-Angaben werden über ein Skript vom eigentlichen Webseiten-Content getrennt.
JSON-LD beruht auf der JSON-Notation und wurde um "types" und "Properties" erweitert, um strukturierte Daten oder verknüpfte Daten zu übertragen.
JSON-LD kann von den gängigen Suchmaschinen ausgelesen werden, auch Google Gmail kann mit JSON-LD-Daten umgehen.
„Linked Data“
Wenn Du auf einer Webseite JSON einsetzt, können diese Daten innerhalb dieser Seite einfach zugeordnet werden, da die Bezugsquelle immer diese Webseite ist. Sollen Suchmaschinen jedoch verschiedene mit JSON markierte Daten auslesen, kann das zu Fehlinterpretationen und falschen Zuordnungen kommen.
Die Erweiterung von JSON um "Linked Data" (LD) sorgt nun dafür, dass die strukturierten Daten genau einer Webseite zugeordnet werden können. Hierfür wird das Element "type" hinzugefügt. Über dieses Element wird zum Beispiel die URI mit dem Datensatz verbunden. Grundsätzlich ist JSON-LD nicht auf ein spezifisches Vokabular festgelegt.
Gezielter Einsatz von JSON-LD
JSON-LD listet Elemente einer Webseite auf und strukturiert diese Daten. Jene können dann wiederum von Suchmaschinen eindeutig zugeordnet und ausgelesen werden. Auf der Basis dieser strukturierten Daten können Suchmaschinen ihre Suchergebnisse verbessern und besser organisieren.
Wo im HTML-Code wird JSON-LD eingefügt?
Von Google wird empfohlen JSON-LD im <head>-Bereich des HTML-Dokuments einzufügen. Suchmaschinen können die Daten jedoch auch aus dem <body>-Segment auslesen. Darüber hinaus besteht die Möglichkeit, dass Google dynamisch generierte JSON-LD-Tags über den Google Tag Manager ausliest. Wie das funktioniert, wird in diesem Artikel ausführlicher beschrieben.
Warum sollte ich JSON-LD verwenden?
JSON-LD gilt als eine sehr einfache Möglichkeit, um strukturierte Daten zu generieren. So können diese Daten mit JSON-LD einfach mit einem <script>-Tag im <head>-Bereich eines HTML-Dokuments hinterlegt werden. Auf diese Weise kann das Code-Snippet getrennt vom HTML-Code geladen werden. Im Vergleich zu anderen Markups ist dabei die Gefahr von Fehlern deutlich geringer.
Durch die einfache Skriptsprache bist Du in der Regel nicht auf einen Programmierer angewiesen, um Markups zu erstellen und in Deine Webseite einzubinden.
Wenn Du bereits JSON-Daten verwendest, kannst Du diese außerdem Daten leicht mit JSON-LD nutzen.
So kann ein JSON-LD Codesnippet aussehen:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Book",
"name": "XXL Anleitung für JSON-LD",
"publisher": "ryte",
"inLanguage": "German",
"bookFormat":
{
"@type": "EBook"
},
"offers":
{
"@type": "Offer",
"price": "0,00",
"priceCurrency": "EUR",
},
}
</script>
Erläuterung:
Dieses Beispiel zeigt Dir, wie JSON-LD aus Name-Wert-Paaren besteht. Mit dem @-Zeichen werden spezifische Werte reserviert, zum Beispiel für '@context' und '@type'. Diese Werte sind für Suchmaschinen relevant. Sie ergeben den Unterschied zu herkömmlichen JSON-Daten.
Durch die Angabe einer URL im Segment "context" werden die strukturierten Daten mit einer Referenz verknüpft, anhand derer die Daten ausgelesen werden. Die Suchmaschine wird durch die zusätzliche Angabe von @type auf die komplette URL http://schema.org/Book verwiesen. Somit wird sichergestellt, dass die im Skript enthaltenen strukturierten Daten sich auf das Vokabular von schema.org beziehen.
Damit für eine Suchmaschine überhaupt deutlich wird, dass es sich um eine JSON-LD-Datei handelt, muss das Skript dieses Element beinhalten:
<script type="application/ld+json">
{
…
}
</script>
Aufbau der JSON-LD Daten
An dieser kurzen Sequenz wird deutlich, wie die JSON-LD-Daten aufgebaut sind, und zwar als Paar aus Namen-Wert-Paaren (engl. name-value pairs). Für Menschen ist es auch ohne einen eindeutigen Hinweis einfach, den Wert der jeweiligen Paare herauszufinden. In diesem Beispiel wird deutlich, dass sich hinter "name" tatsächlich der Name des Objekts verbirgt und hinter "homepage" die dazugehörige Webseite. Für Suchmaschinen muss dafür jedoch immer der nötige Bezug hergestellt werden. Deshalb werden entsprechende Namen-Wert-Paare mit JSON-LD gebildet.
{
"name": "Mr. Ryte",
"homepage": "https://ryte.com",
}
JSON-Syntax mit Keyword
Im folgenden Beispiel werden die JSON-Daten mit Linked Data angereichert. Dabei handelt es sich um sogenannte Keywords, die dem Code hinzugefügt werden. Eingeführt werden die zusätzlichen Daten mit dem @-Zeichen.
Die wichtigsten Keywords sind in diesem Fall @context und @type.
{
"@context" : "http://schema.org/",
"@type" : "Person",
"name" : "Mr. Ryte",
"url" : "https://ryte.com/"
}
@context: Mit diesem Element wird auf das Vokabular verwiesen, auf das sich das gesamte Skript bezieht. Bei dem o.a. Beispiel ist die Referenz schema.org.
@type: Dieses Element bezeichnet das Schema, welches innerhalb der Referenz verwendet wird. Innerhalb des Schemas wiederum können einzelne Eigenschaften als Namen-Wert-Paare gebildet werden. Diese heißen Properties. Bei dem hier vorgestellten Beispiel sind "name" und "url" die Properties zum Schema "Person". Mit schema.org lassen sich jeglche Properties und Schemas nutzen.
Hinweis: Auf schema.org findest Du viele vorbereitete Schemata sowie die dazugehörigen Properties, die bereits von Suchmaschinen wie Google ausgelesen werden können.
Mit JSON-LD lassen sich auch sogenannte "nested entities" erstellen. Dabei handelt es sich um mehrere Properties mit unterschiedlichen "types", die innerhalb eines JSON-LD Datensatzes gelistet werden. Dabei muss jede neue Property neu definiert werden. Hierzu wird ein Komma vor die schließende geschweifte Klammer gesetzt.
Tipp 1: Denke daran, dass types und Properties bei schema.org case-sensitiv sind und es dabei auf die Groß- und Kleinschreibung ankommt.
Tipp 2: Achte beim Anlegen der strukturierten Daten darauf, dass Du alle Properties verwendest, die per schema.org für Deinen gewählten type zur Verfügung stehen.
So können einfache Properties zu JSON-LD hinzugefügt werden:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Book",
"name": "XXL Anleitung zu JSON LD",
"publisher": "Ryte",
}
</script>
Komplexere Properties zu JSON-LD hinzufügen
Nun geht es darum, "nested entities" zu schaffen. Das eben aufgeführte Beispiel wird nun um weitere Details ergänzt, die auf dem Schema für "offers" nach schema.org beruhen. Wie oben beschrieben, wird die zusätzliche Property mit einem Komma von der eingebetteten Property getrennt. Auf diese Weise wird eine Hierarchie innerhalb des Keywords "type" geschaffen.
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Book",
"name": "XXL Anleitung zu JSON LD",
"publisher": "Ryte",
"offers":
{
"@type": "Offer",
"price": "0,00",
"priceCurrency": "EUR",
},
}
</script>
JSON-LD vs. Microdata und RDFa-Syntax
JSON-LD nutzt die gleiche Zuordnung zu Schemata wie andere Formate, die strukturierte Daten auszeichnen.
{
"@context" : "http://schema.org/",
"@type" : "Person",
"name" : "Mr. Ryte",
"url" : "https://ryte.com/"
}
Microdata-Syntax nach schema.org:
<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Mr. Ryte</span>
<span itemprop="url">https://ryte.com</span>
</div>
RDFa-Syntax nach schema.org:
<div vocab="http://schema.org/" typeof="Person">
<span property="name">Mr. Ryte</span>
<span property="url">https://ryte.com</span>
</div>
Alle drei Markups können von Suchmaschinen ausgelesen werden. Der Vorteil von JSON-LD besteht darin, dass es nicht im HTML-Quellcode der Webseite implementiert werden muss.
Strukturierte Daten mit JSON-LD auszeichnen: Events
Google empfiehlt Webmastern, zum Beispiel Events mit JSON-LD auszeichnen.
Im HTML-Code könnte ein Event so aussehen:
<p>
<a href="http://www.konzertseite.de/Band/2017-01-01">Newcomerband in München</a>,<br>
Datum: 01.01.2017,<br>
Einlass: 20:00,<br>
<a href="http://www.konzertseite.de/Band/2017-01-01/tickets">Tickets</a>
Preis: 99<br>
Tickets verfügbar: 134,<br>
<a href="http://www.location.de/">Veranstaltungsort</a>,<br>
Partymeile 1,<br>
89000 München,<br>
</p>
Mit JSON-LD können nun alle Details dieses Element als strukturierte Daten an Google übergeben werden. Dabei können die Inhalte der Properties dynamisch geladen werden und als Skript ausgelagert werden. Es ist nicht wie bei anderen Markups erforderlich, dass die Daten tatsächlich im HTML-Code stehen.
<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "Event",
"name" : "Newcomerband in München",
"startDate" : "2017-01-01T20:00",
"url" : "http://www. konzertseite.de/Band/2017-01-01",
"offers" : {
"@type": "AggregateOffer",
"url" : "http://www. www.konzertseite.de/Band/2017-01-01/tickets",
"lowPrice" : "99",
"offerCount" : "134"
},
"location" :
{
"@type" : "Place",
"sameAs" : "http://www.location.de/",
"name" : "Veranstaltungsort",
"address" :
{
"@type" : "PostalAddress",
"streetAddress" : "Partymeile 1",
"addressLocality" : "München",
"postalCode" : "89000"
}
}
}
</script>
So kannst Du das JSON-LD Skript testen
JSON-LD kann aus sehr schlichten Code-Elementen bestehen. Werden jedoch verschachtelte Elemente eingefügt, werden die Codes sehr schnell komplex und es können sich Fehler einschleichen. Um zu prüfen, ob dein JSON-LD-Code tatsächlich funktioniert und von Suchmaschinen korrekt ausgelesen wird, bietet Google das Structured Data Testing Tool an.
Wähle im Tool aus, dass Du ein Code-Snippet prüfen möchtest. Anschließend klickst Du auf "Test durchführen".
Fügt man den Beispielcode von oben zu einer Veranstaltung in das Tool ein, ergibt das folgendes Ergebnis:
:format(avif))
Abbildung 1: Google Structured Data Testing Tool.
Du siehst, Google zeigt Dir nicht nur Fehler im JSON-LD Code, sondern gibt Dir auch Hinweise auf mögliche Properties, die Dein Code noch enthalten sollte.
Nutzen von JSON-LD für SEO
Mit JSON-LD kannst Du die Präsenz Deiner Webseite in den Google SERPs erhöhen und verbessern. So empfiehlt Google JSON-LD zum Beispiel, um im Google Knowledge Graph angezeigt zu werden oder um sogenannte "Rich Cards" zu generieren.
Beide Elemente sind in den SERPs sehr präsent und werden in der Regel noch über den regulären organischen Suchtreffern angezeigt. Mit Hilfe von JSON-LD lässt sich somit die Sichtbarkeit einer Webseite erhöhen und zum anderen besteht dadurch die Chance, mehr Traffic zu erhalten.
Für Suchmaschinen wird es durch den Einsatz von JSON-LD einfacher, Deinen Webcontent auszulesen. Zum einen werden relevante Daten strukturiert übergeben. Zum anderen lässt sich JSON-LD als Skript auslagern. Dadurch wird der Quellcode schlanker und der Googlebot benötigt weniger Zeit, um Deine Seite zu indexieren.
Trotz dieser Vorteile wird JSON-LD von Google nicht für alle Markups empfohlen. Dies mag vermutlich daran liegen, dass das Übermitteln von strukturierten Daten per Skript sehr spam-anfällig ist. Werden herkömmliche Microdata oder RDFa verwendet, kann nur vorhandener HTML-Code markiert werden.
Für die Zukunft der Suche, die vermehrt sprachbasiert genutzt wird, kann ein Markup wie JSON-LD sehr wichtig werden, denn durch strukturierte Daten werden Webinhalte noch besser lesbar für Suchmaschinen. Zugleich lassen sich diese ausgezeichneten Inhalte perfekt an die Suchbedürfnisse des Nutzers anpassen. Wenn Du also heute schon für die Sprachsuche gerüstet sein möchtest, die mit GoogleNow und der mobilen Google-Suche häufig zum Einsatz kommt, solltest Du Dich frühzeitig mit strukturierten Daten beschäftigen. JSON-LD bietet dafür eine leicht umzusetzende Möglichkeit.
JSON-LD Markup verwenden – so gehst Du vor
Wie einfach die Umsetzung von JSON-LD für Dich wird, hängt stark davon ab, wie vertraut Du mit dem Vokabular von schema.org bist und wie gut Du die JSON-LD Syntax beherrschst.
1. Stelle Vorüberlegungen an: Was möchtest Du mit Markup auszeichnen und welches Ziel hast Du damit? Auf diese Weise lässt sich besser einschätzen, ob sich der Aufwand tatsächlich lohnt.
Prüfe dabei, ob Deine Inhalte alle mit dem Vokabular von schema.org ausgezeichnet werden können. Manche Properties ergeben vielleicht keinen Sinn für Deine Zwecke. So ist es zum Beispiel nicht wirklich zielführend, Veranstaltungen auszuzeichnen, wenn es nicht Deine eigenen sind.
Was die Ziele betrifft: Möchtest Du ein bestimmtes Marketingziel damit erreichen? Oder handelt es sich erst einmal um einen Test? Denke immer daran, dass Markup Suchmaschinen helfen soll, Deine zentralen und wichtigen Inhalte strukturiert zu verstehen. Schau Dir an, welche Markups Google bereits nutzt und wo diese eingesetzt werden.
1. Erstelle eine Liste mit möglichen Properties und Werten: Schreibe alle Namen-Wert-Paare auf, die Du gerne markieren möchtest. Prüfe später, ob die Markierung mit schema.org überhaupt (schon) möglich ist.
2. Prüfe mögliche Quellen für Markups: Du musst mit JSON-LD das Rad nicht neu erfinden. Nutze Ressourcen von Google, um Dich mit dem Thema vertrauter zu machen. Verwende vorhandene Beispiele und wandle Sie für Deine Zwecke ab.
3. Nutze schema.org types: Auf der Seite von schema.org gibt es viele verschiedene Code-Beispiele für types und Properties. Schau nach, welche dieser Entitäten für Dich in Frage kommen.
4. Kopiere die benötigten Elemente und füge sie in einen Editor ein: Du kannst die vorhandenen Beispiele einfach kopieren und an Deine Webseite anpassen. Achte jedoch darauf, dass Du alle nötigen <script>-Tags einfügst.
5. Ergänze Deinen Code um mögliche eingebettete Properties: Ergänze bestehende Properties um weitere mögliche Eigenschaften.
6. Teste Deine Code-Snippets: Hierfür bietet sich das Structured Data Testing Tool von Google an.
7. Überlege Dir, wie der JSON-LD eingesetzt werden soll: Als sehr einfache Möglichkeit kannst Du den Code einfach in den <head>-Bereich Deiner Seite einfügen oder per Template ausspielen. An dieser Stelle kann es sinnvoll sein, wenn Du einen Web Developer mit ins Boot holst.
Mögliche Fallstricke bei der Implementierung von JSON-LD
Wenn Dein JSON-LD Code-Snippet nicht mit dem Google-Testing-Tool validiert werden konnte, kann es an verschiedenen Fehlern liegen. Hier findest Du die häufigsten Fehlerquellen:
Syntax: Diese Anführungszeichen “ sind nicht die gleichen wie diese „. Verwende nur gerade Anführungszeichen.
Achte auf Kommata: Im Tool von Google wird meist ein rotes X eingefügt, wenn ein Komma fehlt oder zu viel eingesetzt wurde.
Vokabular: Achte darauf, nur erforderliche oder erlaubte Properties innerhalb der Spezifikationen von schema.org zu verwenden.
Webmaster Guidelines: Markiere nur Informationen mit JSON-LD, die tatsächlich auf Deiner Seite zu finden sind. Es ist zwar per Skript möglich, andere Inhalte zu übermitteln, doch kann diese Praxis von Google als Spam bewertet werden. Im schlimmsten Fall wird Deine Seite dann nicht mehr im Index gelistet.
Copy/Paste: Füge kein Markup ein, dass Du zuvor in Office-Programmen wie Windows genutzt hast. Verwende stattdessen einen HTML-Editor zum Bearbeiten von JSON-LD.
Fazit
JSON-LD mag gerade für Einsteiger auf den ersten Blick sehr umfangreich und komplex wirken. Dabei ist es mit JSON-LD grundsätzlich einfacher, strukturierte Daten für Suchmaschinen zu generieren als mit anderen Methoden wie Microformats oder RDFa, da der HTML-Code mit JSON-LD nicht direkt ausgezeichnet werden muss.
Du solltest auf jeden Fall prüfen, ob Markups auch für Dein Webangebot sinnvoll sind. Denn schließlich besteht die Chance, als Rich Card oder im Google Knowledge Graph präsent zu sein. Vor allem aber im Hinblick auf weitere digitale Suchassistenten wie Google Now oder anderen sind strukturierte Daten wichtige Auszeichnungselemente für die Zukunft der Suche.
W3C-Dokumentation von JSON-LD:
https://www.w3.org/TR/json-ld/#general-terminology
Optimiere Deine Website mit Ryte FREE
Veröffentlicht am May 2, 2017 von Philipp Roos
:format(avif))
:format(avif))
:format(avif) "10 Stellschrauben für die Website Conversion Optimierung")
:format(avif))