Esempi pratici di microdati sul sito

I microdati e la SEO

Si parla tanto di microdati in giro per il web, ma la maggior parte degli articoli proposti offre solo degli esempi molto generici o addirittura copiati dalle pubblicazioni di google o di schema.org. All’atto pratico, trattandosi di codice (html, ma pur sempre codice), il neofita non riesce a capire come essi possano essere inseriti nel proprio sito. Ecco perché ho deciso di scrivere questo articolo che riporterà chiaramente come usare i microdati e dove posizionarli all’interno del codice.

Ecco dunque alcuni esempi pratici pronti da essere utilizzati da chiunque.

Perché i microdati sono importanti

Tecnicamente i microdati servono per ottenere dei rich snippet. In parole povere lo snippet è il risultato che google ci fornisce sulla sua pagina di ricerca formato da:

  • Titolo della Pagina
  • Link che porta al nostro sito
  • Descrizione

Nella figura sottostante un esempio di snippet visualizzato da Google con la key “flavioweb”.

snippet su google esempio

come appare lo snippet su google per la query flavioweb

I microdati sono importanti per almeno 2 motivi fondamentali, uno per attirare visite al nostro sito ed uno per migliorare il posizionamento per le parole chiave che decidiamo di utilizzare:

  1. Attirano Visite sul sito: perché ci aiutano ad ottenere degli snippet invitanti e che si distinguono da tutti gli altri all’occhio del visitatore
  2. Migliorano il posizionamento: perché etichettano i contenuti della pagina in maniera che Google li interpreti correttamente

Questo secondo aspetto è tanto più vero quando i nostri competitor omettono di inserirli.

Di solito Google genera lo snippet automaticamente, attingendo dal tag meta description o da una porzione di testo particolarmente affine alla parola chiave ricercata. Attraverso l’utilizzo dei microdati invece possiamo fare in modo che lo snippet venga visualizzato con delle descrizioni aggiuntive, come le recensioni, i prezzi del menù di un ristorante e tanto altro. Guardate questo esempio:

come appaiono i microdati su google

Passiamo alla pratica.

Come si usano i microdati

Iniziamo genericamente con quei microdati che servono per tutti i tipi di siti internet di aziende locali, per poi passare ad esempi specifici dedicati alle strutture ricettive e di ristorazione che sono il principale target di questo blog.

Cominciamo con il dichiarare all’apertura del tag body la nostra pagina web

<body itemscope itemtype=”http://schema.org/WebPage”>

In questo modo comunichiamo a Google che si tratta di una pagina web e lo spider del motore di ricerca si aspetterà così di trovare in seguito altri microdati riguardanti il ruolo di ogni sezione del codice (breadcrumb, main, footer, nav, ecc…)

Poi do in pasto a Google il titolo della pagina, la sua descrizione ed una immagine che possa essere rappresentativa. In questo modo:

<div itemprop=”name” content=”titolo della pagina”></div>
<div itemprop=”description” content=”Descrivo di cosa parla la pagina”></div>
<div itemprop=”image” content=”url dell’immagine”></div>

Passiamo ora ad implementare il breadcrumb (quella riga dove viene tenuta memoria della pagina in cui siamo e quelle di provenienza).

Esempio: Sei qui: Home >> Pagina 2 >> Sottopagina

<div class=”breadcrumb” itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>Sei qui: <a href=”index.html” itemprop=”url” title=”Titolo della Home”><span itemprop=”title”>Home</span></a> >> <a href=”pagina2.html” itemprop=”url” title=”Titolo della pagina 2″><span itemprop=”title”>Pagina 2</span></a>

…………………………………………………………

</div>

Molto probabilmente poi nella nostra pagina avremo il cosiddetto “header” ovvero la parte che ospita l’intestazione del sito attraverso immagini o slide e/o il menù del sito. Implementiamo i microdati in questo modo per dirgli che il ruolo della sezione è fare da banner di presentazione.

<header role=”banner” itemscope itemtype=”http://schema.org/WPHeader”>

Ora andiamo a dire allo spider del motore di ricerca che sul nostro sito è presente un menù di navigazione. Questo codice deve essere inserito prima del menù.

<nav role=”navigation” itemscope itemtype=”http://schema.org/SiteNavigationElement”>
<ul>
<li itemprop=”url”><a href=”index.html” title=”Titolo Home Page” itemprop=”name”>Home</a></li>
<li itemprop=”url”><a href=”pagina 2.html” title=”Titolo pagina 2″ itemprop=”name”>Pagina 2</a></li>
<li itemprop=”url”><a href=”pagina 3.html” title=”Titolo Pagina 3″ itemprop=”name”>Pagina 3</a></li>
……..

………
</ul>
</nav>

A seconda di dove vogliamo far apparire il titolo della nostra pagina, inseriamo questo microdato per il tag h1

<div itemscope itemtype=”http://schema.org/LocalBusiness” itemprop=”name”><h1>Titolo della Pagina</h1></div>

Con il codice seguente invece implementeremo il contenuto principale della nostra pagina web, dicendo ai motori di ricerca che contiene l’approfondimento dell’attività della nostra azienda. A questo micordato deve far seguito il testo principale della nostra pagina.

<div role=”main” itemscope itemtype=”http://schema.org/LocalBusiness” >

…………………testo ………………………………………………………………………………….

</div>

Se sulla stessa pagina sono presenti delle informazioni aggiuntive riguardo la nostra attività, possiamo implementarle attraverso una dichiarazione in cui si evidenzia che il ruolo delle informazioni riportate sono complementari.

<aside role=”complementary” itemscope itemtype=”http://schema.org/WPSideBar”>

……………………………………… informazioni aggiuntive ……………………………………………….

</div>

Terminiamo la nostra rassegna di microdati andando ad implementarli nel nostro footer (pié pagina). Di solito il footer contiene info sull’azienda, tipo indirizzo, telefono, ecc… Se questi dati si trovassero in un altra posizione il codice scritto sotto deve essere implementato li.

<footer role=”contentinfo” itemscope itemtype=”http://schema.org/WPFooter”>

Le informazioni riguardo indirizzo, telefono, ecc… devono essere scritte in questo modo:

<div itemscope itemtype=”http://data-vocabulary.org/Organization”>
<span itemprop=”name” content=”Nome Azienda”>Nome Azienda</span>
<span itemprop=”url” content=”Url principale del sito”></span>
<span itemprop=”address” itemscope itemtype=”http://data-vocabulary.org/Address”</span>
<span itemprop=”street-address” content=”Indirizzo”> Indirizzo </span>
<span itemprop=”locality” content=Città”>Città</span>
<span itemprop=”region” content=”Nazione”>Nazione</span>
<span itemprop=”postalCode” content=”CAP”> Codice avviamento postale</span>
<span itemprop=”tel” content=”numero di telefono”> Numero di telefono</span>
<span itemprop=”email” content=”email”>indirizzo email</span> (questa io non la metto mai in chiaro per evitare spam)
</div>

Questi esempi possono essere applicati ad ogni tipo di azienda. Ma se volessimo implementare le pagina web di una struttura ricettiva come ad esempio un bed and breakfast avremo cura di scrivere semplicemente

<div itemscope itemtype=”http://schema.org/BedAndBreakfast”>

e di seguito indirizzo, descrizione ecc… come riportato negli esempi sopra.

Purtroppo ad oggi non vi sono microdati specifici per agriturismi, affittacamere o case vacanze. Per queste tipologie consiglio di utilizzare

<div itemscope itemtype=“http://schema.org/Hotel”>

Per i ristoranti e le trattorie invece può andar bene

<div itemscope itemtype=“http://schema.org/Restaurant”>

a cui possiamo far seguito con:

<div itemprop=“address” itemscope itemtype=“http://schema.org/PostalAddress”>

<span itemprop=“streetAddress”>Indirizzo</span>

<span itemprop=“addressLocality”>Città</span>,

<span itemprop=“addressRegion”>Provincia</span>

<span itemprop=“postalCode”>Cap</span>

</div>

<span itemprop=“telephone”>telefono</span>

<a itemprop=“url” href=“sito internet</a>

Orari di apertura:

<meta itemprop=“openingHours” content=“Tu-Su 18:30-23:30”>Dal Martedì al Venerdì 18:30-23:30

Tipo di cucina

<span itemprop=“servesCuisine”>

Piatti della cucina romanesca

</span>,

</div>

Come dicevo, molte categorie sono ancora mancanti, ma andando a spulciare si trovano veramente tanti tipi di microdati da utilizzare nei più svariati campi.

Spero che questo articolo sia stato abbastanza descrittivo e soprattutto spero ti abbia fornito del materiale per implementare il tuo sito con i microdati e che abbia stimolato la tua curiosità.

Per l’elenco completo dei microdati ed il loro utilizzo visita il sito schema.org. Un esempio di applicazione dei microdati su varie sezioni di codice lo puoi andare a vedere spulciando il sorgente di un sito a cui ho collaborato per la sua creazione, un sito di assistenza caldaie (scusate il link ma è un caro amico che mi faceva piacere menzionare) che, dopo tanto lavoro, ora è felicemente nelle prime posizioni di Google con parecchie parole chiave.