morefire
MENÜ

Rezepte über den Tag Manager mit Schema.org auszeichnen

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 den 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.

Rich Snippet

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.

Schema-Bild

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.

Google Developer Tools

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.

Schema-Bild

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!

Michael ist Head of Account Management bei morefire. Er schreibt rund um die Themen Website-Optimierung und Suchmaschinenwerbung.

5 / 5 (2 votes)

Schreibe einen Kommentar

Loading Facebook Comments ...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Loading Disqus Comments ...