Diamo più informazioni ai motori di ricerca
Schema.org nasce della collaborazione tra Google, Bing, Yandex e Yahoo! per consentire agli sviluppatori di fornire più informazioni strutturate ai motori di ricerca.
Schema.org è un vocabolario specifico di tag (o microdati) che è possibile aggiungere al codice HTML per migliorare il modo in cui la pagina è rappresentata nella SERP (Search Engine Result Page).
Microdata
Vediamo un esempio
<article id="ricetta" itemscope itemtype="http://schema.org/Recipe">
<h1 itemprop="name">Frittata di alici</h1>
<img itemprop="image" src="frittata-di-alici.jpg" alt="Frittata di alici" />
<ul id="ingredienti">
<li itemprop="recipeIngredient">8 uova</li>
<li itemprop="recipeIngredient">400 gr di alici</li>
<li itemprop="recipeIngredient">etc</li>
</ul>
<p itemprop="recipeInstructions">
Pulite le alici.<br />
etc
</p>
</article>Se incolliamo lo snippet nello strumento di test per il markup di google ecco cosa otteniamo
| ID: http://www.example.com/ricetta | |
|---|---|
| @type | Recipe |
| @id | http://www.example.com/ricetta |
| name | Frittata di alici |
| image | http://www.example.com/frittata-di-alici.jpg |
| recipeIngredient | 8 uova |
| recipeIngredient | 400 gr di alici |
| recipeIngredient | Etc |
| recipeInstructions | Pulite le alici. etc. |
E’ immediatamente comprensibile la potenzialità di questo strumento, il motore di ricerca riesce infatti a capire molto più semplicemente quali sono i contenuti della nostra pagina.
Oltre a questo, i motori di ricerca utilizzano tali microdati per creare delle anteprime personalizzate nella SERP, includendo ad esempio immagini, rating, ed altre informazioni che passiamo tramite i tag appositi.
JSON-LD
Oltre al formato microdata, ne esiste un altro chiamato JSON-LD (che Google consiglia fortemente) e che risulta spesso più comodo da manutenere in quanto a leggibilità.
Rivediamo quindi l’esempio riportato sopra in formato JSON-LD
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Recipe",
"url": "http://www.example.com/ricetta",
"name": "Frittata di alici",
"image": "http://www.example.com/frittata-di-alici.jpg",
"recipeIngredient": [
"uova",
"alici",
"etc"
],
"recipeInstructions": "Pulite le alici. etc"
}
</script>Site attributes
Con JSON-LD è anche possibile definire degli attribute generali del sito che danno ai motori di ricerca una serie di informazioni aggiuntive.
Vediamo un esempio
<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "WebSite",
"name" : "RicetteRegionali",
"alternateName" : "Cucina regionali italiana",
"url" : "http://www.www.ricetteregionali.net",
"sameAs" : [
"https://www.facebook.com/ricetteregionali/?ref=hl",
"https://twitter.com/ricetteregional"
],
"potentialAction": {
"@type": "SearchAction",
"target": "http://www.ricetteregionali.net/ricette-ricerca-risultati.asp?ingredienti={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>Se eseguamo il check dello snippet ecco cosa otteniamo:
| @type | WebSite |
|---|---|
| name | RicetteRegionali |
| alternateName | Cucina regionale italiana |
| url | http://www.www.ricetteregionali.net |
| sameAs | https://www.facebook.com/ricetteregionali/?ref=hl |
| sameAs | https://twitter.com/ricetteregional |
| potentialAction | |
| @type | SearchAction |
| target | |
| @type | EntryPoint |
| urlTemplate | http://www.ricetteregionali.net/ricette-ricerca-risultati.asp?ingredienti={search_term_string} |
| query-input | |
| @type | PropertyValueSpecification |
| valueName | search_term_string |
| valueRequired | http://schema.org/True |
Stiamo dicendo al motore di ricerca che il sito si chiama ricetteregionali, qual è il nome esteso, l’url, gli url alternativi (facebook, twitter etc...) e che all’interno del sito è presente un motore di ricerca.
Quest’ultima informazione è molto importante, poiché un motore di ricerca potrebbe decidere di inserire una searchbox per il sito in questione direttamente nella SERP.
