Guida Avanzata: Utilizzare Google Tag Manager per l’Ottimizzazione SEO

[Aggiornata il 25 Agosto 2020]

Chi ha detto che Google Tag Manager può essere utile solo per la Web Analytics?

Quello che forse non sai è che esistono tanti (ma taaanti) trucchetti che ti possono aiutare anche se lavori nella SEO.

Quali? Uuuuhh… 🙂 ne vedremo insieme alcuni.

 

Gestione dei dati strutturati con JSON-LD

Innanzitutto cosa sono i dati strutturati?

I dati strutturati sono dei markup che permettono al crawler di ottenere informazioni aggiuntive sulle pagine web da mostrare nella SERP.

Parliamo ad esempio di rich snippet, breadcrumbs, sitelink, search box, review… Per saperne di più puoi leggere il mio glossario sui dati strutturati.

Questi dati vanno ad arricchire anche il knowledge graph implementando ad esempio logo, contatti, profili social.

Ecco, una delle fantastiche cose che puoi fare con Google Tag Manager è proprio utilizzare JSON-LD per implementare i dati strutturati tramite i nostri carissimi amici, ovvero i Tag HTML Personalizzati.

GOOGLE DICHIARA CHE È POSSIBILE USARE GOOGLE TAG MANAGER PER GENERARE JSON-LD DINAMICAMENTE

Nella guida ufficiale di Google viene espressamente indicato che grazie a Google Tag Manager è possibile generare JSON-LD e gestirne i parametri in modo dinamico.
Ecco il link alla guida ufficiale di Google.

Questo ovviamente permette a tutti di “svincolarsi” dai programmatori (evviva!).

ALTRA DICHIARAZIONE DA PARTE DI GOOGLE SUI DAI STRUTTURATI ATTRAVERSO JAVASCRIPT

Altra cosa ufficialmente dichiarata da Google è l’utilizzo di un altro metodo per implementare i dati strutturati attraverso JavaScript.

Nel dettaglio basterà usare lo script sopra indicato e inserire l’url che contiene il dato strutturato.

Bene passiamo lato pratico come fare con Google Tag Manager 😀

1) GESTIONE DEL KNOWLEDGE GRAPH

Ti ho già accennato al fatto che questi Tag non sono già presenti di default su Google Tag Manager, per cui andremo a gestirli con i Tag HTML Personalizzati:

• Sezione Tag > Nuovo Tag > Tag HTML Personalizzato.
• Copia-incolla gli script (per comodità te li ho messi sotto l’immagine 🙂 stessa cosa vale per gli altri Tag che vedremo in seguito).
• Attiva su: All Pages.
• Nominiamolo ad esempio “cHTML – Knowledge Graph”.
• Salva

 

Se vogliamo verificare che il Tag sia funzionante, possiamo accedere alla modalità di Anteprima: dovremmo vedere il nuovo Tag fra i Tags Fired On This Page.

Esiste anche uno strumento di Google che ti permette di verificare il funzionamento dei dati strutturati, lo trovi in fondo a questa guida fra i link utili 🙂

Ed ecco i codici, presi dalla Guida di Google ai dati strutturati. Naturalmente andranno personalizzati con i tuoi dati:

LOGO

<script type="application/ld+json">
 {
 "@context": "http://schema.org",
 "@type": "Organization",
 "url": "http://www.demo.tagmanageritalia.it/esempio/",
 "logo": "http://demo.tagmanageritalia.it/esempio/tm-content/uploads/2016/04/TagManagerItalia-icona.png"
 }
 </script>

CONTATTI

<script type="application/ld+json">
 {
 "@context": "http://schema.org",
 "@type": "Organization",
 "url": "http://www.demo.tagmanageritalia.it/esempio/",
 "logo": "http://demo.tagmanageritalia.it/esempio/tm-content/uploads/2016/04/TagManagerItalia-icona.png",
 "contactPoint" : [{
 "@type" : "ContactPoint",
 "telephone" : "+39-3388835425",
 "contactType" : "technical support",
 "availableLanguage" : ["Italian", "English"]
 }]

}
 </script>

PROFILI SOCIAL

<script type="application/ld+json">
 {
 "@context": "http://schema.org",
 "@type": "Organization",
 "url": "http://www.demo.tagmanageritalia.it/esempio/",
 "logo": "http://demo.tagmanageritalia.it/esempio/tm-content/uploads/2016/04/TagManagerItalia-icona.png",
 "contactPoint" : [{
 "@type" : "ContactPoint",
 "telephone" : "+39-3388835425",
 "contactType" : "technical support",
 "availableLanguage" : ["Italian", "English"]
 }],
 "sameAs" : [
 "https://www.facebook.com/zambon.matteo?fref=ts",
 "http://it.linkedin.com/in/zambonmatteo",
 "https://twitter.com/zambros_it",
 "https://plus.google.com/+MatteoZambon"
 ]

}
 </script>

Se invece il tuo sito è riferito a una persona e non a un’organizzazione, basterà cambiare il type all’interno del codice.:

<script type="application/ld+json">
 {
 "@context" : "http://schema.org",
 "@type" : "Person",
 "name" : "Matteo Zambon",
 "url": "http://www.demo.tagmanageritalia.it/esempio/",
 "sameAs" : [
 "https://www.facebook.com/zambon.matteo?fref=ts",
 "http://it.linkedin.com/in/zambonmatteo",
 "https://twitter.com/zambros_it",
 "https://plus.google.com/+MatteoZambon"
 ]
 }
 </script>

 

2) GESTIONE DELLA SEARCH BOX

La Search Box è una barra di ricerca che compare in SERP sotto alcuni siti e serve per fare delle ricerche interne al sito stesso. Anche questa è gestibile con Google Tag Manager e JSON-LD con Tag HTML Personalizzato.

(Ricorda sempre che noi possiamo implementare la Search Box, ma sarà poi Google a decidere se farla comparire o no in base ai suoi algoritmi, quindi se non la vedi spuntare poi non te la prendere con me 😀 )

• Sezione Tag > Nuovo Tag > Tag HTML Personalizzato.
• Copia incolla lo script.
• Attiva su: All Pages.
• Nominiamolo ad esempio “cHTML – Search Box”.
• Salva.

Questo è lo script che devi incollare:

<script type="application/ld+json">
 {
 "@context": "http://schema.org",
 "@type": "WebSite",
 "url": "http://demo.tagmanageritalia.it/esempio/",
 "potentialAction": {
 "@type": "SearchAction",
 "target": "http://demo.tagmanageritalia.it/esempio/?s={search_term}",
 "query-input": "required name=search_term" }
 }
 </script>

Come al solito andiamo prima di pubblicare il Tag verifichiamo che nella modalità Anteprima compaia fra i Tags Fired On This Page:

 

3) GESTIONE DEI BREADCRUMBS

Anche i Breadcrumbs visibili in SERP possono essere gestiti con Google Tag Manager.

Ecco come:

• Sezione Tag > Nuovo Tag > Tag HTML Personalizzato.
• Copia incolla lo script.
• Attiva su: All Pages.
• Nominiamolo ad esempio “cHTML – Breadcrumbs”.
• Salva.

Il codice che devi incollare è questo:

<script type="application/ld+json">
 {
 "@context": "http://schema.org",
 "@type": "BreadcrumbList",
 "itemListElement": [{
 "@type": "ListItem",
 "position": 1,
 "item": {
 "@id": "http://demo.tagmanageritalia.it/esempio/arts",
 "name": "Arts"
 }
 },{
 "@type": "ListItem",
 "position": 2,
 "item": {
 "@id": "http://demo.tagmanageritalia.it/esempio/arts/books",
 "name": "Books"
 }
 },{
 "@type": "ListItem",
 "position": 3,
 "item": {
 "@id": "http://demo.tagmanageritalia.it/esempio/arts/books/poetry",
 "name": "Poetry"
 }
 }]
 }
 </script>

Verifichiamo con la funzione Anteprima:

 

4) GESTIONE DELLE REVIEW

Le review sono le recensioni che è possibile vedere in SERP sotto alcuni siti. Possono avere formati diversi come le stelline, le percentuali, il punteggio da 1 a 10, ecc.). Anche queste sono gestibili con Google Tag Manager tramite Tag HTML personalizzato.

• Sezione Tag > Nuovo Tag > Tag HTML Personalizzato.
• Copia incolla lo script.
• Attiva su: All Pages.
• Nominiamolo ad esempio “cHTML – Review”..
• Salva

<script type="application/ld+json">
 {
 "@context": "http://schema.org/",
 "@type": "Product",
 "image": "http://www.example.com/catcher-in-the-rye-book-cover.jpg",
 "name": "The Catcher in the Rye",
 "review": {
 "@type": "Review",
 "reviewRating": {
 "@type": "Rating",
 "ratingValue": "5"
 },
 "name": "A masterpiece of literature",
 "author": {
 "@type": "Person",
 "name": "John Doe"
 },
 "datePublished": "2006-05-04",
 "reviewBody": "I really enjoyed this book. It captures the essential challenge people face as they try make sense of their lives and grow to adulthood.",
 "publisher": {
 "@type": "Organization",
 "name": "Washington Times"
 }
 }
 }
 </script>

Ancora una volta verifichiamo che nella modalità Anteprima il Tag compaia fra i Tags fired on this page:

Come spesso capita, ogni pagina può avere prodotti diversi e quindi aver bisogno di review diverse. In questo caso le review andranno gestite con le variabili di Google Tag Manager.

Pensa ad esempio alle recensioni su singole pagine fatte dagli utenti. Immagina di poter utilizzare quei dati per creare i rich snippet.

Fantastico, no?

 

ATTRIBUTI HTML 5

Google Tag Manager può aiutarti a modificare gli attributi HTML5, e questo può venirti in soccorso anche nella SEO.

Ma cosa sono gli Attributi HTML 5? Sono attributi inseriti all’interno degli elementi HTML che danno delle informazioni in più.

In GTM li puoi gestire con la variabile di tipo Elemento DOM se vuoi estrapolare i valori da un elemento HTML statico, oppure puoi farlo con gtm.element.dataset.[data-attribute], dove [data-attribute] è il nome specifico dell’attributo nel caso tu debba analizzare elementi dinamici (come ad esempio il click su elementi).

Questi attributi possono essere utilizzati per passare o gestire dati ed informazioni in Google Analytics.

Ecco un esempio (preso dalla guida di Mozilla):

<article
 id="electriccars"
 data-columns="3"
 data-index-number="12314"
 data-parent="cars">
 ...
 </article>

Tieni presente che siamo noi a decidere queste informazioni aggiuntive degli elementi HTML.

Ecco come deve essere configurata la variabile in GTM:

 

Potresti anche utilizzare Javascript per leggere gli attributi, usando document.getElementById.

Ad esempio:

var article = document.getElementById('electriccars');

article.dataset.columns // "3"
 article.dataset.indexNumber // "12314"
 article.dataset.parent // "cars"

 

CAMBIARE TITLE DELLE PAGINE SENZA TOCCARE IL CODICE

Non finisce qua, perché Google Tag Manager ti può aiutare a modificare Meta Title, Meta Description e persino i contenuti del sito.

Ti faccio vedere ad esempio come modificare il Title.

Il titolo della pagina tra le altre cose lo puoi prelevare con un semplice Javascript:

Grazie a un Tag HTML personalizzato, è possibile prendere il document.title e modificarne il valore sulla pagina che ti interessa. Insomma andiamo a variare con Javascript il titolo della pagina, in questo modo:

• Crea un nuovo Tag HTML Personalizzato
• Incolla questo script:

<script>

document.title = "Il mio nuovo titolo di pagina ottimizzato ";

</script>

 

• Attivalo nella pagina in cui vuoi cambiare il meta title

A questo punto non ti resta che attendere che il Crawler di Google passi, scansioni ed esegua il rendering e il gioco è fatto 🙂

PS: Queste tecniche di modifica title, description ecc… dovrebbero essere usate come Workaround se non hai davvero altra soluzione!

Vuoi modificare la meta description con Google Tag Manager?

Ti basterà smanettare con un po’ di codice. Ecco l’istruzione che dovrai usare in un tag di tipo HTML personalizzato:

 

document.querySelector("meta[name=\'description\']").setAttribute("content", "La mia nuova bellissima description");

Ed ecco fatto 🙂

PPS: se ti serve anche per altri scopi, il titolo della pagina lo puoi prelevare con un semplice Javascript:

E se ancora non ne hai abbastanza, ti lascio i link ad altre mie guide che potrebbero interessarti:

• Tracciare pagine con errori 404 con Google Tag Manager
• Aggiungere Rel Canonical per l’Ottimizzazione SEO con Google Tag Manager

Ricordati che per rendere effettive le modifiche devi pubblicare il tutto cliccando sul pulsante blu “Invia” 😉

Ti è stato utile l’articolo? Vorresti aggiungere qualcosa? Lasciami un commento qui sotto 🙂

LINK UTILI:

• Guida di Google ai dati strutturati
• Strumento di testing di Google per i dati strutturati