Mit ein paar HTML-Grundlagen lassen sich die eigenen Rezepte-Seiten einfach mit sogenannten "Meta-Tags" anreichern. Durch diese Zusatzinformationen versteht Google, Instagram und co. besser was sich da eigentlich auf der Seite befindet. Dadurch werden Suchergebnisse und Vorschau-Ansichten (z.B. beim Teilen von Rezepte-Links in diversen Apps) optisch ansprechend dargestellt. Nebenbei findet Google die Meta-Tags toll und belohnt Webseiten mit Tags unter Umständen mit besserer Sichtbarkeit in den Suchergebnissen.

HTML-Ansicht vs. Plugin

Um die Meta-Tags einzufügen müsst ihr direkt das HTML eurer Rezepte-Seite bearbeiten. Dort könnt ihr die "Zusatzinformationen" einfach einfügen. Alle gängigen CMS (Content Management Systeme) wie Wordpress, Joomla oder Drupal bieten zusätzlich zum normalen "WYSIWYG"-Editor (What you see is what you get) auch eine Möglichkeit den ausgegebenen HTML-Code zu bearbeiten.

Neben der Möglichkeit HTML direkt zu bearbeiten gibt es für die gängigen CMS auch Plugins, die das erstellen von Rezepte-Seiten mit vordefinierten Feldern erleichtert und die Meta-Tags automatisch einfügt. Wir behandeln hier nur die "native" Lösung, direkt im HTML.

Meta Tags für Rezepte-Seiten

Ans eingemachte: Jetzt geht es darum einfach Text-Snippets an bestimmten Stellen und in einem vordefinierten Format in eure HTML-Rezeptseite einzufügen.

Ich nehme als Beispiel ein Rezept hier vom Foodly-Blog: https://www.getfoodly.com/rezept/quesadillas-mit-bohnen-und-kichererbsen

Quellcode (Copy-Paste im Browser):

view-source:https://www.getfoodly.com/rezept/quesadillas-mit-bohnen-und-kichererbsen

Eine Sache noch: Nicht wundern - da sich nicht alle an einen einheitlichen Standard halten, werden manche Eigenschaften eurer Rezeptseite gleich mit mehreren ähnlichen Tags beschrieben.

Seiteninformationen

Die folgenden allgemeine Seiten-Informationen eurer Rezeptseite fügt ihr ganz oben im HTML<body> ein. Achtung, gerade die ersten Tags (die ich hier der Vollständigkeit zuliebe aufführe) werden in der Regel schon vom CMS auf der Seite ausgeliefert (z.B. über den Artikeltitel). Da es kontraproduktiv ist die Tags mehrfach anzugeben schaut am besten im Quellcode eurer Seite direkt ob die betreffenden Stellen schon vorhanden sind. Dazu geht ihr online auf die Rezeptseite eurer Blogs (direkt auf dem Blog, nicht im CMS) und kommt über einen Rechtsklick auf "Quellcode anzeigen" (bzw. "View Page Source").

Der Seitentitel wird im Browser-Tab und in den Suchergebnissen als Ergebnisüberschrift angezeigt:

<title>Quesadillas mit weißen Bohnen und Kichererbsen – Foodly</title>
<meta property="og:title" content="Quesadillas mit weißen Bohnen und Kichererbsen – Foodly"/>

Die Seitenbeschreibung dient als Beschreibungstext in den Google Suchergebnissen:

<meta name="description" content="Mexikanisches Essen einfach und lecker zubereitet. 😍 Wir haben diese vegetarischen, wahnsinnig cremigen Quesadillas für euch – Suchtfaktor garantiert."/>
<meta property="og:description" content="Mexikanisches Essen einfach und lecker zubereitet. 😍 Wir haben diese vegetarischen, wahnsinnig cremigen Quesadillas für euch – Suchtfaktor garantiert."/>

Durch den "robots"-Tag sagen wie Google: Ja, nimm diese Seite doch bitte mit in deinen Suchergebnissen auf!

<meta name="robots" content="index,follow"/>

Euer Blogname.

<meta name="author" content="Foodly"/>
<meta property="og:site_name" content="Foodly"/>

Das Hauptbild eurer Rezepteseite (wird z.B. teilweise als Sharing-Vorschaubild verwendet.)

<meta property="og:image" content="https://res.cloudinary.com/spiderless/image/upload/c_scale,w_1170/v1560500762/foodly/blog/recipe-quesadillas/Quesadillas-Header.jpg"/>

Der URL-Pfad über den euer Rezept hauptsächlich erreichbar ist:

<meta property="og:url" content="https://www.getfoodly.com/rezept/quesadillas-mit-bohnen-und-kichererbsen"/>
<link rel="canonical" href="https://www.getfoodly.com/rezept/quesadillas-mit-bohnen-und-kichererbsen"/>

Wenn ihr Foodly-Blogger seid könnt ihr gerne die Foodly App ID angeben:

<meta property='fb:app_id' content='507044299633917' />

Rezeptdetails

So markieren wie den Bereich in dem sich der Rezept-Content befindet. Das kann ein Teilbereich, oder auch das ganze Dokument umfassen.

<div itemscope itemType="http://schema.org/Recipe"> ... </div>

Innerhalb dieses Bereichs können wir Rezeptinformationen kenntlich machen. Der Eigenschaftsname wird als Attribut itemProp, der Inhalt optional noch einmal in einem Attribut content wiederholt. Eine Vollständige Liste an Eigenschaften ist auf schema.org dokumentiert: https://schema.org/Recipe

Hier einige Beispiele zur Orientierung:

<h1
  itemProp="name"
  content="Cremige Quesadillas mit weißen Bohnen und Kichererbsen"
>
Cremige Quesadillas mit weißen Bohnen und Kichererbsen
</h1>
<time itemProp="totalTime" dateTime="PT20M">20 min</time>
<div itemProp="description"> ... Meine Rezeptbeschreibung </div>
<div itemProp="recipeYield">für 4 Personen</div>
<div itemProp="ingredients">300 g weiße Bohnen</div>
<div itemProp="ingredients">200 g Kichererbsen</div>
...
<ul itemProp="recipeInstructions">
  <li>Schritt 1: ...</li>
  <li>Schritt 2: ...</li>
</ul>

💪 Super, geschafft!

Sobald eure Änderungen live sind könnt ihr sie über ein Tool von Google testen: https://search.google.com/structured-data/testing-tool

Wer sich für die technischen Hintergründe interessiert: Die Schlagwörter in dem Zusammenhang sind "Semantic Web", "Rich Snippets" und "Schema.org".

Weiterführende Links zu diesem Thema: