Was sind Microdata

Microdata ermöglichen es Web-Inhalte (Bewertungen, Bilder, Produkte, etc.) für Suchmaschinen in maschinenlesbarer Form auszuzeichnen.

Es gibt drei Markup Formate: Microdata, Microformat und RDF, dabei empfiehlt  Google das Microdata Markup.

Um sicher zu gehen das die Microformat Funktionalitäten auch von Bing und Yahoo verstanden werden, sollte das Gemeinschaftsprojekt Schema.org benutzt werden.

Im Bild sehen Sie drei unterschiedliche Rich Snippets Einblendungen, welche von Google in den organischen Ergebnissen angezeigt werden, wenn diese richtig im Quellcode der Webseite angelegt wurden. Durch Nutzung dieser Elemente wird die User Experience gesteigert, der Besucher erhält schneller relevante Informationen.

Was bringt HTML5 für neue Elemente mit?

Ihre Stärke liegt im Kontextbezogenen Einsatz.

Kurzgefasst
• Itemscope: legt die Kategorie der Informationen fest
• Itemtype: legt den Typ fest, möglich sind Beschreibung, Bild, Name oder URL
• Itemprop: zeigt dem Crawler welche Informationen priorisiert werden sollen
• itemid: gibt einer Information eine eindeutige Bezeichnung (ID)
• itemref: fügt Informationen hinzu, die außerhalb des gewählten Scopes liegen

Die Praxis

Wir lernen in diesem Abschnitt den Einsatz von Itemscope, Itemtype und Itemprop.

Als Basis nutzen wir die Kontakt Daten von woy.ch.

Rohdaten
Marcus Woy
Lutherkirchstraße 6
79106 Freiburg im Breisgau
[email protected]

Wenn wir fertig sind sieht es so aus 🙂 .

<div itemscope itemtype=“http://schema.org/Person“>
<span itemprop=“name“>Marcus Woy</span>

<span itemprop=“jobTitle“>SEO</span>
<div itemprop=“address“ itemscope itemtype=“http://schema.org/PostalAddress“>
<span itemprop=“streetAddress“>
Lutherkirchstraße 6
</span>
<span itemprop=“addressLocality“>Freiburg</span>,
<span itemprop=“addressRegion“>BA</span>
<span itemprop=“postalCode“>79106</span>
</div>
<span itemprop=“telephone“>07614890169</span>
<a href=“mailto:[email protected]“ itemprop=“email“>
[email protected]</a>

Marcus Woy’s Blog:
<a href=“www.woy.ch“ itemprop=“url“>woy.ch</a>
</div>
Itemscope – Das bestimmende Element

Alle ausgezeichneten Eigenschaften innerhalb des div Tags sind vom Typ “Person”, oder haben entfernt damit etwas zu tun. Dieses Attribut ist am Anfang das Wichtigste, weil damit der Suchmaschine gesagt wird um welchen Typ es sich bei den Eintragungen handelt. Alle Kind Elemente von Itemscope erben die Eigenschaften.

<div itemscope itemtype=“http://schema.org/Person“></div>
Der Name eines Dings oder Person

<span itemprop=“name“>Marcus Woy</span>
Der Beruf einer Person

<span itemprop=“jobTitle“>SEO</span>
Hier sehen wir einen kontextbezogenen Einsatz.
Ausgezeichnete Tags innerhalb von div sind Eigenschaften vom Typ PostalAdress.
Durch das Hinzufügen dieses Attributs erhalten Sie alle Eigenschaften, welche sich auf den Typ PostalAdress beziehen und in Beziehung mit Itemtype Person stehen. Durch diese kontextbezogene Verknüpfung können Eigenschaften sehr detailliert beschrieben werden.

<div itemprop=“address“ itemscope itemtype=“http://schema.org/PostalAddress“>
<span itemprop=“streetAddress“>
Lutherkirchstraße 6
</span>
<span itemprop=“addressLocality“>Freiburg</span>,
<span itemprop=“addressRegion“>BA</span>
<span itemprop=“postalCode“>79106</span>
</div>