Wie bringt man Semantik auf eine Website? Eine Einführung in JSON-LD, RDFa und Microdata

June 21, 2021
10 min
Semantic Web
Credits to Simon from pixabay.com

Einleitung

Im letzten Artikel haben wir die Hintergründe und Nutzen des Semantic Web beschrieben. Wir haben gezeigt, wie Informationsvermittlung über das Internet mit HTML prinzipiell gestaltet ist und wo die Hemmnisse im Bezug auf die Semantik liegen. Heutzutage gibt es jedoch Möglichkeiten, die Semantik von Inhalten maschinenlesbar auszuzeichnen, um eine bessere Vernetzung des Internets zu ermöglichen. Denn genauso wie das Internet vor 30 Jahren anders aussah und andere Funktionalitäten hatte wie heute, werden sich das Internet und unser Umgang damit in den nächsten 30 Jahren auch verändern.

In diesem Artikel beschreiben wir, wie man Teile seines HTML-Codes semantisch auszeichnen kann, damit die Fähigkeiten des Semantic Web heute schon ausgeschöpft werden können. Dabei werden wir uns den Quellcode dieses Artikels mal genauer anschauen. Wie das geht und was wir darin sehen können, werdet Ihr hier lernen.

Struktur für Semantische Tripel - RDF

Im letzten Artikel wurde das Prinzip der semantischen Tripel anhand mehrerer Beispiele beschrieben. In der Praxis wird das Prinzip der semantischen Tripel durch das Resource Description Framework (RDF) realisiert. Dabei besteht jedes Tripel wie in der folgenden Abbildung zu sehen angelehnt an simple linguistische Sätze aus einem Subjekt, einem Objekt und einem Prädikat. Ein Set von Tripeln bezeichnet man als RDF-Graphen.

Ein semantisches Tripel nach W3C

Das Subjekt ist dabei etwas, das in diesem Tripel beschrieben wird. Das Prädikat beschreibt die Art der Beziehung zwischen dem beschriebenen Subjekt und dem Objekt. Ein Beispiel für ein solches Tripel ist „Berlin → Hauptstadt von → Deutschland“. In der Regel wird jedes Glied eines Tripels durch eine Referenz auf einen Eintrag in einer Ontologie beschrieben (das Objekt kann auch ein literal sein, also z.B. ein String oder eine Zahl). Was Ontologien sind, wie diese aufgebaut sind und wofür man diese nutzen kann, beschreiben wir in zukünftigen Artikeln, hier haben wir es auch schon einmal angerissen. Für heute ist es jedoch nur wichtig, zu verstehen, dass Inhalte im Internet durch Vokabulare beschrieben werden können, die auf anderen für alle zugänglichen Internetseiten zur Verfügung gestellt werden. Dies funktioniert mit einer Referenz in Form einer URL, also einer weltweit eindeutigen Internetadresse.

Auszeichnung von Webinhalten durch das Web

Wie im letzten Artikel beschrieben, ermöglicht es das Internet generell, Informationen für Menschen lesbar in Form von beispielsweise Text und Bildern darzustellen und abzurufen. Die Informationen werden dabei mithilfe der Hypertext Markup Language (HTML) ausgezeichnet, in der beispielsweise definiert wird, welcher Textteil eine Überschrift ist und welcher simpler Fließtext. Dabei geht es hauptsächlich um die Darstellungsweise im Browser. Menschen können die Inhalte dann wie durch den Browser dargestellt anschauen und dadurch die Semantik verstehen. Maschinen, auch im Bereich des IoT, können die Inhalte nicht verstehen. Durch die Entwicklungen des Semantic Web können die Inhalte semantisch beschrieben werden, um es auch Maschinen zu ermöglichen, Webinhalte zu verstehen und dadurch viele neue Use Cases zu ermöglichen, z.B. bessere Suchergebnisse oder Infoboxen auf der Suchergebnisseite.

Beispiel einer Infobox von Google - sie basiert auf semantischen Tripeln (im Google-Jargon: „Knowledge Graph“)

Um Inhalte semantisch auszuzeichnen, werden die in HTML vorliegenden Inhalte um semantische Attribute ergänzt. Zu diesem Zweck dienen beispielsweise Microdata, RDF in Attributes (RDFa) oder JSON Linked Data (LSON-LD). Bei Microdata und RDFa handelt es sich um Ergänzungen im HTML-Code, die direkt an der auszuzeichnenden Stelle vorgenommen werden. Dabei folgt es dem Anwendungsprinzip von HTML, einzelne Inhalte mit gewissen Attributen auszuzeichnen, siehe hier. Durch HTML werden Attribute wie „Überschrift_1“ oder „Überschrift_2“ definiert – durch Microdata und RDFa werden semantische Attribute ausgezeichnet. Es können so beispielsweise die verschiedenen Informationen eines online zum Verkauf angebotener Artikel ausgezeichnet werden (z.B. der Artikelname, der Preis oder der Hersteller). In folgender Abbildung ist dargestellt, wie durch RDFa (gelb markierte Zeilen) der Name eines angebotenen Artikels ausgezeichnet wird. Für den Menschen ist unverändert „Kaufen Sie den Staubsauger XF704 jetzt im Sonderangebot“ zu lesen, Maschinen wissen durch die Auszeichnung jedoch, dass es sich bei „Staubsauger XF704“ um den Artikelnamen handelt. Es wurde hierbei also direkt im HTML-Code ein für Maschinen lesbares und Menschen unsichtbares Attribut zum semantischen Verständnis des Textes hinzugefügt.

Anwendungsbeispiel von RDFa im Semantic Web [Quelle]

Durch JSON-LD werden ähnliche Ziele verfolgt, die Herangehensweise ist jedoch leicht unterschiedlich. Es werden nicht direkt Inhalte in HTML ausgezeichnet, die semantischen Ergänzungen werden dem HTML-Code in Form eines JSON-Dokuments (maschinenlesbares Textformat) angehängt. Durch das Auslesen des JSON-Dokuments bzw. der JSON-Dokumente innerhalb einer Internetseite wird beschrieben, um was es auf dieser Seite geht und welche Informationen dargestellt sind. Dies ermöglicht unter anderem einen optimierten Informationsgehalt in Bezug auf die Effektivität von Suchmaschinen.

Um den Artikelnamen auszuzeichnen, wird in der vorangegangenen Abbildung das Property „name“ eingefügt. Dabei handelt es sich um einen Eintrag eines Vokabulars / einer Ontologie, die vorab mithilfe von „vocab“ definiert wird – in diesem Beispiel die Ontologie schema.org. Durch eine Kombination von „vocab“ und „property“ erhält man eine URL, auf der eindeutig definiert ist, dass es sich hierbei um „the name of the item“ handelt. Schema.org ist also das referenzierte Vokabular und name ist der Eintrag innerhalb des Vokabulars.

JSON-LD in Action

In der Einleitung haben wir es schon angekündigt: Wir „machen uns unsere Hände schmutzig“ und gehen an den Quellcode dieser Internetseite! Dadurch wollen wir zeigen, wie wir unsere Seite mithilfe von JSON-LD semantisch ausgezeichnet haben und wollen somit zeigen, dass das gar nicht so schwierig ist. Vielleicht habt Ihr ja auch eine Internetseite, die ihr gerade für Suchmaschinen und andere Services im Internet semantisch hochwertiger auszeichnen wollen.

Um den Quellcode dieser Seite zu sehen, müsst ihr nur die Tastenkombination Strg-U drücken.

Ganz zu Beginn wird definiert, dass es sich bei dem Seitenquelltext um HTML-Code handelt („<html ….>“). Die letzten Zeichen schließen den HTML-Code („</html>“). Alles dazwischen wird ausgeführt bzw. angezeigt.

Der Code mit den Inhalten des Blogeintrags ist ohne Absätze in der ersten Zeile abgebildet. Darin könnt Ihr den Text der Seite, die darin enthaltenen Links oder Bilder nachschauen. Ein Link wird dem Text direkt als Attribut (=a) hinzugefügt. Der Link endet wie in folgender Abbildung zu sehen bei „</a>“. Durch das Attribut „href“ wird das Ziel des Links angegeben. Vielleicht findet ihr ja noch andere Links bzw. Hinweise wie z.B. „h4“ als Zeichen für unsere Zwischenüberschriften oder die Art und Weise der Uploads der Bilder.

Beispiel eines Links zu Wikipedia im Quellcode dieser Seite

Im Gegensatz zu HTML, RDFa oder Microdata handelt es sich bei JSON-LD nicht um Markup-Sprachen. Deshalb sind die semantischen Attribute mithilfe von JSON-LD am Ende des Quelltextes in Form eines Skripts zu finden. Darin wird maschinenlesbar durch JSON beschrieben, was auf dieser Seite zu finden ist. Es wird Webcrawlern dadurch ermöglicht, den Inhalt bzw. das Anliegen einer Website zu verstehen, um die Suchergebnisse verbessern zu können. Eine Suchmaschine wie Google kann durch die JSON-LD-Auszeichnung dieser Seite verstehen, dass es sich hierbei um einen Blogartikel zu einem bestimmten Thema handelt. Sucht ihr nun im Internet nach JSON-LD, ist es durch unsere Auszeichnung wahrscheinlicher, dass unser Text oben in den Suchergebnissen gerankt wird oder in Infoboxen vorkommt. Doch wie funktioniert das konkret?

JSON-LD Auszeichnung dieses Artikels

Durch das JSON-Format (Tutorial zu JSON) liegen die Attribute nicht offensichtlich als semantische Tripel vor, es sind jedoch trotzdem Tripel, die stets auf Ontologien referenzieren. Im Context wird die referenzierte Ontologie genannt, in diesem Fall erneut die Ontologie Schema.org. Der Type zeigt, um was es sich bei dieser Website handelt, nämlich einen Blogeintrag. Auf schema.org/BlogPosting kann man nun verschiedene mögliche Attribute eines Blogartikels finden. Da BlogPosting von verschiedenen Klassen der Ontologie erbt, können auch Attribute von Superklassen wie Article verwendet werden.

Screenshot von BlogPosting auf schema.org/Blogposting

Zuerst werden ein Bild, die Überschrift und eine alternative Überschrift definiert. Für das Genre wird auf eine andere Ontologie verwiesen. Darin geht es um semantische Merkmale geistigen Materials wie Artikeln oder Musik. Da diese Ontologie mit anderen Ontologien über Linked Data verknüpft ist, erhoffen wir uns durch sie ein besseres Verständnis des Genres als durch einen String „Semantic Web“ als Genre. Keywords haben wir jedoch als Strings hinzugefügt.

Als Publisher haben wir unseren Blog inklusive unserer Mailadresse genannt; als Autor nur mich selbst inklusive des Bilds, das Ihr auch am Ende dieses Artikels seht. Das Veröffentlichungsdatum und eine Beschreibung haben wir ebenfalls hinzugefügt. Falls Euch noch weitere Attribute einfallen, die wir hätten einfügen können, schreibt gerne in die Kommentare. Auch wenn euch ein Fehler aufgefallen ist, den wir gemacht haben, meldet euch auch gerne bei uns – gerne per Kommentar oder per Mail. Weitere Merkmale findet man auf schema.org mithilfe der Suchfunktion.

Referenzen
Portrait of Blogger
Nicolai Maisch
<  Previous
Wofür brauchen wir das Semantic Web? Eine Einführung
Next  >
Was ist eigentlich eine Ontologie? Eine Erklärung

Kommentare