Introduzione ai microdati, Google e i rich snippets

Html5 SEO e Microdati
Tempo stimato di lettura: 3 minuti, 34 secondi

34 Flares 34 Flares ×

Per “dati strutturati“, di cui fanno parte i microdati, si intende un insieme di informazioni formattate in modo universalmente comprensibile.

Questi dati, seguendo l’evoluzione semantica introdotta da Google, sono facilmente interpretabili dai più importanti motori di ricerca e permettono di perfezionare i risultati restituiti da una query, filtrando con maggior accuratezza ed enfatizzando il modo con cui i vengono mostrati nelle SERPs.

A cosa servono i dati strutturati?

Se un lettore umano riesce ad estrarre mentalmente le informazioni che cerca da una pagina web, lo stesso processo risulta più complicato per un motore di ricerca. Se un utente infatti potrebbe conoscere il significato della parola “jaguar”, ed associarla quindi immediatamente ad un’auto o ad un animale, lo stesso non accade per un motore, il quale potrebbe non distinguere immediatamente, soprattutto se il contenuto non aiuta, tra le due opzioni. Un umano riesce immediatamente a ricavare il significato di una parola cercata, per un motore di ricerca, allo stato attuale, risulta ancora complesso.

Ed è qui che entrano in gioco i dati strutturati, il cui scopo è proprio quello di contestualizzare al meglio il termine in questione.

Come vengono utilizzati questi dati?

La risposta è piuttosto semplice ed essenziale. Per creare dei rich snippets, i fantomatici boxettini con foto, stelline e descrizioni che trovate nei risultati delle SERPs. Il vantaggio? L’incremento del CTR (click through rate) quasi assicurato. Un risultato enfatizzato infatti, cade molto più facilmente sull’occhio di un utente che non un risultato standard. Searchenginelands, parla di un incremento del 30% circa dei click, che, sopratutto per chi si occupa di vendita di prodotti online, è una percentuale altissima. Certo, a patto che la concorrenza ne sia sprovvista.

Esempio di Rich Snippet

I microdati

Seppur esistano altri tipi di dati strutturati come i Microformati e gli RFDa, ci soffermiamo ad analizzare quelli che sono diventati lo standard de facto: i microdati. Entrati prepotentemente in gioco con la nascita di HTML5, i microdati rappresentano infatti lo standard più utilizzato, grazie alla semplicità di implementazione ed alla ottima documentazione fornita in merito, tramite il sito Schema.org, dai 3 colossi Google, Bing e Yahoo.

Il markup dei microdati è contraddistinto da 3 elementi: itemscope, itemtype e itemprops.

L’attributo itemscope racchiude le informazioni riguardo all’oggetto. Aggiungendo all’HTML l’itemscope si specifica la porzione di contenuto che si vuole contestualizzare:

Aggiungendo l’itemtype definiamo invece l’identità del tipo di contenuto di cui stiamo parlando. Deve essere inserito subito dopo l’itemscope:

Nell’esempio proposto, l’itemscope dice ai motori di ricerca che ciò di cui si parlerà in quel determinatodiv sarà un evento. Tutti gli itemtype vanno aggiunti sotto forma di url. Puoi trovare una raccolta completa di tutti gli itemtypes su Schema.org.

Ora che il motore di ricerca sa che nella nostra pagina si parlerà di un evento, possiamo utilizzare l’attributo itemprop per fornire informazioni aggiuntive e specifiche.

Se per esempio vogliamo indicare la location dove si terrà il concerto, possiamo farlo aggiungendo uno<span> con itemprop=”location”:

In alcuni casi, sarà inevitabile dover aggiungere elementi nel markup HTML al fine di racchiudere le informazioni. Per farlo tendenzialmente è bene usare lo<span> in quanto elemento inline che, di default, non influenza la renderizzazione grafica presentata al browser.

Nel caso volessimo aggiungere anche un orario in cui si terrà l’evento, sarà fondamentale ricorrere all’uso del tag<time> definendo l’attributo datetime secondo lo schema YYYY-MM-DD al fine di evitare cattive interpretazioni. Quindi nel nostro caso, il risultato potrebbe essere qualcosa di simile a:

Informazioni implicite

Laddove vi fosse la necessità di inserire informazioni che vogliamo rendere visibili solo nei rich snippets, ma non ai visitatori, dovremo ricorrere al tag<meta>,per esempio, se volessimo inserire nei rich snippets la durata di un filmato dovremo scrivere:

che indica al motore di ricerca che il video durerà 2 minuti e 40 secondi. E’ fondamentale ricordarsi di utilizzare sempre il formato ISO8601 per la formattazione di date ed orari affinchè vengano mostrate correttamente.

Testare i rich snippets

Una volta terminata la fase di implementazione, ti basterà inserire l’url della pagina creata nell’apposito tool fornito da google e verificare che tutto venga interpretato correttamente.

Il risultato è garantito!

Ispirato a: http://webdesign.tutsplus.com/articles/general/an-introduction-to-structured-data-markup/

  • apache72

    Ciao hoquesto problema sul mio sito http://psicologaonlinesalerno.it/

    Facendo una prova per gli autori nella ricerca google,
    tramite lo strumento “Test dati strutturati” in Strumenti per
    webmaster, mi escono degli avvisi nel campo “Estratti dati strutturati”
    e cioè: Avviso: Missing required field “entry-title”.

    Avviso: Missing required field “updated”.

    Avviso: Missing required hCard “author”.

    Questo vale per tutte le pagine che ho testato (nel mio sito ho solo
    pagine e nessun articolo).In quale file devo entrare index.php o page.php? E cosa devo fare?

    Nell’ index.php vedo questo :

    ” rel=”bookmark” title=”Permanent Link
    to “>

    Grazie

    • http://www.gleenk.com/ Davide De Maestri

      Ciao Apache, quelli escono perchè Google si aspetta delle classi perchè non legge solo i microdati html5 con quello strumento. Se Googli inserendo il nome dell’errore trovi degli “hack” per aggirarlo. Non preoccuparti troppo cmq ;)

  • apache72

    Ho letto da qualche parte che ciò può comportare una penalizzazione nei tempi (molto più lunghi) per far apparire l’immagine autore nella ricerca, tu che ne dici? e quindi secondo te non val la pena risolvere il problema? grazie!

    • Davide De Maestri

      Riesci a linkarmi la fonte dove hai trovato questa notizia? Ad ogni modo ripeto, puoi fixare, però temo che sia un settore dove debba ancora delinearsi bene il concetto di standard. Ad esempio l’uso di “classi” semantiche è una follia, perchè prima o poi anche per sbaglio qualche designer le usa. Fixa pure ma ripeto, io penso che si debbano delineare degli standard prima di essere penalizzati.

34 Flares Twitter 3 Facebook 1 Google+ 27 LinkedIn 3 Pin It Share 0 34 Flares ×