Microdati, JSON-LD, Microformati e Rich Snippet: come usare i dati strutturati

Articolo aggiornato il 29 dicembre 2017

Microdati, JSON-LD e Microformati sono i 3 principali formati di dati strutturati che permettono di ottenere i Rich Snippet in SERP, ma soprattutto di far comprendere a Google il nostro contenuto.

Nella parte iniziale del post vediamo cosa significa Rich Snippet; successivamente analizziamo il metodo per ottenerli, ovvero i dati strutturati nei 3 formati di markup principali (Microdati, JSON-LD e Microformati).

Vorrei fare una grande premessa, perché spesso noto che circolano informazioni fuorvianti. Lo scopo dei dati strutturati è quello di accrescere il grado di comprensione dei contenuti da parte del motore di ricerca; il fatto di ottenere dei rich snippet in SERP è una conseguenza.

 

 

Cos’è lo snippet. Premessa.

Se osserviamo la SERP (Search Engine Result Page) di Google, noteremo che i blocchi di risultati, che rappresentano le pagine che soddisfano la ricerca dell’utente, sono composti da:

  • Titolo: l’elemento più visibile e che corrisponde al tag “title” della pagina;
  • URL: in verde, rappresenta l’URL della pagina;
  • Descrizione: poche righe di testo che hanno il compito di introdurre il contenuto della pagina.
Microdati, Microformati, rich snippet: esempio di snippet

Un esempio di snippet: Google Translate

Lo snippet è proprio la descrizione della pagina web. Tale elemento gioca un ruolo importantissimo all’interno della SERP perché, oltre a fornire un “assaggio” della pagina, ci comunica il motivo per il quale il risultato è pertinente alla nostra ricerca.
Nota: le parole che vediamo in grassetto corrispondono al termine ricercato.

 

Cos’è il Rich Snippet

Mediante l’utilizzo di particolari accorgimenti, è possibile fornire a Google delle informazioni aggiuntive sulle pagine web. Questo permette al motore di ricerca di “arricchire” gli snippet (Rich Snippet) di conseguenza. L’immagine che segue mostra degli esempi di Rich Snippet.

Esempi di Rich Snippet - Microdati, Microformati

Esempi di Rich Snippet – Microdati, Microformati

In base ai dati aggiuntivi, Google è in grado di individuare la tipologia delle pagina, fornendo agli utenti un quadro più completo e quindi una maggiore possibilità di scelta del risultato più pertinente alla ricerca.
Sull’immagine di esempio, vediamo una simulazione di rich snippet di:

  • Un ristorante – lo snippet mostra il voto medio (le stelline) delle recensioni, il numero delle recensioni ed  il range di prezzo del listino.
  • Una ricetta – lo snippet mostra il voto medio (le stelline) delle recensioni, il tempo di preparazione e le calorie del preparato.
  • Un album musicale – lo snippet mostra la lista delle canzoni e la rispettiva durata.

Google, attualmente, da la possibilità di creare rich snippet per descrivere le seguenti tipologie di contenuti: personericette, musica, aziende, associazioni, prodotti, recensioni ed eventi.

E’ chiaro che uno snippet di questo tipo risulterà essere notevolmente più esaustivo per gli utenti, facendo aumentare la probabilità di click.

 

 

Cosa sono i dati strutturati

Google si evolve costantemente per dare dei risultati che rispondano in maniera esaustiva alle query dell’utente. Per raggiungere tale obiettivo l’aspetto più complesso è la comprensione del contenuto delle pagine web.

I dati strutturati sono un “formato standardizzato” che ha proprio lo scopo di fornire al motore di ricerca informazioni su una pagina e classificarne il contenuto.
Per fare un esempio semplice: in una pagina che descrive una ricetta di  cucina, i dati strutturati permettono di definire gli ingredienti, il tempo di cottura, la temperatura, le calorie, e così via.

Google, quindi, usa i dati strutturati per comprendere il contenuto della pagine e per ottimizzare il metodo di interpretazione del testo.

I dati strutturati vengono inseriti nei siti web utilizzando un “markup in-page“, ovvero una sintassi ben definita all’interno delle pagine.

Esistono diversi formati di dati strutturati e ne vedremo 3:

  1. Microdati,
  2. JSON-LD,
  3. Microformati.

Gli ultimi aggiornamenti delle linee guida di Google segnalano come metodo consigliato l’utilizzo del formato JSON-LD.

 

Microdati

Come detto precedentemente, i microdati (introdotti dall’HTML5) vengono utilizzati per “etichettare” alcuni dati contenuti all’interno di una pagina web in modo che Google riesca ad interpretarli. Chiaramente, ogni tipologia di contenuto avrà il relativo insieme di dati; questo perché ogni entità è caratterizzata da dati specifici (un ristorante, ad esempio, non avrà la lista delle tracce audio tra le specifiche :) ).

Microdati: specifica HTML5

Microdati: specifica HTML5

Praticamente come si usano i microdati? L’associazione dei microdati ad una pagina web è abbastanza semplice (prevede una conoscenza base di HTML) in quanto le informazioni vengono inserite all’interno degli attributi dei tag HTML. I tag più utilizzati per questo scopo sono <div> e <span>.

La struttura dei dati prevede, per prima cosa, la definizione del “contenitore” che si identifica attraverso gli attributi:

  • itemscope (identifica, appunto che il tag che contiene tale attributo è il contenitore)
  • itemtype (stabilisce il tipo di entità che si andrà a descrivere: una persona, una recensione, una ricetta, ecc.).

Un esempio:

<div itemscope itemtype=”http://schema.org/Person“> … </div>

L’interpretazione: il div dell’esempio è il contenitore dei dati, in quanto tra i suoi attributi possiede itemscope; i dati andranno a descrivere una persona, come specificato dall’attributo itemtype.

I dati specifici dell’entità vengono definiti all’interno del “contenitore“; i tag HTML che li valorizzano contengono l’attributo itemprop. Vediamo un semplice esempio esplicativo completando quello precedente:

<div itemscope itemtype="http://schema.org/Person">
 <a itemprop="url" href="https://www.alessiopomaro.com"><div itemprop="name">Alessio Pomaro</div></a>
 <div itemprop="jobtitle">Project Manager, Web developer, Web Marketing &amp; SEO Specialist. Consulenza SEO e SEO copywriting. Blogger.</div>
 <div itemprop="description">Sono un project manager e un web developer specializzato in Web Marketing e SEO (ottimizzazione dei siti web per i motori di ricerca). Mi occupo anche di SEO copywriting e sono attivo come blogger su molti siti web di successo.</div>

<div itemprop="address" itemscopeitemtype="http://schema.org/PostalAddress">
 <div itemprop="addressCountry">IT</div>
 </div>

<div itemprop="email">info@alessiopomaro.com</div><div class="bday">
 <meta itemprop="birthDate" content="1981-08-05">DOB: 08/05/1981</div>
 </div>

Analizziamo l’esempio, che che si avvicina ai microdati presenti su questo sito riguardanti il mio profilo.
Come vediamo, viene creato il contenitore (itemscope) e specificato che si sta andando a descrivere persona (itemtype=”http://schema.org/Person). I dati specificati per tale persona, sono un URL, una professione, una descrizione, un indirizzo di posta elettronica e una data di nascita. Ho escluso volontariamente l’indirizzo perché il modo con il quale viene definito introduce una ulteriore possibilità: l’annidamento delle tipologie.
Come si può notare, infatti, l’indirizzo è specificato all’interno di un ulteriore contenitore (itemscope) avente come tipologia un indirizzo (itemtype=”http://schema.org/PostalAddress), il quale avrà, a sua volta, una serie di dati “valorizzabili“; in questo caso, solo la nazione è stata definita.

Dove possiamo trovare la documentazione completa per l’utilizzo dei microdati?
La documentazione ufficiale relativa a tutti gli schemi (tipologie), è disponibile su http://schema.org (corredata da molti esempi).

 

 

JSON-LD

JSON-LD è l’ultimo nato come formato di dati strutturati e, secondo me, è anche quello più semplice da implementare perché ha due grandi vantaggi rispetto agli altri:

  1. è completamente svincolato dal markup HTML;
  2. permette di inserire tutti i dati in un solo snippet di codice.

Probabilmente è quello consigliato soprattutto perché, grazie alle due caratteristiche appena viste, il crawler di Google impiega molto meno tempo nella fase di “parsing“, ovvero di interpretazione dei tag della pagina.

JSON-LD è un formato di dati molto semplice (documentazione ufficiale: https://json-ld.org/), sia da generare, sia da comprendere.
Com’è facile intuire, è basato sul famosissimo formato JSON, e questo lo rende ideale per l’interazione con qualunque linguaggio di programmazione, servizi web REST e database non strutturati come MongoDB e CouchDB.

Come indicato dalla documentazione, l’implementazione può avvenire utilizzando diversi linguaggi. Nello specifico: Javascript, Python, PHP, Ruby, Java, C# e Go.
Il riferimento e gli esempi di creazione degli schemi è, come per i microdati, schema.org.

 

 

Per comprendere il formato vediamo un esempio pratico per lo schama “Organization“, confrontato a come sarebbe con i microdati.

Come sarebbe con i Microdati:

<p itemscope itemprop="organization" itemtype="http://schema.org/Organization">
 <a itemprop="url" href="https://www.alessiopomaro.com">
 <span itemprop="name">AP Company</span>
 </a> ha un nuovo finanziatore:
 <span itemprop="sponsor" itemscope itemtype="http://schema.org/Organization">
 <a itemprop="url" href="https://www.esempio.it/">
 <span itemprop="name">Esempio Spa</span>
 </a>
 </span>.
 </p>

Com’è con JSON-LD:

<script type="application/ld+json">
 {
 "@context": "http://schema.org/",
 "@type": "Organization",
 "name": "AP Company",
 "url": "https://www.alessiopomaro.com",
 "sponsor":
 {
 "@type": "Organization",
 "name": "Esempio Spa",
 "url": "https://www.esempio.it/"
 }
 }
 </script>

 

Come implementare i dati strutturati con JSON-LD su WordPress

Esistono due metodi che ho già utilizzato su WordPress e sono i seguenti.

  1. Utilizzo di campi personalizzati. Usando quelli nativi di WordPress o, semplificando, il noto plugin ACF (Advanced Custom Fields) possiamo inserire lo snippet JSON direttamente all’interno dell’interfaccia di inserimento/modifica dei post. Infine, basterà stampare la variabile nel tema.
    PRO: semplicissimo da implementare.
    CONTRO: non c’è nessun tipo di centralizzazione. Se, per assurdo, dovessi fare una piccola modifica al JSON, dovrei replicare la modifica in tutti i post.
  2. Implementazione custom. All’interno di una directory del tema, possiamo creare un file PHP per ogni schema di cui abbiamo bisogno. Ogni file conterrà lo snippet JSON valorizzato attraverso le funzioni di WordPress, in modo da renderlo dinamico. Infine, bsaterà includere lo schema di cui abbiamo bisogno nei diversi file del tema (questa operazione può anche essere gestita dinamicamente attraverso la selezione dello schema da back end usando ACF).
    PRO: gli snippet JSON sono centralizzati. Ogni modifica futura richiederà qualche minuto.
    CONTRO: l’implementazione è più complessa e necessita la conoscenza della documentazione di WordPress.

Questi sono solo due interpretazioni. Soprattutto per il secondo metodo, possiamo sbizzarrirci nell’inventare soluzioni; il mio intento era quello di dare un input di esempio.

 

Microformati

Il funzionamento dei microformati è il medesimo dei microdati, ma con specifiche sintattiche diverse.

Microformati - ottenere visibilità

Microformati – ottenere visibilità

In questo caso, ad esempio, per effettuare l'”iniezione” dei dati, viene utilizzato l’attributo class  all’interno dei tag HTML (i tag più utilizzati sono <div> e <span>).

Anche per i microformati, esistono delle tipologie di entità da descrivere, le quali hanno dei nomi specifici, ad esempio il microformato hCard descrive una persona, quello hReview una recensione, ecc..

Vediamo un semplice esempio relativo ad un hCard:

<div class="vcard">
 <img class="photo" src="https://www.alessiopomaro.com/wp-content/uploads/2014/01/alessio-pomaro-widget.jpg" />
 <span class="fn">Pomaro Alessio</span>
 <span class="title">Project Manager, Web developer, Web Marketing &amp; SEO Specialist. Consulenza SEO e SEO copywriting. Blogger.</span>
 <span class="adr">
 <span class="street-address">Via Roma, 10</span>
 <span class="locality">Roma</span>
 </span>
 </div>

L’indicazione class=”vcard non è un errore: per specificare che si sta creando un miocroformato hCard, è necessario specificare tale sintassi.
Come vediamo, l’esempio è facilmente comprensibile e simile a quello dei microdati.

 

Dove possiamo trovare la documentazione completa per i microformati?

La documentazione ufficiale, è disponibile su http://microformats.org/wiki/ (completa e corredata di esempi).

 

Gli strumenti a disposizione per i dati strutturati

Esistono due strumenti messi a disposizione da Google Search Console che sono molto utili per creare e verificare i dati “strutturati” delle pagine web:

  1. Assistenza per il markup. Una procedura guidata che consente di effettuare una simulazione direttamente sulle pagine di un sito web consentendo di specificare ed inserire i dati. L’output dello strumento è il codice html da inserire all’interno delle pagine web. L’interfaccia è semplice ed intuitiva, ma allo stesso tempo, potentissima a livello tecnico.
  2. Strumento di test per i dati strutturati. Utile per comprendere come Google interpreta i dati inseriti sulle pagine web e per ottenere una simulazione del relativo snippet.

Consiglio, inoltre, di utilizzare il seguente tool come editor per la creazione di schemi in JSON-LD:

  • JSON-LD Playground. Un editor online che permette di verificare immediatamente la correttezza sintattica e soprattutto di partire da esempi di schemi già pronti.

 

Conclusioni

  • Nel post ho sempre parlato di Google, ma anche gli altri motori di ricerca individuano ed interpretano i microdati, JSON-LD ed i microformati.
  • Esistono altri formati di markup, ad esempio RDFa. Tuttavia i più usati sono quelli descritti dal post. Tra i due, per versatilità e semplicità di utilizzo, consiglio i microdati (la stessa scelta di Google).
  • L’importanza di questi dati strutturati non è assolutamente da sottovalutare: oltre a garantire maggiore visibilità grazie ai rich snippet, di certo favoriscono l’attenzione dei motori di ricerca verso le nostre pagine web.
  • Consiglio di utilizzare i JSON-LD perché sono più semplici da implementare.
  • Vista la semplicità di utilizzo e la potenzialità del “mezzo“.. perché non usarli?

 

4 commenti per “Microdati, JSON-LD, Microformati e Rich Snippet: come usare i dati strutturati

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *