SEO für Foodblogs – Rich Snippets

Meistens sehen die Suchergebnisse in Google ja so aus: der Titel als Link, darunter die URL und die Meta-Beschreibung, allenfalls noch ein paar Verlinkungen zu Unterseiten:

Manche Suchergebnisse weisen jedoch noch mehr Infos auf – beispielsweise, wenn du nach Rezepten suchst:

Hier lässt uns ein Foto gleich das Wasser im Mund zusammenlaufen, es wird eine Bewertung angezeigt, die Zubereitungszeit und sogar die Kalorienangabe.
Klar, dass man so einen Suchtreffer mit sogenannten Rich Snippets viel eher anklickt als einen stinknormalen Link ohne Bild und Sternchen!

Und wie funktioniert das Ganze? – Indem das Rezept mit bestimmten Hinweisen im Code versehen wird, über die Google den Inhalt verarbeiten kann und erkennt, dass es sich um ein Rezept handelt.

In diesem Tutorial zeige ich, wie du deine Rezepte entsprechend aufbereitest und damit mehr Leser über Google & Konsorten bekommst. 🙂

Microdata – hilf dem Bot auf die Sprünge

Grundsätzlich ist der GoogleBot ja doof. Er „liest“ einen Blogeintrag und hat trotzdem keine Ahnung, ob es sich nun um ein Gedicht handelt oder einen Reisebericht oder eben um ein Rezept. Damit er das erkennen kann, benötigt er Hinweise im HTML des Artikels.

Diese sogenannten Mikrodaten sagen etwas über den Inhalt aus („das ist ein Name!“, „das ist eine Bewertung!“) und machen ihn dadurch maschinenlesbar. Dieser Ansatz nennt sich Semantisches Web und ist übrigens nicht sonderlich neu – schon seit 2009 stellt Google diese Rich Snippets dar, wobei sich damit mehr und mehr Daten auszeichnen lassen: Produkte, Veranstaltungen, Bücher, Orte, Personen, … und eben auch Rezepte.

Grundsätzlich fügst du dem HTML zusätzlich die Attribute itemscope, itemtype und itemprop hinzu.

Auf schema.org findet sich die Dokumentation für sämtliche Sorten von strukturierten Daten, auch jeweils mit einem Beispiel.

Wie sieht der Code für Rezepte aus?

Keine Angst vor ein bisschen HTML: 🙂

<div itemscope itemtype="http://schema.org/Recipe">
   <h2><span itemprop="name">Apfelkuchen</span></h2>
   Von <span itemprop="author">Jane Doe</span>,
   <meta itemprop="datePublished" content="2014-07-18">18. Juli 2014

   <img itemprop="image" src="apfelkuchen.jpg" alt="Ein Stück Apfelkuchen">

   <span itemprop="description">Das hier ist mein Lieblingsrezept für Apfelkuchen.</span>

   <strong>Zubereitungszeit:</strong> <meta itemprop="prepTime" content="PT20M">20 Minuten
   <strong>Backzeit:</strong> <meta itemprop="cookTime" content="PT1H">1 hour

   <h3>Zutaten:</h3>
   <ul>
      <li><span itemprop="ingredients">600g Äpfel</span></li>
      <li><span itemprop="ingredients">5 Eier</span></li>
      <li><span itemprop="ingredients">150g Mehl</span></li>
      ...
   </ul>

   <h3>Zubereitung:</h3>
   <ol>
      <li><span itemprop="recipeInstructions">Lass den Backofen auf 175° vorheizen.</span></li>
      <li>Schäle die Äpfel und schneide sie in Scheibchen.</li>
      ...
   </ol>
</div>

Hier habe ich mal die wichtigsten Mikrodaten eingebaut, die dein Rezept grundsätzlich als solches ausweisen, das Vorschaufoto kennzeichnen, die Zutaten auflisten und so weiter.

Und wie kann ich meine Rezepte mit WordPress optimieren?

Theoretisch kannst du einfach in die HTML-Ansicht des Beitrags wechseln und dein Rezept von Hand mit dem entsprechenden Code auszeichnen. Dabei stößt du aber auf gleich zwei Nachteile:

• Standardmäßig filtert WordPress diese Attribute wieder aus dem Code heraus, sodass die ganze schöne Auszeichnung verloren geht, wenn du zwischen der normalen Editoransicht und dem Code hin und her wechselst.
• Den ganzen Code von Hand einzutragen, ist ziemlich umständlich und zeitraubend.

Daher bietet sich hier der Einsatz eines Plugins ein.
Ich habe mehrere getestet und stelle sie dir hier vor:

WordPress-Plugin für Rezepte: Easy Recipe

Easy Recipe ist ziemlich gut. Du kannst damit an jeder beliebigen Stelle innerhalb deines Artikels das Rezept unterbringen und über eine spezielle Eingabemaske die Zutaten, Zubereitungsschritte und so weiter eingeben.
Einige Features sind jedoch nur in der kostenpflichten Pro-Version enthalten, so zum Beispiel das Festlegen eines anderen Vorschaubilds.

Allerdings zeichnet Easy Recipe eben auch nur Rezepte aus – wenn du weitere Posts mit Rich Snippets darstellen willst, brauchst du noch andere Plugins.

All In One Schema.org Rich Snippets

Das Plugin All In One Schema.org Rich Snippets kann mit allen Typen von Inhalten umgehen (Veranstaltung, Software, Produkt, Rezept, …), fällt allerdings etwas spärlich aus: es erzeugt unterhalb des Artikels eine zusätzliche Box mit dem Rezepttitel, einem separat hochladbaren Foto, der Zubereitungsdauer sowie einem Bewertungstool.

Weitere Infos zu den Zutaten oder den Nährwerten können nicht eingegeben werden, und somit muss man die Box zusätzlich zum eigentlichen Rezept einbinden. Unschön.

Mein Favorit für alle Sorten von Rich Snippets: WPSocial SEO Booster

Meine Wahl ist letztlich auf das sehr komfortable Plugin WPSocial SEO Booster gefallen, das ebenfalls für alle Sorten von Inhalten ausgelegt ist.

Hier wird eine zusätzliche, umfangreiche Eingabemaske eingeblendet.

Kleiner Nachteil: man kann die so erzeugte Rezepte-Box nicht an einer beliebigen Stelle im Artikel platzieren, sondern nur ganz oben oder ganz unten.

Live & in Farbe kannst du WPSocial SEO Booster hier bei meinen Rezepten auf neontrauma.de sehen, wobei ich die gerade nach und nach alle umstelle und noch nicht ganz fertig bin. 😉

Teste dein Blog

Ob du alles richtig gemacht hast und entsprechende Rich Snippets erzeugst, kannst du unter google.com/webmasters/tools/richsnippets testen. Hier wird dir eine Vorschau deines Links generiert, wie er auch in den Suchergebnissen von Google erscheinen wird.

Ist dir diese speziellere Auszeichnung in den Google-Suchergebnissen schon einmal aufgefallen?
Hast du deine Rezepte und anderen Beiträge entsprechend optimiert?