All’interno di questa sezione è possibile abilitare e configurare, relativamente alla parte Ecommerce del proprio sito, l’utilizzo dei cosiddetti microdati, elementi questi molto utili ai fini SEO e in grado di fornire agli spider dei motori di ricerca informazioni più dettagliate relativamente al contenuto delle pagine da essi vistate

Per poter utilizzare al meglio i microdati è necessario chiarire, innanzitutto, alcuni concetti di fondamentale importanza, primo fra tutti il significato di Snippet e quello di Rich Snippet.

In questo senso, osservando una pagina di risultati relativi ad una qualsiasi ricerca effettuata su Google, possiamo notare facilmente come ogni singolo risultato della ricerca effettuata dall’utente sia composto da diversi elementi.

Nello specifico possiamo trovare:

• Titolo: è l’elemento più visibile e corrisponde al Meta Tag “Title” della pagina che soddisfa la ricerca effettuata dall’utente – (1)
• URL: in verde, rappresenta l’indirizzo della pagina web che soddisfa la ricerca effettuata dall’utente – (2)
• Descrizione: poche righe di testo (generalmente il contenuto del Meta Tag “Description”) che hanno il compito di introdurre il contenuto della pagina che soddisfa la ricerca effettuata dall’utente (in grassetto vengono evidenziate le parole che corrispondono al termine ricercato)

Lo Snippet è proprio la descrizione della pagina web e riveste un ruolo di fondamentale importanza all’interno di una SERP (Search Engine Result Page) perché oltre a fornire un’anticipazione del contenuto della pagina di destinazione, comunica anche il motivo per cui il risultato è pertinente alla ricerca effettuata.

Ora, mediante l’utilizzo di particolari accorgimenti (dati strutturati) è possibile fornire a Google informazioni aggiuntive sulle pagine del proprio sito web, informazioni queste che andranno ad arricchire di conseguenza il relativo risultato di ricerca.

Facciamo un esempio: immaginiamo di avere un blog di cucina dove pubblichiamo costantemente ricette di dolci. Ogni pagina sarà strutturata in maniera simile alle altre, ritroveremo infatti, oltre al titolo e alla preparazione, i seguenti elementi: il tempo di preparazione, l’immagine del dolce, i feedback degli utenti.

Queste informazioni possono essere comunicate in maniera esplicita ai motori di ricerca. Grazie all’utilizzo dei dati strutturati è come se dicessimo a Google che “per fare la torta al cacao ci vuole un’ora di tempo, questa è la foto e agli utenti piace molto”. Implementando correttamente questo tipo di informazioni Google stesso avrà poi la possibilità di fornire agli utenti che effettuano una ricerca dei risultati più dettagliati relativamente alle informazioni presenti all’interno della pagina che l’utente andrà a visitare cliccando sul quello specifico risultato.

Un Rich Snippet, come del resto facilmente intuibile dal nome stesso, altro non è dunque se non una descrizione più ricca e dettagliata del relativo risultato di ricerca. Oltre al semplice testo potremo trovare elementi aggiuntivi come ad esempio le classiche stelline per le valutazioni/recensioni, i prezzi, i video, il nominativo dell’autore dell’articolo ecc…

In base a questi dati aggiuntivi Google è in grado di individuare e contestualizzare la tipologia della pagina web fornendo agli utenti un quadro più completo e quindi una maggiore possibilità di scelta del risultato. E’ chiaro infatti che uno snippet di questo tipo risulterà essere notevolmente più esaustivo per gli utenti facendo aumentare di conseguenza la probabilità che l’utente clicchi su di esso e visiti effettivamente la pagina del nostro sito.

Una volta compreso che cosa sono i Rich Snippet e il perché possano rivelarsi estremamente utili si tratta ora di capire come poterli effettivamente implementare all’interno del proprio sito.

Tecnicamente i Rich Snippet sono il frutto dell’implementazione sui siti web dei cosiddetti Microdati forniti da Schema.org (http://schema.org/), uno standard supportato sia da Google che da Bing e Yahoo.

I Microdati rientrano, più esattamente, nel gruppo dei dati strutturati, così come i Microformati e gli RDFa (Resource Description Framework in Attributes) e sono appunto delle informazioni aggiuntive, inerenti al contenuto della pagina web, comunicate esplicitamente ai motori di ricerca attraverso delle implementazioni a livello codice, ossia attraverso l’utilizzo di un ben preciso markup HTML.

Vediamo un esempio pratico per capire bene come poter implementare queste informazioni nel codice del nostro sito.

Supponiamo, ad esempio, di voler inserire in una determinata pagina delle informazioni relative ad una data persona; senza l’utilizzo dei Microdati potremmo ricorrere ad un semplice markup di questo tipo:

<div>

Mi chiamo Mario Rossi, e questo è il mio numero di telefono 022345678.

Lavoro come Blogger per il sito

<a href=”http://www.miosito.com”> www.miosito.com</a>

</div>

Utilizzando i Microdati potremo invece fornire al motore di ricerca, in maniera esplicita, delle informazioni più precise e dettagliate relativamente a questo tipo di contenuto presente all’interno della nostra pagina web. Ovviamente il markup HTML da utilizzare dovrà essere leggermente diverso.

Nello specifico sarà necessario, per prima cosa, definire il contenitore dei Microdati e lo schema di informazioni che saranno presenti al suo interno e questo lo si fa utilizzando gli attributi itemscope e itemtype

• itemscope: identifica il contenitore dei Microdati
• itemtype: stabilisce il tipo di entità che si andrà a descrivere (es. una persona, una recensione, una ricetta, un prodotto ecc.)

I dati specifici dell’entità vengono definiti invece nei Tag interni al contenitore mediante l’utilizzo dell’attributo itemprop

• itemprop: identifica il tipo di proprietà (e quindi di informazione) da fornire al motore di ricerca

Volendo quindi utilizzare i microdati dovremo modificare il nostro markup HTML come di seguito riportato.

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

Mi chiamo <span itemprop=”name”>Mario Rossi</span>,

e questo è il mio numero di telefono <span itemprop="telephone">022345678</span>.

Lavoro come <span itemprop="jobTitle">Blogger</span> per il sito

<a href="http:// www.miosito.com " itemprop="url">www.webmarketingpolicy.com</a>.

</div>

• L’elemento itemscope della prima riga indica che all’interno di questo div sono contenuti dei microdati
• Il valore itemtype=”http://schema.org/Person” presente sempre nella prima riga indica che l’elemento che vogliamo descrivere mediante Microdati è una persona (in questo caso viene infatti utilizzata la struttura di schema.org relativa alle persone).
• I valori preceduti da itemprop rappresentano, infine, gli attributi dell’elemento persona. itemprop=”name”, ad esempio, informa esplicitamente il motore di ricerca che quanto presente all’interno di quel Tag è esattamente il nome della persona. Allo stesso modo itemprop=”telephone” indica al motore di ricerca che quello è un numero di telefono ecc…

Nel caso in cui avessimo necessità di inserire più informazioni di entità diverse potremmo ricorrere all’utilizzo delle entità nidificate. Supponiamo, in questo senso di voler inserire tra le informazioni di Mario Rossi anche il suo indirizzo di residenza. L’Indirizzo è, di per sé, un entità indipendente che può essere collegata all’entità Persona per cui il markup HTML da utilizzare sarà il seguente:

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

Mi chiamo <span itemprop=”name”>Mario Rossi</span>,

e questo è il mio numero di telefono <span itemprop="telephone">022345678</span>.

<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">

<span itemprop="streetAddress">Via Flamina 12</span>

<span itemprop="addressLocality">Rimini</span>

<span itemprop="postalCode">47922</span>

</div>

Lavoro come <span itemprop="jobTitle">Blogger</span> per il sito

<a href="http:// www.miosito.com " itemprop="url">www.webmarketingpolicy.com</a>.

</div>

In questo modo dunque all’interno dell’entità Persona è stata nidificata l’entità Indirizzo con i seguenti attributi:

• itemprop=”streetAddress”: attributo utilizzato per indicare una via all’interno di un indirizzo
• itemprop=”addressLocality”: attributo utilizzato per indicare la Città all’interno di un indirizzo
• itemprop=”postalCode”: attributo utilizzato per indicare il Codice Postale all’interno di un indirizzo

Ovviamente il tipo di attributi da utilizzare dipende dal tipo di informazione che si vuole comunicare al motore di ricerca e quindi dal tipo di Schema dichiarato all’interno dell’attributo itemtype.

ATTENZIONE! Tutta la documentazione relativa ai tipi di Schema che possono essere adottati (e quindi alle tipologie di informazioni descrivibili mediante microdati) e ai relativi attributi da utilizzare sono disponibili, come detto, all’indirizzo http://schema.org/

Una volta compreso, in termini generali, come dover operare per implementare i Microdati, resta ora da capire come poter effettivamente riportare tutto questo all’interno del proprio sito Passweb.

In questo senso è possibile procedere in due modi diversi dipendentemente dal tipo di informazione (quindi dal tipo di Schema) che si intende adottare e dallo specifico Componente Passweb utilizzato.

Nel caso in cui l’informazione da descrivere mediante Microdati sia relativa ad una Persona, un Indirizzo, un Video, un Numero di Telefono o comunque relativa ad un qualche cosa implementabile in Passweb con componenti non Ecommerce, è possibile sfruttare il campo “Attributi Addizionali” presente nella maschera di configurazione di ogni componente per inserire in maniera corretta, secondo quanto previsto dal relativo schema, i vari attributi itemscope, itemtype e itemprop.

In alternativa è anche possibile (e forse più rapido) utilizzare direttamente il Componente HTML in maniera tale da inserire direttamente il Markup desiderato.

Nel caso in cui invece l’informazione da descrivere mediante Microdati sia relativa ad elementi più prettamente Ecommerce (Recensioni, Prodotti, Prezzi, Disponibilità ecc…) il campo “Attributi Addizionali” presente nella maschera di configurazione del relativo Componente (es. Catalogo Ecommerce) da solo non è sufficiente per definire la corretta implementazione di tutti i Microdati ne si ha la possibilità di intervenire direttamente sul markup HTML di questi componenti.

In queste condizioni dunque per abilitare i Microdati anche a livello Ecommerce sarà necessario agire direttamente dalla sezione “Rich Snippets” presente all’interno della pagina “Sito – Preferenze – Integrazioni” del Wizard

Ognuno dei check presenti all’interno di questa sezione consente infatti di abilitare un ben determinato Schema di Microdati modificando di conseguenza il Markup HTML del relativo componente Ecommerce. Vediamoli nel dettaglio:

• Schema AggregateRating: consente di abilitare lo Schema relativo al risultato delle valutazioni (stelline) assegnate complessivamente ad un dato prodotto modificando di conseguenza il Markup HTML del componente “Rating Review” in maniera tale da implementare su di esso l’utilizzo dei relativi Microdati (Votazione complessiva di un prodotto).
• Schema BreadcrumbList: consente di abilitare lo Schema relativo alle cosiddette “Briciole di Pane” modificando di conseguenza il Markup HTML del componente “Info Navigazione” in maniera tale da implementare su di esso l’utilizzo dei relativi Microdati

ATTENZIONE! Attivando questo Schema i Microdati verranno implementati solo ed esclusivamente sui componenti “Info Navigazione” inseriti all’interno delle pagine “Prodotto”.

• Schema Product: consente di abilitare lo Schema relativo ai prodotti venduti all’interno di un sito Ecommerce modificando di conseguenza il Markup HTML del componente “Catalogo Ecommerce” e di singoli componenti presenti all’interno delle Pagine Prodotto in maniera tale da implementare su di esse l’utilizzo dei relativi Microdati.

Per questo Schema è possibile gestire individualmente le seguenti proprietà:

• Codice Prodotto: consente di modificare il Markup HTML del componente “Dati Articolo” nel momento in cui questo dovesse essere mappato con il campo gestionale “Codice”.

Attivando questa proprietà, nel markup del componente in esame comparirà quindi anche un frammento di codice analogo a quello di seguito indicato:

< span itemprop="productId" >

< span itemprop="sku" >STSM01< /span >

< /span >

utile per istruire gli spider del motore di ricerca relativamente al fatto che il valore “STSM01” è esattamente il codice di quello specifico prodotto.

• Descrizione Prodotto: consente di modificare il Markup HTML del componente “Descrizione” in maniera tale da implementare su di esso l’utilizzo dei relativi Microdati

Attivando questa proprietà, nel markup del componente in esame comparirà quindi anche un frammento di codice analogo a quello di seguito indicato:

< span itemprop="description" >Multifunzione 3 in 1 Laser a colori - Massimo formato di stampa: A4 …< /span >

utile per istruire gli spider del motore di ricerca relativamente al fatto che il valore indicato all’interno dello span è esattamente la descrizione di quello specifico prodotto.

• Immagine Prodotto: consente di modificare il Markup HTML del componente “Immagine Rappresentativa” in maniera tale da implementare su di esso l’utilizzo dei relativi Microdati

Attivando questa proprietà, nel markup del componente in esame all’interno del tag img verrà quindi inserita anche la proprietà

itemprop="image"

utile per istruire gli spider del motore di ricerca relativamente al fatto che quella indicata in corrispondenza della proprietà src è esattamente l’immagine del prodotto

• Titolo Prodotto: consente di modificare il Markup HTML del componente “Titolo” in maniera tale da implementare su di esso l’utilizzo dei relativi Microdati

Attivando questa proprietà, nel markup del componente in esame comparirà quindi anche un frammento di codice analogo a quello di seguito indicato:

< span itemprop="name" >Stampante Samsung CLP 365W< /span >

utile per istruire gli spider del motore di ricerca relativamente al fatto che il valore “Stampante Samsung CLP 365W” è esattamente il nome di quello specifico prodotto.

• Schema Offer/AggregateOffer: consente di abilitare lo Schema relativo alle informazioni di tipo Prezzo modificando di conseguenza il Markup HTML dei componenti “Prezzo” presenti all’interno dei componenti “Catalogo Ecommerce” e/o “Scheda Prodotto”. Per questo Schema è possibile gestire individualmente la seguente proprietà

• Disponibilità prodotto: consente di modificare il Markup HTML del componente “Prezzo” mediante l’inserimento del Tag

< meta itemprop="availability" content=http://schema.org/InStock > oppure

< meta itemprop="availability" content=http://schema.org/OutOfStock >

dipendentemente dal fatto che il relativo articolo risulti essere o meno disponibile e quindi acquistabile all’interno del sito

ATTENZIONE! lo schema Offer/AggregateOffer verrà applicato solo ed esclusivamente ai Componenti “Prezzo” presenti all’interno del “Catalogo Ecommerce” e della “Scheda Prodotto” e solo nel caso in cui sia stato attivato anche lo Schema Product. Nel momento in cui dovesse essere attivato questo Schema verrà quindi attivato in maniera automatica anche lo Schema Product.

• Schema Rating: consente di abilitare lo Schema relativo ad un singolo commento/recensione modificando di conseguenza il Markup HTML del componente “Rating Articolo” in maniera tale da implementare su di esso l’utilizzo dei relativi Microdati.
• Schema Review: consente di abilitare lo Schema relativo ai commenti/recensioni associate ai vari prodotti in vendita all’interno di un sito Ecommerce modificando di conseguenza il Markup HTML del componente “Commenti Associati”.

Per questo Schema è possibile gestire individualmente le seguenti proprietà:

• Testo Commento: consente di modificare il Markup HTML del componente “Testo Commento” in maniera tale da implementare su di esso l’utilizzo dei relativi Microdati
• Data Commento: consente di modificare il Markup HTML del componente “Data Commento” in maniera tale da implementare su di esso l’utilizzo dei relativi Microdati
• Autore Commento: consente di modificare il Markup HTML del componente “Autore Commento” in maniera tale da implementare su di esso l’utilizzo dei relativi Microdati

Attivando uno degli Schemi presenti in elenco vengono automaticamente attivate anche le relative proprietà. Allo stesso modo disattivando uno Schema verranno automaticamente rimossi anche i segni di spunta delle relative proprietà.

ATTENZIONE! Nel momento in cui l’esigenza dovesse essere quella di gestire dei Microdati di prodotto diversi da quelli appena analizzati (es. la marca del prodotto) sarà necessario agire mediante il componente “Dati Articolo” inserendo, nello specifico, la proprietà desiderata all’interno del campo Itemprop Microdata (Schema.org) (per maggiori informazioni in merito si veda anche quanto indicato all’interno del capitolo “Varianti sito responsive – Lista Componenti Ecommerce – Componenti interni ai componenti ecommerce – Dati Articolo” di questo manuale)

Una volta deciso quali Microdati abilitare all’interno del proprio sito Ecommerce è poi possibile testare la loro corretta implementazione con diversi strumenti. In questo senso quelli più utilizzati sono sicuramente quelli messi a disposizione dal Google stesso e presenti, ad esempio all’interno degli “Strumenti per i Webmaster” o all’indirizzo https://search.google.com/structured-data/testing-tool .

Per maggiori informazioni relativamente agli strumenti di testing si rimanda alla relativa documentazione presente in rete.

ATTENZIONE! oltre ai Microdati (HTML5) trattati all’interno di questo capitolo esistono anche altri formati di Markup che possono essere utilizzati per gestire i dati strutturati come ad esempio i Microformati o gli RDFa. In ogni caso Passweb implementa, attualmente, i soli Microdati (HTML5) essendo questo formato quello consigliato ad Google stesso.