Come e quali microdati HTML5 usare negli e-commerce

Premessa: è bene precisare che i microdati HTML5 negli e-commerce servono se si vendono realmente prodotti. Come in ogni post di questo blog si cercano di suggerire tecniche, consigli, tips, snippet utili, finalizzati ad uno scopo pratico ed orientati all’utente.

Se pensi che i microdati servano a risolvere tutti i problemi che ha il tuo negozio siamo fuori strada!

Certo, possono aiutare a portare più gente sulla tua pagina, ma se poi l’abbandonano tutto è stato vano.

Tant’è, non siamo qui a fare una discussione sull’usabilità (se ti interessa puoi contattarmi!) ma per vedere quali sono e come si implementano.

Perchè i microdati sono importanti per un e-commerce?

Da alcuni dati pubblicati su Searchengineland, l’utilizzo di microdati ha portato ad un aumento fino al 28% del CTR (tasso di click) nei risultati di ricerca organici. Quindi, di per sè è fondamentale implementarli su tutti i prodotti presenti, così da incrementare complessivamente le possibilità che un utente raggiunga la pagina prodotto d’interesse.

Ci sono infatti dati rilevanti che, se mostrati direttamente nei risultati delle SERP, facilitano l’interazione degli utenti, quali prezzo/nome/descrizione e… Recensioni. La gente vuole sapere che cosa pensano altri utenti di ciò che stanno per comprare. Saperlo in anticipo ti permette di adeguarti alla concorrenza e spiazzare chi è rimasto indietro…

Come implemento i microdati sul mio sito di e-commerce?

Per implementare i microdati è necessario avere accesso completo al codice sorgente del tuo sito e/o avvalersi di plugin appositi nel caso si faccia uso di CMS come WordPress, Drupal, Joomla ecc…

Vediamo ora quali sono i 7 microdati fondamentali che non devono mai mancare:

1. Nome del prodotto
2. Immagine del prodotto
3. Descrizione del prodotto
4. Prezzo del prodotto
5. Disponibilità del prodotto
6. Recensione del prodotto
7. URL del prodotto

Prima (senza microdati):

Schermo OLED ultrapiatto
<img src="schermo-oled-ultrapiatto.jpg" alt='Schermo OLED ultrapiatto' />
Voto 3.5/5 sulla base di 20 recensioni
Prezzo: 200€
Disponibile: in magazzino
Descrizione: Schermo OLED ultrapiatto di ultima generazione. Video e audio fenomenali, pronto per TV e Videogame.
Recensioni:
Qualità pessima – by il Turbatore di sonni, 1 Marzo 2014 - Vanno migliorati i colori!
Voto: 1/5 stelle
Un televisore eccellente! – by l'Ottimista perenne, 30 Novembre 2014 - Tutto splende!
Voto: 4/5 stelle

Andando ad integrare i microdati fondamentali tratti da schema.org otteniamo il risultato seguente in codice HTML5:

<div itemscope itemtype="http://schema.org/Product">
    <span itemprop="name">Schermo OLED ultrapiatto</span>
    <img src="schermo-oled-ultrapiatto.jpg" alt="LG 32 TV" />
    <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
        Voto <span itemprop="ratingValue">3.5</span>/5 sulla base di <span itemprop="reviewCount">20</span> recensioni
    </div>
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <span itemprop="price">200€</span>
        <link itemprop="availability" href="http://schema.org/InStock" />in magazzino
    </div>
    Descrizione:
    <span itemprop="description">Schermo OLED ultrapiatto di ultima generazione. Video e audio fenomenali, pronto per TV e Videogame.</span> Recensioni:
    <div itemprop="review" itemscope itemtype="http://schema.org/Review">
        <span itemprop="name">Qualità perssima</span> - di <span itemprop="author">il Turbatore di sonni</span>,
        <meta itemprop="datePublished" content="2014-03-01">1 Marzo 2014
        <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
            <meta itemprop="worstRating" content="1">
            <span itemprop="ratingValue">1</span>/
            <span itemprop="bestRating">5</span>stelle
        </div>
        <span itemprop="description">Vanno migliorati i colori</span>
    </div>
    <div itemprop="review" itemscope itemtype="http://schema.org/Review">
        <span itemprop="name">Un televisore eccellente</span> - di <span itemprop="author">l'ottimista perenne</span>,
        <meta itemprop="datePublished" content="2014-11-30">30 Novembre 2014
        <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
            <meta itemprop="worstRating" content="1" />
            <span itemprop="ratingValue">4</span>/
            <span itemprop="bestRating">5</span>stelle
        </div>
        <span itemprop="description">Tutto splende</span>
    </div>
</div>