Feb 2019
Guida Avanzata: Aggiungere Rel Canonical per l’Ottimizzazione SEO con Google Tag Manager
[Aggiornata il 27 Febbraio 2019]
In varie occasioni ti ho spiegato quanto può essere utile Google Tag Manager per l’ottimizzazione SEO.
Ebbene: un’altra magia fichissima che GTM può fare è la gestione dinamica dei Rel Canonical.
COOOOSA?! GESTIONE DINAMICA DEI REL CANONICAL?
Sì, giuro, non ti sto prendendo in giro. Con Google Tag Manager puoi fare anche questo e ridurre notevolmente la tua mole di lavoro SEO 🙂
In pratica puoi inserire un Tag HTML Personalizzato che generi automaticamente l’elemento rel=canonical nelle pagine di un sito. Vediamo tutti i passaggi.
Pssss… se non ti chiaro come è formato un URL, leggi il glossario.
PS: perché questa guida funzioni devi essere sicuro che non ci siano già altri Rel Canonical nel sito. In un’altra guida ti spiegherò come sovrascrivere quelli già esistenti 🙂
STEP 1 – Creazione delle Variabili
In questo primo passaggio andrai a creare delle variabili che ci serviranno successivamente per creare un’unica variabile “Pagina URL Canonica”. Queste qua:
- Variabile Protocollo
- Variabile Hostname
- Variabile Page Path
Variabile Protocollo
- Clicca su Variabili > Variabili definite dall’utente > Nuova > Configurazione variabile.
- Tipo di variabile: URL.
- Tipo di componente: Protocollo.
- Chiamiamo la variabile “Protocollo”.
- Salva.
Variabile Hostname
In questo step si crea una variabile che includa le due versioni dell’Hostname con o senza www.
A monte bisogna stabilire se vogliamo che l’Hostname canonico sia quello con o senza www.
1. Primo caso: vogliamo che l’Hostname canonico sia quello SENZA www.
- Clicca su Variabili > Variabili definite dall’utente > Nuova > Configurazione variabile.
- Tipo di variabile: URL.
- Tipo di componente: Nome Host.
- In questo primo caso, seleziona Rimuovi www.
- Chiamiamo la variabile “Hostname senza www”.
- Salva.
2. Secondo caso: vogliamo che l’Hostname canonico sia quello CON www.
- Anche in questo caso, creiamo comunque la variabile “Hostname senza www”. Invece di usare una variabile di tipo URL questa volta (solo per farti capire le potenzialità delle variabili) useremo una costante e useremo la variabile senza www.
- Creiamo anche una costante: Variabili > Variabili definite dall’utente > Nuova > Configurazione variabile.
- Tipo di variabile: Costante.
- Valore: www.{{Hostname senza www}}
- Chiamala “Hostname con www”.
- Salva
Variabile Page Path
Questa variabile è già presente fra le variabili integrate in Google Tag Manager.
Se non l’hai già fatto, ti basterà quindi abilitarla. Fai così:
- Variabili > Variabili Integrate > Configurazione.
- Spunta la voce Page Path.
STEP 2 – Crea la Variabile “Pagina URL CANONICA”
Ora che abbiamo tutte e tre le variabili precedenti, possiamo creare la variabile per la Pagina URL Canonica.
- Clicca su Variabili > Variabili definite dall’utente > Nuova > Configurazione variabile.
- Tipo di variabile: Costante.
- Valore: {{Protocollo}}://{{Hostname senza www}}{{Page Path}}
- Chiamiamo la variabile “Pagina URL Canonica”.
- Salva.
Qua ci sono degli appunti da fare:
* Dopo {{Protocollo}} segue :// perché non era incluso nella variabile creata.
* Al posto di {{Hostname senza www}} possiamo mettere {{Hostname con www}}, in base a quale Hostname vogliamo indicare come canonico.
STEP 3 – CREA IL TAG HTML PERSONALIZZATO
Per la creazione del Tag ci servirà un Tag HTML Personalizzato in cui inserire un codice JavaScript.
- Tag > Nuovo > Tag HTML Personalizzato > Configurazione Tag.
- Incolla nella finestra questo script:
<script> var newcanonical = document.createElement('link'); newcanonical.rel = 'canonical'; newcanonical.href = {{Pagina URL Canonica}}; document.head.appendChild(newcanonical); </script>
- Attivazione: All Pages.
- Dai un nome al Tag, ad esempio “cHTML – Rel Canonical”.
- Salva.
STEP 4 – VERIFICA IL TAG
Prima di pubblicare il Tag definitivamente, è meglio controllare che funzioni correttamente.
- Vai nella Console di Debug di Chrome (premendo F12).
- Vai nella Tab “Elementi”.
- Controlla che il rel=canonical sia stato implementato correttamente.
L’hai trovato? Bene, allora vuol dire che puoi procedere con la pubblicazione del Tag cliccando sul pulsante blu “Invia” 🙂
Psssss… Ti occupi di SEO? Ecco altre guide che potrebbero esserti utili:
- Tracciare pagine contenenti errori 404 con Google Tag Manager
- Guida avanzata per l’Ottimizzazione SEO con Google Tag Manager
A presto e… Buon tag!
Altre Guide che potrebbero interessarti
- Google Tag e la nuova modalità di configurazione di GA4 in…
- Guida Base: come gestire l'attivazione di Google Signals in…
- Come gestire la Consent Mode v2 con Iubenda e Google Tag…
- Cos’è il Google tag, come funziona e quali sono i suoi…
- Alternativa a Google Optimize: usa Google Tag Manager per…
- ANALYTIX TALK: il Podcast di Marketing e Digital Analytics
Chiedi pure qui sotto, sarò pronto a risponderti!
Unisciti alla più grande community italiana dedicata alla Digital Analytics!
Iscrivendoti alla newsletter gratuita di Tag Manager Italia riceverai:
- guide (base/avanzate) passo passo
- news di approfondimento
- webinar gratuiti
- offerte esclusive
e altre risorse di 1°classe sul mondo della Digital Analytics!
- Attribuzioni errate in GA4: cause e soluzioni al problema
- Come creare una Dashboard Ecommerce per analizzare i dati degli acquisti Nuovi e di Ritorno
- Caso studio: Greenpeace ottimizza la User Experience, il tasso di conversione e il ROI del suo sito web, landing page e campagne advertising grazie al Server-Side tracking e alla Consent Mode
- Consent Mode v2 e calo dei dati delle audience e del traffico in Google Ads: cause e soluzioni
- Data Leak Google: Chrome e le implicazioni per la Privacy e la Digital Analytics
- Matteo Zambon su Guida Base: come tracciare i click al link Phone (telefono) in GA4 con Google Tag Manager
- Matteo Zambon su Come gestire la Consent Mode v2 con Iubenda e Google Tag Manager
- Matteo Zambon su Come installare Google Analytics 4 (GA4) con Google Tag Manager
- Matteo Zambon su Glossario: Google Tag Assistant
- Matteo Zambon su Guida Avanzata: come configurare Conversion API di Facebook con l’integrazione nativa per Google Tag Manager
Fred
16 03 2021
Ciao Matteo,
correggimi se sbaglio ma settando il protocollo da variabile, nel caso in cui esistesse sia la versione http che https, verrebbero generati due url canonici.
Si potrebbe quindi settare la variabile Pagina URL Canonica con il protocollo statico?
Matteo Zambon
19 03 2021
Ciao Federico, dunque se hai entrambi e rispondono entrambi status 200 senza che ci sia un redirect nel https allora avrai un bel problema SEO da gestire. Di norma non dovrebbe mai esistere la possibilità di avere sia la pagina in http che in https. La norma ormai è avere tutto sempre sotto https.
Puoi crearti comunque una variabile URL che prenda il protocollo HTTP, così sarà GTM che in automatico mette HTTP o HTTPS a seconda dell’url che hai.
Buon Tag 🙂
Giovanni
27 05 2019
Guida ineccepibile. Grazie Matteo per la divulgazione su GTM!
Ho però una domanda: come si comporta questo script con l’uppercase?
Mi spiego meglio.
Se ho un url di questo tipo “dominio.it/uri-tutta-minuscola”, seguendo la tua guida il canonical sarà su “dominio.it/uri-tutta-minuscola”. Se, però, digito “dominio.it/Uri-tutta-minuscola, il canonical cambia dinamicamente.
È possibile fargli ignorare l’uppercase nell’URI e, quindi, restituire sempre il canonical corretto “dominio.it/uri-tutta-minuscola”.
Grazie in anticipo per la risposta! 🙂
Matteo Zambon
29 05 2019
Ciao Giovanni e grazie per le tue belle parole 🙂
Certo basta che usi il lowercase:
newcanonical.href = ({{Pagina URL Canonica}}).toLowerCase();
Fammi sapere 😉
RoRo
06 12 2018
Ciao Matteo, abbiamo partecipato recentemente al MBSummit. 🙂
Io ho fatto tutto come dice la tua guida, cioè ho creato i tre tag. Ora però mi sono perso nel verificare se tutto funzioni. Ho pubblicato la regola (l’ultima schermata di Google TagManager) riempendo i campi come ho creduto.
Come posso verificarlo? Ti passo l’indirizzo del mio blog e lo verifichi tu?
Grazie 1000
Matteo Zambon
07 12 2018
Ciao RoRo 😀
Per verificare ti basta seguire il 4 step, ovvero vedere se nel rendering della pagina esiste il canonical che hai inserito 🙂 Sei riuscito a fare questo test?
RoRo
08 12 2018
Quello che trovo nel mio sito con il nome “canonical” è questo….
“vtp_html”:[“template”,”\u003Cscript type=\”text\/gtmscript\”\u003Evar newcanonical=document.createElement(\”link\”);newcanonical.rel=\”canonical\”;newcanonical.href=”,[“escape”,[“macro”,4],8,16],”;document.head.appendChild(newcanonical);\u003C\/script\u003E”],
ma non riesco a capire se sia giusto o no.
Matteo Zambon
10 12 2018
Dovresti aprire la console di chrome e cercare sotto ispeziona elemento. Quello che mi hai riportato è lo script che crea GTM. Se non trovi l’HTML pulito del canonical allora c’è qualcosa che non va in quello script 🙂
lorenzo
22 09 2018
ciao
ho seguito tutta la procedura ma quando apro il codice html del sito non riesco a trovare nulla con canonical
il sito è stator ealizzato tramite yolasite.. non so se questo c’entri qualcosa
puoi aiutarmi?
grazie
Matteo Zambon
24 09 2018
Ciao Lorenzo. Quando guardi a livello di rendering (quindi non da source code) lo vedi il codice canonical?
Giuseppe
24 04 2018
Ciao Matteo,
grazie per questa guida eccezionale. Ho implementato il tag, in modalità anteprima riesco a vedere il canonical Console di Debug di Chrome, ma dopo averlo pubblicato non viene più visualizzato nella Console. Come faccio a verificare che funzioni realmente?
Ti ringrazio
Matteo Zambon
29 04 2018
Ciao Giuseppe, se hai pubblicato correttamente dovresti vederlo sulla console (non attraverso il view source) il canonical proprio come da guida 🙂
Prova a verificare se effettivamente sei sulla pagina corretta e se il tag effettivamente viene attivato!
A presto!
Ivo
24 03 2018
Ciao Matteo,
vorrei inserire questo Tag nelle pagine statiche del mio sito, ma lo script di GTM è presente anche nel forum che ovviamente ha pagine dinamiche che contengono già il REL CANONICAL. come posso fare per diversificare le due sezioni del sito? Creo un secondo contenitore?
Matteo Zambon
26 03 2018
Ciao Ivo, ti basta filtrare per l’url (anche con espressioni regolari) l’attivatore che accenderà il Tag, in modo da evitare accuratamente il forum 😉
Ivo
31 03 2018
Grazie Matteo,
attraverso gli attivatori sono riuscito ad escludere le directory che non volevo implementassero il tag.
Un ulteriore domanda: su chrome con F12 vedo il Tag rel=canonical presente, ma facendo un test su uno dei tanti siti che offrono questo servizio, sembra non leggerlo, mi dice che il rel=canonical non è presente. Siamo sicuri che Google lo legga anche se non visibile nel codice? C’è modo di testarlo?
(Ho anche anominizzato gli IP di Analytics e anche qui mi piacerebbe sapere se c’è il modo di vedere se il codice è esatto)
Matteo Zambon
03 04 2018
Ovviamente no 🙂
Gli script che vengono eseguiti leggono direttamente il DOM delle pagine e non eseguono gli script JS. Ne parlerò al SeriousMonkey di Enrico Altavilla 🙂
Fidati, funziona (ci vuole qualche giorno in più perché Google lo veda).
A presto!
Antonella
21 03 2018
Ciao Matteo, è possibile con Tag Manager impostare anche la paginazione con rel=”next” e rel=”prev”?
Grazie
Matteo Zambon
21 03 2018
Ciao Antonella non l’ho mai implementato personalmente, ma è possibile iniettarlo con GTM. La logica è la stessa del rel canonical.
A presto!
Andrea Degli Antoni
05 12 2017
Ciao Marco,
secondo te è possibile impostare un canonical ti questo tipo:
http://www.nomesito.com/cat/cat1/prodotto
http://www.nomesito.com/cat/prodotto
praticamente tutte le url che hanno la struttura cat/cat1/prodotto inserire un canonical dinamico verso le pagine cat/prodotto
grazie
Matteo Zambon
05 12 2017
Ciao Andrea, ti rispondo io (Marco non so chi sia 😀 ).
La risposta è sì. Anzi è il tipico esempio dove ha senso usarlo!
A presto!
Francesco Seone\
02 08 2017
Google search console lo vede?
se vai nell’area visualizza come google e guardi il sorgente
Matteo Zambon
02 08 2017
Ciao Francesco, googlebot si perché esegue il redenring della pagina (come ben sai riesce ad eseguire anche richieste ajax e quindi non ci sono problemi). Sul tool di search console “Visualizza come Google” non vedi il rendering dell’esecuzioni Javascript (asincrona). Quindi la risposta è no.
Roberto
02 08 2017
Ottimo articolo, ora proverò a giocarci con alcuni siti testi per vedere come si comporta Google.
Mi permetterebbe di bypassare gli sviluppatori recalcitranti nell’ implementare il rel=canonical dove suggerisco.
Domanda da 1 billion $: a tuo avviso si potrebbe creare la stessa cosa per il tag hreflang?
Cioè un automatismo che crea il rel=”alternate” hreflang=”x” per ogni pagina in lingua corrispondente?
Ci sono piattaforme terze in cui non posso mettere mano al codice e gli sviluppatori fanno muro o chiedono migliaia di euro per implementare tale automatismi.
Matteo Zambon
02 08 2017
La risposta è -ovviamente- sì. Puoi fare le magie con Google Tag Manager 🙂