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 è formata una 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 protocollo rel canonical google tag manager

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.

variabile hostname senza www rel canonical con google tag manager

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 hostname con www per rel canonical google tag manager

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.

variabile page path rel canonical google tag manager

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.
    variabile pagina url canonica google tag manager

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.

tag aggiungere rel canonical seo google tag manager

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.

verifica tag rel canonical seo google tag manager

L’hai trovato? Bene, allora vuol dire che puoi procedere con la pubblicazione del Tag 🙂

Psssss… Ti occupi di SEO? Ecco altre guide che potrebbero esserti utili:

A presto e… Buon tag!

Condividi anche tu Google Tag Manager!
  • Reply

    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!

  • Reply

    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.

  • Reply

    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 🙂

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

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *