Wie gefällt Ihnen der Artikel?
6
Wie gefällt Ihnen der Artikel?
6

So zeichnen Sie Ihre Website mit JSON-LD nach schema.org aus

Bei JSON-LD (JavaScript Object Notation for Linked Data) handelt es sich um eine JSON-basierte Methode, strukturiere Daten in eine Webseite einzubetten. Im Gegensatz zu anderen Formaten zur Datenstrukturierung wie Microformats, RDFa und Microdata erfolgt die Auszeichnung dabei nicht als Quelltext-Annotation. Stattdessen werden Metadaten in Form eines Skripts separat vom Webseiteninhalt implementiert. Dabei bedient sich JSON-LD der JSON-Notation und erweitert diese um „types“ und „properties“ wie sie beispielsweise im Projekt schema.org beschrieben werden. Die JSON-LD-Spezifikation stammt vom Digital-Bazaar-Gründer Manu Sporny und ist seit dem 16. Januar 2014 offizielle W3C-Empfehlung.

Was ist JSON?

Die Abkürzung JSON steht für JavaScript Object Notation und bezeichnet ein kompaktes Format zum Austausch von Daten, das in einer Textform notiert wird, die sowohl von Menschen als auch von Maschinen leicht zu verarbeiten ist. Das Datenformat ist eine Ableitung von JavaScript: Daher gilt immer noch, dass ein gültiges JSON-Dokument ein JavaScript sein muss. JSON lässt sich jedoch unabhängig von der jeweiligen Programmiersprache plattformübergreifend einsetzten. Als Datenformat für die Serialisierung kommt JSON beim Übertragen und Speichern von strukturierten Daten bei Webanwendungen und mobilen Apps zum Einsatz. Die Syntax eines JSON-Objekts besteht im Wesentlichen aus Namen-Wert-Paaren, die durch einen Doppelpunkt getrennt werden:

JSON-Syntax:

{
"name": "Manu Sporny",
"homepage": "http://manu.sporny.org/about/",
}

Im einleitenden Textabschnitt findet sich das Wortpaar „Manu Sporny“. Ein menschlicher Leser wird aufgrund des Kontextes schnell erfassen, dass es sich bei der Buchstabensequenz um einen Namen handelt, und den hinterlegten Hyperlink als Verweis auf die Webpräsenz des JSON-LD-Entwicklers deuten. Programme wie Webbrowser oder Suchmaschinen-Cawler hingegen benötigen Metadaten, um einen solchen Zusammenhang herzustellen. Genau diese bietet JSON in Form von Namen-Wert-Paaren (name-value pairs). Das oben stehende Code-Beispiel zeigt die beiden Namenselemente „name“ und „homepage“ mit ihren jeweiligen Werten. Ein Programm, das eine Webseite mit diesem JSON-Objekt ausliest, ist somit in der Lage, „Manu Sporny“ als Name und „http://manu.sporny.org/about/“ als Homepage zu identifizieren.

Linked Data (LD)

Während die Bedeutungszuordnung mit JSON innerhalb einer Webseite problemlos funktioniert, führt die Analyse von JSON-Daten verschiedener Webseiten schnell zu einem Ambiguitätsproblem. In der Regel parsen Programme eine Vielzahl von Webseiten und werten die gewonnenen Informationen in Datenbanken aus. Ausgehend vom oben stehenden Code-Beispiel kann jedoch nicht sichergestellt werden, dass die Namenselemente „name“ und „homepage“ immer im selben Bedeutungszusammenhang genutzt werden. Um Mehrdeutigkeiten auszuschließen, ergänzt JSON-LD die klassische JSON-Notation daher um ein Kontext stiftendes Element – ein Schema bzw. „type“. Dies erfolgt auf Grundlage von Linked Data. Dabei handelt es sich um frei verfügbare Daten im Internet, die per Uniform Resource Identifier (URI) abgerufen werden können. Ein standardisiertes Set an Schemata zur Datenstrukturierung bietet das Projekt schema.org. JSON-LD ist jedoch auf kein spezielles Vokabular festgelegt.

Um das entsprechende Kontext-Element ergänzt, ergibt sich für das obenstehende Beispiel folgender Code:

JSON-Syntax ergänzt um Keywords

{
  "@context" : "http://schema.org/",
  "@type" : "Person",
  "name" : "Manu Sporny",
  "url" : "http://manu.sporny.org/about/"
 }

Um JSON für Linked Data aufzubereiten, ergänzt JSON-LD die klassischen Namen-Wert-Paaren durch sogenannte Keywords (Schlüsselwörter). Diese werden jeweils mit einem vorangestelltes @-Zeichen eingeleitet. Von zentraler Bedeutung sind hier die Schlüsselwörter @context und @type. Während  @context in Codezeile 02 das dem Skript zugrunde liegende Vokabular (hier schema.org) definiert, gibt @type in Codezeile 03 an, um welches Schema (welchen Datentyp) es sich handelt. Ein Programm, das diesen Beispielcode parst, kann das als „name“ ausgezeichnete Textelement „Manu Sporny“ somit als Name einer Person gemäß dem Datentyp „Person“ nach Schema.org identifizieren. Die durch „name“ und „url“ eingeleiteten Namen-Wert-Paare werden als Eigenschaften (properties) des Schemas „Person“ verarbeitet. Welche Eigenschaften einem Schema zugeordnet werden können, legt das zugrundeliegende Vokabular fest.

JSON-LD im Vergleich zu anderen Datenformaten

Die Zuordnung von Schemata und Eigenschaften erfolgt bei JSON-LD analog zu anderen Formaten zur semantischen Auszeichnung von Webseiteninhalten. In eine Quelltext-Annotation konvertiert, ließe sich das Beispiel-Skript ohne Informationsverlust auch per Microdata oder RDFa nach schema.org auszeichnen:

Microdata-Syntax nach schema.org:

<div itemtype="http://schema.org/Person">
  <span itemprop="name">Manu Sporny</span>
  <span itemprop="url">http://manu.sporny.org/about/</span>
</div>

RDFa-Syntax nach schema.org:

<div vocab="http://schema.org/" typeof="Person">
  <span property="name">Manu Sporny</span>
  <span property="url">http://manu.sporny.org/about/</span>
</div>

Der große Vorteil von JSON-LD gegenüber konkurrierenden Formaten besteht jedoch darin, dass Metadaten nicht direkt in den HTML-Code eingebettet werden müssen, sondern separat als Skript an beliebiger Stelle implementiert werden können. Dies erfolgt mit dem Script-Tag nach folgendem Schema:

Implementierung von JSON-LD in HTML:

<script type="application/ld+json">
{
  JSON-LD
}
</script>

Die strikte Trennung von HTML und semantischer Annotation punktet nicht nur durch eine deutlich bessere Lesbarkeit des Quelltextes. Eine Implementierung dieser Art ermöglicht zudem eine dynamische Generierung unabhängig vom sichtbaren Content. Metadaten können bei JSON-LD somit über das Backend eingepflegt, aus einer Datenbank ausgelesen und automatisch per Template generiert werden. Dies ermöglicht eine bequeme semantische Annotation auch für dynamische Webinhalte, die im Internet immer mehr Raum einnehmen. Dennoch ist es JSON-LD bisher nicht gelungen, die anderen Formate zur Datenstrukturierung zu verdrängen. Das Projekt schema.org nennt JSON-LD zwar bereits seit Juni 2013 als eines der bevorzugten Datenformate, von den führenden Suchmaschinen wird die skriptbasierte Einbindung von Metadaten bisher jedoch nur für wenige Datentypen unterstützt. So empfiehlt Google JSON-LD beispielsweise für den Knowledge Graph und die Sitelink Search Box sowie für die Auszeichnung von Rezepten und Veranstaltungen. Bei den übrigen Datentypen hingegen verweist der Suchmaschinen-Marktführer auf klassische Annotationen via RDFa oder Microdata. Ein Grund dafür ist das hohe Spam-Potenzial einer Auszeichnung nicht-visueller Inhalte. Eine Grundregel der suchmaschinenkonformen semantischen Annotation war bisher, dass lediglich Inhalte maschinenlesbar ausgezeichnet werden, die auch menschlichen Seitenbesuchern zur Verfügung stehen. Die skriptbasierte Auszeichnung mit JSON-LD bricht mit dieser Tradition.


JSON-LD in der Anwendung

Suchmaschinen-Marktführer Google empfiehlt eine skriptbasierte Auszeichnung mit JSON-LD für Informationen, die Events betreffen. In HTML lassen sich Veranstaltungsankündigungen für Konzerte, Musicals, Theatervorstellungen usw. nach folgendem Schema darstellen:

Veranstaltungsankündigung in HTML

<p>
  <a href="http://www.veranstalter.de/Band/2016-04-20-2000">Band in Berlin</a>,<br>
  Datum: 20.04.2016,<br>
  Einlass: 20:00,<br>
  <a href="http://www.veranstalter.de/events/band/2016-04-20-2000/tickets">Tickets</a>
  Preis: 100,<br>
  Tickets verfügbar: 1839,<br>
  <a href="http://www.veranstaltungsort-berlin.de/">Veranstaltungsort</a>,<br>
  Beispielstaße 1,<br>
  10243 Berlin,<br>
</p>

Typische Informationen des Datentyps „Event“ sind Datum und Uhrzeit, der Preis, die Anzahl verfügbarer Tickets, die Adresse des Veranstaltungsorts sowie Links zu weiterführenden Informationen zum Event und zum Veranstaltungsort. Menschliche Seitenbesucher sind in der Lage, diese Informationen einem Textabschnitt, einer Tabelle oder anderen Darstellungsformen zu entnehmen und dem entsprechenden Bedeutungszusammenhang zuzuordnen. Programme wie Suchmaschinen-Crawler hingegen benötigen Metadaten, die Anweisungen enthalten, wie die dargebotenen Informationen zu verarbeiten sind. JSON-LD liefert diese in Form eines Skripts, dass separat vom Inhalt an beliebiger Stelle des HTML-Quellcodes eingefügt wird.

Veranstaltungen mit JSON-LD auszeichnen

In ein separates Skript übertragen lassen sich die entsprechenden Veranstaltungsdetails im Format JSON-LD folgendermaßen darstellen:s genauen Startzeitpunkt (StartDate).

JSON-LD-Skript zur Auszeichnung von Veranstaltungsinformationen:

<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "Event",
  "name" : "Band in Berlin",
  "startDate" : "2016-04-20T20:00",
  "url" : "http://www.veranstalter.de/events/band/2016-04-20-2000",
  "offers" : {
    "@type": "AggregateOffer",
     "url" : "http://www.veranstalter.de/events/band/2016-04-20-2000/tickets",
    "lowPrice" : "100",
    "offerCount" : "1839"
  },  
  "location" :
  {
    "@type" : "Place",
    "sameAs" : "http://www.veranstaltungsort-berlin.de/",
    "name" : "Veranstaltungsort",
    "address" :
    {
      "@type" : "PostalAddress",
      "streetAddress" : "Beispielstaße 1",
      "addressLocality" : "Berlin",
      "postalCode" : "10243"
    }
  }
}
</script>

Das Script-Tag in Zeile 01 definiert das Element bis Zeile 28 als Skript des Typs „application/ld+json“. Die nachfolgenden Informationen richten sich somit an Programme, die in der Lage sind, Linked Data im JSON-Format auszulesen. Auf der ersten Ebene finden sich die Schlüsselwörter @context und @type mit den Werten „http://schema.org“ und „Event“(Zeile 03 und 04). Ein parsendes Programm erhält hier die Anweisung, dass die folgenden Informationen dem Schema „Event“ gemäß schema.org zuzuordnen sind, es handelt sich somit um spezifische Eigenschaften der beschriebenen Veranstaltung. Diese werden in Form von Namen-Wert-Paaren dargestellt. Auf der ersten Ebene finden sich die Eigenschaften „name“, „startDate“, „url“, „offers“ und „location“, denen die Veranstaltungsinformationen als Werte zugeordnet sind. Ein Suchmaschinen-Crawler kann die Information „http://www.veranstalter.de/events/band/2016-04-20-2000“ auf diese Art zweifelsfrei als URL zum betreffenden Event identifizieren und „2016-04-20T20:00“ als genauen Startzeitpunkt (StartDate).

Eigenschaften (properties) als Schemata

Analog zu RDFa und Microdata ist es auch im JSON-LD-Format möglich, Eigenschaften als Schemata zu definieren und diese ihrerseits durch spezifische Eigenschaften näher zu bestimmen. Einen solchen Fall findet man beispielsweise auf der zweiten Ebene in Zeile 09, 16 und 21. Hier lässt sich die Event-Eigenschaft „offers“ als (Sub-)Schema „AggregateOffer“ mit den Eigenschaften „url“, „lowPrice“ und „offerCount“ auszeichnen:

  "offers": {
    "@type": "AggregateOffer",
     "url" : "http://www.veranstalter.de/events/band/2016-04-20-2000/tickets",
    "lowPrice": "100",
    "offerCount": "1839"
  },  

JSON-LD-Skripte testen

Durch die Verschachtelung von Schemata, (Sub-)Schemata und Eigenschaften sind komplexe JSON-LD-Skripte möglich. Die Trennung von HTML-Markup und semantischer Auszeichnung sorgt dennoch für eine deutlich bessere Lesbarkeit als bei vergleichbaren Formaten wie RDFa oder Microdata, die sich auf eine Quelltext-Annotation stützen. Um Fehler bei der Programmierung zu vermeiden, bietet Google mit dem Structured Data Testing Tool eine kostenlose Möglichkeit, JSON-LD-Skripte zur Datenstrukturierung zu validieren.

JavaScript HTML