FAI DECOLLARE LA TUA WEB ANALYTICS. CON GOOGLE TAG MANAGER.

Le guide e i video tutorial gratuiti di Matteo Zambon, autore del libro "GTM per chi inizia"

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

Guida Avanzata Utilizzare Google Tag Manager per l'Ottimizzazione SEO

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.

knowledge-graph-esempio

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.

 

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

 

knowledge-graph-google-tag-manager

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.

knowledge-graph-google-tag-manager-anteprima

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 😀 )

search-box-esempio

Sezione Tag > Nuovo Tag > Tag HTML Personalizzato

Copia incolla lo script

Attiva su: All Pages

Nominiamolo ad esempio “cHTML – Search Box”.

Salva

search-box-google-tag-manager

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:

search-box-google-tag-manager-anteprima

 

3) GESTIONE DEI BREADCRUMBS

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

breadcrumbs-esempio

Ecco come:

Sezione Tag > Nuovo Tag > Tag HTML Personalizzato

Copia incolla lo script

Attiva su: All Pages

Nominiamolo ad esempio “cHTML – Breadcrumbs”.

Salva

breadcrumbs-google-tag-manager

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:

breadcrumbs-google-tag-manager-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, punteggio da 1 a 10, ecc.). Anche queste sono gestibili con Google Tag Manager tramite Tag HTML personalizzato.

review-seo-esempio
Sezione Tag > Nuovo Tag > Tag HTML Personalizzato

Copia incolla lo script

Attiva su: All Pages

Nominiamolo ad esempio “cHTML – Review”.

Salva

review-seo-google-tag-manager

<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:

review-seo-google-tag-manager-anteprima
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 e 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 ti serve estrapolare da un elemento che non cambia, oppure 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):
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

<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 la variabile in GTM come deve essere configurata:

attributi html 5 e google tag manager

 

Potresti anche utilizzare Java 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 persino 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:

titolo pagina SEO e google tag manager

Ma torniamo a come cambiare il titolo della pagina con Google Tag Manager.

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:

cambiare il titolo pagina SEO e google tag manager

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!

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

LINK UTILI:

 

6 commenti su “Guida Avanzata: Utilizzare Google Tag Manager per l’Ottimizzazione SEO

  1. Ciao Matteo, tempo fa ho provato a sperimentare il cambio di title e description via Tag Manager… I comandi vengono eseguiti correttamente, ma forzando l’indicizzazione della pagina cavia purtroppo non ho ottenuto i risultati sperati.
    Il buon Simo aveva scritto tempo fa un articolo a riguardo – esperimento riuscito solo su pagine con pochissime istruzioni javascript.
    Tu hai avuto esperienze più “felici”?
    Ciao!

    • Ciao Paolo, dunque tieni presente che googlebot deve eseguire il javscript e quindi fare anche il rendering della pagina. Se la tua pagina non pesa troppo e non ci sono problemi di Crawl Budget, allora dovrebbe comparire.

      Non ti nego che essendo comunque borderline l’indicizzazione ci mette un po’ ma funziona (almeno nei casi con cui ho avuto a che fare).

      A presto!

  2. Che bella guida approfondita, me la metto da parte per studiarla approfonditamente per capire di più tutte le impostazione di Google Tag Manager, grazie per il contributo!

    • Di nulla Ilario 🙂
      A presto!

  3. Articolo veramente molto interessante!
    Ma non ho capito una cosa (al momento sono ancora beginner con GTM): da dove prendi i dati per realizzare ad esempio le breadcrumbs o le review?
    Perché messa così sembra che dovrei scrivere codice personalizzato per ogni pagina! :ò

    • Ciao Jonathan (bel nome ragazzo!),
      la cosa ottimale è estrapolarli in modo dinamico dalla pagina o da qualche variabile nel datalayer, altrimenti sì, dovresti metterli statici a mano (no goood).

      🙂

Hai ancora qualche dubbio? Chiedi pure qui sotto, sarò pronto a risponderti!

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Schermata dashboard Club Tag Manager Italia

Entra GRATIS nel Club Tag Manager Italia!

Ho riaperto temporaneamente le iscrizioni al Club: il posto – l’unico posto – dove puoi accedere a TUTTI i miei materiali avanzati (ore e ore di roba).

In aggiunta, nel Club rispondo a tutte le tue domande in un gruppo di Facebook riservato ai membri!

Richiedi subito il tuo PASS GRATUITO di 60 giorni per provare senza impegno il Club Tag Manager Italia!