Über Mikrodaten

Mit der HTML5-Mikrodatenspezifikation ist es möglich, Inhalte zu kennzeichnen, um einen bestimmten Informationstyp zu beschreiben, beispielsweise Erfahrungsberichte, Informationen zu Personen oder Ereignisse. Mit jedem Informationstyp wird ein bestimmter Elementtyp beschrieben, beispielsweise eine Person und ein Ereignis oder ein Erfahrungsbericht. Beispielsweise kann ein Ereignis Eigenschaften für den Veranstaltungsort, den Beginn, den Namen und die Kategorie aufweisen.

Mikrodaten verwenden einfache Attribute in HTML-Tags, oft <span> oder <div>, um Elementen und Eigenschaften kurze, beschreibende Namen zuzuweisen. Es folgt ein Beispiel eines kurzen HTML-Blocks, in dem grundlegende Kontaktdaten für Michael Mayer stehen.

<div> 
  Mein Name ist Michael Mayer, aber die meisten Leute nennen mich Mike. Hier ist meine Website:
  <a href="http://www.example.com">www.example.com</a>
  Ich lebe in München in Bayern und arbeite als Ingenieur bei der Firma MÜLLER-LÜDENSCHEID.
</div>

Im Folgenden noch einmal der gleiche HTML-Code mit Mikrodaten-Markup:

<div itemscope itemtype="http://data-vocabulary.org/Person"> 
  Mein Name ist <span itemprop="name">Michael Mayer</span>, 
  aber die meisten Leute nennen mich <span itemprop="nickname">Mike</span>. 
  Hier ist meine Website:
  <a href="http://www.example.com" itemprop="url">www.example.com</a>
  Ich lebe in München in Bayern und arbeite als <span itemprop="title">Ingenieur</span>
  bei der Firma <span itemprop="affiliation">MÜLLER-LÜDENSCHEID</span>.
</div>

Erklärung:

  • In der ersten Zeile gibt itemscope an, dass es sich bei dem Inhalt zwischen den <div>-Tags um ein Element handelt. itemtype="http://data-vocabulary.org/Person gibt an, dass das Element eine Person ist.
  • Jede Eigenschaft der Person wird mithilfe des itemprop-Attributs angegeben. Beispielsweise wird mit itemprop="name" der Name der Person beschrieben.

Geschachtelte Entitäten

Im obigen Beispiel werden Kontaktinformationen zu Michael Mayer angegeben, seine Adresse ist jedoch nicht enthalten. Im folgenden Beispiel ist der gleiche HTML-Code dargestellt, in diesem Fall ist jedoch die address-Eigenschaft enthalten.

<div itemscope itemtype="http://data-vocabulary.org/Person">
   Mein Name ist <span itemprop="name">Michael Mayer</span>, 
   aber die meisten Leute nennen mich <span itemprop="nickname">Mike</span>.
   Hier ist meine Website: 
   <a href="http://www.example.com" itemprop="url">www.example.com</a>.
   Ich lebe in 
   <span itemprop="address" itemscope
      itemtype="http://data-vocabulary.org/Address">
      <span itemprop="locality">München</span> in 
      <span itemprop="region">Bayern</span> 
   </span>
   und arbeite als <span itemprop="title">Ingenieur</span>
   bei der Firma <span itemprop="affiliation">MÜLLER-LÜDENSCHEID</span>.
</div>

Erklärung:

  • Die address-Eigenschaft ist selbst ein Element, das eigene Eigenschaften enthält. Dies wird angegeben, indem das itemscope-Attribut bei dem Element eingesetzt wird, mit dem die address-Eigenschaft deklariert wird, und indem das itemtype-Attribut zum Angeben des zu beschreibenden Elementtyps verwendet wird. Dies geschieht folgendermaßen: <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">.

Weitere Beispiele finden Sie unter Geschachtelte Entitäten.

Elemente mit Verweis

Sie können ein Element an einer Stelle definieren und dann von einer oder mehreren anderen Stellen darauf verweisen. Im Beispiel unten wird eine Adresse beschrieben und dann werden zwei Personen genannt, die unter dieser Adresse wohnen (Michael und Julia Mayer).

<div id="mayer-address" itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
   <span itemprop="locality">München</span>, 
   <span itemprop="region">Bayern</span> 
</div>

<div itemscope itemtype="http://data-vocabulary.org/Person" itemref="mayer-address">
   Mein Name ist <span itemprop="name">Michael Mayer</span>, 
   aber die meisten Leute nennen mich <span itemprop="nickname">Mike</span>.
   Hier ist meine Website: 
   <a href="http://www.example.com" itemprop="url">www.example.com</a>.
   Ich arbeite als <span itemprop="title">Ingenieur</span>
   bei der Firma <span itemprop="affiliation">MÜLLER-LÜDENSCHEID</span>.
</div>

<div itemscope itemtype="http://data-vocabulary.org/Person" itemref="mayer-address">
   Mein Name ist <span itemprop="name">Julia Mayer</span>.
</div>

Erklärung:

  • Der HTML-Code, der das address-Element definiert, enthält ein id-Attribut wie dieses: <div id="mayer-address" itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">.
  • Die person-Elemente für Michael und Julia Mayer verweisen auf die Adresse, indem sie ein itemref-Attribut enthalten und die ID der Adresse angeben. Dies sieht wie folgt aus: <div itemscope itemtype="http://data-vocabulary.org/Person" itemref="mayer-address">.

Datum und Uhrzeit

Zur Angabe von eindeutigen Angaben zum Datum und zur Uhrzeit wird das Element time mit dem Attribut datetime eingesetzt. Hier wird mit der startDate-Eigenschaft das Startdatum einer Veranstaltung angegeben. Der Wert im datetime-Attribut wird gemäß dem ISO-Datumsformat spezifiziert. Mit diesem Format können Sie detaillierte Angaben zu Datum, Uhrzeit und, optional, Zeitzone für Suchmaschinen im ISO-Format machen: ("2009-10-15T19:00-08:00"). Dabei können Sie das Datum auf Ihrer Seite dennoch nutzerfreundlich anzeigen lassen: "15. Oktober 2009, 19:00 Uhr".

<time itemprop="startDate" datetime="2009-10-15T19:00-08:00">15. Oktober 2009, 19:00 Uhr</time>

Nicht sichtbare Inhalte

In der Regel zeigt Google Inhalte, die für Nutzer nicht sichtbar sind, nicht an. Das heißt, stellen Sie den Inhalt für Nutzer nicht auf eine einzige Weise dar und verwenden Sie verborgenen Text, um Informationen separat für Suchmaschinen und Webanwendungen auszuzeichnen. Sie sollten den Text auszeichnen, der den Nutzern tatsächlich angezeigt wird, wenn sie Ihre Webseiten besuchen.

Für diese Richtlinie gibt es einige Ausnahmen. Manchmal kann es sich als nützlich erweisen, Suchmaschinen genauere Informationen zur Verfügung zu stellen, selbst wenn diese Informationen dem Betrachter Ihrer Webseite verborgen bleiben sollen. Beispiel: Wenn ein Restaurant die Bewertung 8,5 aufweist, gehen die Nutzer im Gegensatz zu den Suchmaschinen davon aus, dass die Bewertung auf einer Skala von 1–10 basiert. In diesem Fall können Sie dies folgendermaßen mit dem meta-Element angeben:

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

Erklärung:

  • Mit dem meta-Tag werden zusätzliche Informationen angegeben, die auf der Seite nicht sichtbar sind – in diesem Fall, dass 10 die bestmögliche Bewertung ist. Der Wert der Eigenschaft wird mit dem content-Attribut angegeben.

Entsprechend können Sie durch die Angabe der Dauer einer Veranstaltung im entsprechenden ISO-Format gewährleisten, dass die Dauer in den Suchergebnissen richtig angezeigt wird:

Dauer: 
<span>1 Stunde, 30 Minuten<meta itemprop="duration" content="PT1H30M" />
</span>

Erklärung:

  • Geben Sie mit dem meta-Tag den Wert der Eigenschaft an, in diesem Fall die Dauer. Damit können Sie den Wert des Attributs content ("PT1H30M") zur Angabe der Dauer im ISO-8601-Format, verwenden, während Sie sie auf der Seite selbst auch weiterhin in einem nutzerfreundlichen Format präsentieren können: "1 Stunde, 30 Minuten".
  • Google nutzt das übergeordnete Element des meta-Elements, um festzustellen, welche Informationen im meta-Tag zur alternativen Darstellung genutzt werden. Demnach sollte in diesem Fall gewährleistet sein, dass der unmittelbar übergeordnete Knoten des meta-Tags den Text "1 Stunde, 30 Minuten" umschließt.

Spezifisches Vokabular und Beispiele finden Sie hier:

Überprüfen Sie Ihr Markup mit dem Test-Tool für strukturierte Daten.