Ratgeber: "Webentwicklung"

Informationen klassifizieren mit HTML5

HTML5 liefert eine neue Spezifikation zur näheren Beschreibung von Daten. Erfahren Sie, wie damit Ihre Informationen besser gefunden werden.

Informationen klassifizieren mit HTML5

© Internet Magazin

Informationen klassifizieren mit HTML5

Lesen Sie, mit welchen Klassifizierungen Sie......die meisten Ereignisse beschreiben können...wie Sie eigene Definitionen erstellen...wie Suchmaschinen mit den Informationen umgehen.

HTML5 Microdata - Mikrodaten also - ist eine der Neuerungen von HTML5, die bisher keine allzu große Aufmerksamkeit erregt hat. Dabei kann diese Funktion einen wesentlichen Beitrag bei der genaueren Klassifizierung von Informationen auf einer Website leisten. So ist es mit Microdaten möglich, Abschnitte innerhalb einer Site genau zu beschreiben. Mit diesen zusätzlichen Informationen können Suchmaschinen wie Google den Text auch genauer einordnen. Für die Anwendung von Microdaten gibt es kein eigenes HTML-Tag, es ist als Eigenschaft bereits existierender Elemente - in der Regel <span> und <div> - implementiert.

Ein erstes Beispiel

Der folgende Ausschnitt beschreibt den Abschnitt einer HTML-Website, in der sich eine Person vorstellt und auf der ein Link auf eine Website zu finden ist.

<div>
Hallo, mein Name ist Maximilian
Mustermann und ich bin Informatiker mit einem Diplom von der FH Karlsru-he. Meine Freunde nennen mich Max.
Ich habe auch eine Homepage unter<a href="http://www.maxmustermann.de">www.maxmustermann.de</a>.</div>

Dieser Code-Ausschnitt lässt sich mit einer Reihe von Attributen erweitern, welche den Sachverhalt auch für Crawler und Suchmaschinen transparenter machen. Der folgende Abschnitt zeigt, welche Erweiterungen HTML5 mit sich bringt.

<div itemscope itemtype=
"http://data-vocabulary.org/Person">
Hallo, mein Name ist<span itemprop="name">Maximilian
Mustermann</span> und ich bin<span itemprop="title">Informatiker</
span> mit einem Diplom von der<span itemprop="affiliation">FH Karls
ruhe</span>. Meine Freunde nennen mich<span itemprop="nickname">Max</span>.
Ich habe auch eine Homepage unter<a href="http://www.maxmustermann.de" itemprop="url">www.maxmustermann.de</a></div>

Im ersten div-Tag wird die Art der Beschreibung festgelegt und ein Verweis auf das Vokabular angegeben. Es handelt sich dabei um die Beschreibung einer Person. Die folgenden Eigenschaften, die jeweils die Person näher beschreiben, werden jeweils durch ein <span>-Tag identifiziert.

Dies sind im Einzelnen

  • der Name der Person
  • der Rufname der Person
  • die Jobbezeichnung
  • die ausstellende Hochschule oder aktuelle Arbeitgeber
  • sowie ein Verweis auf die Website von Max Mustermann.

In der Beschreibung für eine Person gibt es noch eine Reihe weiterer Attribute. Eine komplette Übersicht samt Beschreibung der einzelnen Attribute finden Sie unter data-vocabulary.org. Für die Beschreibungen gibt es mehrere Quellen im Internet, wobei schema.org und das  zuvor verwendete data-vocabulary.org die wohl bekanntesten sind. Beide liefern die Definitionen in englischer Sprache, wobei die Verantwortlichen von schema.org ge-plant haben, Ihre Website noch in weitere zu übersetzen. Für die Klassifikation Ihrer Website ist dies jedoch nicht relevant, da die sprachliche Transformation von Google oder den anderen Suchmaschinen entsprechend bewerkstelligt wird.

Gliederung der Beschreibung

Für die Beschreibung von Objekten stehen Ihnen insgesamt fünf Elemente zur Verfügung: itemscope, itemtype, itemid, itemprop und itemref. Das erste - itemscope - steht hierarchisch an der Spitze und weist die Suchmaschinen Crawler auf die verwendete Beschreibung hin. Das Element itemtype hilft bei der Konkretisierung und gibt an, was beschrieben wird und wie dies geschehen soll. Dazu fügen Sie dem Objekt noch eine URL mit dem verwendeten Vokabular hinzu. Im Beispiel ist die Beschreibung einer Person abgebildet. Es gibt jedoch noch zahlreiches weiteres Vokabular, mit dem Sie einen Text klassifizieren können.

Auf der untersten Ebene schließlich kommt das Element itemprop zum Einsatz, mit dem Sie die Eigenschaften der markierten Zeichenkette exakt klassifizieren. Neben einem reinen Text bietet Microdata auch die Möglichkeit, URLs oder Zeitangaben zu kennzeichnen. Die beiden Elemente, welche im ersten Beispiel noch keine Verwendung gefunden haben, sind itemid und itemref. Das erste beschreibt den eindeutigen Identifier eines Elements und ist von der Idee her mit der ID in HTML und CSS gleichzusetzen.

Das Element itemref kommt zum Einsatz, wenn sich die Gruppierung von Elementen aufgrund der Struktur der Seite nicht so einfach realisieren lässt. Im folgenden Beispiel sehen Sie eine Reihe von Terminen zweier Gruppen. Diese sind nach Tagen sortiert. Somit sind beide Gruppen vermischt und es kann nur eine Klassifizierung nach der Zeit, nicht jedoch nach den einzelnen Musikern erfolgen. In diesem Fall kommt itemref zum Einsatz. Mit Hilfe von IDs werden alle Tabelleneinträge eindeutig gekennzeichnet; im Anschluss wird über itemref die logische Verbindung hergestellt. Danach ist es auch für die Suchmaschine transparent, welche Termine zu welcher Gruppe gehören.

<h1>Geplante Konzerte</h1><table><col itemscope itemref="a0 a1 a2"></col><col itemscope itemref="b0 b1 b2"></col><tr><th>Auftretende Gruppen</th><td id=a0 itemprop=band>Singenden
Tomaten</td><td id=b0 itemprop=band>Röhrenden
Elche</td></tr><tr><th>Termine</th><td id=a1><time itemprop=date
datetime=2012-07-01>01.07.2012</time></td><td id=b1><time itemprop=date
datetime=2012-07-25>25.07.2012</time></td></tr><tr><th>Lokation</th><td id=a2 itemprop=location>Haus der
Tomate</td><td id=b2 itemprop=location>Im
Wildgehege</td><tr></table>

Jeder der Tabelleneinträge wird mit einer ID versehen, von a0 bis a2 und b0 bis b2. Mit Hilfe von itemref wird der Zusammenhang hergestellt. Die Einträge a0 bis a2 gehören zu den "Singenden Tomaten" und stellen deren Konzerttermin dar, die b-Einträge entsprechend das Konzert der "Röhrenden Elche". Eine komplette Definition der Elemente finden Sie im offiziellen Draft-Dokument auf der W3-Site .

Verschachtelte Struktur

Im ersten Beispiel haben Sie eine flache Struktur gesehen, in der nur eine Beschreibung zum Einsatz gekommen ist. Abhängig von den Inhalten des Dokuments kann es jedoch auch eine mehrstufige Beschreibung geben, etwa wenn Sie zu einer Person auch noch die Adresse innerhalb des Textes angeben. In diesem Fall kommt sowohl das Vokabular der Person als auch das Vokabular der Adresse zum Einsatz.

<div itemscope itemtype="http://
data-vocabulary.org/Person">
Hallo, mein Name ist ...<section itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
Seit dem 1. April wohne ich in der<span itemprop="street-address">
Musterstraße 12</span> in<span itemprop="postal-code">12345</span><span itemprop="locality">
Musterhausen</span>.</section></div>

Die Adresse sollten Sie als eigenen Abschnitt kennzeichnen. Dies wurde in diesem Beispiel über ein <section>-Tag realisiert. Innerhalb dieses Bereichs findet die Beschreibung dann analog zum ersten Abschnitt über itemprop-Elemente statt.

Datum und Uhrzeit

Mit Microdata können Sie auch Zeitangaben klassifizieren. Dafür steht Ihnen das time-Element mit der datetime-Eigenschaft zur Verfügung. Die Zeitangabe innerhalb des time-Tags erfolgt im ISO-Datumsformat, wobei die Verwendung der Zeitzone optional ist. Damit besteht eine solche Angabe zumindest aus einem Datum sowie einer Uhrzeit im 24-Stunden-Format.

<time itemprop="startDate" datetime=
"2012-05-01T19:00+02:00">01. Mai 2012, 19:00 h</time>

Im Beispiel wird der 01. Mai 2012 abgebildet mit der Angabe 19 Uhr als Uhrzeit. Diese bezieht sich auf die Zeitzone +2. Das time-Tag besitzt ein Attribut itemprop mit der Ausprägung startDate sowie die Zeitangabe, die mit datetime gekennzeichnet ist.

Verborgene Inhalte

Die Crawler der Suchmaschinen sind auch in der Lage, Zusammenhänge zwischen verschiedenen Inhalten zu erkennen. Informationen, die dem Besucher verborgen bleiben sollen, werden auch durch den Crawler nicht zu Tage gebracht.

Allerdings helfen diese Informationen den Crawlern oftmals, den Zusammenhang besser zu verstehen und damit eine sinnvollere Klassifizierung durchzuführen. In solch einem Kontext macht es dann Sinn, die als Beschreibung verwendeten Metatags mit in die Klassifizierung einzubeziehen. Das folgende Beispiel stellt das absolute Ergebnis einer Prüfung dar. Damit die Wertigkeit von 85 Punkten für die Suchmaschine richtig einzuordnen ist, fügen Sie als zusätzliche Information die Angabe über die maximal zu erreichende Punktzahl ein - im Beispiel sind dies 100. Damit dies im Zusammenhang mit der vorherigen Information gesehen wird, sollten Sie die Beschreibung auf diese Daten ausweiten.

<div itemprop="rating" itemscope
itemtype="http://data-vocabulary.org/Rating">
Bewertung: <span itemprop="value">
85</span><meta itemprop="best" content="100"
/></div>

Die Abbildung findet über die Eigenschaft best aus dem Vokabular von Rating statt. Dieses gibt die Maximalpunktzahl von 100 an, die ansonsten aber den Besuchern der Website verborgen bleibt.

Ähnlich verhält es sich mit der Angabe von Zeitdauern. Hier stellt Ihnen Microdata die Eigenschaft duration zur Verfügung. Die syntaktisch korrekte Abbildung erfolgt im ISO-Format für Zeitspannen.

Dauer:<span>2 Stunden, 45 Minuten<meta itemprop="duration" content="PT2H45M" /></span>

Ein Metatag können Sie somit nicht nur für die Klassifizierung von Inhalten einsetzen, sondern auch für nähere Erläuterungen, wie etwa die maximal zu erreichende Punktzahl oder die Kennzeichnung einer Angabe als Dauer.

Weitere Objekte

Insgesamt gibt es auf schema.org mehr als zwanzig unterschiedliche Typen für die Beschreibung der Objekte. Eine komplette Liste finden Sie online unter schema.org/docs/full.html. Jedes Element wird auf einer eigenen Website dargestellt und enthält alle Eigenschaften sowie deren geplante Verwendung. Etwas weniger umfangreich geht es auf der Website von data-vocabulary.org zu. Neben den bereits kennengelernten gibt es noch sieben weitere, also insgesamt neun Spezifikationen. Auch zu diesen Typen gibt es eine Übersicht unter data-vocabulary .

Eigene Definitionen erstellen

Auf den Websites von data-vocabulary.org und schema.org finden Sie die Beschreibung einer Reihe von häufig verwendeten Objekten sowie deren Eigenschaften. Mit diesen Klassifizierungen sollten Sie die meisten Dinge und Ereignisse beschreiben können. Sollten Sie auf diesen Seiten nicht fündig werden, haben Sie mehrere Optionen:

  • Sie tun nichts und verwenden für diesen Textabschnitt keine Mikrodaten.
  • Nicht immer gibt es die notwendige Exaktheit bei der Beschreibung. Ansonsten müsste es eine nahezu endlose Anzahl von Schemata geben. Nutzen Sie deshalb die treffendste Kategorie, wenn es keine optimal passende gibt.
  • Sollten Sie eine ganz exakte Beschreibung benötigen, können Sie auch ein bestehendes Schema erweitern oder ein komplett neues erstellen. Entsprechende Hinweise hierzu finden Sie auf der Website von schema.org .

Sicht der Suchmaschine

Nachdem Sie Ihre Website mit den entsprechenden Schlagworten versehen haben, sollten Sie im Testlauf prüfen, ob Ihre Beschreibungen richtig gesetzt sind und von den Crawlern erkannt werden.

Google stellt hierfür das Tool Rich Snippets Testing Tool zur Verfügung. Dabei handelt es sich um ein Online-Werkzeug, das Ihnen im Website-Administratorbereich zur Verfügung steht. Geben Sie dort die URL Ihrer Website ein und Sie erhalten eine strukturierte Darstellung der beschriebenen Objekte.

Das komplette Beispiel der Beschreibung von Max Mustermann bereiten Google und andere Suchmaschinen in einer strukturierten Form auf. Das Ergebnis sehen Sie im Kasten "Datenextrakt auf Basis von Microdata".

Wenn Sie dieses Online-Werkzeug zur Validierung Ihrer Seiten verwenden, sollten Sie sich auch noch die Tipps und Tricks von Google zu diesem Thema ansehen. Damit wird Ihnen der eine oder andere Test deutlich erleichtert.

Fazit

Wenn Sie eindeutige Inhalte auf Ihrer Site haben, sollte die Suchmaschine auch ohne Ihre Hilfe bereits recht gute Ergebnisse erzielen. Mit Hilfe von Microdata können Sie die wichtigsten Informationen strukturiert an die Suchmaschine übergeben. Auch Google nutzt diese Daten für die Auswertung der Websites und die Verbesserung der Suchergebnisse - ein Grund mehr, sich mit diesem Thema zu beschäftigen.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".