Rich snippet - Ricette

Novità! schema.org ti permette di eseguire il markup di una gamma più ampia di tipi di elementi nelle tue pagine utilizzando un vocabolario che Google, Microsoft e Yahoo! sono tutti in grado di comprendere. Leggi ulteriori informazioni. Google supporta ancora il markup dei rich snippet esistente.

Quando nelle pagine web sono presenti informazioni sulle ricette indicate con il linguaggio di markup, Google potrebbe utilizzare tali informazioni per mostrare rich snippet relativi ai risultati sulle ricette e per l'inclusione in Google con la visualizzazione Recipe. La visualizzazione Recipe è attualmente disponibile solo negli Stati Uniti e in Giappone, ma ci stiamo adoperando per renderla disponibile ovunque.


snippet di una ricetta di cui è stato eseguito il markup con il formato hRecipe

Linee guida sull'utilizzo

Lo scopo di un rich snippet di ricetta è fornire agli utenti informazioni aggiuntive su una ricetta specifica, come la classificazione a stelle assegnata dai recensori (da 1 a 5 stelle), tempi di cottura/preparazione e informazioni sulle calorie.

Per gli snippet delle ricette valgono le seguenti linee guida:

  • Quando utilizzi il markup per le ricette, l'argomento principale della pagina deve riguardare una ricetta specifica. L'utilizzo del markup delle ricette in una pagina contenente più ricette non è supportato.
  • Se il markup della ricetta contiene una singola recensione, il nome del recensore deve essere un nome valido (persona o organizzazione). Ad esempio, "50% di sconto sugli ingredienti" non è un nome valido per un recensore.

Proprietà

Google riconosce le seguenti proprietà (hRecipe) dei microdati, di RDFa e dei microformati. Quando i nomi delle proprietà dei microdati/RDFa e dei microformati sono diversi, il nome della proprietà hRecipe è visualizzato tra parentesi. Le proprietà in grassetto sono obbligatorie. Inoltre, attualmente vengono mostrati i rich snippet solo per le ricette che includono almeno due dei seguenti elementi:
  • photo
  • prepTime, cookTime, totalTime o ingredients
  • calories
  • review (nidificato)
Proprietà Descrizione
name (fn) Il nome del piatto.
recipeType (tag) Il tipo di piatto: ad esempio antipasto, entrée, dessert...
photo Immagine del piatto preparato.
published La data in cui la ricetta è stata pubblicata, in formato di data ISO.
summary Un breve riepilogo per descrivere il piatto.
review Una recensione del piatto. Può includere informazioni sulla recensione nidificate.
prepTime Il tempo necessario per preparare la ricetta del piatto, in formato di durata ISO 8601. Per specificare un intervallo di tempo è possibile utilizzare gli elementi secondari min e max.
cookTime Il tempo necessario per cucinare effettivamente il piatto, in formato di durata ISO 8601. Per specificare un intervallo di tempo è possibile utilizzare gli elementi secondari min e max.
totalTime (duration) Il tempo totale necessario per preparare il piatto, in formato di durata ISO 8601. Per specificare un intervallo di tempo è possibile utilizzare gli elementi secondari min e max.
nutrition Informazioni nutrizionali sulla ricetta. Può contenere i seguenti elementi secondari: servingSize, calories, fat, saturatedFat, unsaturatedFat, carbohydrates, sugar, fiber, protein e cholesterol. Questi elementi non fanno esplicitamente parte del microformato hRecipe ma vengono riconosciuti da Google.
instructions I passaggi per preparare il piatto. Può contenere l'elemento secondario instruction, utilizzabile per annotare ogni passaggio.
yield La quantità prodotta dalla ricetta (ad esempio il numero di persone servite, il numero di porzioni ecc.).
ingredient Un ingrediente utilizzato nella ricetta. Può contenere gli elementi secondari name (nome dell'ingrediente) e amount (quantità). Utilizza questa proprietà per identificare i singoli ingredienti.
author La persona che ha ideato la ricetta. Può includere informazioni nidificate sulla persona.

Markup dei contenuti

Il seguente codice HTML descrive una ricetta per preparare una torta di mele:
<div>
  <h1>Torta di mele della nonna per le feste</h1> 
   
  <img src="apple-pie.jpg" />
  Di Carolina Sacchi 
   
  Pubblicata: 5 novembre 2009
   
  Questa è la ricetta della torta di mele di mia nonna. Mi piace aggiungerci un pizzico di noce moscata.
  4,0 stelle in base a 35 recensioni 
   
  Tempo di preparazione: 30 min
   
  Tempo di cottura: 1 ora
   
  Tempo totale: 1 h 30 min
  Risultato: torta di 30 cm di diametro (8 porzioni)
  
  Dimensioni porzione: 1 fetta media
  
  Calorie per porzione: 250
  Grassi per porzione: 12 g

   
  Ingredienti: 
    Mele tagliate finemente: 6 tazze
    Zucchero bianco: 3/4 di tazza 
  ... 
		
  Preparazione: 
    1. Tagliare e sbucciare le mele. 
    2. Mescolare zucchero e cannella. Usare più zucchero per le mele aspre. 
  ...
</div>

Le seguenti sezioni descrivono come eseguire il markup di questi contenuti utilizzando i microdati, i microformati o RDFa.

Per verificare la correttezza del markup e visualizzare in anteprima l'aspetto dei tuoi contenuti nei risultati di ricerca, utilizza lo strumento di test per i dati strutturati.
Microdati

Di seguito viene presentato lo stesso codice HTML sottoposto a markup con i microdati.

<div itemscope itemtype="http://data-vocabulary.org/Recipe" >
   
  <h1 itemprop="name">Torta di mele della nonna per le feste</h1>
  <img itemprop="photo" src="apple-pie.jpg" /> 
   
  Di <span itemprop="author">Carolina Sacchi</span> 
  Pubblicato: <time datetime="2009-11-05" itemprop="published">
    
    5 novembre 2009</time>
  
  <span itemprop="summary">Questa è la ricetta della torta di mele di mia nonna.  I like to add a
    dash of nutmeg.</span>
  <span itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
    <span itemprop="rating">4,0</span> stelle in base a
    <span itemprop="count">35</span> recensioni </span>
  
  Tempo di preparazione: <time datetime="PT30M" itemprop="prepTime">30 min</time>
  
  Tempo di cottura: <time datetime="PT1H" itemprop="cookTime">1 ora</time>
  
  Tempo totale: <time datetime="PT1H30M" itemprop="totalTime">1 ora e 30 min</time>
  
  Risultato: <span itemprop="yield">torta di 30 cm di diametro (8 porzioni)</span>
  <span itemprop="nutrition" itemscope itemtype="http://data-vocabulary.org/Nutrition">
    Dimensioni porzione: <span itemprop="servingSize">1 fetta media</span>
      
    Calorie per porzione: <span itemprop="calories">250</span>
    Grassi per porzione: <span itemprop="fat">12 g</span>
  </span>
  Ingredienti:
    <span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient">
      <span itemprop="name">Mele tagliate finemente</span>:     
      
      <span itemprop="amount">6 tazze</span>
    </span>
    <span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient">
      
      <span itemprop="name">Zucchero bianco</span>:
      <span itemprop="amount">3/4 di tazza</span>
    </span>
  ...
		  
  Preparazione:
    <div itemprop="instructions">
      1. Tagliare e sbucciare le mele.
      2. Mescolare zucchero e cannella. Usare più zucchero per le mele aspre.
      ...
    </div>
</div>

Ecco come funziona questo codice di esempio:

  • La prima riga indica che il codice HTML racchiuso tra tag <div> rappresenta una ricetta. itemscope indica che i contenuti del tag <div> descrivono un elemento e itemtype="http://www.data-vocabulary.org/Recipe" indica che l'elemento è una ricetta.
  • Il codice di esempio descrive le proprietà della ricetta, come autore, ingredienti e tempo di preparazione. Per assegnare un'etichetta alle proprietà della ricetta, a ogni elemento contenente una di queste proprietà (come <div> o <span>) viene assegnato un attributo itemprop che indica una proprietà. Ad esempio <span itemprop="author">.
  • Una proprietà può essere formata da un altro elemento (in altre parole, un elemento può includere altri elementi). Ad esempio, la ricetta precedente include un elemento Review-aggregate (itemtype="http://www.data-vocabulary.org/Review-aggregate'') con le proprietà rating e count, nonché un elemento Recipe-ingredient (ingredient), che a sua volta ha le proprietà amount e name.
  • Tranne che in circostanze speciali, Google non mostra all'utente i contenuti che non sono visibili. Tuttavia, in alcune situazioni può essere utile fornire ai motori di ricerca informazioni più dettagliate, anche se non desideri che vengano visualizzate per le persone che visitano la tua pagina. In questo esempio viene utilizzato l'attributo datetime per indicare che l'analizzatore sintattico di rich snippet deve utilizzare il valore nell'attributo per trovare il tempo di preparazione, il tempo di cottura e il tempo totale necessario per preparare il piatto, ma la durata nella pagina viene comunque visualizzata in modo leggibile. Ad esempio: <time datetime="PT1H" itemprop="cookTime">1 hour</time>.
Microformati

Di seguito viene presentato lo stesso codice HTML sottoposto a markup con i microformati. Nota. Alcune proprietà mostrate sopra, benché riconosciute da Google, non fanno parte delle specifiche hRecipe ufficiali pubblicate su microformats.org.

<div class="hrecipe">
   
   <span class="item">
      <h1 class="fn">Torta di mele della nonna per le feste</h1>
   </span>
   <img src="apple-pie.jpg" class="photo" />
   
   Di <span class="author">Carolina Sacchi</span>
   Pubblicata: <span class="published"> 5 novembre 2009<span class="value-title" title="2009-11-05"></span></span>
   
   <span class="summary">Questa è la ricetta della torta di mele di mia nonna. Mi piace aggiungerci un pizzico di noce moscata.</span>
   <span class="review hreview-aggregate">
      <span class="rating">
      
         <span class="average">4,0</span> stelle in base a 
         
         <span class="count">35</span> recensioni
      </span> 
   </span>
   Tempo di preparazione: <span class="prepTime">30 min <span class="value-title" title="PT30M"></span></span>
   
   Tempo di cottura: <span class="cooktime">1 ora<span class="value-title" title="PT1H"></span></span>   
      
   Tempo totale: <span class="duration">1 ora 30 min <span class="value-title" title="PT1H30M"></span></span>
   
   Risultato: <span class="yield">torta di 30 cm di diametro (8 porzioni)</span>
   
   <span class="nutrition">
      
      Dimensioni porzione: <span class="servingsize">1 fetta media</span>
      
      Calorie per porzione: <span class="calories">250</span>
      
      Grassi per porzione: <span class="fat">12 g</span>
   
   </span>   
   
   Ingredienti:
   <span class="ingredient">
      <span class="name">Mele tagliate finemente</span>:
      
      <span class="amount">6 tazze</span> 
   </span>
   <span class="ingredient">
      <span class="name">Zucchero bianco</span>:
      <span class="amount">3/4 di tazza</span> 
    
   </span>   

   Preparazione:
   <span class="instructions">
   
   1. Tagliare e sbucciare le mele.
   2. Mescolare zucchero e cannella. Usare più zucchero per le mele aspre.
   ...   
   </span>
</div>

Ecco come funziona questo codice di esempio:

  • Nella prima riga, class="hrecipe" indica che l'HTML racchiuso tra divrappresenta una ricetta (in questo caso, la torta di mele).
  • I dati strutturati sono espressi dall'attributo class (come class="fn" e class="author") e dai valori (come "zucchero bianco", "1 h 30 min"). Puoi cambiare i tag quali span e div per adattarli alle tue esigenze di formattazione.
  • Per visualizzare informazioni sulle recensioni, le informazioni Review-aggregate (hreview-aggregate) vengono nidificate all'interno di hrecipe. Ulteriori informazioni sugli elementi nidificati.
  • Il voto (class="rating") rappresenta un valore nel contesto del markup dei voti ed è espresso con il testo "4,0 stelle" nella pagina web della ricetta. Ulteriori informazioni sul markup dei voti delle recensioni.
  • Tranne che in circostanze speciali, Google non mostra all'utente i contenuti che non sono visibili. Tuttavia, in alcune situazioni può essere utile fornire ai motori di ricerca informazioni più dettagliate, anche se non desideri che vengano visualizzate per le persone che visitano la tua pagina. Il codice HTML precedente contiene un esempio del value class pattern dei microformati, utilizzato per indicare il tempo totale di cottura ai motori di ricerca in formato di durata ISO 8601, mentre le informazioni vengono visualizzate in uno stile di semplice lettura ("1 ora 30 min") sulla pagina stessa. Viene utilizzato l'attributo title per indicare che l'analizzatore sintattico di rich snippet deve utilizzare il valore nell'attributo per trovare il tempo totale necessario per preparare il piatto, ma la durata nella pagina viene comunque visualizzata in modo leggibile. Ad esempio: <span class="value-title" title="PT1H30M">.
RDFa

Di seguito viene presentato lo stesso codice HTML sottoposto a markup con RDFa.


<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Recipe">
   
   <h1 property="v:name">Torta di mele della nonna per le feste</h1>
   
   <span rel="v:photo"/>
     
     <img src="apple-pie.jpg"/>
   
   </span>
   Di <span property="v:author">Carolina Sacchi</span>
   
   Pubblicata: <span property="v:published" content="2009-11-05">5 novembre 2009</span>
   
   <span property="v:summary">Questa è la ricetta della torta di mele di mia nonna.  Mi piace aggiungere un pizzico di noce moscata.</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> stelle in base a 
                
               <span property="v:count">35</span> recensioni
            
            </span>
         </span>
      </span>
   </span>
   Tempo di preparazione: <span property="v:prepTime" content="PT30M">30 min</span>
   
   Tempo di cottura: <span property="v:cookTime" content="PT1H">1 ora</span>
   
   Tempo totale: <span property="v:totalTime" content="PT1H30M">1 ora 30 min</span>
   
   Risultato: <span property="v:yield">torta di 30 cm di diametro (8 porzioni)</span>
   
   <span rel="v:nutrition">
      
      <span typeof="v:Nutrition"> 
         
        Dimensioni porzione: <span property="v:servingSize">1 fetta media</span>
        
        Calorie per porzione: <span property="v:calories">250</span>
        
        Grassi per porzione: <span property="v:fat">12 g</span> 
      </span>
   </span>
   Ingredienti:   
   <span rel="v:ingredient">
      <span typeof="v:Ingredient"> 
         <span property="v:name">Mele tagliate finemente</span>:   
            
         <span property="v:amount">6 tazze</span> 
     </span>   
   </span>
   <span rel="v:ingredient">
      <span typeof="v:Ingredient"> 
          
         <span property="v:name">Zucchero bianco</span>:   
            
         <span property="v:amount">3/4 di tazza</span> 
        
      </span>   
   </span>  
   ...
 
   Preparazione:
   <div property="v:instructions">
   
   1. Tagliare e sbucciare le mele.
   2. Mescolare zucchero e cannella. Usare più zucchero per le mele aspre.
   ...   
   </div>
</div>

Ecco come funziona questo codice di esempio.

  • L'esempio inizia con una dichiarazione dello spazio dei nomi che utilizza xmlns. Ciò indica lo spazio dei nomi in cui è specificato il vocabolario (un elenco di entità e i relativi componenti). Puoi utilizzare la dichiarazione dello spazio dei nomi xmlns:v="http://rdf.data-vocabulary.org/# namespace" ogni volta che esegui il markup di pagine per dati di persone, recensioni, ricette, eventi o luoghi. Assicurati di utilizzare una barra finale e # (xmlns:v="http://rdf.data-vocabulary.org/#").
  • Sempre nella prima riga, typeof="v:Recipe" indica che i contenuti sottoposti a markup descrivono una ricetta.
  • Ogni proprietà della ricetta (come il nome, il riepilogo e il contenuto di grassi) è associata all'etichetta property. Il nome della proprietà è preceduto dal prefisso v: (<span property="v:fat">).
  • Tranne che in circostanze speciali, Google non mostra all'utente i contenuti che non sono visibili. Tuttavia, in alcune situazioni può essere utile fornire ai motori di ricerca informazioni più dettagliate, anche se non desideri che vengano visualizzate dalle persone che visitano la tua pagina. In questo esempio viene utilizzato l'attributo content per indicare che l'analizzatore sintattico di rich snippet deve utilizzare il valore nell'attributo per trovare il tempo di preparazione, il tempo di cottura e il tempo totale necessario per preparare il piatto, ma la durata nella pagina viene comunque visualizzata in modo leggibile. Ad esempio: <span content="PT30M" property="v:prepTime">30 min</span>.