[Aggiornata il 27 Febbraio 2022]
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!
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?
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 🙂
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! 🙂
Ciao Giovanni e grazie per le tue belle parole 🙂
Certo basta che usi il lowercase:
newcanonical.href = ({{Pagina URL Canonica}}).toLowerCase();
Fammi sapere 😉
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
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?
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.
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 🙂
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
Ciao Lorenzo. Quando guardi a livello di rendering (quindi non da source code) lo vedi il codice canonical?
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
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!
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?
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 😉
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)
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!
Ciao Matteo, è possibile con Tag Manager impostare anche la paginazione con rel=”next” e rel=”prev”?
Grazie
Ciao Antonella non l’ho mai implementato personalmente, ma è possibile iniettarlo con GTM. La logica è la stessa del rel canonical.
A presto!
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
Ciao Andrea, ti rispondo io (Marco non so chi sia 😀 ).
La risposta è sì. Anzi è il tipico esempio dove ha senso usarlo!
A presto!
Google search console lo vede?
se vai nell’area visualizza come google e guardi il sorgente
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.
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.
La risposta è -ovviamente- sì. Puoi fare le magie con Google Tag Manager 🙂