Um eine Webseite für Suchmaschinen inhaltlich verständlich zu machen und Suchtreffer als Rich-Snippet anzuzeigen, gibt es mehrere Möglichkeiten. Auf eine davon – nämlich Microdata – möchte ich etwas näher eingehen.
Was sind Microdata?
HTML-Dokumente liegen ja bekanntlich in einer Struktur vor, die Suchmaschinen in gewisser Weise verstehen. So wird beispielsweise ein "h1"-Tag als Überschrift ersten Grades erkannt, "strong" hingegen weist auf eine wichtige Textstelle hin. Über den wirklichen Inhalt sagen diese Auszeichnungen natürlich noch gar nichts aus. Es sei denn, man setzt semantische Auszeichnungen wie eben Microdata ein.
Ein Beispiel ...
... ohne Microdata:
<div>
<h2>Chicago</h2>
<ul>
<li>Dauer: 113min</li>
<li>Regisseur: Rob Marshall</li>
</ul>
</div>... mit Microdata:
<div itemscope itemtype="http://schema.org/Movie">
<h2>Chicago</h2>
<ul>
<li>Dauer: 113min</li>
<li>Regisseur: Rob Marshall</li>
</ul>
</div>- Als Erstes wird festgelegt, um welchen Objekt-Typ es sich handelt: itemtype=”http://schema.org/Movie”. Wäre die Stadt Chicago gemeint hätten wir itemtype=”http:schema.org/City” verwendet.
- Da sich alle Informationen innerhalb dieses <div>-Elements befinden, bekommt dieser noch zusätzlich das Attribut “itemscope”.
- Alle Eigenschaften die so ein Objekt haben kann, findet man direkt unter der URL, die auch als itemtype verwendet wird. In unserem Beispiel verwenden wir “name”, “duration” und “director”.
- Sollte eine Eigenschaft nicht von einem eigenen HTML-Element umschlossen sein, wird das HTML-Markup zum Beispiel um einen <span> erweitert.
- Die Eigenschaft “duration” sollte außerdem in einem für Maschinen lesbaren Format vorliegen, laut schema.org in ISO8601. In unserem Fall also “PT113M”. Statt eines <span> verwenden wir das Element <time>
<div itemscope itemtype="http://schema.org/Movie">
<h2 itemprop="name">Chicago</h2>
<ul>
<li>Dauer: <time datetime="PT113M" itemprop="duration">113min</time></li>
<li>Regisseur: <span itemprop="director">Rob Marshall</span></li>
</ul>
</div>Verknüpfung von Objekten
Eine der Stärken von Microdata ist, das man verschiedene Objekte miteinander verknüpfen kann. Außerdem erlaubt Microdata die Angabe einer URL zu jedem Objekt, die weitere Informationen zu diesem Objekt enthalten. In unserem Beispiel könnte das so aussehen:
<div itemscope itemtype="http://schema.org/Movie">
<h2 itemprop="name">Chicago</h2>
<ul>
<li>Dauer:
<time datetime="PT113M" itemprop="duration">113min</time>
</li>
<li>Regisseur:
<span itemprop="director" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Rob Marshall</span>
<link itemprop="url" href="example_url.html" />
</span>
</li>
</ul>
</div>Der Aufwand lohnt sich
Zugegeben: Der HTML Code wird “aufgeblasen” und etwas unübersichtlich. Richtig eingesetzt lohnt sich der Einsatz aber, denn mit Microdata kann das eigene Suchergebnis in den SERPs als Rich-Snippet angezeigt werden:
Hier wurden die Eigenschaften “Aggregate Rating”, “Best Rating”, “Reviews”, “Description”, “Director” und “Actor” von Google verarbeitet. Der User erhält so auf den ersten Blick wichtige Informationen über den Inhalt der Seite. Außerdem wurde der Name von Regisseur und Darsteller mit den jeweiligen Infoseiten verlinkt.
Markup testen
Google bietet ein Test-Tool an, mit dem die mit Microdata versehene Seite getestet werden kann. Dieses sollte verwendet werden, um Fehler auszuschließen. Zudem erhält man eine Vorschau, wie das Suchergebnis aussehen könnte.
Beachtenswertes beim Verwenden von Microdata
- Das Verwenden von Microdata hat keinen Einfluss auf das Ranking in den Suchergebnissen.
- Google gibt keine Garantie dafür, dass die Auszeichnungen verwendet werden.
- Mögliche Ursachen warum keine Rich Snippets angezeigt werden findet man hier.
