Rich snippets - Recepten

Nieuw! Met schema.org kunt u een veel breder scala aan itemtypen markeren op uw pagina's, met een vocabulary die Google, Microsoft en Yahoo! allemaal kunnen herkennen. Meer informatie. (Google biedt echter nog steeds ondersteuning voor uw bestaande rich snippets-markeringen.)

Wanneer receptgegevens zijn gemarkeerd op webpagina's, kan Google die gegevens gebruiken om rich snippets weer te geven voor receptresultaten en voor opname in Google met Recipe View. (Recipe View is momenteel alleen beschikbaar in de Verenigde Staten en Japan, maar we werken eraan het binnenkort overal beschikbaar te stellen.)


fragment voor een recept dat is gemarkeerd met de hRecipe-indeling

Gebruiksrichtlijnen

Het doel van volle receptfragmenten is gebruikers voorzien van aanvullende informatie over een specifiek recept, zoals de sterbeoordeling van de recensent(en) (1 tot 5 sterren), de kook-/voorbereidingstijd en informatie over het aantal calorieën.

De volgende richtlijnen zijn van toepassing op receptfragmenten:

  • Wanneer u receptopmaak gebruikt, moet het hoofdonderwerp van de pagina een specifiek recept zijn. Het gebruik van receptopmaak op een pagina met meerdere recepten wordt niet ondersteund.
  • Als de receptopmaak één recensie bevat, moet de naam van de recensent een geldige naam (persoon of organisatie) zijn. '50 procent korting op ingrediënten' is bijvoorbeeld geen geldige naam voor een recensent.

Eigenschappen

Google herkent de volgende eigenschappen voor microdata, RDFa en microformats (hRecipe). In gevallen waar de naam voor microformats afwijkt van de naam voor microdata/RDFa, wordt de naam voor hRecipe tussen haakjes weergegeven. Vetgedrukte eigenschappen zijn vereist. Daarnaast worden rich snippets momenteel alleen weergegeven voor recepten die ten minste twee van de volgende bevatten:
  • photo
  • prepTime, cookTime, totalTime of ingredients
  • calories
  • review (genest)
Eigenschap Beschrijving
name (fn) De naam van het gerecht.
recipeType (tag) Het type gerecht: voorgerecht, hoofdgerecht, dessert...
photo Afbeelding van de bereiding van het gerecht.
published De datum waarop het recept is gepubliceerd in de ISO-datumnotatie.
summary Een korte beschrijving van het gerecht.
review Een recensie voor het gerecht. Kan geneste recensiegegevens bevatten.
prepTime De benodigde voorbereidingstijd voor het gerecht, in ISO 8601-tijdsnotatie. Kan min, max gebruiken als subelementen om een tijdsbereik op te geven.
cookTime De benodigde kook-/baktijd voor het gerecht, in ISO 8601-tijdsnotatie. Kan min, max gebruiken als subelementen om een tijdsbereik op te geven.
totalTime (duration) De totale benodigde voorbereidingstijd en kook-/baktijd voor het gerecht, in ISO 8601-tijdsnotatie. Kan min, max gebruiken als subelementen om een tijdsbereik op te geven.
nutrition Voedingsinformatie voor het recept. Kan de volgende subelementen bevatten: servingSize, calories, fat, saturatedFat, unsaturatedFat, carbohydrates, sugar, fiber, protein, cholesterol. Deze elementen maken niet expliciet deel uit van de hRecipe-microformat, maar Google kan ze wel herkennen.
instructions De stappen om het gerecht te bereiden. Kan het subelement instruction bevatten, wat kan worden gebruikt om elke stap te annoteren.
yield De hoeveelheid die met het recept wordt gemaakt (bijvoorbeeld voor hoeveel personen, hoeveel porties, enzovoort).
ingredient Een ingrediënt dat wordt gebruikt in het recept. Kan de subitems name (naam van het ingrediënt) en amount bevatten. Gebruik dit om afzonderlijke ingrediënten aan te geven.
author De auteur van het recept. Kan geneste persoonsgegevens bevatten.

Inhoud markeren

De volgende HTML-code beschrijft een recept voor appeltaart:
<div>
  <h1>Oma's bijzondere appeltaart</h1>
  <img src="apple-pie.jpg" />
  Door Karin Smit
  Gepubliceerd: 5 november 2011
  Dit is het appeltaartrecept van mijn oma.  Zelf voeg ik graag een snufje nootmuskaat toe.
  4,0 sterren op basis van 35 recensies
  Voorbereidingstijd: 30 minuten
  Kooktijd: 1 uur
  Totale tijd: 1 uur 30 minuten
  Resultaat: 1 taart van 23 cm (8 porties)
  Portiegrootte: 1 middelgroot stuk
  Calorieën per portie: 250
  Vet per portie: 12 g
  Ingrediënten: 
    Appels in dunne schijfjes: 1,2 kg
    Suiker: 150 g 
  ... 
		
  Instructies: 
    1. Snijd en schil de appels 
    2. Meng suiker en kaneel door elkaar. Voeg meer suiker toe als u zure appels gebruikt. 
  ...
</div>

In de volgende gedeelten wordt beschreven hoe u deze inhoud kunt markeren met microdata, microformats of RDFa.

Als u wilt controleren of uw markeringen correct zijn en u een voorbeeld wilt bekijken van hoe uw inhoud er in zoekresultaten kan uitzien, gebruikt u het hulpprogramma voor het testen van gestructureerde gegevens.
Microdata

Hier volgt dezelfde HTML-code met markeringen in microdata.

<div itemscope itemtype="http://data-vocabulary.org/Recipe" >
  <h1 itemprop="name">Oma's bijzondere appeltaart</h1>
  <img itemprop="photo" src="apple-pie.jpg" /> 
  Door <span itemprop="author">Karin Smit</span>
  Gepubliceerd: <time datetime="2011-11-05" itemprop="published">
    5 november 2011</time>
  <span itemprop="summary">Dit is het appeltaartrecept van mijn oma.  Zelf voeg ik graag een
    snufje nootmuskaat toe.</span>
  <span itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
    <span itemprop="rating">4,0</span> sterren op basis van
    <span itemprop="count">35</span> recensies </span>
  Voorbereidingstijd: <time datetime="PT30M" itemprop="prepTime">30 minuten</time>
  Kooktijd: <time datetime="PT1H" itemprop="cookTime">1 uur</time>
  Totale tijd: <time datetime="PT1H30M" itemprop="totalTime">1 uur 30 minuten</time>
  Resultaat: <span itemprop="yield">1 taart van 23 cm (8 porties)</span>
  <span itemprop="nutrition" itemscope itemtype="http://data-vocabulary.org/Nutrition">
    Portiegrootte: <span itemprop="servingSize">1 middelgroot stuk</span>
    Calorieën per portie: <span itemprop="calories">250</span>
    Vet per portie: <span itemprop="fat">12 g</span>
  </span>
  Ingrediënten:
    <span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient">
      <span itemprop="name">Appels </span> in dunne schijfjes:
      <span itemprop="amount">1,2 kg</span>
    </span>
    <span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient">
      <span itemprop="name">Suiker</span>:
      <span itemprop="amount">150 g</span>
    </span>
  ...
		  
  Instructies:
    <div itemprop="instructions">
      1. Snijd en schil de appels
      2. Meng suiker en kaneel door elkaar. Voeg meer suiker toe als u zure appels gebruikt.
      ...
    </div>
</div>

Dit voorbeeld werkt als volgt:

  • Op de eerste regel geeft aan dat de HTML-inhoud tussen de <div>-tags een recept is. itemscope geeft aan dat de inhoud van de <div>tags een item beschrijft en itemtype="http://www.data-vocabulary.org/Recipe" geeft aan dat het item een recept is.
  • In het voorbeeld worden de eigenschappen van het recept beschreven, zoals de auteur, de ingrediënten en voorbereidingstijd. Voor het labelen van recepteigenschappen wordt aan elk element dat een van deze eigenschappen bevat (zoals <div> of <span>) een itemprop-kenmerk toegekend waarmee een eigenschap wordt aangegeven. Bijvoorbeeld <span itemprop="author">.
  • Een eigenschap kan bestaan uit een ander item (met andere woorden: een item kan andere items bevatten). Het bovenstaande recept bevat bijvoorbeeld een item met samengevoegde recensies (itemtype="http://www.data-vocabulary.org/Review-aggregate") met de eigenschappen rating en count en een item met ingrediënten (ingredient), dat de eigenschappen amount en name bevat.
  • Google geeft geen inhoud weer die niet zichtbaar is voor de gebruiker (behalve in speciale gevallen). In sommige gevallen kan het nuttig zijn gedetailleerdere informatie te leveren aan zoekmachines, zelfs wanneer u deze informatie niet aan de bezoekers van uw pagina wilt weergeven. In dit voorbeeld wordt het kenmerk datetime gebruikt om aan te geven dat de rich snippets-parser de kenmerkwaarde moet gebruiken om de voorbereidingstijd, kooktijd en totale tijd te vinden, maar worden de tijden op de pagina toch weergegeven in een vorm die door mensen kan worden gelezen. Bijvoorbeeld: <time datetime="PT1H" itemprop="cookTime">1 uur</time>.
Microformats

Hier volgt dezelfde HTML-code met markeringen in microformats. (Opmerking: sommige van de bovenstaande eigenschappen worden wel herkend door Google, maar maken geen deel uit van de officiële hRecipe-conceptspecificatie die is gepubliceerd op microformats.org.)

<div class="hrecipe">
   <span class="item">
      <h1 class="fn">Oma's bijzondere appeltaart</h1>
   </span>
   <img src="apple-pie.jpg" class="photo" />
   Door <span class="author">Karin Smit</span>
   Gepubliceerd: <span class="published"> 5 november  2009<span class="value-title" title="2009-11-05"></span></span>
   <span class="summary">Dit is het appeltaartrecept van mijn oma.  Zelf voeg ik graag een snufje nootmuskaat toe.</span>
   <span class="review hreview-aggregate">
      <span class="rating">
         <span class="average">4,0</span> sterren op basis van
         <span class="count">35</span> recensies
      </span> 
   </span>
   Voorbereidingstijd: <span class="preptime">30 minuten <span class="value-title" title="PT30M"></span></span>
   Kooktijd: <span class="cooktime">1 uur<span class="value-title" title="PT1H"></span></span>   
   Totale tijd: <span class="duration">1 uur 30 minuten <span class="value-title" title="PT1H30M"></span></span>
   Resultaat: <span class="yield">1 taart van 23 cm (8 porties)</span>
   <span class="nutrition">
      Portiegrootte: <span class="servingsize">1 middelgroot stuk</span>
      Calorieën per portie: <span class="calories">250</span>
      Vet per portie: <span class="fat">12 g</span>
   </span>   
   
   Ingrediënten:
   <span class="ingredient">
      <span class="name">Appels</span> in dunne schijfjes:
      <span class="amount">1,2 kg</span> 
   </span>
   <span class="ingredient">
      <span class="name">Suiker</span>:
      <span class="amount">150 9</span> 
   </span>   

   Instructies:
   <span class="instructions">
   1. Snijd en schil de appels
   2. Meng suiker en kaneel door elkaar. Voeg meer suiker toe als u zure appels gebruikt.
   ...   
   </span>
</div>

Dit voorbeeld werkt als volgt:

  • Op de eerste regel geeft class="hrecipe" aan dat de HTML-code tussen de div-tags een recept is; in dit geval voor appeltaart.
  • De gestructureerde gegevens worden verduidelijkt door het class-kenmerk (zoals class="fn" en class="author") en de waarden (zoals "suiker", "1 uur 30 minuten"). U kunt de tags gebruiken die voor uw opmaak het handigst zijn (zoals span en div).
  • Voor het weergeven van recensiegegevens zijn samengevoegde recensiegegevens (hreview-aggregate) genest in hrecipe. Meer informatie over geneste items.
  • De beoordeling (class="rating") staat voor een waarde voor een beoordelingsmarkering waarbij de beoordeling wordt geschreven als "4,0 sterren" op de webpagina met het recept. Meer informatie over het markeren van recensiebeoordelingen.
  • Google geeft geen inhoud weer die niet zichtbaar is voor de gebruiker (behalve in speciale gevallen). In sommige gevallen kan het nuttig zijn gedetailleerdere informatie te leveren aan zoekmachines, zelfs wanneer u deze informatie niet aan de bezoekers van uw pagina wilt weergeven. De bovenstaande HTML-code bevat een voorbeeld van het Microformats Value Class Pattern, dat wordt gebruikt om de totale kooktijd voor zoekmachines aan te geven in ISO 8601-tijdsnotatie, terwijl deze gegevens worden weergegeven in een beter leesbare vorm op de pagina zelf ("1 uur 30 min"). In dit voorbeeld wordt het kenmerk title gebruikt om aan te geven dat de rich snippets-parser de kenmerkwaarde moet gebruiken om de totale tijd voor het maken van het gerecht te vinden, maar worden de tijden op de pagina toch weergegeven in een vorm die door mensen kan worden gelezen. Bijvoorbeeld: <span class="value-title" title="PT1H30M">.
RDFa

Hier volgt dezelfde HTML-code met markeringen in RDFa.


<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Recipe">
   <h1 property="v:name">Oma's bijzondere appeltaart</h1>
   <span rel="v:photo"/>
     <img src="apple-pie.jpg"/>
   </span>
   Door <span property="v:author">Karin Smit</span>
   Gepubliceerd: <span property="v:published" content="2009-11-05">5 november 2009</span>
   <span property="v:summary">Dit is het appeltaartrecept van mijn oma.  Zelf voeg ik graag een snufje nootmuskaat toe.</span>
   <span rel="v:Review">
      <span typeof="v:Review-aggregate">
         <span rel="v:rating">
            <span typeof="v:Rating">
               <span property="v:average">4,0</span> sterren op basis van 
               <span property="v:count">35</span> recensies
            </span>
         </span>
      </span>
   </span>
   Voorbereidingstijd: <span property="v:prepTime" content="PT30M">30 min</span>
   Kooktijd: <span property="v:cookTime" content="PT1H">1 uur</span>
   Totale tijd: <span property="v:totalTime" content="PT1H30M">1 uur 30 minuten</span>
   Resultaat: <span property="v:yield">1 taart van 23 cm (8 porties)</span>
   <span rel="v:nutrition">
      <span typeof="v:Nutrition"> 
        Portiegrootte: <span property="v:servingSize">1 middelgroot stuk</span>
        Calorieën per portie: <span property="v:calories">250</span>
        Vet per portie: <span property="v:fat">12 g</span> 
      </span>
   </span>
   Ingrediënten:   
   <span rel="v:ingredient">
      <span typeof="v:Ingredient"> 
         <span property="v:name">Appels</span> in dunne schijfjes:   
         <span property="v:amount">1,2 kg</span> 
     </span>   
   </span>
   <span rel="v:ingredient">
      <span typeof="v:Ingredient"> 
         <span property="v:name">Suiker</span>:   
         <span property="v:amount">150 g</span>  
      </span>   
   </span>  
   ...
 
   Instructies:
   <div property="v:instructions">
   1. Snijd en schil de appels
   2. Meng suiker en kaneel door elkaar. Voeg meer suiker toe als u zure appels gebruikt.
   ...   
   </div>
</div>

Dit voorbeeld werkt als volgt.

  • Het voorbeeld begint met de declaratie van een naamruimte via xmlns. Hiermee wordt een naamruimte aangegeven waarin de 'vocabulary' (een lijst met entiteiten en ondergeschikte onderdelen) wordt vermeld. U kunt het declareren van de naamruimte xmlns:v="http://rdf.data-vocabulary.org/# namespace" gebruiken wanneer u pagina's voor personen, recensies, recepten, gebeurtenissen of locatiegegevens van markeringen voorziet. Voeg aan het eind een forward slash en een hekje # toe (xmlns:v="http://rdf.data-vocabulary.org/#").
  • Verder wordt met typeof="v:Recipe" op de eerste regel aangegeven dat de gemarkeerde inhoud een recept is.
  • Elke eigenschap van het recept (zoals de naam, de beschrijving en het vetgehalte) wordt gelabeld met property. Vóór de eigenschapsnaam wordt v: gezet (<span property="v:fat">).
  • Google geeft geen inhoud weer die niet zichtbaar is voor de gebruiker (behalve in speciale gevallen). In sommige gevallen kan het nuttig zijn gedetailleerdere informatie te leveren aan zoekmachines, zelfs wanneer u deze informatie niet aan de bezoekers van uw pagina wilt weergeven. In dit voorbeeld wordt het kenmerk content gebruikt om aan te geven dat de rich snippets-parser de kenmerkwaarde moet gebruiken om de voorbereidingstijd, kooktijd en totale tijd te vinden, maar worden de tijden op de pagina toch weergegeven in een vorm die door mensen kan worden gelezen. Bijvoorbeeld: <span content="PT30M" property="v:prepTime">30 minuten</span>.