Obwohl es Schema.org Markups schon seit vielen Jahren gibt, haben viele Webmaster bisher noch keine strukturierten Daten in ihre Webseite integriert. Ein Hauptgrund ist hier sicherlich der relativ hohe Aufwand, der mit der Auszeichnung der Webseiteninhalte verbunden ist. Eine gute Möglichkeit diesen Aufwand zu minimieren bietet der Google Tag Manager. Bevor in dem Artikel darauf eingegangen wird, wie sich über den Tag Manager speziell Rezepte auszeichnen lassen, wird kurz erklärt, was Schema.org überhaupt ist und wie es funktioniert.
Was ist Schema.org und welche Vorteile bringen Markups
Schema.org ist ein Projekt das von Google, Microsoft, Yahoo und Yandex mit dem Ziel gegründet wurde, Webmastern gesammelt Schemata zur Verfügung zu stellen, die zur Auszeichnung einer Webseite mit strukturieren Daten genutzt werden können. Markup-Auszeichnungen erleichtern desn Suchmaschinen die Inhalte einer Webseite zu analysieren und zu interpretieren. Werden die Inhalte (bspw. Bilder, Text) richtig ausgezeichnet, wird das zugehörige Suchergebnis als Rich Snippet dargestellt. Was bedeutet, dass das Suchergebnis durch ein passendes Bild oder weiterführende Informationen wie Produktbewertungen ergänzt wird. Abhängig von der Branche sticht das eigene Ergebnis-Snippet dann deutlich aus den Suchergebnissen hervor, was sich positiv auf die Klickrate und letztlich auf die Position der Seite in den Suchergebnissen auswirken wird.
Bei Rezepten sind Markups mittlerweile unverzichtbar. Zu fast jedem Rezept werden den Nutzern auf der Suchergebnisseite ein Bild und ergänzende Informationen, wie beispielsweise die Zubereitungszeit oder die Zutaten, bereitgestellt. Das eigene Suchergebnis wird bei solchen Themen leicht übersehen, wenn es sich nicht auch um ein Rich Snippet handelt.
Wie lassen sich Markups in eine Webseite einbinden
Die Markups direkt in die Webseite zu integrieren ist die gängigste Methode, um Inhalte auszuzeichnen. Ist das nicht möglich beziehungsweise der Aufwand der Einbindung hoch, dann bietet der Google Tag Manager eine gute Ausweichmöglichkeit die Inhalte mit Markups zu versehen. Lassen sich die Produkt- oder Rezeptbilder auf den verschiedenen Seiten über den gleichen CSS-Selektor auswählen, dann müssen wir im Tag Manager für jeden Inhalt nur eine Variable erstellen und die Einrichtung ist ruck zuck erledigt.
Rezepte mit Schema.org Daten auszeichnen
Über den Tag Manager und JSON-LD lassen sich Rezepte schnell und einfach mit Schema.org auszeichnen.
Hier ein Beispiel wie ein Markup für ein Rezept aussehen kann.
<script type = „application/ld+json“>
{
„@context“: „http://schema.org“,
„@type“: „Recipe“,
„mainEntityOfPage“:“true“,
„author“:“dein Name“,
„name“: „{{SCHEMA – Name}}“,
„image“: „{{SCHEMA – Bild}}“,
„recipeIngredient“: „{{SCHEMA – Zutaten}}“,
„recipeInstructions“: „{{SCHEMA – Zubereitung}}“,
}
</script>
Über dieses Script werden neben dem Namen des Autors das Rezept-Bild noch die Zutaten und Angaben für die Zubereitung ausgezeichnet. Wenn Ihr im nächsten Schritt bei der Erstellung der Variablen die im Script verwendeten Bezeichnungen wählt, dann müsst Ihr das Script nicht anpassen und könnte es einfach im Tag Manager übernehmen. Hierfür im Tag Manager in dem Tab „Tags“ einen neuen benutzerdefinierten HTML-Tag anlegen und das oben abgebildete Script einfügen.
Erstellung der passenden Variablen
Um die Inhalte auszuzeichnen, erstellen wir im Tag Manager Variablen, die über den passenden CSS-Selektor die Inhalte aufgreifen. Als erstes erstellen wir die Variable für die Auszeichnung des Rezept-Namens. Für unser Beispiel gehen wir davon aus, dass auf allen Rezeptseiten die Rezeptbezeichnungen mit dem H1-Tag gekennzeichnet sind. Die Erstellung der Variable ist dann sehr einfach. Wir klicken im Tag Manager auf den Tab Variablen und legen eine neue, benutzerdefinierte Variable an. Als Variablen Typ wählen wir DOM-Element und als Auswahlmethode CSS-Selektor aus. Da der Name der Rezepte die H1 Überschrift ist, wählen wir als Element-Selektor H1 aus.
Um das Rezeptbild zu erfassen, verfahren wir ähnlich. Wir legen eine neue Variable des Typs DOM-Element an und wählen als Auswahlmethode CSS-Selektor. Um dem passenden Element-Selektor zu finden, öffnen wir auf der Webseite die Google Developer Tools und „untersuchen“ das Bild, das wir auszeichnen möchten.
Damit wir auch das richtige Bild erfassen, müssen wir darauf achten einen eindeutigen Element-Pfad zu wählen. Für das Beispiel gehen wir davon aus, dass die übergeordnete div klasse die Bezeichnung „single-product-image“ und dass Bilder selbst die Klasse img-response haben.
Haben wir Bild und Namen ausgezeichnet, müssen wir nur noch die Informationen zu den Zutaten und die Zubereitung auszeichnen. Die Element-Selektoren finden wir über das gleiche Vorgehen wie wir auch den Selektor für das Bild gefunden haben, mithilfe der „Untersuchen“-Funktion der Google Developer Tools.
Nach der Integrierung des Markups benötigt Google ein paar Tage bis das Rich Snippet in den Suchergebnissen angezeigt wird. Um direkt nach der Veröffentlichung zu überprüfen, ob alle Daten nach unseren Wünschen erfasst werden, bietet sich das „Test Tool für strukturierte Daten“ von Google an. Wird die Auszeichnung hier korrekt angezeigt, dann können wir davon ausgehen, dass Google die Markups in ein paar Tagen übernehmen und auch unser Suchergebnis in Form eines Rich Snippets angezeigt wird.
Fazit
Die Auszeichnung von Rezepten und generell Inhalten mit strukturierten Daten von Schema.org bringt Vorteile mit sich und lässt sich über den Tag Manager auch ohne umfangreiche Programmierkenntnisse schnell und einfach umsetzen. Probiert es aus!
In diesem Video erfahrt Ihr außerdem mehr zu strukturierten Daten:
