Da­ten­struk­tu­ren bilden die Grundlage einer jeden Webseite. Bereits der HTML-Code be­inhal­tet Aus­zeich­nungs­ele­men­te (Tags), mit denen sich einzelnen Text­ab­schnit­ten bestimmte Ei­gen­schaf­ten, Zu­ge­hö­rig­kei­ten oder Dar­stel­lungs­for­men zuordnen lassen. Web­ent­wick­ler de­fi­nie­ren auf diese Art Absätze, Über­schrif­ten, Auf­zäh­lun­gen oder Hy­per­links, geben Fettungen oder Kur­si­vie­run­gen vor und kenn­zeich­nen Elemente als Grafiken, Tabellen oder Videos. Programme, die den Code auslesen, erhalten de­tail­lier­te In­for­ma­tio­nen über die Struktur eines HTML-Dokuments und die Dar­stel­lung der per Tag aus­ge­zeich­ne­ten Elemente. Welche Inhalte diese genau be­reit­stel­len, wird beim ma­schi­nel­len Auslesen al­ler­dings nicht erfasst. Nehmen wir das Beispiel eines Nach­rich­ten­ar­ti­kels auf einer In­for­ma­ti­ons­platt­form. Die linke Dar­stel­lung zeigt, welche In­for­ma­tio­nen ein Programm erfassen würde, die rechte, wie ein Mensch den Nach­rich­ten­ar­ti­kel auswerten würde:

Während ein mensch­li­cher In­ter­net­nut­zer auf einen Blick erfasst, dass es sich bei der Headline um den Titel des Artikels handelt, die Sub­head­line den Autor nennt und das kursive Text­ele­ment das Datum der Ver­öf­fent­li­chung zeigt, sieht ein Programm, das die Webseite ausliest, nur die In­for­ma­tio­nen, die im HTML-Code aus­ge­zeich­net wurden: Headline (<h1>), Sub­head­line <h2>, Italic <i>. Relevant wird dieser Sach­ver­halt, wenn es sich bei dem Programm um den Web­craw­ler einer Such­ma­schi­ne handelt, der dabei helfen soll, die Relevanz der Webseite für Such­an­fra­gen ein­zu­schät­zen. Viele Web­sei­ten­be­trei­ber reichern ihre HTML-Dokumente daher mit ma­schi­nen­les­ba­ren se­man­ti­schen In­for­ma­tio­nen an, durch die sich die Bedeutung der einzelnen Inhalte de­fi­nie­ren lässt. Man spricht dann von struk­tu­rier­ten Daten.

Wozu werden struk­tu­rier­te Daten benötigt?

Die Idee, Web­sei­ten­da­ten so zu struk­tu­rie­ren, dass in mensch­li­cher Sprache for­mu­lier­te In­for­ma­tio­nen von Pro­gram­men ver­ar­bei­tet werden können, geht auf das Konzept des Semantic Webs zurück. Richtig an­ge­wen­det, er­mög­li­chen struk­tu­rier­te Daten das ma­schi­nel­le Auslesen von Web­sei­ten­in­hal­ten. Relevant ist dies vor allem für text­ba­sier­te Such­ma­schi­nen wie Google, Bing oder Yahoo. Eine ent­spre­chen­de Aus­zeich­nung vor­aus­ge­setzt, sind diese in der Lage, se­man­ti­sche In­for­ma­tio­nen aus­zu­wer­ten und in eigenen Dar­stel­lungs­for­men wie dem Knowledge Graph oder den Rich Snippets zu ver­ar­bei­ten. Vor allem letzt­ge­nann­te sind für Web­sei­ten­be­trei­ber von großer Bedeutung.

Bei Rich Snippets handelt es sich um Auszüge von Web­sei­ten­in­hal­ten, die neben den Ba­sis­in­for­ma­tio­nen URL, Title und De­scrip­ti­on auf den Such­ergeb­nis­sei­ten (SERPs) angezeigt werden. Vor­aus­set­zung dafür ist, dass alle re­le­van­ten Inhalte vom Web­sei­ten­be­trei­ber im HTML-Code ge­kenn­zeich­net und einem be­stimm­ten In­for­ma­ti­ons­typ zu­ge­ord­net wurden. Aktuell ver­ar­bei­tet der Such­ma­schi­nen-Markt­füh­rer Google struk­tu­rier­te Daten, um Rich Snippets für folgende Da­ten­ty­pen dar­zu­stel­len:

  • Pro­dukt­in­for­ma­tio­nen: Preis, Ver­füg­bar­keit, Bewertung und Er­fah­rungs­be­rich­te
  • Rezepte: Bild, Zu­be­rei­tungs­zeit, Kalorien und Bewertung
  • Er­fah­rungs­be­rich­te: Re­stau­rants, Filme, Geschäfte etc.
  • Events: Musicals, Konzerte, Aus­stel­lun­gen oder Festivals inklusive Ver­an­stal­tungs­zeit
  • Software: Bewertung, Preis, Er­fah­rungs­be­rich­te
  • Videos: Be­schrei­bung und Bild­vor­schau
  • Nach­rich­ten­ar­ti­kel: Über­schrift, Ver­öf­fent­li­chungs­da­tum, Au­toren­in­for­ma­ti­on und Bild

Für Web­sei­ten­be­trei­ber haben Rich Snippets den Vorteil, dass sie we­sent­lich mehr Raum in der Such­ergeb­nis­lis­te einnehmen, somit her­aus­ste­chen und zu höheren Klick­ra­ten führen. Erweitern lässt sich die Dar­stel­lung der Such­ergeb­nis­se zudem durch Bread­crumbs (Brot­kru­men­na­vi­ga­ti­on) und die Sitelinks Search Box.

Nach eigenen Aussagen spielt Google die Sitelinks Search Box bei na­vi­ga­tio­na­len Such­an­fra­gen aus, bei denen sich die gesuchte Website aus der Anfrage (Brand, Mar­ken­na­me oder URL) bereits ableiten lässt, das genaue Ziel innerhalb derselben aber noch unklar ist. In­ter­net­nut­zern wird damit er­mög­licht, Websites direkt in den SERPs zu durch­su­chen und so Klicks auf dem Weg zur konkreten Zielseite zu sparen. Für Web­sei­ten­be­trei­ber bieten Sitelinks inklusive Search Box den Vorteil, dass ein Such­ergeb­nis, das um solche Elemente erweitert wurde, we­sent­lich mehr Platz in den SERPs einnimmt und damit auf­fäl­li­ger ist.

Bread­crumbs stellen die Position eines Such­tref­fers in der Struktur einer Webseite dar und geben dem Such­ma­schi­nen­nut­zer eine Ori­en­tie­rungs­hil­fe:

Welche Such­ergeb­nis­se durch er­gän­zen­de Dar­stel­lungs­ele­men­te erweitert werden, liegt im Ermessen des Such­ma­schi­nen-Anbieters. Es empfiehlt sich jedoch, eigene Webseiten ent­spre­chend aus­zu­zeich­nen, da Such­ma­schi­nen struk­tu­rier­te Daten benötigen, um überhaupt Rich Snippets, Bread­crumbs oder eine Sitelinks Search Box zu ge­ne­rie­ren.

Daten auf der eigenen Website struk­tu­rie­ren

Um Inhalte durch struk­tu­rier­te Daten ma­schi­nen­les­bar auf­zu­be­rei­ten, stehen Web­sei­ten­be­trei­bern seit geraumer Zeit drei Stan­dard­for­ma­te zur Verfügung: Mi­cro­for­mats, RDFa und Microdata. Alle drei Formate zur Da­ten­struk­tu­rie­rung basieren auf se­man­ti­schen Aus­zeich­nun­gen, die direkt im HTML-Code vor­ge­nom­men werden. Je nach Format kommen dabei klas­si­sche HTML-Attribute oder neue Aus­zeich­nungs­ele­men­te zum Einsatz. Seit einigen Jahren wird auch zunehmend das Da­ten­for­mat JSON-LD genutzt, das die kom­for­ta­ble An­no­ta­ti­on innerhalb eines Skripts er­mög­licht.

Mi­cro­for­mats

Das Aus­zeich­nungs­for­mat Mi­cro­for­mats (deutsch: Mi­kro­for­ma­te) dient der se­man­ti­schen Aus­zeich­nung von HTML- und XHTML-Do­ku­men­ten. Dabei kommen klas­si­sche HTML-Attribute wie class, rel und rev zum Einsatz, die sich aus dem Web­sei­ten­code ex­tra­hie­ren lassen und Pro­gram­men wie Web­craw­lern er­mög­li­chen, einfache se­man­ti­sche In­for­ma­tio­nen aus­zu­le­sen. Eine klas­si­sche Anwendung ist die Aus­zeich­nung von Kon­takt­in­for­ma­tio­nen mit dem Mi­cro­for­mat hCard, das als class="vcard" in den HTML-Code ein­ge­bun­den wird:

Klas­si­sche Aus­zeich­nung von Kon­takt­in­for­ma­tio­nen in HTML

01<div>
02<div>Vorname Nachname</div>
03<div>Firma</div>
04<div>TeĀ­leĀ­fonĀ­numĀ­mer</div>
05<a href="http://homepage.de/">http://homepage.de/</a>
06</div>

Aus­zeich­nung von Kon­takt­in­for­ma­tio­nen mit dem Mi­cro­for­mat hCard

01<div class="vcard">
02<div class="fn">Vorname Nachname</div>
03<div class="org">Firma</div>
04<div class="tel">TeĀ­leĀ­fonĀ­numĀ­mer</div>
05<a class="url" href="http://homepage.de/">http://homepage.de/</a>
06</div>

Während die Kon­takt­in­for­ma­tio­nen im reinen HTML-Mark-up lediglich als un­spe­zi­fi­sche div-Elemente aus­ge­zeich­net werden, er­mög­licht die Ein­bin­dung des Mi­cro­for­mats hCard über das HTML-Attribut class="vcard" eigene se­man­ti­sche An­no­ta­tio­nen für einzelne In­for­ma­tio­nen – bei­spiels­wei­se Namen, Or­ga­ni­sa­tio­nen oder Te­le­fon­num­mern. Vorteil dieser Art der Aus­zeich­nung ist die einfache Anwendung durch bereits bekannte HTML-Attribute. Dies begrenzt die Mög­lich­kei­ten se­man­ti­scher An­no­ta­tio­nen durch Mi­cro­for­mats jedoch auf eine nicht er­wei­ter­ba­re Auswahl fest de­fi­nier­ter Elemente. Zudem kann die Ver­wen­dung des class-Attributs zu Kon­flik­ten mit CSS führen. Eine API zur Ex­trak­ti­on von Daten wird bei Mi­cro­for­mats nicht un­ter­stützt.

RDFa

RDFa steht für „Resource De­scrip­ti­on Framework in At­tri­bu­tes“. Das W3C empfiehlt dieses Format, um RDF-State­ments in HTML, XHTML und ver­schie­de­ne XML-Dialekte ein­zu­bet­ten. Statt auf klas­si­sche HTML-Attribute zu setzten, führt das Format RDFa neue Attribute ein, die eine komplexe se­man­ti­sche An­no­ta­ti­on er­mög­li­chen. Das folgende Beispiel zeigt Kon­takt­in­for­ma­tio­nen als struk­tu­rier­te Daten im Format RDFa:

Aus­zeich­nung von Kon­takt­in­for­ma­tio­nen mit RDFa

01 <div xmlns:v="http://rdf.data-voĀ­caĀ­buĀ­laĀ­ry.org/#" typeof="v:Person">
02 <div property="v:name">Vorname Nachname</div>
03 <div property="v:afĀ­fiĀ­liaĀ­tiĀ­on">Firma</div>.
04 <div property="v:tel">TeĀ­leĀ­fonĀ­numĀ­mer</div>
05 <a href="http://homepage.de" rel="v:url">www.homepage.de</a>.
06 </div>

Werden Daten im Format RDFa aus­ge­zeich­net, muss zu Beginn der XML-Namespace definiert werden. Das Attribut typeof bestimmt das Subjekt einer RDF-Aussage und gibt an, mit welchem Datentyp das Subjekt as­so­zi­iert wird. Das Attribut property bestimmt das Prädikat der Aussage und gibt eine Ei­gen­schaft für den Inhalt eines Elements an. Vorteile der Da­ten­struk­tu­rie­rung via RDFa sind die hohe Kom­ple­xi­tät der An­no­ta­ti­on und die Mög­lich­keit, ein eigenes Vokabular zu de­fi­nie­ren. Durch Präfixe kann der Code kompakt gehalten werden. RDFa un­ter­stützt ein DOM API (Document Object Model Ap­pli­ca­ti­on Pro­gramming Interface), mit dem sich struk­tu­rier­te Daten einer Webpage ex­tra­hie­ren und für in­ter­ak­ti­ve Ap­pli­ka­tio­nen nutzen lassen. Ein Nachteil ist die Aus­rich­tung auf XML und XHTML, auch wenn RDFa mitt­ler­wei­le in HTML5 ein­ge­bet­tet werden kann. Ein stan­dar­di­sier­tes Vokabular für die An­no­ta­ti­on mit RDFa findet sich auf schema.org. Eine aus­führ­li­che Anleitung bietet das Tutorial: Aus­zeich­nung mit RDFa nach Schema.org.

Microdata

Bei Microdata (Mi­kro­da­ten) handelt es sich um ein separat de­fi­nier­tes HTML5-Modul, das das be­stehen­de Vokabular der Aus­zeich­nungs­spra­che um Attribute erweitert, die der Ein­bet­tung se­man­ti­scher An­no­ta­tio­nen dienen. Wie Mi­cro­for­mats und RDFa verwendet auch dieses Format einfache Attribute in HTML-Tags, um Elementen Ei­gen­schaf­ten zu­zu­wei­sen. Die Microdata-Syntax basiert auf einem Vokabular, mit dem sich Elemente (so­ge­nann­te Items) als Namen-Wert-Paare be­schrei­ben lassen. So bietet das Mark-up-Format einen Kom­pro­miss zwischen moderater Kom­ple­xi­tät, Fle­xi­bi­li­tät und Er­wei­ter­bar­keit. Microdata un­ter­stützt einen nativen JSON-Export zur Über­tra­gung und Spei­che­rung von struk­tu­rier­ten Daten und die Microdata DOM API. Auch Microdata ist mit dem Vokabular von schema.org kom­pa­ti­bel. An­wen­dungs­bei­spie­le finden Sie im wei­ter­füh­ren­den Tutorial: Aus­zeich­nung mit Microdata nach Schema.org.

JSON-LD

Bei JSON-LD handelt es sich um den neuesten Standard für die se­man­ti­sche Aus­zeich­nung von Web­sei­ten­da­ten. Die Abkürzung steht für „Ja­va­Script Object Notation for Linked Data“, sprich die JSON-basierte Se­ria­li­sie­rung für verlinkte Daten. Google feiert JSON-LD als ein­fachs­tes Mark-up-Format, un­ter­stützt es jedoch noch nicht für alle Da­ten­ty­pen. Anders als Mi­cro­for­mats, RDFa und Microdata basiert JSON-LD nicht auf At­tri­bu­ten in HTML-Tags. Statt­des­sen wird ein Block mit JSON-Daten in einem Skript an be­lie­bi­ger Stelle des HTML-Codes ein­ge­bun­den. Wie das funk­tio­niert und was bei der Aus­zeich­nung mit JSON-LD zu beachten ist, zeigt das Tutorial: Aus­zeich­nung mit JSON-LD nach Schema.org.

Das Projekt Schema.org

Initiiert von den Such­ma­schi­nen-Markt­füh­rern Google, Bing, Yahoo und Yandex hat sich unter dem Namen Schema.org eine kol­la­bo­ra­ti­ve Community gebildet, die sich eine Ver­ein­heit­li­chung der se­man­ti­schen An­no­ta­ti­on von Web­sei­ten­in­hal­ten zur Aufgabe gemacht hat. Unter der gleich­na­mi­gen Website bietet das Ge­mein­schafts­pro­jekt ein ein­heit­li­ches Set an Schemata für struk­tu­rier­te Daten an. Schema.org un­ter­stützt die Da­ten­for­ma­te RDFa, Microdata und JSON-LD. Eine de­tail­lier­te Be­schrei­bung des Projekts bietet der ver­tie­fen­de Artikel zum Thema Schema.org.

Tipp: Mit Google struk­tu­rier­te Daten testen

Die Aus­zeich­nung von HTML-Do­ku­men­ten durch se­man­ti­sche An­no­ta­tio­nen bedarf eines Fin­ger­spit­zen­ge­fühls. Um Fehler zu vermeiden, empfiehlt es sich, den Quellcode einer Webseite schritt­wei­se zu erweitern und die Aus­zeich­nun­gen nach jedem Schritt zu va­li­die­ren. Google stellt dazu das kos­ten­lo­se Struc­tu­red Data Testing Tool zur Verfügung. Web­sei­ten­be­trei­ber können darin einzelne Code-Schnipsel oder die URL einer Webseite eingeben und auf Fehler im Quellcode über­prü­fen. Darüber hinaus bietet der Such­ma­schi­nen-Mark­füh­rer mit den Data High­ligh­ter ein Tool, mit dem sich Daten direkt auf der Webseite im Browser taggen lassen. Dazu werden ent­spre­chen­de Bereiche einfach mit der Maus markiert und mit einem Schlag­wort versehen. Zu beachten ist jedoch, dass bei dieser Art der se­man­ti­schen An­no­ta­ti­on keine direkten Aus­zeich­nun­gen im Quelltext vor­ge­nom­men werden. Die getaggten Bereiche können somit nur von Google aus­ge­le­sen und für er­wei­ter­te Dar­stel­lungs­for­men verwendet werden. Anderen Such­ma­schi­nen wie Bing oder Yahoo ist es nicht möglich, die in­halt­li­chen Zu­sam­men­hän­ge zu erfassen.

Zum Hauptmenü