Rich Snippets und Rich Results – technische Grundlagen + praktische Anwendung

In unserem ersten Teil Rich Snippets & Structured Data für WordPress ging es insbesondere um generelle Grundlagenthemen: Was sind Snippets, Rich Snippets, Structured Data und welche Rich Snippet Typen gibt es?

In diesem Teil wird es technischer und wir werden auf die Auszeichnungssprachen für Structured Data Quellcodehinterlegungen eingehen. Außerdem gibt es praktische Codebeispiele für das beliebteste Rich Snippet: Reviews (Sternebewertungen) geben. Und noch dazu je ein Musterbeispiel für Organization und Google Jobs als zweit- und drittbeliebteste Rich Snippet Auszeichnungsvorlagen.

Rich Snippets – wann erscheinen sie bei Google?

Damit Rich Snippets zu bestimmten Suchanfragen bei Google auftauchen, müssen vier Voraussetzungen erfüllt sein:

1. Google erachtet Rich Snipptes als sinnvoll für die spezifische Suchanfrage, die Suchintention und das Thema. Je höher das Suchvolumen hinter einer Suchanfrage, desto wahrscheinlicher ist die Ausspielung eines Rich Snippets.

2. Google entscheidet welche Typen von Rich Snippets angezeigt werden. Ist die Suchintention beispielsweise transaktional und beinhaltet viele Shopping Suchergebnisse, sind häufig Review Rich Snippets (die klassischen Sterne Produktbewertungen) zu sehen.

3. Google hat einen speziellen Algorithmus der für jedes Suchergebnis ermittelt, ob dieses für ein Rich Snippet geeignet ist, oder nicht. So können alle oder gar keine Produkte mit Sternebewertungen in den Suchergebnissen genauso vorkommen, wie ein Mix: einige Produkte eines Online Shops weisen Rich Snippets in den Suchergebnissen auf, andere hingegen nicht. Die genauen Gründe sind natürlich ein Google-Geheimnis.

4. Strukturierte Daten nach schema.org müssen in den Quellcode! Ohne diesen sind die Chancen für ein Rich Snippet in den Suchergebnissen quasi Null! Für einige Fälle, wie besagte Review Snippets, sind zudem noch weitere Punkte relevant: gibt es überhaupt Bewertungen und wenn ja, sind diese ausreichend “repräsentativ” für die Erzeugung eines Rich Snippets?

Rich Snippets vs. Rich Results

Rich Snippets sind seit Teil der Rich Results, zu denen alle visuellen Erweiterungen von Suchergebnissen gezählt werden.

Einige Beispiele für weitere Rich Results, die zusätzlich zu URL, Page Title und Meta Description angezeigt werden können:

• Rich Cards (Mobil)
• Breadcrumb Navigation
• Firmeninformationen und Logos
• Bilder Slider (Sequential Carousel)
• Suchbox
• News / Blogartikel Einblendung
• Events & Termine
• Google Jobs

Alle diese Rich Results haben eine Gemeinsamkeit und Voraussetzung, weshalb sie ausgespielt werden: structured data im Quellcode.

Structured Data – welches Format?

Um Structured Data Auszeichnungen im Quellcode zu hinterlegen, gibt es verschiedene Möglichkeiten der Auszeichnungsform. Diese nennen sich alle zusammen “Markup” – also Auszeichnungssprachen die maschinenlesbar für Algorithmen gestaltet sind und einem festen Schema folgen. Der klassische und bekannteste Vertreter einer Markup Language ist die Hypertext Markup Language. Sie bildet das Grundgerüst beinahe aller Webseiten und ist besser bekannt als HTML.

Die verschiedenen Markups werden anhand des Review Rich Snippet Typs für Produkte dargestellt – dem am häufigsten nachgefragten Vorlagentyp!

Structured Data – Beispiele Mikrodaten, JSON-LD & RDFa

Neben Mikrodaten ist insbesondere das JSON-LD Format – häufig bei großen oder individuell programmierten Webprojekten – anzutreffen, wenn man im Quellcode von Rich Snippet Ergebnissen das Aufzeichnungsformat prüft.

Mikrodaten / Mikroformate Markup

Mittels Mikrodaten ist es in HTML 5 möglich verschiedene Schema Typen zu deklarieren. Hierbei werden viele einfache HTML-Tag Attribute, Eigenschaften und Elemente verwendet. Ähnlich einfach in der Schreibweise sind Mikroformate, die einfache Entitäten darstellen und daher häufig für Personen-Auszeichnungen (vCards) Verwendung finden.

Beispiel eines Mikrodaten Markups für eine Rich Snippet Auszeichnung, wie sie für die Bewertung eines Produktes im Online Shop verwendet werden kann:

<html>
<head>
<title>Pinkys Pinke Boxershorts</title>
</head>
<body>
<div itemscope itemtype="https://schema.org/Product">
<span itemprop="brand">Pinkys</span> <span itemprop="name">Pinkys Pinke Boxershorts</span>
<img itemprop="image" src="https://example.com/photos/1x1/pinke-boxershorts-von-pinky.jpg" />
<span itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
Average rating: <span itemprop="ratingValue">4.8</span>, based on
<span itemprop="ratingCount">104</span> reviews
</span>
<span itemprop="offers" itemscope itemtype="https://schema.org/AggregateOffer">
from

lt;span itemprop="lowPrice">11.99</span> to

lt;span itemprop="highPrice">29.99</span>
<meta itemprop="priceCurrency" content="EUR" />
</span>
</div>
</body>
</html>

RDFa Markup

Zwar sind Mikrodaten der aktuelle, einzige Standard der von allen Suchmaschinen über schema.org unterstützt wird, jedoch können Suchmaschinen ebenfalls RDFa auslesen und verwenden dieses ebenfalls in der Praxis.

Beispiel für das Rich Snippet in RDFa Markup Version:

<html>
<head>
<title>Executive Anvil</title>
</head>
<body>
<div vocab="https://schema.org/" typeof="Product">
<span property="brand">Pinkys</span> <span property="name">Pinkys Pinke Boxershorts</span>
<img property="image" src="https://example.com/photos/1x1/pinke-boxershorts-von-pinky.jpg" alt="Executive Anvil logo" />
<span property="aggregateRating"
typeof="AggregateRating">
Average rating: <span property="ratingValue">4.8</span>, based on
<span property="ratingCount">104</span> reviews
</span>
<span property="offers" typeof="AggregateOffer">
from

lt;span property="lowPrice">119.99</span> to

lt;span property="highPrice">29.99</span>
<meta property="priceCurrency" content="EUR" />
</span>
</div>
</body>
</html>

JSON-LD

JSON-LD, ausgesprochen “dscheison elde”, steht für ein schlankes JSON-Format. Das RDF Modell, wie von W3C definiert, ähnelt dem des Mikrodaten Markups und wird ebenfalls häufig zur strukturierten Auszeichnung verwendet.

Der Vorteil von JSON-LD liegt insbesondere bei der Auszeichnung von Produkten. JSON-LD bietet ein schlankes Format mit welchem verschiedene Bildformate mitgegebenn werden können. So kann sich Google beispielsweise das passend skalierte Bild für eine Anzeige auf Mobilgeräten aussuchen. Dies steigert die Chance, ein Rich Snippet nicht nur auf der Desktop Suche, sondern auch Mobil und auf Tablets zu erhalten.

Für unser Rich Snippet Reviews hier die JSON-LD Variante:

<html>
<head>
<title>Executive Anvil</title>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "Pinkys Pinke Boxershorts",
"image": [
"https://example.com/photos/1x1/pinke-boxershorts-von-pinky.jpg",
"https://example.com/photos/4x3/pinke-boxershorts-von-pinky.jpg",
"https://example.com/photos/16x9/pinke-boxershorts-von-pinky.jpg"
],
"brand": {
"@type": "Thing",
"name": "Pinkys"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"ratingCount": "104"
},
"offers": {
"@type": "AggregateOffer",
"lowPrice": "19.99",
"highPrice": "29.99",
"priceCurrency": "EUR"
}
}
</script>
</head>
<body>
</body>
</html>

Bonus: Schematische Auszeichnung für Google Jobs

Hier eine Auszeichnung, mit der eine Jobanzeige die Möglichkeit erhält, als Rich Result in der Suchmaschine bei Google Jobs angezeigt zu werden.

Beispiel für eine Jobanzeige von P&M im JSON-LD Format:

<script type="application/ld+json">
{"@context":"https:\/\/schema.org\/",
"@type":"JobPosting",
"title":"Business Developer (m\/w\/d)",
"description":"<h1>DEINE AUFGABEN<\/h1><p>Vertrieb ist deine Leidenschaft und du suchst ein Unternehmen, das zu dir passt? Bei P&amp;M bist du genau richtig! Wir suchen zum n\u00e4chstm\u00f6glichen Zeitpunkt einen Business Developer (m\/w\/d), der uns in unserer Agentur in Hamburg Altona unterst\u00fctzt. Mit deiner Hands-On Mentalit\u00e4t entwickelst du unseren Sales-Bereich stetig weiter. Du akquirierst neue Kunden und bearbeitest eingehende Anfragen. Du beh\u00e4ltst den Markt im Blick und recherchierst und bearbeitest \u00f6ffentliche Ausschreibungen. Zudem h\u00e4lst du Pr\u00e4sentationen f\u00fcr unsere Kunden und \u00a0arbeitest eng mit der Gesch\u00e4ftsf\u00fchrung zusammen.<br>Du hast Lust, deine eigenen Ideen einzubringen und eine tragende Rolle zu \u00fcbernehmen? Super, dann freuen wir uns auf deine Bewerbung!<\/p><br><h1>DAS BRINGST DU MIT<\/h1><p><ul><li>Vertriebserfahrung<\/li><li>1-2 Jahre Berufserfahrung in einer vergleichbaren Position<\/li><li>Eine Hands-On-Mentalit\u00e4t und eigenverantwortliche Arbeitsweise<\/li><li>Ausgepr\u00e4gte Kommunikations- und Teamf\u00e4higkeit<\/li><li>Sehr gute Deutsch- und gute Englischkenntnisse<\/li><li>w\u00fcnschenswert: Erfahrung in der IT-Branche<\/li><\/ul><\/p><br><h1>DAS BIETEN WIR DIR<\/h1><p><ul><li>Abwechslungsreiche Projekte \u2013 vom Online-Shop bis zur Individualsoftware<\/li><li>Modernste Arbeitsmittel mit Betriebssystem nach Wahl (macOS, Windows, Linux, etc.)<\/li><li>Die M\u00f6glichkeit, sich in einem ambitionierten Team weiterzuentwickeln<\/li><li>Flache Hierarchien \u2013 die beste Idee gewinnt unabh\u00e4ngig von der Job-Position<\/li><li>Eine offene, freundschaftliche und dynamische Unternehmenskultur\u00a0<\/li><li>Sch\u00f6nes, helles B\u00fcro in einem umgebauten Fabrikgeb\u00e4ude im Herzen von Ottensen<\/li><li>Gemeinsame Events wie LAN-Partys, Kickerturniere, 1x im Monat Agentur-Fr\u00fchst\u00fcck uvm.<\/li><li>Obst, Wasser, Kaffee, und Feierabendbier f\u00fcr alle<\/li><li>Flexible Arbeitszeiten mit einer Kernarbeitszeit von 10-16 Uhr<\/li><\/ul><\/p><br><h1>BEWIRB DICH JETZT<\/h1><p>Du bist ein Teamplayer, hast Lust auf neue Herausforderungen und Spa\u00df an digitalen Projekten? Super, dann richte deine Bewerbung bitte an Aysun Artac und lade deine Unterlagen mit Angabe deiner Gehaltsvorstellung und fr\u00fchstm\u00f6glichem Eintrittsdatum ganz einfach online hoch. Alternativ kannst du uns deine Unterlagen auch per E-Mail an [email protected] zusenden. Weitere Informationen \u00fcber uns findest du auf unserer Website.<br><br>Falls du noch Fragen hast, kannst du uns jederzeit gerne unter 040 \/ 334 525 86 anrufen.<br>Wir freuen uns darauf, dich kennenzulernen!<\/p>",
"identifier":{"@type":"PropertyValue",
"value":"262419-29561"},
"hiringOrganization":{"@type":"Organization",
"name":"P&M Agentur Software + Consulting GmbH",
"logo":"https:\/\/we-are-hiring.cdn.personio.de\/logos\/29561\/default\/89481596618790677b10e93dad412838.png"},
"jobLocation":{"@type":"Place",
"address":{"@type":"PostalAddress",
"streetAddress":"Planckstra\u00dfe 13",
"addressLocality":"Hamburg",
"addressRegion":"Hamburg",
"postalCode":"22765",
"addressCountry":"DE"}},
"datePosted":"2020-10-02",
"employmentType":["FULL_TIME"],
"validThrough":""}
</script>

Bonus: schematische Auszeichnung für Organisation

Da es insbesondere für das JSON-Format wenige gut zu lesende Beispiele gibt:
Hier eine weitere JSON-LD Auszeichnung für die Organisation, anhand des Beispiels von P&M:

<script type="application/ld+json">
{"@context": "https://schema.org",
"@type": "Organization",
"url": "https://pmagentur.com",
"logo": "https://pmagentur.com/wp-content/uploads/2017/10/logo-quer-1.png",
"sameAs": [
"https://www.facebook.com/pmagentur/",
"https://www.instagram.com/pmagentur_team/",
"https://www.xing.com/companies/p%26magentursoftware+consulting",
"https://www.linkedin.com/company/pmagentur/"
],
"contactPoint": [{
"@type": "ContactPoint",
"telephone": "+49-40-334-525-86",
"contactType": "technical support",
"areaServed": [
"DE",
] }]
}
</script>

Rich Snippet Optimierung von P&M

Wir haben bereits erfolgreich für hunderte Webseiten, Online Shops, Portale, Blogs und weitere Webprojekte sowohl klickattraktive als auch mit Structured Data erzeugte Rich Snippets erstellt.

Wenn Sie Beratung oder Unterstützung bei Ihrem Webprojekt benötigen, bieten wir Ihnen unsere kostenfreie SEO Potenzialanalyse an.

Rufen Sie uns direkt an unter 040 – 36 19 61 02 oder schreiben uns über unser nachstehendes Kontaktformular. Wir helfen Ihnen gerne dabei, Ihre URL Rankings wieder auf Spur zu bringen!

Den Ersten Blogartikel verpasst? Hier geht es zum vorherigen Part Rich Snippets & Structured Data für WordPress.

Über den Autor

pm-everything