Scrivere una ricetta culinaria per i motori di ricerca, Microformati vs Microdati.
In questo tutorial andremo a vedere come creare una ricetta culinaria arricchendo il codice HTML con alcuni rich snippet, creandone due versioni, la prima che utilizzerà Microdata e i vocabolari del progetto Schema.org, la seconda invece Microformats.
Per rich snippets intendo particolari attributi da aggiugnere all’interno del codice HTML con lo scopo di mostrare sui motori di ricerca risultati più dettagliati e soddisfacenti rispetto ad una determinata ricerca, nell’immagine qui sotto un confronto tra una ricetta che non usa rich snippets all’interno del proprio markup ed una invece che li utilizza.
La struttura HTML di una ricetta
Proviamo a creare una struttura HTML base, senza alcun rich snippet, per la recensione di una ricetta, vogliamo che questa mostri:
- Nome della ricetta (ovvio no?)
- La descrizione
- I passaggi per realizzarla
- Gli ingredienti
- Il tempo impiegato per prepararla, per cuocerla e il tempo totale.
- Alcuni valori nutrizionali della ricetta.
Il markup HTML, molto spoglio, potrebbe essere qualcosa come questo:
<div> <h1>La torta della nonna</h1> <p>Questa è la ricetta che vi spiegherà come si prepara la torta della nonna, famosa per ... bla bla bla.</p> <img src="immagine-torta.jpg" height="200px" width="200px"/> Chef: Tony Tempo di preparazione: 15 min Tempo di cottura: 45 min Tempo totale: 1 ora Portata per: 3 persone Ingredienti: 3 uova 500 grammi di zucchero ... Istruzioni: - Mescolare le 3 uova - Aggiungere lo zucchero ... </div>
Lo stesso markup utilizzando Microdata
I Microdata sono un progetto che si sta sviluppando presso il consorzio W3C e fa parte del più grande progetto HTML5, inizialmente i Microformat erano più utilizzati ma da quando Google, Yahoo Bing e Yandex hanno deciso di unirsi insieme formando il progetto Schema.org e di adottare i microdata come linguaggio comune, questo tipo di rich snippet merita molto più interesse di quanto ne abbia raccolto fino ad ora.
<div itemscope itemtype="http://schema.org/Recipe"> // L'url permette di caricare tutto il vocabolario <h1 itemprop="name">La torta della nonna</h1> <p itemprop="description" >Questa è la ricetta che vi spiegherà come si prepara la torta della nonna, famosa per ... bla bla bla.</p> <img src="immagine-torta.jpg" height="200px" width="200px"/> Chef: <span itemprop="author">Tony</span> Tempo di preparazione: <meta itemprop="prepTime" content="PT15M"/> 15 minuti Tempo di cottura: <meta itemprop="cookTime" content="PT45M"/> 45 minuti Tempo totale: <meta itemprop="totalTime" content="PT1H"/>1 ora Portata per: <span itemprop="recipeYield">3 persone</span> Ingredienti: <ul> <li><span itemprop="ingredients">3 uova.</span></li> <li><span itemprop="ingredients">500 grammi di zucchero.</span></li> ... </ul> Istruzioni: <ol itemprop="instructions"> <li>- Mescolare le 3 uova </li> <li>- Aggiungere lo zucchero </li> ... </ol> <div itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"> Tabella nutrizionale: <span itemprop="calories">240 calorie</span>, <span itemprop="fatContent">9 gr grassi</span> </div> </div>
La prima cosa da notare è l’utilizzo degli attributi Itemscope, Itemtype e Itemprop, e quale scopo hanno:
Itemscope: Questo attributo va assegnato all’elemento HTML “padre” quello che racchiude al suo interno tutti gli altri elementi relativi alla ricetta, ed è seguito dall’attributo Itemtype che ha come valore un URL, il quale deve fare riferimento ad un determinato vocabolario, in questo caso il vocabolario del progetto Schema.org specifico per ricette (Recipe in inglese) questo URL viene quindi riconosciuto dai motori di ricerca che riconosceranno di conseguenza tutti gli attributi itemprop all’interno del codice HTML.
Itemprop: Che sta per item proprieties è un attributo che serve per specificare ogni singola voce della ricetta, deve avere come valore una voce che fa riferimento al vocabolario caricato tramite l’URL specificarto nell’attributo itemtype.
Un’altra cosa interessante da osservare è che il vocabolario Recipes può interagire con altri vocabolari, per esempio Nutrition Information, che è stato richiamato nell’esempio sopra per specificare i valori nutizionali della ricetta, ma può anche interagire con le voci del vocabolario Creative Work, che serve per segnalare lavori creativi in generale, non perforza ricette culinarie, ed andando ad attingere da questo vocabolario la ricetta può diventare particolarmente interessante, per esempio si potrebbe segnalare che ha vinto qualche premio, od allegare un file audio che descrive tutto il processo della ricetta etc etc…
Nota:
Oltre al vocabolario di Schema.org esiste anche quello di Data vocabulary.org che può essere attivato sempre con l’attributo itemtype:
<div itemscope itmetype="http://www.data-vocabulary.org/Recipe/"></div>Questo tipo di vocabolario è supportato da Google ma non da altri motori di ricerca, quindi è più consigliabile utilizzare quelli del progetto Schema.org.
Microformats:
I Microformats sono invece un progetto sviluppato da un team di talentuosi developer, tra i suoi vocabolari ne esiste uno dedicato alle ricette, il nome è hRecipe, ora vedremo come applicarlo al markup HTML usato fino ad ora:
<div class="hRecipe"> <h1 class="fn">La torta della nonna</h1> <span class="summary" >Questa è la ricetta che vi spiegherà come si prepara la torta della nonna, famosa per ... bla bla bla.</span> <img src="immagine-torta.jpg" height="200px" width="200px" class="photo"/> Chef <span class="author">Tony</span> <span class="duration">Tempo di preparazione: <span class="value-title" title="PT15M"></span>15 minuti </span> <span class="duration">Tempo di cottura: <span class="value-title" title="PT45M"></span>45 minuti</span> <span class="duration">Tempo totale: <span class="value-title" title="PT1H"></span>1 ora</span> Portata per: <span class="yield">3 persone</span> Ingredienti: <ul> <li class="ingredient"><span class="value">3</span>uova.</li> <li class="ingredient"><span class="value">500</span><span class="type">grammi</span> di zucchero.</li> ... </ul> Istruzioni: <ol class="instructions"> <li> - Mescolare le 3 uova </li> <li> - Aggiungere lo zucchero </li> ... </ol> Tabella nutrizionale: <ul> <li class="nutrition"><span class="value">240</span> <span class="type">calorie</span></li> <li class="nutrition"><span class="value">9gr</span> <span class="type">grassi</span></li> </ul> </div>
La prima differenza che si nota rispetto all’uso di Microdata è l’assegnza di attributi specifici come itemprop, itemtype che sono sostituiti dal comune attributo class seguito dal valore che si vuole specificare in relazione alla ricetta, il più importante tra questi attributi è class="hRecipe" che identifica l’inizio di un markup riguardante una ricetta.
L’uso di un attributo più immediato come class probabilmente semplifica la scrittura del markup HMTL, d’altro canto però il vocabolario di Schema si propone più ricco di valori da assegnare alla ricetta, infatti, per specificare i valori nutrizionali di una ricetta con Microdata si possono usare attributi specifici come calories o fatContent per indicare i grassi, con Microformats invece si usa un attributo più generico come value e type per entrabi i valori.
Al momento sia Microdata che il vocabolario hRecipe dei Microformats sono progetti in via di sviluppo e definizione, e, nonostante siano ad un buon punto entrambi, potrebbero cambiare alcune parti della loro struttura, quindi che voi scegliate di usare l’una o l’altra soluzione per le vostre ricette vi consiglio di rimanere aggiornati sugli sviluppi e, nel caso si verifichino cambiamenti, aggiornare il codice HTML.
Ottimo articolo, mi devo decidere a studiare questi Microdata…
Grazie, si e poi in fondo non sono molto difficili da utilizzare.