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

Microdata ist eine HTML5-Spezifikation der WHATWG (Web Hypertext Application Technology Working Group). Das Datenformat bietet eine Meta-Syntax zur Auszeichnung strukturierter Daten, die es Webseitenbetreibern ermöglicht, Inhalte mit Metadaten anzureichern, indem semantische Zusammenhänge maschinenlesbar annotiert werden. Von Programmen wie Web-Crawlern oder Browsern ausgelesen, bilden diese Metadaten die Grundlage für erweiterte Darstellungsformen oder eine Aufbereitung von Webseiteninhalten durch Assistenzsysteme wie Screenreader. Relevant sind strukturierte Daten zudem für die Suchmaschinenoptimierung, da semantische Annotationen die Indexierung einer Webseite erleichtern und es ermöglichen, Suchergebnisse mit Zusatzinformationen anzureichern. Bei der Datenstrukturierung stützt sich Microdata auf ein einheitliches Vokabular nach schema.org.

Microdata im Vergleich zu anderen Datenformaten

Während sich die Netzgemeinde darauf einigen kann, dass HTML semantischer werden muss, ist die Wahl des genauen Datenformats zur Auszeichnung von Metadaten nach wie vor umstritten. Als separates Modul für HTML5 wurde Microdata ursprünglich als Alternative zum damaligen Standard RDFa eingeführt, dem vom W3C empfohlenen Format zur Beschreibung von Metadaten in HTML und XHTML. Ziel war eine vereinfachte Syntax bei vergleichbarer Funktionalität. Ein Vorzug ist zudem die Nähe zur neusten HTML-Version. An Bedeutung gewann Microdata durch das Projekt schema.org – einer gemeinsamen Initiative der Suchmaschinenanbieter Google, Bing, Yahoo und Yandex, die ausgehend vom Microdata-Markup ein einheitliches Vokabular für die semantische Annotation zur Verfügung stellt. Galt Microdata lange Zeit als bevorzugtes Datenformat des Suchmaschinen-Marktführers Google, liest sich diese Empfehlung heute weniger verbindlich. Neben Microdata unterstützt das schema.org-Vokabular nach wie vor eine Auszeichnung mit RDFa. Zudem rückt mit JSON-LD ein neues skriptbasiertes Markup-Format in den Fokus. Dieses wird von Google jedoch noch nicht für alle Datentypen unterstützt. Microdata bleibt somit aktuell.

Die Microdata-Syntax

Das Grundprinzip der Microdata-Syntax basiert auf Namen-Wert-Paaren, sogenannten Items, und lässt sich in drei Schritten erklären: Zuerst wird ein Element eingegrenzt und als Item gekennzeichnet. Diesem Item wird im Anschluss ein bestimmter Typ aus dem schema.org-Repertoire zugewiesen. Ist der Item-Typ definiert, lassen sich ihm verschiedene Eigenschaften (Properties) zuordnen. Diese Auszeichnung erfolgt mit den HTML5-Attributen itemscope, itemtype und itemprop:

  • itemscope: Das HTML5-Attribut itemscope wird innerhalb eines div-Tags verwendet, um einen bestimmten Bereich als Item zu definieren. Dieses Item wird mittels itemtype und itemprop näher bestimmt.
  • itemtype: Das HTML5-Attribut itemtype ist auf alle Elemente anwendbar, die mit dem itemscope Attribut ausgezeichnet wurden. Es dient dazu, auf ein vordefiniertes Schema zu verweisen. So lassen sich relevanten Elementen auf einer Webseite allgemeingültige Typen nach Schema.org zuordnen, die von allen gängigen Suchmaschinen verarbeitet werden können. 
  • itemprop: Das HTML5-Attribut itemprop gibt eine Eigenschaft eines zuvor genannten itemtypes an. Welche Eigenschaften dem jeweiligen itemtype zugeordnet werden können, lässt sich der Schema.org-Website entnehmen.

Die Einbindung der Attribute itemscope, itemtype und itemprop in den HTML-Code erfolgt nach folgendem Grundschema:

Grundschema des Microdata-Markups für ein Item: 

<div itemscope itemtype="http://schema.org/Typ">
<span itemprop="Eigenschaft">Item</span>
</div>

Das Microdata-Markup in der Anwendung

Wie andere Formate zur semantischen Auszeichnung von HTML-Dokumenten stützt sich auch Microdata auf eine Reihe klassischer HTML-Tags. Grundsätzlich sind Microdata-Attribute dabei unabhängig vom jeweiligen HTML-Tag. Als Trägerelemente von Microdata-Attributen bieten sich daher HTML-Tags wie <div> und <span> an, die keine eigenen Semantik besitzen.

<div></div> Das div-Element definiert einen bestimmten Bereich in einer neuen Zeile des Fließtextes. In der Regel wird ein itemscope durch dieses Tag eingeleitet und beendet.
<span></span> Das span-Element definiert einen allgemeinen Inline-Bereich, ohne Einfluss auf die Browserdarstellung zu nehmen. Es wird daher verwendet, um ein itemprop auszuzeichnen.

Grafiken mit Microdata auszeichnen

Einen typischen Anwendungsbereich für die semantische Auszeichnung von Webseiteninhalten bilden eingebettete Firmenlogos. Währen ein menschlicher Besucher in der Lage ist, eine charakteristische Grafik auf einer Webseite als Firmenlogo zu identifizieren, sind Programme wie Web-Crawler auf Microdaten angewiesen, um diesen Zusammenhang herzustellen:

Markup eines Unternehmenslogos: 

<div itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="http://www.beispielfirma.de/">Startseite</a>
<img itemprop="logo" src="http://www.beispielfirma.de/logo.png" />
</div>

In Codezeile 01 wird ein neues div-Element aufgemacht, das sowohl die URL in Zeile 02 als auch den HTML-Code der eingebundenen Grafik in Zeile 03 umspannt. Dieses an sich unspezifische div-Tag wird durch das Attribut itemscope als informationstragendes Element gekennzeichnet. Das itemtype-Attribut verweist auf den Typ „Organization“ gemäß schema.org-Standard. Der Web-Crawler erfährt somit, dass es sich bei den Angaben innerhalb des div-Tags um Informationen über ein Unternehmen handelt. Darüber hinaus sind dem itemtype die Eigenschaften „url“ und „logo“ mit ihren jeweiligen Werten zugeordnet. Die Suchmaschine kann die Grafik somit als Firmenlogo identifizieren und einen Zusammenhang zur Unternehmenshomepage herstellen. Suchmaschinen wie Google verwenden auf diese Art ausgezeichnete Grafiken zum Beispiel bei der Erstellung des Knowledge Graphs.

Im Falle eines Markenlogos käme folgendes schema.org-Markup zum Einsatz: 

Markup eines Markenlogos: 

<div itemscope itemtype="http://schema.org/Brand">
<span itemprop="name">Name der Marke</span>
<img itemprop="logo" src="http://www.beispielmarke.de/logo.png" />
</div>

Das Element innerhalb des itemscopes ist gemäß schema.org als „Brand“ gekennzeichnet. Als Eigenschaften werden der Name der Marke und das Logo inklusive Speicherort angegeben.

Kontaktdaten mit Microdata auszeichnen

Neben der Auszeichnung von Grafiken ist für Unternehmen die semantische Annotation von Kontaktdaten von besonderem Interesse, da auch diese Informationen eine Grundlage für erweiterte Suchergebnisdarstellungen wie Sidelinks oder den Knowledge Graph darstellen. Ein ausführliches Microdata-Markup von Kontaktinformationen lässt sich einem Beispiel auf schema.org entnehmen:

Markup der Google-Kontaktdaten: 

<div itemscope itemtype="http://schema.org/Organization">
    <span itemprop="name">Google.org (GOOG)</span>
    Contact Details:
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        Main address:
        <span itemprop="streetAddress">38 avenue de l'Opera</span>
        <span itemprop="postalCode">F-75002</span>
        <span itemprop="addressLocality">Paris, France</span>
    </div>
    Tel: <span itemprop="telephone">( 33 1) 42 68 53 00 </span>,
    Fax: <span itemprop="faxNumber">( 33 1) 42 68 53 01 </span>,
    E-mail: <span itemprop="email">secretariat(at)google.org</span>
</div>

In Codezeile 01 definiert das itemtype-Attribut das Element im div-Tag von Zeile 01 bis Zeile 13 als „Organization“ gemäß Schema.org. Diesem werden durch diverse itemprop-Attribute die Eigenschaften „name“, „address“, „telephone“, „faxNumber“ und „email“ mit den jeweiligen Werten zugewiesen. Soweit gleicht das Schema den vorherigen Beispielen. Ein Sonderfall zeigt sich jedoch in Zeile 04. Die Microdata-Syntax sieht vor, dass ein Wert einer Eigenschaft ebenfalls ein Item sein kann. Hier werden die Angaben unter „Main-Adressen“ durch ein zweites div-Element mit eigenem itemscope verschachtelt und als itemtype „PostalAddress“ gemäß Schema.org definiert. Dieses wird durch die Eigenschaften „streetAddress“, „postalCode“ und „addressLocality“ näher bestimmt.

Webseiteninhalte mit Microdata für Rich Snippets auszeichnen

Möchte man, dass die eigene Website auf den Suchergebnisseiten von Google und Co. in der erweiterten Form der Rich Snippets auftaucht, dann ist die semantische Auszeichnung bestimmter Informationen besonders wichtig. Denn um Internetnutzern bereits auf den Suchergebnisseiten möglichst viele Informationen zu liefern, reichern Suchmaschinen Ergebnisse zu Produktinformationen, Rezepten, Erfahrungsberichten, Events, Software-Applikationen, Videos und Nachrichtenartikeln mit entsprechenden Webseiteninhalten an, sofern diese für ein maschinelles Auslesen optimiert wurden. Folgendes Beispiel eines fiktiven Hotelangebots zeigt schematisch, wie sich entsprechende Informationen mittels Microdata-Syntax nach schema.org und auszeichnen lassen.  

Ein Hotelangebot auf der Webseite eines Reisebieters liefert Interessenten in der Regel Informationen wie den Namen eines Hotels, eine kurze Beschreibung und ein Bild der Ferienanlage. Mit Microdata nach schema.org getaggt sähe der HTML-Code dieser Grundinformationen folgendermaßen aus:

Markup der Grundinformationen für Hotel-Angebote: 

<div itemscope itemtype="http://schema.org/Hotel">
    <span itemprop="name">Name des Hotels</span>
    <span itemprop="description">Beschreibung des Hotels</span>
    <img itemprop="image" src="http://Images/hotel.jpg" />
</div>

Das Attribut itemtype in Zeile 01 verweist auf das vordefinierte Schema Hotel. Diesem werden in den Zeilen 02 bis 04 die Eigenschaften „name“, „description“ und „image“ mit entsprechenden Werten zugewiesen.   

Diesem Grundgerüst können beliebig viele weitere Informationen als itemprops oder untergeordnete itemscopes hinzugefügt werden. Dabei ist darauf zu achten, dass untergeordnete div-Elemente innerhalb des div-Tags des übergeordneten itemscopes platziert werden. Folgender Code erweitert die semantische Annotation für Hotel-Angebote um eine Preisangabe.

Markup für Hotelpreise 

<div itemprop="makesOffer" itemscope itemtype="http://schema.org/Offer"> 
    <span itemprop="price">400 Euro</span>
</div>

In Zeile 01 wird die die Eigenschaft „makeOffers“ (macht Angebote) eingeführt und als itemtyp „Offer“ (Angebot) definiert. Eine wesentliche Eigenschaft von Angeboten ist, dass sie einen Preis haben. Dieser wird in Zeile 02 mit dem itemprop „price“ eingebunden und mit dem Wert „400 Euro“ versehen.

Zusätzlich lassen sich zudem Informationen über die Zahlungsmodalitäten (itemprop="paymentAccepted"), Standortangaben (itemprop="map") oder Erfahrungsberichte (itemprop="reviews") per schema.org auszeichnen. In das Grundgerüst integriert ergibt sich folgendes Markup:

Ausführliches Markup für ein Hotel-Angebot 

<div itemscope itemtype="http://schema.org/Hotel">
    <span itemprop="name">Name des Hotels</span>
    <span itemprop="description">Beschreibung des Hotels</span>
    <img itemprop="image" src="http://Images/hotel.jpg" />
    <div itemprop="makesOffer" itemscope itemtype="http://schema.org/Offer"> 
        <span itemprop="price">400 Euro</span>
    </div>
    <span itemprop="paymentAccepted">Überweisung, Kreditkarte etc.</span> 
    <span itemprop="map">URL zur Karte</span> 
    <div itemprop="reviews" itemscope itemtype="http://schema.org/Review"> 
        <span itemprop="name">Titel der Bewertung</span>
        <span itemprop="author">Autor</span>
        <span itemprop="reviewBody">Bewertungstext</span>
        <span itemprop="datePublished">Datum der Bewertung</span>
    </div>
</div>

In Zeile 01 wird das Item „Hotel“ als übergeordnetes Schema für die nachfolgenden Angaben bis Zeile 15 definiert. Darauf folgen die Basisinformationen Name, Beschreibung und Bild, ausgezeichnet als Eigenschaften des Items Hotel. Die Auszeichnung des Hotelpreises erfolgt in Zeile 05 bis 07 durch ein untergeordnetes Itemscope-Attribut „Offer“. Darauf folgen die dem übergeordneten Item „Hotel“ zugeordneten Zahlungsmodalitäten und Standortinformationen. Die Angaben in Zeile 10 bis 15 werden mit einem weiteren untergeordneten itemscope und dem itemtyp „Review“ als zu einem Erfahrungsbericht gehörend gekennzeichnet und mit itemprops als Titel, Autorenangabe, Bewertungstext und Datum gekennzeichnet.

Soll ein Erfahrungsbericht eines Hotels zusätzlich mit einer Sternebewertung in den Rich Snippet auftauchen, schlägt Google folgendes Markup vor:

Markup für einen Erfahrungsbericht mit Bewertung: 

<div itemscope itemtype="http://schema.org/Review">
    <div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Hotel">
        <span itemprop="name">Name des Hotels</span>
    </div>
    <span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
        <span itemprop="ratingValue">4</span>
    </span> stars -
    <b>"<span itemprop="name">Titel der Bewertung</span>"</b>
    <span itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">Autor</span>
    </span>
    <span itemprop="reviewBody">Bewertungstext</span>
</div>

Breadcrumbs mit Microdata auszeichnen

Eine weitere Möglichkeit, mehr Informationen in den SERPs auszuspielen, bieten Breadcrumbs („Brotkrumen“). Dabei handelt es sich um die Auszeichnung der Navigationsstruktur einer Website, die einem Suchmaschinen-Nutzer die Möglichkeit gibt, die genaue Position einer Webpage innerhalb eines Internetauftritts zu lokalisieren. Ein typisches Beispiel für die Einbindung eines Breadcrumb-Trails in HTML zeigt folgender Code:

HTML-Markup eines Breadcrumb-Trails: 

<ol>
    <li>
        <a href="http://www.anbieter.de/hotels/">Hotels</a>
    </li>
    <li>
        <a href="http://www.anbieter.de/hotels/deutschland/">Hotels in Deutschland</a>
    </li>
    <li>
        <a href="http://www.anbieter.de/hotels/deutschland/berlin/">Hotels in Berlin</a>
    </li>
<ol>

Das Beispiel zeigt ein Listenelement (ordered list, ol), das die Links verschiedener Unterseiten einer Website beinhaltet. Um diese Navigationsstruktur für Programme wie Webbrowser oder Suchmaschinen-Crawler als Breadcrumb-Trail auszuzeichnen, bietet sich folgendes Microdata-Markup nach Schema.org an:

Microdata-Markup für Breadcrumbs nach Schema-org: 

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="http://www.anbieter.de/hotels/">
            <span itemprop="name">Hotels</span></a>
        <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="http://www.anbieter.de/hotels/deutschland/">
            <span itemprop="name">Hotels in Deutschland</span></a>
        <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="http://www.anbieter.de/hotels/deutschland/berlin/">
            <span itemprop="name">Hotels in Berlin</span></a>
        <meta itemprop="position" content="3" />
    </li>
</ol>

Das Listenelement <ol> wird mit dem intemscope-Attribut als Item definiert und per itemtype dem Schema „BreadcrumbList“ nach Schema.org zugeordnet. Für jede „Brotkrume“ innerhalb der Navigationsstruktur wird ein eigener itemscope mit dem itemtype „ListItem“ aufgemacht. Jedem ListItem des Breadcrumb-Trails werden die itemprops „name“, „item“ und „position“ als Eigenschaften zugeordnet. Diese beinhalten die Werte für den Namen, die URL und die Position eines Breadcrumbs innerhalb des Breadcrumb-Trails in maschinenlesbarer Form.

War dieser Artikel hilfreich?