Indice dell’articolo
Sono ormai passati più di 7 anni da quando si è cominciato a parlare di Web Semantico e motori di ricerca e da quel momento col passare del tempo l’utilizzo dei dati strutturati è diventato un elemento sempre più importante in ambito SEO.
Google ad esempio utilizza i dati strutturati per comprendere meglio il contenuto di una pagina e in alcuni casi le informazioni raccolte vengono mostrate in serp attraverso snippet particolari come negli esempi di seguito.
Attualmente Google riconosce e supporta i seguenti tipi di markup nelle categorie Creative Works (come articoli o libri) e Local Business (attività locali).
Come funzionano i dati strutturati
La maggior parte dei dati strutturati utilizza il vocabolario Schema.org attraverso il quale è possibile implementare un Mark Up specifico per i propri contenuti utilizzando diversi linguaggi (Microdata, RdfA, etc..) tra cui JSON-LD, il formato consigliato da Google stesso.
La notazione JSON-LD si basa su JavaScript e incorpora all’interno di una tag presente nell'<head> o nel <body> della pagina le informazioni relative ai dati strutturati. In questo modo il contenuto html della pagina e le informazioni di mark up rimangono separati garantendo una serie di vantaggi:
- Essendo caricato in modo asincrono rispetto ai contenuti della pagina il codice di markup non influisce sulle sue prestazioni;
- Essendo iniettato tramite Javascript non contamina la struttura ed il codice del sito;
- La sintassi JSON è abbastanza semplice da implementare rispetto ad altri linguaggi.
Una volta create le annotazioni semantiche, che devono essere specifiche per ogni contenuto presente nel sito, i motori di ricerca saranno in grado di scansionare ed elaborare le informazioni in modo più preciso rispetto a prima; quello che normalmente è un semplice contenuto html formato da informazioni generiche, se formattato attraverso il vocabolario Schema.org, diventa un’entità definita e precisa.
Attraverso i dati strutturati Google è in grado ad esempio di rispondere a domande dirette come “Quanto è alto l’Everest” o “Chi è il Presidente della repubblica italiana?” e fornire dei risultati migliori riuscendo a definire meglio un contesto di risposta basato su fattori semantici.
Un altro esempio di risposta semantica è quella che viene fornita nel Knowlede Graph cioè quel box che compare in evidenza per alcune ricerche con l’obiettivo di offrire agli utenti ogni genere di informazione rilevanti su alcuni temi (es: aziende, musica, personaggi, etc..).
L’evoluzione del web semantico permette a Google di fornire risposte sempre più precise e contestualizzate; uno degli ultimi aggiornamenti in termini di dati strutturati, Speakable, riguarda ad esempio un annotazione specifica per contenuti idonei ad essere utilizzati da Google Assistant per rispondere a query di notizie di attualità su dispositivi vocali.
Come utilizzare Google Tag Manager con i dati strutturati
Grazie a Google Tag Manager è possibile gestire in modo semplice l’implementazione delle informazioni Schema.org per strutturare informazioni aggiuntive sul proprio sito, come ad esempio mark up di tipo Local Business, molto utili per la SEO locale.
Inoltre uno dei vantaggi offerti da GTM è la possibilità di utilizzare delle variabili per recuperare informazioni presenti nella pagina, senza dover scrivere a mano per ogni singolo contenuto i dati di cui abbiamo bisogno.
In questo articolo vedremo ad esempio come utilizzare la variabile Elemento DOM di Google Tag Manager per recuperare porzioni di testo dalla pagina del nostro sito ed inserirle in maniera dinamica in un tag che gestisce le informazioni JSON-LD di Schema.org.
La procedura che faremo seguirà i seguenti step:
- Creazione di n variabili Elemento DOM per ciascun informazione che dobbiamo recuperare;
- Creazione di un attivatore per le pagine dove vogliamo utilizzare il mark up Schema.org;
- Creazione di un tag html personalizzato con il markp JSON-LD che si compila dinamicamente con le variabili create.
Nel mio caso di esempio ho utilizzato un markup per l’entità libro (book) su un sito che tratta di recensioni di libri.
Analisi del Markup
Come prima cosa abbiamo bisogno di capire quali sono le informazioni che ci servono per il nostro markup distinguendo tra quelle richieste dallo standard e quelle presenti nelle nostre pagina (se manca qualche elemento obbligatorio dobbiamo assicurarci di inserirlo prima).
Una volta confrontati dati richiesti e informazioni che abbiamo possiamo creare il nostro markup JSON-lD seguendo uno degli esempi presenti su Schema.org.
Il nostro codice avrà il seguente formato:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Book",
"additionalType": "Product",
"name": "Nome Libro",
"genre": "Genere Libro",
"inLanguage": "Lingua Libro",
"isbn": "Codice ISBN",
"numberOfPages": "Numero di pagine",
"author": {
"@type": "Person",
"name": "Nome Autore"
},
"publisher": {
"@type": "Organization",
"name": "Nome Editore"
}
}
</script>
Le informazioni in grassetto, che variano da libro a libro, dovranno essere compilate in modo dinamico (grazie a GTM) prendendo dal codice della pagina il testo che fa riferimento ad ogni singolo campo (es: autore, editore, genere, etc..).
Creazione delle variabili Elemento DOM
Per recuperare le informazioni di cui abbiamo bisogno faremo un po’ di scraping sul nostro sito andando ad individuare gli elementi del DOM che corrispondono ai dati di cui abbiamo bisogno.
Facciamo un esempio pratico.
Per individuare il nome dell’autore del libro utilizzo la funzione Ispeziona Elemento dei Chrome DevTools: mi sposto sul nome dell’autore e analizzo qual’è il selettore CSS (univoco) che mi restituisce il testo con all’interno il nome di cui ho bisogno.
Una volta individuato il selettore all’interno di Google Tag Manager vado in Variabili -> Nuova -> Elemento DOM imposto una variabile che chiamo Autore Libro con metodo Selettore CSS e come selettore inserisco h3.featured-author__name a
L’operazione va ripetuta creando una variabile per ogni dato dinamico di cui abbiamo bisogno.
Creazione del custom tag JSON-LD
Una volta che abbiamo tutte le informazioni andiamo a creare il nostro markup tramite JSON-LD popolando i dati mancanti con le variabili precedentemente create.
In Google Tag Manager andiamo in Tag -> Nuovo -> Html Personalizzato ed inseriamo il codice JSON-LD precedentemente creato sostituendo alle voci in grassetto le nostre variabili (basta aggiungere all’interno del codice l’istruzione {{Nome Variabile}}).
Come attivatore del tag andremo a scegliere solo le pagine che rappresentano le pagine libro all’interno del sito (potete farlo tramite il percorso url dei vari contenuti).
Test ed analisi
Una volta salvato il tutto pubblichiamo il nostro contenitore ed assicuriamoci che il tag venga “eseguito” nella nostra pagina.
Cliccando in corrispondenza della voce Variabili al caricamento della pagina (Window Loaded) è possibile verificare il corretto popolamento delle nostre variabili DOM.
Come ultima verifica dobbiamo controllare che il markup sia correttamente metabolizzato da Google, per farlo utilizzeremo lo Strumento di Test dei Dati Strutturati che dovrà restituirci il valore Book senza errori.
Articoli correlati
Sono un Consulente in Digital Marketing con oltre 10 anni di esperienza. Mi occupo di progettare e sviluppare strategie digitali per Piccole e Medie Imprese per aiutare le aziende ad ottenere il massimo ritorno dagli investimenti nei canali online.
