Risultati Google con foto, stellette di recensioni e breadcrumb: Microdata e Schema.org

Usare i marcatori di schema.org per far apparire stelle di recensioni, foto e breadcrumb nei risultati dei motori di ricerca

schema.org





Recentemente mi sono accorto che Google ha ‘cambiato qualcosa’ nell’algoritmo utilizzato per costruire le serp, ovvero le pagine dei risultati per una data parola chiave.

A fianco di alcuni risultati di Google, apparivano anche delle foto in miniatura. Inoltre, sotto il titolo (quello che, se cliccato, reindirizza verso la pagina corrispondente), apparivano delle stellette con un certo numero di  reviews, ovvero recensioni.

Ecco un esempio cercando una parola chiave come ‘Ricetta spaghetti':

risultati google foto stelle recensioni

Questi due elementi insieme ovviamente attirano l’occhio dell’utente, per cui se un sito si trova al secondo o terzo posto nella serp, e ha la ‘fortuna’ di essere ‘evidenziato’ in questo modo, avrà sicuramente più click (dunque, più visitatori) rispetto al sito primo su Google. Un vantaggio enorme.

Questa visualizzazione particolare, con immagini e stelle di recensioni, riguarda soprattutto i siti di hotel. Ma non solo.

Ma qui anzichè usare la parola ‘fortuna’ si dovrebbe utilizzarne un’altra, cioè Microdata.

Si tratta di una forma particolare per ‘marcare’ il contenuto di pagine web.

E’ stato sviluppato un sito web in inglese, schema.org, per far capire qualcosa sull’argomento.

Innanzitutto, perché usare i microdati?

Lo scopo è quello di ‘aiutare’ i motori di ricerca ad indicizzare meglio i nostri dati.

Un utente ‘umano’, nel visualizzare una pagina, dopo qualche secondo riesce ad ‘ambientarsi’ e mettere a fuochi i contenuti chiave, interessanti, che riguardano la pagina stessa. I motori di ricerca, ovviamente, non hanno questo ‘potere’, dunque i webmaster possono aiutarli, descrivendo, con opportuni marcatori (che si aggiungono all’interno dei classici tag html, come <img>, <div>, <span>, ecc.) a cosa corrisponde quell’elemento.

In questo modo si aiuta Google a trovare, e indicizzare al meglio le nostre pagine web, contenenti immagini, video, articoli di blog, fotogallery.

Ci sono anche degli schemi precostruiti, che aiutano ad indicizzare pagine di siti di alberghi, siti con menu di ristoranti, siti di dentisti, siti di informazioni turistiche, ecc. ecc: l’elenco completo è qui, mentre un comodo tool per generare automaticamente questi schemi (alcuni, non tutti), è microdatagenerator.com.

Ovviamente, prima di procedere sarebbe meglio partire dalle cose fondamentali, ovvero dalle tre parole chiavi:

- itemscop ;

- itemtyp ;

- itemprop .

All’interno di un <div> che delimita l’elemento che noi vogliamo marcare con il formato Microdata, bisogna utilizzare la seguente sintassi:

itemscope itemtype=”http://schema.org/Thing”

Dove http://schema.org/Thing indica la pagina che si riferisce alla tipologia più comune e generica, cioè Thing.

Thing a sua volta comprende vari sottotipi, come creative Work, che a sua volta, fra i numerosi ulteriori sottotipi, comprende Blog e WebPage.

Una volta individuato la tipologia di pagina che più si adatta al nostro contenuto, passiamo alla terza parola chiave che si usa nel ‘linguaggio’ di schema.org, ovvero itemprop.

 

Itemprop indica la specifica proprietà dell’itemtype.

 

Per capirci qualcosa, facciamo un esempio rapido.

Ecco un brevissimo testo sotto ad un immagine (codice html SENZA il formato Microdata di schema.org)

 

  1. <h1>Foto del Colosseo</h1>
  2. <img src=”colosseo.jpg” />
  3. Scattata da Riccardo Galletti a Roma,
  4. il 1/03/2012
  5. Una meravigliosa foto dell’Anfiteatro Flavio (Colosseo), il monumento più celebre del mondo.

 

Ecco invece come dovrebbe apparire dopo aver aggiunto i marcatori di schema.org:





  1. <div itemscope itemtype=”http://schema.org/ImageObject”>
  2.  <h1 itemprop=”name”>Foto del Colosseo</h1>
  3.  <img src=”colosseo.jpg” itemprop=”contentURL” />
  4.  Scattata da<span itemprop=”author”>Riccardo Galletti</span>
  5.  a  <span itemprop=”contentLocation”>Roma</span>
  6. il   <meta itemprop=”datePublished” content=”2012-03-01″>1/03/2012
  7.   <span itemprop=”description”>Una meravigliosa foto dell’Anfiteatro Flavio (Colosseo),
  8. il monumento più celebre del mondo.</span>
  9. </div>

 

Dunque abbiamo utilizzato come itemtype ImageObject, che a sua volta è un tipo specifico, perchè sottotipo di MediaObject, a sua volta sottotipo di CreativeWork, a sua volta ‘figlio’ di Thing.

Come proprietà (itemprop) ne abbiamo usate varie, ma se andiamo a vedere nessuna di queste è specifica di ImageObject (itemprop specifiche di ImageObject sono caption, exifData, representativeOfPage, thumbnail)

Dunque un tipo ‘figlio’ (esempio ImageObject) può utilizzare (eredita) le proprietà di un tipo ‘madre’ (esempio Thing).

 

Chiaramente, questo non può e non vuole essere un argomento esaustivo sui marcatori di Schema.org, che sono tutti elencati qui.

I marcatori di schema.org stanno sostituendo quelli di http://data-vocabulary.org.

Vi consiglio di dare uno sguardo a questa pagina, con un esempio (in inglese) di come far apparire su Google una pagina di una ricetta, formattando i vari elementi in modo tale da far apparire le stelle delle recensioni e la foto esplicativa, come vi dicevo ad inizio articolo.

Quello dei marcatori Microdata non è l’unico modo per ottenere tali risultati, perchè c’è la possibilità di utilizzare RDFa e i Microformats.

Sempre dalla stessa pagina si capisce come funzionano i Microformati, ovvero utilizzando delle classi (chi conosce il CSS sa a cosa mi sto riferendo) con nomi specifici: hrecipe, recipetype, photo, summary, ecc.): sicuramente una metodologia più intuitiva rispetto agli itemtype e itemprop di schema.org.

Infine, volevo terminare questo lungo articolo proponendovi il modo in cui far apparire i link a ‘briciola di pane’ (Breadcrumb) nei risultati di ricerca Google.

Tanto per intenderci, per chi ha un blog in WordPress con varie categorie (come ad esempio quelle che sono linkate nel menu in alto del mio blog), ha la possibilità di fare apparire nella SERP, al posto dell’url sotto al titolo nella pagina, la categoria e sottocategoria a cui appartiene la pagina stessa.

Per capire, guardiamo questo screenshot.

breadcrumb geekissimo googleLa soluzione è usare il plugin WordPress per fare apparire (prima o dopo un articolo, ma anche nei widget WordPress) le breadcrumbs, ovvero

Breadcrumb NavXT ( http://wordpress.org/extend/plugins/breadcrumb-navxt/ )

 

e poi delimitare con i marcatori di schema.org

<div itemprop="breadcrumb" class="breadcrumbs">

e

</div>

Il punto in cui il plugin inserisce il breadcrumb. Da ricordarsi di mettere l’itemtype nel tag html ‘body':
<body itemscope itemtype="http://schema.org/WebPage">

 

Dunque il tutto apparirà così:

 

<div itemprop="breadcrumb" class="breadcrumbs">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

Tale soluzione è stata tratta da www.mtekk.us, qui.

 

Non mi resta che proporvi l’ultimo utile link di questo articolo, ovvero tutti gli strumenti (generatori di microdata, strumenti di verifica Google, plugin WordPress, codici php, Java, Perl) che riguardano i microdati di schema.org.


http://schema.rdfs.org/tools.html

GD Star Rating
loading...
Risultati Google con foto, stellette di recensioni e breadcrumb: Microdata e Schema.org, 8.7 out of 10 based on 3 ratings