I dati strutturati sono un meta linguaggio che consente a sistemi differenti di comprendere correttamente il significato di informazioni che possono essere rese disponibili seguendo uno schema condiviso e riconosciuto.
Essere in grado di riconoscere in modo preciso le informazioni consente ai vari software di risparmiare risorse di calcolo, e (anche) questo ha indotto Google, Microsoft, Yahoo e Yandex (il motore di ricerca russo) ad unire le forze per sviluppare un sistema unico di identificazione dei dati. E’ così nato schema.org, un dizionario che identifica in modo preciso moltissime “entità” ed i loro attributi.
Tramite schema.org è quindi possibile identificare, per esempio, una ricetta, descrivendo in modo preciso gli ingredienti, i tempi di cottura, ecc… Grazie a questo dizionario condiviso, tutti i sistemi interessati saranno in grado di estrarre quei dati e comprendere esattamente di cosa si tratta.
Come posso inserire i dati strutturati nel mio sito?
L’inserimento dei dati strutturati all’interno di una pagina web affinché Google e gli altri sistemi possano rilevarli in modo preciso, avviene utilizzando sintassi diverse, Microdata, RDFa, JSON-LD, anche se quella più diffusa è proprio quest’ultima, principalmente a causa della preferenza che le ha dato Google (la figura iniziale di questo articolo mostra una porzione di codice, detto snippet, in formato JSON-LD).
E’ molto importante quindi comprendere come deve essere composto il codice che dovrà essere rilevato dallo spider di Google o di qualsiasi altro motore di ricerca o sistema di lettura delle informazioni (e con l’Internet Of Things questo concetto va ben oltre ai motori di ricerca).
Qualsiasi sintassi si decida di implementare, sarà quindi necessario imparare a conoscerla per non incorrere in errori sintattici che renderanno illeggibile le informazioni.
In questo articolo ci rifaremo principalmente alla sintassi JSON-LD, proprio perché è quella preferita da Google. Per prendere confidenza con questa sintassi è possibile visualizzare gli esempi per i vari tipi di schema presenti sul sito di schema.org.
Puoi vedere la struttura di uno snippet di codice per il BlogPosting tramite questo generatore online di dati strutturati.
Puoi scoprire come si costruisce uno snippet di codice, o generare in modo molto rapido quasi tutti i tipi di dati strutturati di cui puoi aver bisogno, accedendo a questo generatore JSON-LD:
Venendo alla domanda specifica, come si inseriscono i dati strutturati all’interno di una pagina web?
Questa domanda ha molte risposte, e sostanzialmente dipende (principalmente) dagli strumenti utilizzati per la gestione del sito web. Se stiamo usando un CMS, come WordPress o Joomla!, potremo avvalerci dell’uso di appositi plug-in sviluppati per assolvere questo compito. Se invece il sito è sviluppato in puro codice html oppure con framework come Microsoft Asp.Net (quindi in codice xhtml – aspx), si potrà inserire lo snippet di codice direttamente all’interno del codice html (o aspx).
Possiamo, però, essere indipendenti dalla infrastruttura che sottostà al sito, proprio grazie ad un tool di casa Google, Tag Manager. Grazie a questo strumento possiamo “iniettare” il codice dei dati strutturati attraverso il suo motore, così come possiamo gestire una miriade di altre funzionalità.
Ma fermiamoci ai dati strutturati, e vediamo in particolare come generare automaticamente lo snippet dei dati strutturati utilizzando elementi già presenti nella pagina html, senza doverli inserire a mano per ogni pagina.
Tag Manager e le impostazioni per i dati strutturati di pagine della stessa categoria
Se usi un CMS ed hai installato un plug-in che ti consente di gestire i dati strutturati, avrai probabilmente notato limiti nel livello di possibilità di personalizzazione, oppure la mancanza di informazioni che invece sono importanti.
Usare Tag Manager per inserire i dati strutturati nelle tue pagine ti offre, al contrario, un alto livello di personalizzazione (decidi tu cosa inserire nei tuoi dati strutturati), ma rispetto ad un plug-in “plug & play” ti richiede un piccolo sforzo di implementazione, e se non sei un programmatore avrai probabilmente trovato ostico l’uso di questo tool.
In questo articolo imparerai ad usare Tag Manager per creare, con una unica implementazione, i dati strutturati per uno specifico insieme di pagine, purché abbiano una caratteristica che le accomuna, come una parte della URL, uno stile css particolare, ecc… Quindi, per esempio, se hai un sito di ricette di cucina potrai gestire, con un unico insieme di oggetti di GTM, i dati strutturati di tutte le tue pagine delle ricette (in questo caso si tratterà dello schema che va sotto il nome di “recipe”).
Per questo articolo utilizzeremo come esempio le pagine di “blog” di un sito, per creare i dati strutturati di tipo “BlogPosting”. Se vuoi scoprire tutti gli schemi di dati attualmente gestibili, ti basterà accedere al sito di schema.org che abbiamo già citato.
Di cosa avremo bisogno per generare automaticamente lo snippet di codice dei dati strutturati per la situazione che vogliamo provare? Di alcune variabili (che raccoglieranno i dati provenienti dalla pagina che l’utente sta visitando, nel nostro caso si tratterà delle informazioni tipiche di un articolo, quindi data dell’articolo, data di modifica, titolo, descrizione, ecc…), di un attivatore (o trigger, quindi di un meccanismo che si attiva in base al verificarsi di una o più condizioni, nel nostro caso il fatto che la pagina visitata sia una pagina del blog), e del tag (quindi il motore che si occuperà, al verificarsi delle condizioni previste dal trigger, di inviare alla pagina web i dati raccolti nelle variabili. Il meccanismo, quindi, funziona in questo moto: leggere alcune informazioni dalla pagina, elaborarle creando una struttura di codice JSON-LD, iniettare questo codice all’interno della pagina stessa.
Vediamo ora, passo per passo, cosa è necessario per creare i dati strutturati di una pagina di un blog, anzi, di tutte le pagine di blog del sito (perché useremo un attivatore che verrà attivato su ognuna delle pagine del blog, e solo su quelle). In questo modo una sola “struttura” di Tag Manager funzionerà alla perfezione per tutte le pagine di quella sezione, senza dover scrivere i dati strutturati per ogni pagina.
Le variabili per la lettura dei dati del post
Il primo passaggio da compiere è quello di “estrarre” le informazioni che ci serviranno per costruire il codice JSON-LD che dovrà essere poi “iniettato” nella pagina attraverso Google Tag Manager (GTM).
Questi dati vengono rilevati andando ad interrogare il “data layer“, quindi lo strato di dati che Tag Manager gestisce automaticamente.
Leggere i dati dal dataLayer in una variabile
Creiamo la prima variabile che andremo poi ad utilizzare nel nostro codice per i dati strutturati.
Dopo aver avuto accesso alla dashboard di Tag Manager, aprire la sezione delle variabili e creare una nuova variabile di tipo Elemento DOM. Scegliamo come metodo di selezione il tipo “Selettore CSS“, questo perché sfrutteremo una particolare proprietà impostata automaticamente ormai da tutti i template e plug-in “seo”, che è “og:description“, la descrizione dell’articolo destinata ai social network in fase di condivisione dell’articolo su queste piattaforme. Da questo oggetto andremo ad utilizzare l’attributo “content“, esattamente come indicato nella immagine che segue.
Quindi, la nostra variabile (che in questo caso abbiamo chiamato “SCHEMA – Article description”), verrà valorizzata con il valore contenuto (per quella specifica pagina) nel campo “og:description”. In questo modo, per ogni pagina del nostro sito, questa variabile avrà un valore differente.
Sfruttando oggetti presenti in ogni pagina possiamo quindi valorizzare molte altre variabili, semplicemente creando una variabile per ogni oggetto che ci interessa rilevare, prelevando dal codice html della pagina l’informazione che ci interessa. Ecco una serie di esempi di valori che si possono rilevare:
Data di pubblicazione dell’articolo: meta[property=”article:published_time”]
Data di modifica: meta[property=”article:modified_time”]
Titolo: title
Sezione di appartenenza dell’articolo: meta[property=”article:section”]
Immagine identificativa: meta[property=”og:image”]
Dimensioni immagine: meta[property=”og:image:height”] e meta[property=”og:image:width”]
Possiamo a questo punto creare altre sette variabili, ognuna destinata ad accogliere i dati sopra elencati. Per fare questo creare le nuove variabili, utilizzando sempre come Metodo di Selezione il Selettore CSS, l’attributo content, ma inserendo nel “Selettore elemento” i valori riportati qui sopra.
Ricordati di assegnare un nome facilmente comprensibile alle tue variabili.
L'attivatore per le pagine del blog
A questo punto dobbiamo creare l’attivatore che si attiverà nel momento in cui un utente atterrerà su una pagina di blog del nostro sito.
Per questo esempio supporremo che gli articoli del blog siano in una cartella all’interno del dominio, quindi, per esempio www.dominio.ext/blog/articolo1.htm
Per creare questo attivatore utilizzeremo la sintassi RegEx, quindi la sintassi che ci consente di cercare una espressione regolare all’interno di una sequenza di caratteri.
Portiamoci quindi nella sezione degli Attivatori (o Trigger, se usi Tag Manager in inglese come me), e creiamo un nuovo attivatore, selezionando come tipo “Visualizzazione di pagina”, indicando che il trigger si attiva solo per alcune pagine, ed impostiamo in modo che si attivi solo quanto l’url della pagina corrisponde al valore .*\/blog\/.* (che sta ad indicare: tutte le URL che contengono /blog/ e che hanno qualsiasi cosa prima e dopo).
Diamo un nome parlante all’attivatore e salviamolo.
Il tag: il motore dello snippet per i dati strutturati
Siamo arrivati all’ultimo elemento necessario per creare uno snippet di dati strutturati che verranno passati tramite Google Tag Manager alla nostra pagina di blog (e a tutte le pagine di blog del sito), il “tag“.
Spostiamoci quindi nella sezione dei tag, creiamone uno nuovo, selezioniamo il tipo “HTML Personalizzato”, come attivatore (o trigger) selezioniamo quello che abbiamo creato nel passaggio precedente (lo troverai nella lista degli attivatori cliccando sulla matita in alto a destra della sezione “Trigger”).
Non ci resta a questo punto che inserire il codice html personalizzato che Tag Manager dovrà iniettare nella pagina aperta dall’utente.
Trovi qui di seguito il codice che dovrai semplicemente riportare nel tuo tag.
Subito dopo trovi anche la spiegazione di quello che fa il codice che andrai ad inserire, così potrai usarlo come indicazione per creare i tuoi futuri tag.
Come funziona questo codice: innanzitutto possiamo vedere che si tratta di codice JavaScript, che è alla base di moltissime funzionalità di Tag Manager.
Per comprendere il funzionamento del codice JS riportato sopra, dobbiamo partire dalle ultime 6 righe. Per poter accodare questo codice al codice html della pagina, dobbiamo creare una variabile (qui denominata “var“) che poi andremo ad accodare alla sezione “head” della nostra pagina html, il punto in cui dovrà essere inserito il codice Javascript generato dal tag per essere eseguito:
var script = document.createElement(‘script’);
script.type = “application/ld+json”;
script.innerHTML = JSON.stringify(data);
document.getElementsByTagName(‘head’)[0].appendChild(script);
})(document);
Vediamo ora come viene costruita la variabile “var”, che è il nostro codice in formato JSON-LD contenente i dati strutturati:
var data = {
“@context”:”http://schema.org”,
“@type”:”BlogPosting”,
“mainEntityOfPage”:{
“@type”:”WebPage”,
“@id”: {{Page URL}}
},
“headline”: {{SCHEMA – Article Headline}},
“image” : {
“@type” : “ImageObject”,
“url” : {{SCHEMA – Article Image}},
“height” : {{SCHEMA – Image height}},
“width” : {{SCHEMA – Image width}}
},
“datePublished”: {{SCHEMA – Article datePublished}},
“author”: {
“@type”: “Organization”,
“name”: “Nome Azienda SpA”,
“logo”: {“@type”: “ImageObject”,
“url” : “https://www.dominio.it/logo.png”}
},
“publisher”: {
“@type”: “Organization”,
“name”: “Connectica sas”,
“logo”: {“@type”: “ImageObject”,
“url” : “https://www.dominio.it/logo.png”
},
“address”: {“@type”: “PostalAddress”,
“streetAddress” : “Piazza Garibaldi, 123”,
“addressLocality” : “MILANO (MI)”
}
},
“description”: {{SCHEMA – Article Description}},
“about” : {{SCHEMA – Article Section}}
}
var dateModified = {{SCHEMA – Article dateModified}};
if (dateModified) {
data.dateModified = dateModified;
}
else {
data.dateModified = {{SCHEMA – Article datePublished}}
}
Puoi trovare evidenziate nel codice precedente le variabili che sono state create in precedenza, e tramite le quali il tag andrà ad estrarre le informazioni che poi inserirà nel codice JSON-LD, e al termine andrà ad inserirle nella pagina web, in coda alla sezione “head”, come abbiamo visto poco fa.
Come puoi vedere, oltre alle variabili prelevate dalla pagina del sito, sono state inserite altre informazioni in modo statico, perché sono identiche per tutte le pagine del blog.
Verifica il funzionamento dei dati strutturati
Dopo aver creato le variabili, gli attivatori ed il tag, ricordati di pubblicare le modifiche attraverso il pulsante apposito di Tag Manager.
Subito dopo fai una verifica del corretto funzionamento di quanto hai appena implementato. Utilizza lo strumento di verifica dei dati strutturati di Google.
Nella finestra che si apre inserisci l’url di una qualsiasi pagina di blog del tuo sito, e verifica che sia presente la voce “BlogPosting”, e che non ci siano errori.
Per vedere il risultato finale di questo lavoro puoi dare una occhiata al test dei dati strutturati di questo articolo, aprendo la sezione “BlogPosting”.
Come potrai vedere, vengono riportati i dati che hai visto nel codice riportato in questo articolo, compilati automaticamente da Tag Manager, dopo averli prelevati dal data-layer e gestiti tramite le variabili.
Una "chicca" per il tuo lavoro di ottimizzazione dei dati strutturati del tuo sito
Nello stesso modo che hai appena visto, puoi “spiare” i dati strutturati dei siti concorrenti, o comunque di qualsiasi sito (a patto che su quel sito siano stati impostati i dati strutturati, ovviamente!). Per farlo ti sarà sufficiente inserire l’URL della pagina per la quale vuoi scoprire i dati strutturati.
Non scoprirai le parole chiave per cui il tuo concorrente cerca di posizionarsi. Non scoprirai cose mirabolanti. Ma potrai scoprire, per esempio, che un tuo concorrente gestisce gli snippet per i “Prodotti”, cosa che tu magari non avevi pensato di fare. Oppure che i suoi dati strutturati di tipo “Organization” sono molto più ricchi di informazioni dei tuoi. E tutto questo può diventare una ottima palestra per migliorare i tuoi dati strutturati, o per gestirne di nuovi che non avevi pensato di utilizzare.
Conclusioni
In questo articolo hai scoperto come utilizzare Tag Manager per compilare automaticamente i dati strutturati senza doverli inserire manualmente, in un insieme di pagine che hanno la stessa struttura (in questo caso gli articoli di un blog).
Puoi fare la stessa cosa prelevando dati da altri tipi di pagina (per esempio le categorie o i prodotti) e costruire lo snippet dei dati strutturati in modo automatico per ogni singola pagina di quell’insieme. Dovrai semplicemente cambiare i dati che vuoi leggere ed inserire nelle variabili, e l’attivatore basandolo su url diverse, oppure su altri tipi di attivatori che ti interessano per i dati strutturati che vuoi gestire.
Possiamo sicuramente dire che con Google Tag Manager sei svincolato dai plug-in (che comunque occupano risorse del tuo hosting e rallentano il caricamento della pagina, mentre GTM viene eseguito in modo asincrono) e dai loro limiti, sei libero di sbizzarrirti a costruire tutti gli schemi di dati che ti servono (sul sito di schema.org puoi vedere tutti i tipi di dati strutturati, e tieni conto che vengono aggiornati periodicamente), e soprattutto sei autonomo e svincolato dai programmatori e dal CMS o dal framework. Un bel vantaggio!!!
Sei pronto per partire con Tag Manager e aiutare Google fornendo indicazioni precise sul contenuto delle tue pagine attraverso i dati strutturati?
PS: attenzione!!! I dati strutturati non sono fattori di ranking per il posizionamento delle tue pagine nei risultati di ricerca di Google. Ma se aiuti il motore di ricerca a comprendere il contenuto con un minor impiego di risorse, sarà sicuramente molto contento!
FAQ rapide
I dati strutturati sono un markup standardizzato (tipicamente via Schema.org) che rende i contenuti del tuo sito facilmente comprensibili per i motori di ricerca. Questo consente a Google e altri motori di ricerca di interpretare in modo preciso cosa rappresenta una pagina (es. prodotto, ricetta, articolo, evento).
Grazie a questa chiarezza semantica, è possibile ottenere risultati arricchiti nelle SERP (rich snippets), con maggiori probabilità di attirare click da utenti interessati.
Sì: uno dei vantaggi di GTM è che consente di generare dinamicamente JSON-LD o markup strutturato tramite Tag HTML personalizzati, senza dover modificare manualmente l’HTML del sito.
Questo è particolarmente utile se non gestisci direttamente il codice o se vuoi standardizzare l’inserimento del markup su molte pagine.
Puoi marcare contenuti molto diversi: articoli/ blog post, prodotti, recensioni, breadcrumb, risultati di ricerca interna (search box), eventi, organizzazioni, e molto altro — praticamente tutto ciò che è definito da Schema.org.
Ad esempio, puoi generare markup per i breadcrumb, per mostrare recensioni con stelle, oppure per definire che una pagina appartiene a un sito/azienda (organizzazione).
Puoi usare strumenti come il Rich Results Test di Google per vedere se la pagina risulta idonea a generare rich snippets nei risultati di ricerca.
In alternativa, un validatore come il Schema Markup Validator (o analoghi strumenti di validazione) permette di controllare che il markup sia conforme agli standard e privo di errori.
Sì: la generazione dinamica è supportata, e può rendere l’implementazione più flessibile e scalabile.
Tuttavia, bisogna fare attenzione: nel caso di contenuti che cambiano spesso (es. prezzo o disponibilità di un prodotto), Google potrebbe non “catturare” sempre gli aggiornamenti, rendendo meno affidabili risultati come quelli di Shopping.