Home Blog Come rendere JavaScr ...

Come rendere JavaScript SEO friendly

Alessandra Pagliai 14 Mag 2020

Il codice HTML e i CSS rappresentano tuttora l’ossatura fondamentale del web tuttavia, con l’evolversi del mondo digitale e l’innalzamento dell’asticella delle aspettative degli utenti, la resa dinamica e interattiva di un sito o di un’applicazione è divenuta un’evenienza imprescindibile. è qui che entra in gioco JavaScript, il linguaggio lato client più diffuso e amato dagli sviluppatori. Lo troviamo declinato in librerie e framework versatili e potenti, quali -ad esempio- React, Angular e jQuery.

Le potenzialità di JavaScript lo rendono, dunque, la tecnologia preferenziale da sfruttare nella realizzazione delle interfacce dei siti web. Il grande vantaggio di questo linguaggio è di poter aggiornare dinamicamente il contenuto di una pagina nel momento in cui abbia luogo un’interazione o un evento, senza dover effettuar effettuare un nuovo download completo della stessa.
In sintesi, potremmo scindere così le sfere d’azione di ciascuno dei codici chiamati in causa per la costruzione di un sito:

l’HTML dichiara la struttura di base delle pagine e il loro contenuto semantico;
il CSS definisce l’aspetto di una pagina web;
JavaScript rende la pagina interattiva e ha la potenzialità di alterare l’HTML e i CSS.

Definite brevemente le caratteristiche e i campi d’azione di JavaScript, è il momento di alzare il sipario sul protagonista di questo contenuto, Google, e cercare di comprendere perché l’interazione fra i due risulta così complessa.

Crawling, rendering e indicizzazione di JavaScript

Gli spider di Google svolgono la loro funzione in due “ondate di indicizzazione”.
Nel corso della prima ondata, il Motore di Ricerca indicizza tutti i contenuti serviti direttamente nel codice sorgente sotto forma di HTML.
Nella seconda ondata, poi, avviene il vero e proprio rendering delle pagine, ovvero l’esecuzione di JavaScript e il popolamento completo del codice. L’operazione di rendering è molto dispendiosa per il crawler, pertanto bisogna tenere conto del fatto che tanti più script sono presenti in pagina, tanto più l’operazione sarà lenta e macchinosa.
Il primo e il secondo step non sono immediatamente consecutivi: subito dopo la prima ondata, le pagine vengono inserite in una coda di scansione fino al nuovo passaggio dello spider.

Nella definizione del quadro generico che ci aiuti a capire quali difficoltà incontri Google nel corso nella scansione delle pagine realizzate con l’utilizzo di molto codice JavaScript, bisogna tener conto del fatto che le informazioni semanticamente importanti per il Motore di Ricerca sono veicolate attraverso il codice HTML. Se queste, dunque, non risultano disponibili fin dal primo ciclo di indicizzazione, Google non potrà indicizzarle e interpretarle correttamente.

Tralasciando per un attimo le notevoli problematiche date, ad esempio, da pagine che dovessero risultare completamente prive di contenuto testuale, fra i rischi possiamo annoverare dei veri e propri disastri tecnici: basti pensare quali possano essere le conseguenze all’interno di un e-commerce con una ricca navigazione a faccette nel caso in cui improvvisamente tutte le indicazioni rel=”Canonical” fossero erogate in JavaScript e dunque ignorate dai bot, oppure ai risvolti della mancata lettura dei tag hreflang nei siti multilingue.

Fino al 2019, inoltre, il Motore di Ricerca si serviva di una versione non aggiornata di Chrome (Google Chrome 41) per la spiderizzazione dei siti e da ciò conseguivano importanti limitazioni, come il mancato supporto di ES6 e l’incapacità di comprendere le interfacce IndexDB e WebSQL.

Dal 2019 Google ha ufficialmente rilasciato una versione evergreen di Googlebot, ovvero un bot sempre aggiornato con gli ultimi update di Chrome. Questa novità rende il processo di rendering più agevole, ma non risolve del tutto la questione legata all’indicizzazione delle porzioni di codice “nascoste” da JavaScript.
Inoltre, Googlebot continua a non interagire con il browser come farebbe un utente, pertanto:

non ha accesso a qualsiasi risorsa si trovi al di là di una richiesta di permesso o di log-in;
non interagisce con le pagine, dunque non può visualizzare contenuti che si celano dietro eventi quali “onscroll” (di qui la problematica ricorrente legata all’infinite scroll) e “onclick”;
può arbitrariamente scegliere di non renderizzare per intero la pagina.

Appare chiaro, dunque, che è necessario facilitare quanto più possibile il processo di scansione da parte degli spider, mettendo a disposizioni fin dalla prima ondata tutte le informazioni necessarie per una comprensione integrale delle pagine.
Ma come è possibile capire se sul nostro sito vi sono problematiche legate all’uso del codice JavaScript?

JavaScript rendering e SEO: strumenti di analisi

Abbiamo a disposizione numerosi strumenti per individuare problematiche legate al rendering JavaScript su di un sito, pertanto quello che segue non è che un elenco parziale, tuttavia quanto segue si può annoverare fra le metodologie più semplici e sicure a cui appellarsi.

1. Disabilitare JavaScript sul browser

Per disabilitare l’esecuzione di JavaScript nel browser in Chrome è sufficiente andare nelle Impostazioni, cliccare su Avanzate, proseguire in Privacy e Sicurezza e selezionare Impostazioni contenuti. Troverete la voce “JavaScript” e la relativa opzione di disattivazione. Per i più impazienti, si segnala Quick JavaScript Switcher, pratico Plug-in compatibile anche con Firefox.

La prova è semplice: se riuscite visualizzare tutti i contenuti e a navigare interamente il vostro sito senza ostacoli o differenze rispetto alla versione renderizzata, è probabile che non abbiate problematiche legate alla scansione delle risorse da parte di Googlebot.

Attenzione però, questa è solo un’indagine preliminare, è sempre meglio approfondire l’analisi con dei tool che siano in grado di simulare il rendering da parte del motore di ricerca. Vediamo come.

2. Tool offerti da Google

è importante ricordare che per un’analisi veramente approfondita non è sufficiente analizzare il codice sorgente della pagina per avere una visione chiara: mediante il comando Visualizza Sorgente della Pagina (Ctrl+U), di fatti, abbiamo accesso solo all’HTML iniziale, mentre ciò di cui abbiamo bisogno è DOM (Document Object Model) completo.
A questo scopo, ci viene in soccorso uno strumento offerto direttamente da Google: il Test dei Risultati Multimediali. Benché sia stato progettato per valutare l’eleggibilità di una pagina per i Rich Results, ha il risvolto di presentare anche delle informazioni utili per l’ottimizzazione del codice JavaScript per la SEO.
Attraverso il Test dei Risultati Multimediali possiamo, oltre a visualizzare le informazioni utili circa i dati strutturati presenti in pagina, accedere alla funzione” Visualizza HTML sottoposto a rendering”. Cliccando, comparirà una tab completa dell’HTML realmente scaricato dal motore di ricerca ed è qui che possiamo indagare la presenza o meno di quegli elementi fondamentali per il Motore di Ricerca:

Meta dati (Meta tag robots, Canonical, Title e Description, Alternate, Hreflang ecc.);
Headings;
Immagini;
Attributi alt;
Conformità dei dati strutturati;
Contenuti testuali;
Link interni ed esterni;
Gerarchie e tassonomie.

Se questi elementi non risultano presenti nella versione renderizzata, urge un intervento tecnico mirato a bypassare la problematica in oggetto (vedremo più avanti le possibili soluzioni).

Laddove si abbia accesso alla Google Search Console del sito, la stessa operazione può essere effettuata attraverso il l’URL Inspection Tool.
Un ulteriore aiuto ci giunge dal Mobile Friendly Test il quale, oltre a offrirci interessanti informazioni circa la compatibilità del nostro sito con i dispositivi mobili, ci restituisce uno screenshot della pagina renderizzata e ci informa circa la presenza di problemi di caricamento delle risorse: è bene controllare, di fatti, che Googlebot possa sempre eseguire gli script .js e che non vi siano porzioni di codice bloccate più o meno inavvertitamente da Robots.txt (salvo eccezioni molto specifiche, naturalmente).

3. Diffchecker o strumenti equivalenti

Diffchecker o qualsiasi altro tool simile- ci consente di mettere a confronto l’HTML di base e il codice renderizzato della pagina, individuandone subito le differenze.
Fintantoché le diversità si limitano a piccole parti di codice non critico e non impattano i Meta Dati e gli altri dettagli essenziali alla SEO, non c’è bisogno di interventi correttivi.
Tuttavia, laddove vi siano differenze massicce relative a Meta Tag, Meta Robots, contenuti testuali, immagini e agli altri elementi semantici, urge trovare una soluzione alternativa.

Individuate le problematiche, passiamo alle possibili soluzioni implementabili per rendere il nostro sito a prova di JavaScript.

JavaScript SEO: workaround e soluzioni

Per bypassare piccole porzioni di codice essenziale non visibili da Google senza rendering degli script, possiamo sfruttare il [tag

Come rendere JavaScript SEO friendly

Crawling, rendering e indicizzazione di JavaScript