Come aggiungere foto, stelline recensioni e breadcrumb nei risultati di Google

Google è in continua evoluzione e negli ultimi tempi abbiamo assistito ad ulteriori innovazioni nel suo algortimo, tra cui spiccano i curiosi e ormai noti microdata.

Rich Snippets: Come utilizzare i marcatori di schema.org per visualizzare recensioni, foto, informazioni di contatto e aziendali, stelline di voti e breadcrumb nei risultati di google

Scorrendo la serp di google per determinate parole chiave sempre più spesso ci accorgiamo di come alcuni risultati siano mostrati all'utente in maniera diversa e soprattutto più accattivante dal solito: foto in miniature, stelline ed informazioni varie sempre più spesso corredano la solita description e attribuiscono un valore aggiunto a quel risultato, un valore che spesso attrae anche il click. Guardiamo ad esempio qui:

Google Microdata Rich Snippets

E non è raro che ogni volta pensiate: voglio che anche il mio sito venga visualizzato in quel modo! Ma prima forse dovremo domandarci di cosa si tratta...

Cos'è Schema.org e cosa sono i microdata

Schema.org è un sito web nato dall'accordo tra i più importanti motori di ricerca del pianeta, in cui sono elencate le istruzioni e i marcatori per "istruire" meglio i motori di ricerca sul particolare contenuto. Al webmaster quindi il compito di fornire informazioni aggiuntive sul proprio sito o pagina web seguendo il formato voluto e contenuto in schema.org. Nell'atto pratico si tratta di inserire i marcatori all'interno dei canonici  tag html, ma l'operazione aiuta letteralmente il motore di ricerca a meglio indicizzare quel contenuto (ad esempio indicheremo di che tipologia si tratta - pagina web, blog - in quale settore - ristoranti, hotel, ecc - e se contiene immagini, video o audio).

Esistono inoltre dei tipi precostituiti o meglio degli schemi gia pronti:

Vedi Gerarchia Tipi Microdati che dobbiamo avere sempre come riferimento per l'utilizzo dei marcatori giusti in base alla tipologia di sito web che vogliamo arricchire.

Inoltre google fornisce, ma solo per alcuni, un generatore automatico di questi schemi:

Vedi Generatore Automatico Microdata che ci può esser utile in un primo approccio ai microdati proprio per capirne la logica. Scegliamo uno degli schemi gia pronti sulla destra e compiliamo i campi che ci interessano. Al termine avremo il codice generato da incollare nelle nostre pagine.

[adsense:block:adcontenuto]

Come funzionano i microdata: Le regole di base

Le prime nozioni da fissare in mente quando si parla di micro data sono:

  • itemscope - indica che il contenuto di quel div in cui è inserito è un oggetto;
  • itemtype - indica invece che l'oggetto appartiene ad un particolare tipo (Review, Recipe, Book, ecc);
  • itemprop - indica infine la proprietà specifica dell'itemtype.

itemscope e itemtype vanno sempre abbinati, questa la sintassi:

<div itemscope itemtype="http://schema.org/Thing">.

Seguendo la Gerarchia delle tipologie di micro data vediamo subito che l'oggetto "Thing" è la tipologia più comune e generica, il tipo madre per così dire, che contiene tutti gli altri: al suo interno infatti troviamo i sottotipi Creative Works, Person, Event, ecc, ognuno di loro altri sottotipi come Blog, Article, Book, e così via, ognuno  corredato dalle sue proprietà specifiche che sono regolate dall'ereditarietà. Che significa? Praticamente il sottotipo ad esempio Blog, oltre alle sue proprietà specifiche, potrà utilizzare anche le proprietà del tipo genitore Creative Works e di quello ancora superiore Thing

Come usare i marcatori: aggiungere foto, numero recensioni e stelline dei voti

Apprese le fondamenta dei microdati è il momento di passare all'atto pratico ed inserire le nostre informazioni all'interno della nostra pagina in modo da avere anche noi le stelline e la miniatura. Premesso che da quanto detto fin ora, le istruzioni da poter inserire sono moltissime (basta guardare le specifiche proprietà elencate accanto ai tipi della gerarchia) e quindi non solo foto e stelline dei voti, ma anche prezzi dei prodotti ad esempio, foto dei profili dei social network, indirizzi, contatti e chi più ne ha più ne metta. Ma, come da titolo, obiettivo di quest'articolo è fornire un semplice esempio all'utilizzo dei microdati e le proprietà prese in esame sono appunto la foto, le recensioni e stelline con i voti. Ma per capire il tutto è meglio procedere ad esempi.

Utilizzeremo il particolare tipo Reviews ossia Recensione, pertanto il codice utilizato sarà:

<div itemscope itemtype="http://data-vocabulary.org/Review">
<img itemprop="photo" src="fotopersonale.jpg" />
<span itemprop="itemreviewed">Nome del cosa si sta recensendo</span>
<span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">Voto<span itemprop="average">9</span> di <span itemprop="best">10</span> </span> su un totale di <span itemprop="votes">1276</span> voti.
<span itemprop="count">767</span> recensioni positive degli utenti.</div>
Come vediamo nell'esempio, la prima riga indica che l'html incluso nel tag div rappresenta una recensione e più sotto abbiamo usato le proprietà di quest'oggetto che sono: photo, itemreviewed, rating, ecc. E' importante ribadiree che se avessimo utlizzato una tipologia diversa da Review, la proprietà itemreviewed non potevamo utilizzarla in quanto specifica di questa tipologia.
[adsense:block:adcontenuto]
 

Dove inserire i marcatori?

E' importante notare che ciò che volete far visualizzare nei risultati di google deve essere contenuto e ben visibile anche nel sito: quindi nessun tipo di testo nascosto o furbate tramite css.Posizionamo il codice all'interno della pagina web desiderata nella posizione esatta in cui vogliamo visualizzarlo nel sito. Quindi header, footer o prima del titolo della pagina non fa differenza.

Nel caso si tratti di un cms allora potremmo inserire il codice all'interno del template in modo che tutte le pagine abbiano quel codice, ma solo nel caso di microdati generici e quindi adattabili ad ogni pagina. Se invece i microdati devono esser specifici, vanno inseriti nel corpo della pagina.

Risorse Utili

Oltre alle risorse segnalate ad inizio articolo, quindi la Gerarchia dei Tipi di Micro data e Il Generatore Automatico, un altra importante risorse per effettuare i test circa il corretto inserimento dei Rich Snippets è il Testing Tool dei Rich Snippets negli Strumenti  per Webmaster fornito da Google. Lo strumento è importante anche perchè Google ci metterà del tempo prima di visualizzare i risultati secondo le istruzioni fornite, quindi è un modo utilie per visualizzare sin da subito il modo in cui uscirà il vostro risultato.

Come inserire il breadcrumb nei risultati di Google

Infine un utlimo aspetto che manca da trattare è come far apparire direttamente il breadcrumb (le c.d briciole di pane) nei risultati di Google al posto dell'url della pagina. I breadcrumb sono il percorso necessario per arrivare a quella data pagina:

Questo un tipico esempio di breadcrumb: Categoria -> Sotto categoria -> Nome pagina

Al posto dell'url nei risultati di google uscirà prorpio il nostro percorso.

utilizzano un cms come Drupal o Wordpress, sarà necessario mettere mano al file principale del template (nel caso di Drupal che utilizzo personalmente il page.tpl.php) ed individuare la parte in cui viene stampato a video il suddetto breadcrumb.

Ad es.

<div class="breadcrumb"><?php print $breadcrumb ?></div>

allora aggiungiamo i marcatori in questo modo:

<div itemprop="breadcrumb" class="breadcrumb"> <?php print $breadcrumb ?></div>

ma prima nel tag body:

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

Posizionamento - SEO: 

Ti potrebbero anche interessare:

PGP (Pretty Good Privacy)

 

Questa applicazione, pensata all’inizio degli anni ’90 da Philip Zimmermann e freeware, include sostanzialmente tutte le funzionalità descritte sopra e agevola la gestione delle chiavi. È disponibile per molte piattaforme (Windows, OS/2, Mac, Amiga, Unix/Linux, Vms, ecc.) e per Unix anche in formato sorgente modificabile. Esiste come plug-in di alcuni diffusi client di posta elettronica.
Risorse per sviluppo: 

Sezione Hosting per Drupal!

E' attualmente in sviluppo una sezione del sito interamente dedicata agli hosting per drupal, quindi hosting linux configurati e pensati appositamente per sfruttare al massimo delle risorse il nostro caro cms. La sezione sarà arricchita da classifiche, comparazioni e caratteristiche vincenti e non di ogni singolo provider e relativa offerta.
Blog: