SEO

Rich Snippets: Klickraten pushen mit strukturierten Daten & schema.org Markup

Catherine Beaupère

Veröffentlicht von Catherine Beaupère

Alle Beiträge von Catherine Beaupère

Mittels schema.org-Markup können die Inhalte dem Googlebot verständlich gemacht werden. Gelingt dies, wird das Suchergebnis unter Umständen sogar mit einem Rich Snippet versehen.

Hat der Nutzer die Wahl zwischen einfachen und Rich Snippets klickt er tendenziell das auffällige Snippet mit ansprechend gestalteten Informationen.

Was sind Rich Snippets?

Snippets werden auf der Suchergebnisseite (SERP) von Suchmaschinen aufgelistet. Sie geben den Inhalt einer Seite in verkürzter Form und lediglich in Textform wieder. Einfache Snippets bestehen aus Titel, URL und zusammengefassten Inhalt.

Klassisches Snippet

Beispiel für ein klassisches Snippet ohne Markup

Wirklich interessant sind Rich Snippets: Sie enthalten zusätzliche Informationen wie Ratings (Sterne), Bilder, Videos, Preise, Angaben zu Zeiten, etc.
Diese zusätzlichen Informationen sind nicht in der Meta Description enthalten, sondern werden durch Markups in den Quellcode in der Seite implementiert.

Nutzer können durch die strukturierten Daten einfacher erkennen, ob die Inhalte hinter dem Auszug für sie relevant sind.
Bestimmte Rich Snippet Inhalte können auch die Antwort auf Nutzerfragen vorwegnehmen (z.B. Öffnungszeiten von Unternehmen).

Vergleichen Sie  das klassische Snippet mit dem Rich Snippet: Wo würden Sie klicken?

Wahrscheinlich auf das Ergebnis, das mit hübschem Foto lockt und Erfolg verspricht (4,2 Sterne bei 1072 Bewertungen, der muss ja schmecken!).

Rich Snippets leiten die Aufmerksamkeit der Nutzer auf die eigene Webseite und können so die Klickrate (CTR) erhöhen. Mittels der strukturierten Daten können Suchmaschinen die Inhalte einer Webseite noch besser nachvollziehen und in einen passenden Kontext setzen.

Arten und Beispiele strukturierter Daten

Google unterstützt verschiedene Typen an Rich Snippets. Je nach Typ sind unterschiedliche Attribute (Daten), wie beispielsweise Name des Gerichts, Bild, Zubereitungszeit, etc, gefragt. Es sollte dennoch abgeschätzt werden, welche von diesen Daten dem Nutzer einen Mehrwert bieten.

Rezepte

Rich Snippets für Rezepte können u.a. mit Zeiten (Zubereitungszeit, Backzeit), Kalorien und Bilder ergänzt werden. So kann der Nutzer schon durch das ihn ansprechende Bild oder für ihn relevante Zeitangabe gelockt werden.

Beispiel für ein Rezept Rich Snippet

Screen eines Snippets Typ Rezept

Codebeispiel mit JSON-LD Markup

<script type="application/ld+json">
{"@context":"http://schema.org/",
"@type":"Recipe",
"url":"https://www.essen-und-trinken.de/rezepte/59855-rzpt-saftiger-schokoladenkuchen",
"name":"Saftiger Schokoladenkuchen",
"image":"https://static.essen-und-trinken.de/bilder/90/7d/8436/galleryimage/bd0305a13bbf4648eb71bc273e27ada6.jpg",
"recipeYield":"16 Stücke",
"nutrition":
{"@type":"NutritionInformation",
"servingSize":"1 Stück",
"calories":"383 kcal",
"fatContent":"19 g",
"carbohydrateContent":"47 g",
"proteinContent":"4 g"},
"totalTime":"PT0H40M",
"recipeIngredient":
["300 g Butter",
"8 El Kakaopulver",
"350 g Zucker",
"250 g Mehl",
"1 Tl Natron",
"Salz",
"2 Ei",
"150 g Schmand",
"60 ml Milch",
"200 g Puderzucker"],
"recipeInstructions":"  \n
200 g Butter, 4 El Kakaopulver und 200 ml Wasser unter R\u00fchren aufkochen. 10 Min. abk\u00fchlen lassen.<\/p> \n

Ofen auf 200 Grad (Umluft\u2028 180 Grad) vorheizen. Zucker, Mehl, Natron und 1 Prise Salz in einer gro\u00dfen Sch\u00fcssel mischen. Eier und Schmand zugeben, zusammen mit der Kakaomasse unter die Mehlmischung r\u00fchren. In eine gefettete Springform (26 cm \u00d8) f\u00fcllen und im hei\u00dfen Ofen auf dem Rost im unteren Ofendrittel 30 Min. backen.<\/p> \n

Inzwischen restliche Butter, restliches Kakaopulver, Milch und Puderzucker unter Rühren aufkochen.<\/p> \n

Kuchen auf einem Gitter in der Form lauwarm abköchlen lassen.\u2028Mit einem Spie\u00df (z. B. Essst\u00e4bchen) mehrmals einstechen, die H\u00e4lfte des Gusses dar\u00fcbergie\u00dfen. Abk\u00fchlen lassen. Kuchen mit einem spitzen Messer aus der Form l\u00f6sen und auf eine Tortenplatte geben. Restlichen Guss erwärmen und als Glasur über den Kuchen gießen.<\/p>", "aggregateRating":{ "@type":"AggregateRating", "ratingValue":"4.1819", "reviewCount":"1072", "bestRating":5, "worstRating":1}} </script>

Produkt-Markup

Strukturierte Daten von Produkten geben Daten wie Bezeichnung und Preis aus. Die Nennung der Marke ist Pflicht und ist gerade bei unbekannteren Produkten vorteilhaft.

Beispiel für Preis-Markup bei Produkten

Reviews & Ratings

Auch Bewertungen und Testberichte können entsprechend ausgezeichnet werden – egal, ob es sich dabei um eine Produktbewertung oder um eine Filmkritik handelt.

Beispiel Review Rich Snippet und entsprechender Code

Beispiel für Bewertungs-Markup

 

 

 

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Review",
  "itemReviewed": {
    "@type": "Product",
    "name": "Ernie Ball Expression Tremolo"
  },
  "reviewRating": {
    "@type": "Rating",
    "bestRating": "5",
    "worstRating": "1",
    "ratingValue": "5"
  },
  "author": {
    "@type": "Person",
    "name": "Max Mustermann"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Dein-Blog"
  }
}
</script>

Veranstaltungen

Rich Snippets für Veranstaltungen zeigen künftige Events. Sie können Daten zu Datum, Veranstaltungsort, etc. angeben.

Beispiel für ein Veranstaltungen Rich Snippet

Personen / Autoren Rich Snippet

Autoren Rich Snippets können dem Nutzer Informationen darüber liefern, wie viele Beiträge dieser schon verfasst hat. Profilbilder können auffällig gestaltet werden. Je nach Wertung / Beiträge kann dieses Snippet Vertrauen im Nutzer auslösen.
Personen Rich Snippets für Personen sind weniger auffällig. Andererseits reizvoll, da so auf dem Arbeitsmarkt (Informationen über LinkedIn, Xing) beworben werden kann, was hinter der Person steckt.
Es können Zusatzinformationen wie Arbeitsstelle, Titel und Bezeichnungen angegeben werden.

Rich Snippet für Unternehmen (Betriebe, Unterkünfte, etc.)

Daten wie Adresse, Öffnungszeiten o.ä. bieten bei diesen Rich Snippets dem Nutzer einen erheblichen Mehrwert.
Beispiel für ein Unternehmen Rich Snippet:

Screen eines Snippets Typ Unternehmen

Videos

Videos sind keine Text-Snippets. Diese Snippets können mit Informationen wie Thumbnail, Autor, Bitrate, etc. angereichert werden.
Beispiel für ein Video Rich Snippet

Zu beachten: Bei der Umsetzung von Rich Snippets ist es nicht gestattet, Rabatte, Werbung oder ähnliches anzupreisen. Das Snippet soll der Information des Nutzers dienen.

Was ist schema.org?

Schema.org wurde von Google, Bing, Yahoo und später Yandex in Zusammenarbeit erstellt.
Das Portal bietet eine Sammlung an HTML-Tags und Attributen, die für die Erstellung von Markups bzw. spätere Ausspielung von Rich Snippets benötigt werden.

Schema.org berücksichtigt Attribute für die vorgehend vorgestellen Arten an strukturierten Daten.
Beispiele für Attribute von schema.org für den Typ “Person”:

  • familyName
  • children
  • birthPlace
  • address

Ziel von schema.org ist, das Web besser zu strukturieren und die Masse an Daten in diesem optimal zugänglich zu machen.

Da das System von den großen Suchmaschinen entworfen wurde, können Webentwickler davon ausgehen, dass diese die Informationen hinter diesen Attributen und Tags korrekt auslesen und ausspielen können.

Markups erstellen unter Berücksichtigung von schema.org

Rich Snippets können leider nicht per Knopfdruck auf den Plan gerufen werden.
Es benötigt die Erstellung von Markups, mit welchen dann die Suchmaschinen Informationen auslesen und in Rich Snippets wiedergeben können. Ob diese Rich Snippets tatsächlich ausgespielt werden, geschieht nach Gutdünken der Suchmaschinen.

Es gibt durchaus verschiedene Wege Markups zu erstellen.
Die zwei folgenden, die wir vorstellen möchten, beruhen auf dem System von schema.org.

Es gilt für beide Methoden, zunächst den Informationen Attribute (bzw. Tags) zuzuweisen, damit diese Werte von der Suchmaschine ausgelesen und ausgegeben werden können.

Umsetzung von strukturierten Daten mit Mikrodaten

Für die Umsetzung von Markups empfehlen sich Mikrodaten, wenn diese im Code – in der entsprechenden Seite oder im Template – eingefügt werden.

Dass die zusätzlichen Informationen in den Rich Snippets ausgespielt werden können, müssen diese zunächst auf den entsprechenden Seiten als solche markiert werden.

Dabei geht man wie folgt dabei vor:

  1. Im div-Tag nennen, welchem Schema (zeigt welcher “Gegenstand” beschrieben wird, hier Person: http://schema.org/Person) die Daten folgen und das zugehörige Attribut (itemscope)
    Beispiel: <div itemscope itemtype=“http://schema.org/Person„></div>
  2. Innerhalb des div-Tags angeben, welche zusätzlichen Informationen (Attribute) inklusive Werten ausgegeben werden sollen – beispielsweise das Attribut Geburtsort mit “birthPlace” inklusive Wert “Aschaffenburg”
    Beispiel: <span itemprop=“birthPlace“>Aschaffenburg</span>
  3. Weitere Attribute können über schema.org [http://schema.org/docs/schemas.html] eingesehen werden
    Beispiele für diese: “email”, “address”, “children”, etc.
  4. So viele Attribute wie möglich einpflegen – Suchmaschinen spielen nicht alle Attribute, sondern nur die für den Nutzer relevanten aus
  5. Erstellten Code im Quellcode der entsprechenden Seite oder im Template unterbringen

Umsetzung von Markups mit Google Markup-Hilfe

Noch einfacher als die Umsetzung mit Attributen und der eigenen Code-Erstellung, funktioniert es mit der Google Markup-Hilfe.

Screen des Google Markup Hilfe Interface

Vorgehensweise für die Umsetzung:

  1. URL der betroffenen Seite eingeben und Typ auswählen (z.B. Blogbeitrag als Artikel kennzeichnen)
  2. Tagging starten
  3. Die Webseite wird geöffnet – relevante Attribute wie z.B. Name des Artikels mit der Maus markieren und mit dem passenden Tag kennzeichen (öffnet sich automatisch)
  4. Die Tags werden an rechter Seite hinzugefügt
  5. Neben den bereits vorgeschlagenen Tags können über “Fehlende Tags hinzufügen” weitere angegeben werden
  6. HTML erstellen
  7. Via Drop-Down-Menü kann das Markup ausgewählt werden – für die Implementierung in den Tag Manager JSON-LD auswählen
  8. Code herunterladen
  9. In den Google Tag Manager einfügen
  10. Markup mit dem Google Testing Tool überprüfen

Warum den Code im Google Tag Manager unterbringen?
Wird der Code im Google Tag Manager implementiert, ist der Anwender vom Content Management System unabhängig – lediglich das Wissen für die Handhabung des Tag Manager ist notwendig.
Der Quellcode der betroffenen Seite muss über diesen Weg nicht angepasst werden. Auch die Pflege der Markups ist einfacher, da sich diese an einem Platz befinden.

Markup-Formate, die Rich Snippets umsetzen können

Es gibt verschiedene Markup-Formate, mit welchen die Ausspielung von Rich Snippets ermöglicht werden kann.

JSON-LD

JSON-LD ist derzeit die empfohlene Methode um Informationen zu strukturieren um eine Chance auf Rich Snippets zu erhalten.

JSON-LD ist eine Programmiersprache, mit welcher Daten mit Metadaten angereichert wird. So können diese automatisch ausgelesen und ausgegeben werden. Dieses Konzept ist den vorhergehenden Markups ähnlich.
Werden Markups mittels JSON-LD erstellt, bleibt der Quellcode unverändert. Die Metadaten werden über eine Skript angegeben. Der Skript wird im Google Tag Manager hinterlegt.
So können die Daten durch Suchmaschinen ausgelesen und verarbeitet werden.

Folgendes Beispiel zeigt den Code der hinter dieser Methode steckt:

<script type="application/ld+json">
{
"@context": "http://schema.org",
 "@type":"ItemList",
 "itemListElement":
[
       {
     "@type":"ListItem",
     "position":1,
      "url":"https://www.afa-seminare.de/betriebsratswahlen/normales-wahlverfahren"
 }
 ]
}
</script>

Mikrodaten

Mittels Mikrodaten können Informationstypen bestimmt und ausgegeben werden. Die Attribute für diese Informationen können schema.org entnommen werden. Mikrodaten werden von den bekannten Suchmaschinen anerkannt und umgesetzt.
Mikrodaten wirken als Metadaten, indem sie “Rohdaten” (z.B. “Aschaffenburg”) spezifizieren (“birthPlace”).

Im Folgenden ein Beispiel zur Umsetzung eines Rich Snippets, Typ Person, mittels Mikrodaten:

<div itemscope itemtype="http://schema.org/Person">
Ich heiße <span itemprop="name">Marie-Luise Mustermann</span> und bin in <span itemprop="birthPlace">Aschaffenburg</span> geboren.
Meinen Blog findet Ihr unter
<a href="http://www.example.com" itemprop="url">www.example.com</a>. Ich arbeite als <span itemprop="jobTitle">Online Marketing Consultant</span>.
</div>

Dieser Code zeigt eine Auswahl an Properties (“name”, “birthPlace”, “url”), die zusammen ein Item (“http://schema.org/Person) bilden.
Manche Props wie Adresse können noch unterteilt werden.

Mikroformate

Das Konzept der Mikroformate ähnelt dem der Mikrodaten sehr. Auch hier werden HTML-Tags angewendet.
Statt Properties definieren allerdings hierbei Klassen die Daten.

Das folgende Beispiel verdeutlicht die Umsetzung eines Rich Snippets mittels Mikroformaten:

<div class="vcard">

 Ich heiße <strong class="fn">Marie-Luise Mustermann</strong> und bin als <span class="title">Online Marketing Consultant</span> bei <span class="org">Sunlab</span>tätig.

</div>

RDFA

RDFA kennzeichnet die Daten im Gegensatz zu den anderen Formaten mit XHTML-Tags. In diesem Markup werden Properties mit “v:Bezeichnung” angewendet.
“Typeof” gibt wie der “Itemtype” den “Gegenstand” an, der spezifiziert werden soll.

Die Erstellung von strukturierten Daten mittels RDFA wird im folgenden Beispiel deutlich:

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">

  Ich heiße <span property="v:name">Marie-Luise Mustermann</span> und bin in <span property=”v:geburtsort”>Aschaffenburg</span> geboren.

 Meinen Blog findet Ihr unter <a href="http://www.example.com" rel="v:url">www.example.com</a>.

  Ich bin als <span property="v:title">Online Marketing Consultant</span> tätig.

</div>

Welche Markup-Sprache sollte verwendet werden?

Mit Augenmerk auf SEO ist es empfehlenswert  schema.org-Markup anzuwenden. Bestenfalls wird diese als Mikroformate oder JSON-LD Markup im Code eingebunden.

Beide Formate werden von den großen Suchmaschinen erkannt und unterstützt.

Google Testing Tool für Rich Snippets

Mit dem Google Testing Tool können nach Implementierung der strukturierten Daten auf der entsprechenden Webseite diese überprüft werden.
Das Tool listet die zu befüllenden Faktoren mit den entsprechenden Daten aus der Webseite auf:

@type: Recipe
name: Schokoladenkuchen
totalTime: PT25M
recipeingredient: 100 g Vollmilchschokolade

Außerdem gibt das Test Tool Warnungen aus, welche Daten noch nicht befüllt sind und ob im Snippet Fehler enthalten sind:

keywords: “Das Feld keywords ist ein empfohlenes Feld. Bitte geben Sie einen Wert ein, falls verfügbar.”

In der Vorschau kann das voraussichtliche Snippet angezeigt werden. Ist eine Anzeige möglich, kann mit einer mehr oder weniger zeitnahen Ausspielung des Snippets im Netz gerechnet werden.

3 Vorteile strukturierter Daten

Die Verwendung von Rich Snippets zieht folgende Vorteile nach sich:

  1. Mehr Klicks
    Durch ihr auffälliges Äußeres werden Rich Snippets öfter geklickt. Klickrate wie auch die Besucherzahlen steigen.
  2. Indirekte Verbesserung des Rankings möglich
    Zwar sind Rich Snippets keine direkten Rankingfaktoren, jedoch fließt die Klickrate (CTR) in das Ranking mit ein. Eine höhere Klickrate bewerten Suchmaschinen als positiv.
    Folglich: Je öfter die Webseite dank auffälliger Rich Snippets geklickt wird, desto besser. Denn wird diese öfter geklickt als andere Seiten, wird sie als relevanter eingestuft und das Ranking steigt.
  3. Erhöhte Aufmerksamkeit
    Durch auffällige Zusatzinformationen wie beispielsweise Bilder oder Sterne ziehen strukturierte Daten die visuelle Aufmerksamkeit auf sich. Sie werden eher als gewöhnliche Snippets beachtet, das sie sich durch die zusätzlichen Elemente von den restlichen abheben.

Veröffentlicht von Catherine Beaupère

Alle Beiträge von Catherine Beaupère

Weiteres zum Thema SEO