Google Tag Manager: inserire schema.org/json-ld dinamicamente

In questo articolo vogliamo spiegarvi come usare Google Tag Manager per inserire schema.org con il formato JSON-LD nelle pagina web, dinamicamente, in particolare su un Blog Post. Attraverso questo sistema è possibile inserire i dati strutturati nel vostro sito web e nel vostro Blog senza dover intervenire sul codice e quindi, senza dover dipendere dal vostro dipartimento IT o da qualcuno di esterno per implementare schema.org e ottimizzare il sito web al meglio dal punto di vista SEO.

Schema.org cos’è?

Schema.org è sistema di mark-up dei contenuti delle pagine web con una formattazione comune tra i vari motori di ricerca che permette di strutturare i dati delle pagine web. Lo scopo di schema e dei dati strutturati è principalmente quello di facilitare la lettura dei contenuti delle pagine web e la loro comprensione da parte dei motori di ricerca così che possano fornire risultati più pertinenti. Se volete approfondire consigliamo di leggere questo articolo: Cos’è schema.org e come usarlo per strutturare i dati di un sito internet e migliorarne l’indicizzazione

Google Tag Manager cos’è?

Google Tag Manager è una soluzione user-fiendly per gestire i tag o gli snippet JavaScript che inviano dati a terze parti, sul tuo sito web o app mobile. Come recita Google:

Google Tag Manager è un sistema di gestione tag che ti consente di aggiornare, rapidamente e facilmente, i tag e gli snippet di codice, quali quelli destinati all’
analisi del traffico o all’ottimizzazione del marketing, sul tuo sito web o la tua app per dispositivi mobili. Puoi aggiungere e aggiornare tag AdWords, Google Analytics, Firebase Analytics, Floodlight e di terze parti o tag personalizzati dall’interfaccia utente di Google Tag Manager, anziché modificare il codice del sito. In tal modo, puoi ridurre gli errori ed evitare l’intervento di uno sviluppatore, quando configuri i tag.

Per sapere di più si può consultare la guida di Google Tag Manager.

Google Tag Manager: inserire schema.org in formato json-ld in una pagina web generando dinamicamente i tag

Come sappiamo, inserire schema.org e i dati strutturati nelle pagine di un sito web richiede molte modifiche al mark-up della pagina interessata e quindi un intervento manuale sul codice del sito web. Anche se il formato JSON-LD ha creato una valida alternativa per aggiungere i dati strutturati alla pagina mantenendo al minimo il codice da inserire, è comunque necessario intervenire sulla sorgente della pagina.

La grande potenza di Google Tag Manager in questa prospettiva, è quella di poter inserire schema.org con il formato JSON-LD nella pagina web, in maniera dinamica, senza dover effettuare alcuna modifica al codice e quindi senza richiedere l’intervento di uno sviluppatore o del reparto IT.

L’unico problema è che, mentre è facilmente inseribile uno snippet JSON-LD nella pagina, non appare possibile usare le funzioni di Tag Manager per generare dinamicamente questo snippet e quindi poterlo quindi adattare ad ogni pagina web nei contenuti mutevoli senza dover rieditare ogni volta il mark-up di Schema.org. Tag Manager permette però di creare variabili estraendo i contenuti dalla pagina usando dei selettori CSS o qualche comando di JavaScript. Queste variabili possono essere poi usate in maniera dinamica all’interno del tag per poterlo adattare ad ogni pagina web senza dover rieditare ogni volta i contentuti del mark-up di Schema.org.

Quindi, se volessimo estrarre l’URL della pagina e passarlo dinamicamente allo snippet JSON-LD, potremmo provare qualcosa del genere:

Ma non funzionerà.

Ciò significa che se volessimo usare Google Tag Manager per aggiungere schema.org alle pagine del Blog, dovremmo creare un singolo attivatore e un singolo tag per ogni pagina inserendo di volta in volta l’URL esatto di riferimento del post. Soluzione non esattamente veloce, comoda o ideale, soprattutto in presenza di un gran numero di pagine.

Per fortuna esiste un altro metodo che si può adottare. Usando qualche comando di JavaScript è possibile estrarre dati e contenuti dalle pagine e creare dinamicamente degli snippet JSON-LD correttamente funzionanti.

Generare dinamicamente dei JSON-LD di Schema in Google Tag Manager

Il motivo per il quale il primo esempio non funziona, è perché Tag Manager sostituisce la variabile con una riga di JavaScript che richiama una funzione che ritorna il valore di qualsiasi variabile sia chiamata.

Possiamo vedere chiaramente l’errore analizzando la pagina con Google Structured Data Testing Tool:

L’errore è causato da Tag Manager che inserisce del JavaScript in quello che dovrebbe essere un tag JSON causandone l’invalidità. Come risultato il tag non funziona.

Tuttavia possiamo usare Tag Manager per inserire un tag JavaScript, all’interno del quale inserire il nostro tag JSON-LD.

Se non si ha completa dimestichezza con JavaScript può sembrare un po’ complicato ma funziona esattamente come altri tag che probabilmente state già usando (Google Analytics o Tag Manager stesso), senza contare che potete copiare liberamente quello proposto qui.

In questo tag i nostri dati di schema.org sono contenuti in un oggetto di JavaScript che può essere dinamicamente popolato con delle variabili di Google Tag Manager. Questo tag inserisce un snippet nella pagina web di tipo application/ld+json e lo popola con i dati estratti dinamicamente, convertiti in JSON grazie alla funzione JSON.stringify.

Lo scopo di questo esempio è semplicemente quello di dimostrare come funziona lo script (cambiare dinamicamente l’url nel modello “organizzazione” di schema.org non ha molto senso). Vediamo ora come applicare queste funzionalità a casi reali.

Google Tag Manager: generare un tag schema.org per i post di un blog dinamicamente

1. Iniziamo con un template di schema per un Blog Post in formato JSON-LD

Per prima cosa vediamo come appare uno snippet JSON-LD di schema.org per un singolo post di un Blog, basandoci sulle specifiche di Schema.org/BlogPosting

2. Identifichiamo le variabili dinamiche di schema.org per Blog Post

Alcuni dei dati inclusi in schema.org saranno gli stessi per ogni Post del Blog, come ad esempio le informazioni del Publisher. Altri dati invece cambieranno da articolo ad articolo come il titolo, la descrizione, l’immagine ecc.

Nel nostro caso abbiamo identificato 9 variabili che cambiano da post a post e che dobbiamo popolare dinamicamente e che cambieranno ad ogni articolo.

3. Creare le variabili personalizzate in Google Tag Manager

A questo punto è necessario creare le variabili personalizzate in Tag Manager che permettano di inserire i dati dinamicamente all’interno dello snippet:

• mainEntity ID: URL della pagina del post
• Headline: Useremo in questo caso il Title della pagina
• Image url e height/widht: URL dell’immagine dell’articolo e dimensioni della stessa. Nel nostro caso non essendo sempre presente un’immagine nel post utilizzeremo l’immagine assegnata all’Open Graph (og:image) e le sue dimensioni. Il nostro sito avendo Yoast installato permette di assegnare molto facilmente una qualsiasi immagine a Twitter e Open Graph generando un tag dedicato.
• datePublished e dateModified: Il nostro blog in WordPress possiede già al suo interno dei meta dati di questo tipo: “article:published_time” e “article:modified_time”. La data di modifica non è sempre disponibile in quanto non sempre un post viene modificato dopo la pubblicazione, ma schema.org raccomanda di includere questo dato ugualmente. Per far fronte a questo problema possiamo impostare la data di modifica per essere uguale alla data di pubblicazione a meno che non sia presente un valore diverso per essa. Ma vedremo dopo come fare.
• Description: Useremo la meta description

Questo è lo script di schema.org con le variabili personalizzate di Google Tag Manager inserite che useremo nel nostro tag. Tra un attimo spiegheremo tutti i passaggi necessari:

4. Estrarre i dati dinamici dalla pagina web

Fortunatamente con Tag Manager è facile estrarre i valori dei dati dagli elementi DOM, specialmente se si trovano in meta tags. Per fare ciò si devono creare delle “variabili personalizzate”. Nel nostro esempio estrarremo i dati da questi elementi individuabili semplicemente guardando la sorgente della pagina:

Per estrarre la headline e quindi il title della pagina, ci basta inserire il valore <title> nel selettore elemento. Non è necessario assegnare un nome attributo in questo caso:

Per i dati inseriti nei meta tags possiamo creare variabili di questo tipo:

Per l’URL della pagina possiamo usare le variabili di Tag Manager già presenti semplicemente abilitandole:

Procediamo in questo modo nel creare con Goolge Tag Manager tutte le variabili personalizzate individuate in precedenza utili per popolare il tag di schema.org.

Google Tag Manager e schema.org: testing e debug

Tag Manager permette di testare in anteprima tutte le modifiche prima di implementarle e pubblicarle, utilizzando la sua funzione di “Anteprima”.

Una volta che tutte le variabili sono state create possiamo controllare che i valori giusti vengano trasmessi attraverso la modalità di anteprima sulla pagina del sito.

Siamo così sicuri che tutte le variabili restituiscono il valore corretto.

Infine creiamo il nostro tag.

Prima definiamo come attivatori (trigger) tutte le pagine interne del blog. Dato che le informazioni che sono utilizzate nel nostro snippet di schema.org Blog Post si riferiscono a valori presenti univocamente nelle pagine interne del blog, dobbiamo escludere le pagine di listato (categorie, pagina elenco articoli del blog).
Creiamo allora due attivatori, uno che include tutte le pagine che hanno al loro interno /blog/ ma che esclude /category/ e un altro che corrisponde all’url esatto http://www.netseo.it/blog/.

Infine creiamo il tag attraverso un Tag HTML personalizzato che si attiva sull’attivatore Blog Post ma esclude Blog Sommario (si attiva quindi solo sulle pagine dei singoli post).

Questa è la versione finale del nostro tag di Google Tag Manager che inserisce schema.org in formato JSON-LD dinamicamente nei Post del nostro Blog.

Per fare in modo che il parametro dateModifier di schema.org abbia sempre un valore al suo interno sono state inserite alcune righe di codice che controllano se il valore esiste e in caso contrario assegnano il valore di datePublished.
Questo è il comando già inserito nel Tag.

Ora possiamo salvare e pubblicare le nostre modifiche su Google Tag Manager e controllare il corretto funzionamento sullo strumento di analisi Google Structured Data Testing Tool:

Funziona!!

I dati strutturati stanno diventando sempre più importanti e strategici anche per il SEO e l’ottimizzazione dei siti web. Grazie a tecniche come queste sarà possibile ottimizzare al meglio il sito web senza necessariamente dover ricorrere ad interventi sul codice della pagina che spesso e volentieri si rendono difficoltosi.

L’articolo originale è apparso sul blog di Moz: Using Google Tag Manager to Dynamically Generate Schema/JSON-LD Tags di Chris Goddard.