So zeichnen Sie Ihre Website mit RDFa nach schema.org aus

Bei RDFa (Resource Description Framework in Attributes) handelt es sich um ein Datenformat, das vom World Wide Web Consortium (W3C) als Standard zur Einbettung von RDF-Aussagen in HTML, XHTML und verschiedenen XML-Dialekten empfohlen wird. Das Resource Description Framework (RDF) nutzen Programmierer, um Webseiteninhalte mit Metadaten näher zu spezifizieren. Auf diese Weise werden entsprechende Bedeutungszusammenhänge auch von Programmen wie Webbrowsern oder Suchmaschinen-Crawlern verstanden. Das RDF-Modell ist somit ein grundlegender Baustein des Semantic Webs. Als Modul von XHTML wurde RDFa bereits 2004 entwickelt. Eine offizielle Empfehlung des W3C für RDFa 1.0 folgte 2008. Kompatibel mit klassischem HTML und HTML5 ist RDFa seit der Version 1.1, die 2012 parallel zu einer reduzierten Einsteigervariante mit der Bezeichnung RDFa Lite eingeführt wurde. 

RDF in HTML

Grundsätzliche stellt RDFa nur eine von vielen Möglichkeiten dar, mit denen sich RDF-Aussagen notieren lassen. Dabei werden die entsprechenden Ausdrücke des Resource Description Framework in die Auszeichnungssprache HTML eingebettet, um für Menschen geschriebene Webseiteninhalte als strukturierte Daten maschinenlesbar aufzubereiten. Diese Einbettung erfolgt durch Attribute in HTML-Tags. Damit ist RDFa vergleichbar mit anderen Datenformaten zur semantischen Auszeichnung – wie beispielsweise Microformats oder Microdata. RDFa stellt dabei nur die Meta-Syntax zur semantischen Auszeichnung bereit. Um Bedeutungszusammenhänge mit Metadaten zu beschreiben, wird ein einheitliches Vokabular benötigt. Programmierern stehen dazu verschiedene Standards wie FOAF, SKOS, Dublin Core oder SIOC zur Verfügung. Google, Bing, Yahoo und Yandex empfehlen jedoch eine Auszeichnung nach schema.org – ein Vokabular, das in einem Gemeinschaftsprojekt der Suchmaschinenanbieter zur Vereinheitlichung strukturierter Daten entwickelt wurde. 

Das RDFa-Markup in der Anwendung

Bei der Einbettung vom Metadaten führt die RDFa-Spezifikation eine Reihe neuer Attribute ein, die das Repertoire der jeweiligen Dokumentenauszeichnungssprache (z.B. HTML, XHTML oder HTML5) erweitern. Folgende Liste zeigt die Attribute des RDFa-Lite-Subsets:

AttributBeschreibung
vocabDas vocab-Attribut definiert das gewünschte Vokabular, das der Auszeichnung von Elementen mit RDFa (z.B. schema.org) zugrunde liegt.
typeofMit dem typeof-Attribut werden Elementen bestimmte Schemata, sogenannte „types“  gemäß des gewählten Vokabulars zugeordnet.
propertyMit dem property-Attribut werden Elementen Eigenschaften zugewiesen.  
resourceDas resource-Attribut ermöglicht es Programmierern, Elementen individuelle   Bezeichnungen, sogenannte „identifier“, zuzuordnen.  
prefixDas prefix-Attribut gibt Programmieren die Möglichkeit, mehr als ein Vokabular anzugeben, falls die Begriffe des ersten Vokabulars für die gewünschte Auszeichnung nicht ausreichen. 

Als Trägerelemente für RDFa-Attribute eigenen sich in erster Linie HTML-Tags ohne eigene Semantik. Metadaten finden sich daher oft in div- oder span-Tags. Grundsätzlich lassen sich RDF-Aussagen via RDFa jedoch in alle HTML-Tags einbinden. Dies erfolgt in der Regel nach untenstehendem Grundschema:

Grundschema der RDFa-Syntax:

01<div vocab="http://schema.org/" typeof="Schema">
02  <span property="Eigenschaft">Textelement</span>
03<div>  

Postanschrift mit RDFa auszeichnen

Folgender Code zeigt einen Satz Kontaktdaten im klassischen HTML-Format, wie er auf zahlreichen Seiten im World Wide Web zu finden ist: 

HTML-Code einer Postanschrift:

01<p>
02  Google Inc.<br>
03  P.O. Box 1234<br>
04  Mountain View, CA<br>
05  94043<br>
06  United States<br>
07</p>

Während ein menschlicher Besucher auf den ersten Blick erkennt, dass es sich bei dem mit dem p-Tag definierten Textabsatz um eine Adressangabe im amerikanischen Format handelt, benötigen Programme wie Webbrowser und Suchmaschinen-Crawler zusätzliche Metadaten, um die Bedeutung der Informationen auslesen zu können:

RDFa Markup einer Postanschrift:

01<p vocab="http://schema.org/" typeof="PostalAddress"><br>
02  <span property="name">Google Inc.</span><br>
03  P.O. Box <span property="postOfficeBoxNumber">1234</span><br>
04  <span property="addressLocality">Mountain View</span>,<br>
05  <span property="addressRegion">CA</span><br>
06  <span property="postalCode">94043</span><br>
07  <span property="addressCountry">United States</span><br>
08</p>

In Zeile 01 dient das HTML-Tag <p> als Trägerelement für die RDFa-Attribute „vocab“ und „typeof“. Programme, die einen auf diese Art ausgezeichneten Code auslesen, erfahren somit, dass für alle Angaben innerhalb des p-Tags das Vokabular nach schema.org gilt und die enthaltenen Informationen dem Schema „PostalAddress“ (Postanschrift) zugeordnet werden. Laut schema.org ist definiert, dass jedes Schema mit spezifischen Eigenschaften versehen werden kann: Typisch für Postanschriften ist, dass sie bestimmte Adressangaben enthalten. Sollen diese maschinenlesbar ausgezeichnet werden, kommt das RDFa-Attribut „property“ zum Einsatz. Im aktuellen Beispiel sind die Adressangaben „name“, „postOfficeBoxNumber”, „addressLocality”, „addressRegion“, „postalCode“ und „addressCountry“ mit entsprechenden Werten als Eigenschaften von „PostalAddress“ ausgezeichnet. So kann auch ein Programm, das den HTML-Code ausliest, beurteilen, wie eine Information wie „Google Inc.“ oder „94043“ zu deuten ist.  

Webseiteninhalte mit RDFa für Rich Snippets auszeichnen

Relevant sind strukturierte Daten vor allem für die Websuche. Zeichnet ein Webseitenbetreiber die Informationen auf seiner Homepage semantisch aus, sind Suchmaschinen in der Lage, relevante Informationen zu extrahieren und in Darstellungsformen wie Rich Snippets zu verwenden. Dabei handelt es sich um Auszüge von Webseiteninhalten, mit denen sich Suchergebnisse erweitern lassen, sodass sie auf Suchergebnisseiten (SERPs) deutlich hervorstechen. In diesem Sinne trägt eine semantische Annotation zur Suchmaschinenoptimierung einer Website bei. Der Suchmaschinen-Marktführer Google unterstützt eine RDFa-Auszeichnung für Rich Snippets für die Datentypen Produkte, Rezepte, Erfahrungsberichte, Software und Newsartikel. Rich Snippet für Videos werden ausschließlich in aktuelleren Formaten wie Microdata und JSON-LD unterstützt. Sollen Rich Snippets für Veranstaltungen generiert werden, muss eine Auszeichnung mit JSON-LD vorliegen. Als Beispiel dafür, wie sich Webseiteninhalte für Rich Snippets aufbereiten lassen, soll hier die semantische Auszeichnung einer Produktbewertung vorgestellt werden. 

Produktbewertungen mit RDFa auszeichnen

Produktbewertungen, die als Rich Snippets in den SERPs erscheinen, beinhalten in der Regel den Namen des Produkts, ein Produktbild, ein Rating in Form einer Sternebewertung sowie einen Erfahrungsbericht inklusive Autorenname, Titel und Datum. Wie sich diese Informationen via RDFa maschinenlesbar auszeichnen lassen, zeigt der folgende Code: 

RDFa-Markup einer Produktbewertung:

01<div vocab="http://schema.org/" typeof="Product">
02  <img property="image" src="https://www.ionos.de/digitalguide/www.anbieter.de/produktbild.jpg" alt="Bildbeschreibung"/>
03  <span property="name">Name des Produkts</span>
04  <div property="review" typeof="Review"> Review:
05    <span property="reviewRating" typeof="Rating">
06      <span property="ratingValue">5</span> -
07    </span>
08    <b>"<span property="name">Titel der Bewertung</span>"</b> von
09    <span property="author" typeof="Person">
10      <span property="name">Name des Autors</span>
11    </span>, geschrieben am 
12    <meta property="datePublished" content="2006-05-04">4. Mai 2006
13    <div property="reviewBody">Bewertungstext</div>
14    <span property="publisher" typeof="Organization">
15      <meta property="name" content="Name des Herausgebers">
16    </span>
17  </div>
18</div>

In Codezeile 01 wird schema.org als dem Markup zugrundeliegendes Vokabular ausgezeichnet. Das typeof-Attribut definiert die Angaben von Zeile 01 bis 17 als zum Standardschema „Product“ gehörend. Produkte können nach Schema.org eine Reihe von Eigenschaften (properties) aufweisen. Im vorliegendem Beispiel werden dem Produkt ein Name (property="name"), ein Bild (property=“image“) und ein Erfahrungsbericht (property="review") zugeordnet und semantisch ausgezeichnet. Die RDFa-Syntax sieht vor, dass auch Eigenschaften als Schemata beschrieben und ihrerseits mit Eigenschaften versehen werden können. Dementsprechend lässt sich die Eigenschaft „review“ in Zeile 04 als Schema „Review“ definieren und näher spezifizieren.

Ausschnitt:

04  <div property="review" typeof="Review"> Review:

Viele Erfahrungsberichte beinhalten Sternebewertungen. Um diese maschinenlesbar auszuzeichnen wird dem Schema „Review“ die Eigenschaft „reviewRating“ zugeordnet, die sich wiederum als Schema „Rating“ mit der Eigenschaft "ratingValue" und einem konkreten Wert beschreiben lässt (Zeile 05 bis 06). 

Ausschnitt:

04  <div property="review" typeof="Review"> Review:
05    <span property="reviewRating" typeof="Rating">
06      <span property="ratingValue">5</span> -

Weitere Eigenschaften des Schemas „Review“ sind Titel (property="name"), Autor (property="author"), Veröffentlichungsdatum (property="datePublished") sowie der Bewertungstext (property="reviewBody") und eine Angabe zum Herausgeber (property="publisher"). Wobei Autor und Herausgeber wiederum durch eigene typeof-Attribute als spezifische Schemata (Person bzw. Organisation) definiert und mit Eigenschaften (z.B. „name“) versehen werden können. Dabei ist zu beachten, dass jedes untergeordnete typeof-Attribut innerhalb des HTML-Tags mit dem übergeordneten typeof-Attribut verschachtelt wird.

Hier zeigt sich die Komplexität des RDFa-Markups, das eine äußerst detaillierte semantische Annotation ermöglicht, aber dessen Verwendung im Gegenzug auch als deutlich aufwendiger gilt als die modernerer Datenformate wie JSON-LD.