Nella guida seo di oggi vediamo come visualizzare i rich snippets in perfetto stile trip advisor nelle nostre ricerche di Google per massimizzare i link verso il nostro sito e/o progetto web.
Vi sarà capitato navigando su internet e facendo ricerche con google di imbattervi in un risultato come quello che spesso restituisce ad esempio un sito come Trip Advisor. Google sta fornendo a chi fa una ricerca informazioni sulla media acquisita con le varie recensioni, il numero delle recensioni e addirittura la fascia di prezzo.
Vi sarete chiesti penso molte volte se questi risultati sono dovuti al fatto che Trip Advisor sia un sito molto noto, che Google o Trip Advisor abbiano stretto accordi tra di loro o quant’altro. La risposta è no. Semplicemente trip advisor ha una struttura di codice molto ben fatta che sfrutta al meglio le proprietà dei rich snippets che sono dei microdati che vengono inseriti all’interno del codice html, non compaiono nella pagina ma sono in grado di fornire al crawler informazioni aggiuntive.
I codici da inserire all’interno dell’HTML non sono unici ma seguono vari protocolli tra cui quello più importante è schema.org che è compatibile con tutti i principali motori di ricerca e rappresenta un’ampia gamma di caratteristiche tra cui: Creative works (books, movies etc.), Embedded objects (Audio Objects,video etc) Events, Persons, Products, Reviews etc.
Prendiamo ad esempio il caso delle recensioni, che è molto frequente sui siti. Supponiamo che vogliamo che le nostre recensioni compaiano direttamente sui motori di ricerca e che vengano fuori su google le cosiddette “stelline”.
Supponiamo di avere un HTML di partenza come questo:
Customer reviews: <div > Ottimo computer - by Marco, 2 Gennaio 2013 <div>4 stars</div> Il portatile si è rivelato veramente veloce e stabile, grande acquisto per il prezzo. </div> <div > Mitica Canon - by Antonio, 5 Gennaio 2013 <div>5 stars</div> la Canon è sempre la solita bomba. Bellisima </div> <div > Apple cara come sempre - by Maria, 5 Gennaio 2013 <div>3 stars</div> Ho chiesto un prestito in banca per comprarmi l’iphone 5, e mi sono già pentita, troppo caro. </div>
Ecco con i rich snippets come diventerebbe:
<div itemprop="review" itemscope itemtype="http://schema.org/Review"> <span itemprop="name">Ottimo computer</span> - by <span itemprop="author">Marco</span>, <meta itemprop="datePublished" content="2011-04-01">2 Gennaio 2013 <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"><meta itemprop="worstRating" content = "1"/><span itemprop="ratingValue">4</span>/<span itemprop="bestRating">5</span> stars</div> <span itemprop="description">Il portatile si è rivelato veramente veloce e stabile, grande acquisto per il prezzo. </span> </div> <div itemprop="review" itemscope itemtype="http://schema.org/Review"> <span itemprop="name">Mitica Canon</span> - by <span itemprop="author">Marco</span>, <meta itemprop="datePublished" content="2011-04-01">5 Gennaio 2013 <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"><meta itemprop="worstRating" content = "1"/><span itemprop="ratingValue">5</span>/<span itemprop="bestRating">5</span> stars</div> <span itemprop="description"> la Canon è sempre la solita bomba. Bellisima </span> </div> <div itemprop="review" itemscope itemtype="http://schema.org/Review"> <span itemprop="name">Apple cara come sempre</span> - by <span itemprop="author">Maria</span>, <meta itemprop="datePublished" content="2011-04-01">5 Gennaio 2013 <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"><meta itemprop="worstRating" content = "1"/><span itemprop="ratingValue">4</span>/<span itemprop="bestRating">3</span> stars</div> <span itemprop="description"> Ho chiesto un prestito in banca per comprarmi l’iphone 5, e mi sono già pentita, troppo caro. </span> </div>
Come potete notare il secondo codice è molto più lungo e arricchito con i vari tag “span” o “meta”. Che non sono assolutamente visibili sulla pagina ma che consento al crawler di perimetrare, o capire il dato “significativo”. Si usa il tag <span> quando si raccoglie l’html che è visibile. Il tag meta invece quando si forniscono indicazioni che non sono visibili sul sito. Inoltre all’inizio, e di solito viene incluso direttamente nel tag <div> bisogna specificare il tipo di microdati che vogliamo andare a prendere in questo caso “review” e il link al tipo di protocollo che si vuole andare ad utilizzare, in questo caso
http://schema.org/Review.
Questa è un’idea di partenza per capire cosa c’è dietro a un certo tipo di risultati google, che possono grazie alla personalizzazione apparire più interessanti, ricchi di informazioni e quindi aventi una maggiore qualità SEO e maggiori probabilità di click.
[button link=”http://www.html5today.it/tutorial/microdati-html5-ecco-come-usarli-modo-corretto” color=”blue” target=”blank”]Altro articolo sui Microdati HTML5[/button]
Per maggiori approfondimenti consiglio l’ ottima reference che google stesso fornisce, se ti è piaciuto questo articolo condividilo sui tuoi social network preferiti!
