Utilizzare Google Tag Manager per gestire i tag SEO in modo dinamico

Nel 2014 Google annunciò ufficialmente che avrebbe iniziato a comprendere meglio i siti grazie all’esecuzione del codice JavaScript presente nelle pagine scansionate. Questo annuncio ha segnato un’epocale cambiamento nell’approccio che i motori di ricerca avevano avuto fino a quel momento rispetto all’interpretazione dei siti web.

Agli albori del web Google si limitava a “leggere” il contenuto html delle pagina che analizzava ignorando completamente i codici aggiuntivi come CSS e JavaScript (che tra l’altro venivano utilizzati in modo minimo). Con il passare del tempo e con l’avvento di siti web sempre più dinamici la scansione del mero contenuto HTML non permetteva più ai motori di ricerca di avere una comprensione corretta di quella che era l’esperienza di un utente su un sito.

Per questo a partire dal 2014 Google si è adeguato a quello che pian piano è diventato uno standard ed ha deciso di iniziare a visualizzare i siti in maniera completa considerando tutti gli elementi aggiuntivi che derivano dall’esecuzione di codice JavaScript o CSS.

Questo nuovo approccio ha influito in modo sostanziale anche sulla SEO che fino a quel momento non vedeva di buon occhio l’utilizzo di tecnologie basate su JS o derivati perché difficilmente conciliabili con una corretta gestione dell’attività di scansione del sito da parte di Googlebot (e altri).

Con il cambiamento avvenuto da parte di Google oggi è diventato possibile utilizzare in maniera più tranquilla alcuni elementi JavaScript come i contenuti a tab (che lasciano una parte del testo nascosta all’utente) o i link gestiti tramite JS. In questo senso è diventato anche possibile gestire alcuni tipi di elementi SEO proprio grazie a JavaScript e all’utilizzo di codice che sfrutta le interazioni con il DOM.

Esperimento SEO: utilizzare Google Tag Manager per gestire il tag Title in modo dinamico

Uno dei metodi per poter sfruttare al meglio questo sistema è utilizzare Google Tag Manager.

Già qualche tempo fa ho trattato il tema di come utilizzare Google Tag Manager per iniettare i dati strutturati nel sito senza doverli implementare lato codice. Oggi voglio invece illustrare un semplice esperimento SEO in cui ho provato a gestire il tag Title di una pagina del mio sito in modo dinamico grazie a JavaScript e GTM.

L’idea di base è quella di (ri)scrivere un titolo dinamico di un articolo (che venisse poi mostrato in SERP) combinando una serie di informazioni presenti sulla pagina.

Nel mio caso le informazioni in questione sono:

• Il titolo dell’articolo (unico elemento h1 della pagina);
• Il nome dell’autore dell’articolo.

Per fare ciò ho utilizzato un Tag Html personalizzato che prelevando le informazioni dal DOM della pagina le combina e le sostituisce al tag Title già presente nella pagina.

Per replicare l’esperimento andate in Google Tag Manager e create un Tag Html personalizzato impostando un attivatore di tipo visualizzazione pagina con una (o più pagine) dove volete che il tag title venga sostituito (nel mio esperimento ho provato con un’unica pagina)

Inserite il seguente script sostituendo i selettori in base alla struttura del vostro template:

<script>
function cambio_titolo(){
//prelevo il titolo della pagina
var title = document.title;
//prelevo il contenuto del tag h1
var tagh1 = document.querySelector('h1.entry-title').innerText;
//prelevo il contenuto del campo autore
var autore = document.querySelector('span.entry-author > a > span').innerText;
//creo una variabile per il nuovo titolo e la valorizzo con una concatenazione delle 2 informazioni prelevate
var newtitle = tagh1 + " scritto da " + autore;
//valorizzo il titolo della pagina con il nuovo titolo
document.title = newtitle;
}
cambio_titolo();
</script>

Il codice sopra viene eseguito nel momento in cui il browser inizia a visualizzare questa pagina del mio sito. All’inizio la pagina carica il titolo reale che è scritto nell’html (e gestito tramite Yoast SEO).

Nel momento in cui viene eseguito il codice JavaScript il titolo viene sostituito con quello nuovo gestito in maniera dinamica.

Per vedere il nuovo titolo è possibile utilizzare la Console di Google Chrome

Risultati dell’esperimento

L’inserimento dello script tramite Google Tag Manager è stato fatto per la prima volta il 24 ottobre 2017. Questo è lo snippet che Google mostrava in data 24/10.

Per testare il prima possibile l’efficacia della modifica ho utilizzato lo Strumento Visualizza come Google all’interno di Google Search Console per “forzare” Googlebot a scansionare la pagina.

Nei giorni successivi lo snippet è rimasto invariato. Ho provato più volte ad eseguire una nuova scansione della pagina finché il 31 ottobre Google ha iniziato a mostrare il nuovo titolo.

Evidenze dell’esperimento

• Nonostante il mio test abbia funzionato l’utilizzo di questo metodo non offre una sicurezza al 100% sulla corretta visualizzazione dei meta tag da parte di Google;
• Il mio consiglio è quello di gestire le informazioni SEO (title, meta description, tag, etc..) direttamente nel template della pagina;
• Il metodo di gestire dinamicamente le informazioni presenti nel DOM tramite Google Tag Manager offre il vantaggio di poter modificare velocemente i siti web senza dover effettuare modifiche di codice e senza doversi affidare a sviluppatori (molto comodo se il sito non è di nostra gestione). D’altro canto questo metodo è suscettibile di varie tipologie di problemi: rallentamento nel rendering della pagina, risultati inefficaci in casi di browser che non eseguono codice JS, difficile controllo dei risultati lato SEO.

Stefano Salustri

Sono un Consulente in Digital Marketing con oltre 10 anni di esperienza. Mi occupo di progettare e sviluppare strategie digitali per Piccole e Medie Imprese per aiutare le aziende ad ottenere il massimo ritorno dagli investimenti nei canali online.