Ormai tutti i siti web di nuova generazione utilizzano JavaScript, in modo più o meno massiccio, per generare effetti interattivi o migliorare le performance della pagina. Ma siamo sicuri che ai motori di ricerca piaccia sempre questo linguaggio di programmazione?
In questo articolo scopriamo come utilizzarlo al meglio per evitare piccoli e grandi errori SEO.
Cosa significa Javascript?
JavaScript è un linguaggio di programmazione che esiste da più di un ventennio ma che ha conosciuto una diffusione esponenziale soprattutto negli ultimi quattro o cinque anni, rispondendo alle richieste di siti web più animati e dinamici.
E in effetti JavaScript è il linguaggio di scripting lato-client di riferimento per la creazione dei più svariati effetti interattivi, in particolare quelli che si innescano attraverso determinati comportamenti dell’utente (come il click, l’hover, il tap, lo scroll…), anche se in certi casi l’esecuzione degli script JavaScript avviene in automatico.
La probabilità che tu abbia un sito che utilizza JavaScript, in modo più o meno massiccio, è molto alta, soprattutto se gestisci o possiedi un e-commerce. Ma sei sicuro che sia bello anche agli occhi di Google, non solo ai tuoi?
Qui entra in gioco il ruolo della SEO: perché JavaScript è un linguaggio tutt’altro che digeribile per Google e per gli altri motori di ricerca, soprattutto se usato in modo massiccio e non corretto.
Guida a Javascript per la SEO
In questo articolo vedremo quali sono le problematiche che possono derivare a livello SEO dall’uso eccessivo o scorretto di JavaScript e come prevenirle. Iniziamo!
Partiamo dalle basi: come capisco se il mio sito web utilizza JavaScript?
Il primo passo è capire se e fino a che punto una pagina web utilizza il linguaggio JavaScript. A meno che tu non sia uno sviluppatore, per capire facilmente se il sito sui cui stai lavorando ha implementato questa tecnologia ti consiglio due metodi: uno più tecnico, uno più empirico e meno rigoroso, ma a mio avviso più efficace per vedere nel concreto gli effetti di JavaScript sulla pagina.
I passaggi che trovi qui sotto sono descritti per Google Chrome, ma si possono eseguire in modo simile su tutti i principali browser:
Metodo 1: tecnico
Apri la pagina web che ti interessa e premi F12 per accedere alla Chrome DevTools. Nella barra superiore, clicca sulla tab “Network” e quindi sul filtro “JS”.
A questo punto premi CTRL+F5 per svuotare la cache della pagina e ricaricarla, e vedrai comparire l’elenco delle risorse JavaScript. Per ciascuna puoi vedere:
- L’url da cui viene caricata (all’hover del mouse sul nome della risorsa)
- Lo status code http
- Il tipo (ovviamente script) e l’initiator (la risorsa da cui viene caricato lo script)
- La dimensione (size)
- Il tempo di caricamento
- Il diagramma waterfall che permette di valutare visivamente (con dati precisi all’hover del mouse) il procedere del caricamento delle risorse.
Questi dati ci aiutano a capire in particolar modo i tempi di caricamento complessivi delle risorse JS e quelli specifici di ciascuna risorsa: in particolare, è interessante soprattutto il dato di TTFB, che indica il tempo di risposta del server per scaricare quella risorsa.
I dati di caricamento delle risorse JavaScript sono importanti perché possono influire positivamente o negativamente sulle performance della pagina e sulla capacità di Googlebot di leggerla nella sua interezza.
Torneremo più avanti sui suggerimenti per ottimizzare le performance di JavaScript.
Metodo 2: empirico
Apri la pagina web che ti interessa e clicca sull’iconcina a forma di lucchetto (se il tuo sito è in https) o con la scritta “non sicuro” (se il tuo sito è in http), o con una "i" (se il tuo sito è in https ma la pagina ha contenuti in http), sulla sinistra della barra dell’url. Nel menu a tendina che si apre, clicca su “Impostazioni sito”: si aprirà una nuova scheda. Qui, tra le autorizzazioni, apri la tendina di JavaScript e seleziona la voce “Blocca”. A questo punto torna sulla pagina e ricaricala.
In questo modo puoi vedere come si presenta la pagina web SENZA JavaScript, e quindi capire quanto e come pesa sull’esperienza utente e sugli elementi visualizzati. Prova a navigare nella pagina, a scrollare, a cliccare sul menu e sugli altri pulsanti presenti per vedere dove JS è fondamentale per visualizzare link e contenuti. Questo ti permette di capire “a naso” l’importanza che ha JavaScript all’interno del tuo sito.
Come funziona JavaScript, a grandissime linee
Senza entrare in aspetti tecnici non necessari, può essere utile vedere a grandissime linee come funziona JavaScript, in modo da contestualizzare al meglio le problematiche e le soluzioni che ti presenterò più avanti.
Iniziamo dal principio: un utente (o un bot, ad esempio Googlebot stesso) visita una pagina web.
La prima cosa che succede è che il browser inoltra al server una richiesta per ottenere:
- Il codice sorgente della pagina
- tramite richieste successive, tutte le risorse esterne (fogli di stile, file JavaScript, altre risorse) indicate nel sorgente.
Il codice sorgente è anche detto HTML di base perché è un documento che contiene tutti i contenuti di base della pagina, nonché le indicazioni per scaricare ed eseguire le risorse JavaScript.
Man mano che il browser analizza il codice sorgente e lo combina con il css per “dipingere” la pagina sullo schermo, le risorse JavaScript vengono richieste al server e scaricate, quindi eseguite in automatico o in seguito a click, scroll o altre interazioni dell’utente.
In entrambi i casi, ciò che fa il linguaggio JavaScript consiste essenzialmente nell’iniettare nuovo codice HTML nella pagina o eliminarne una parte, oppure modificare l’esistente, allo scopo appunto di generare la comparsa, scomparsa o modifica di elementi. Il risultato è una pagina web più dinamica e interattiva.
Ma non solo: JavaScript può infatti essere usato anche per rimandare il caricamento di elementi non immediatamente necessari, migliorando in questo modo le performance della pagina (questo tipo di caricamento è detto caricamento asincrono o lazy loading).
Comunque sia, dopo l’azione del JavaScript (e del css) l’HTML della pagina non coincide più con il codice sorgente, ma risulta modificato. È possibile visualizzare questo risultato finale osservando il DOM (acronimo che sta per Document Object Model, che possiamo definire proprio come l’HTML “finale” di una pagina web):
il DOM è visibile premendo F12 per accedere alla Chrome DEVTools, e quindi cliccando sulla tab “Elements” nella barra superiore.
Perché JavaScript può essere un problema per Google (e per altri motori di ricerca)?
Nel corso del 2019, Google ha compiuto passi da gigante nella sua capacità di eseguire gli script JS e dunque interpretare correttamente il contenuto finale di una pagina web che utilizzi questo linguaggio di programmazione. Il passo più importante è stato sicuramente l’aggiornamento del browser utilizzato da googlebot per il crawling delle pagine web, che permette al bot di essere sempre al passo coi tempi nell’interpretazione degli ultimi aggiornamenti JS.
Tuttavia, ammesso che Google possieda sempre le capacità per eseguire JS, restano due grandi problemi:
- Problema di tempistiche (crawl budget): googlebot deve scansionare ogni giorno miliardi e miliardi di pagine web. Semplicemente, non ha il tempo per scaricare ed eseguire tutto il codice di tutte le pagine che visita. In una situazione ottimale, il JavaScript viene di norma eseguito dopo il caricamento dell’HTML, ma googlebot lo fa solo se gli avanza budget per farlo. Altrimenti, tutto, o parte di ciò che viene modificato tramite JavaScript non verrà visto da Google.
- Problemi intrinseci di JavaScript: googlebot e ogni altro bot sono in grado di eseguire soltanto il JavaScript che viene lanciato in automatico. Quasi tutti gli script innescati da una specifica azione dell’utente non possono essere eseguiti dai bot. Quindi, tutti i contenuti che vengono iniettati da queste azioni non saranno visibili ai crawler dei motori di ricerca.
Oltre a questo, occorre tenere a mente che non esiste solo Google: la maggior parte degli altri motori di ricerca non ha le stesse capacità tecnologiche di Google e talvolta non è in grado di eseguire neanche gli script più accessibili.
JavaScript e i problemi SEO che possono presentarsi
Avrai capito che i principali problemi che possono insorgere da una mancata ottimizzazione SEO del codice JavaScript derivano da un unico fattore:
Per questioni di tempo o di tecnologia, googlebot potrebbe non riuscire a vedere tutto l’HTML finale di una pagina web.
Se nell’HTML finale sono presenti elementi importanti caricati da JavaScript come link e contenuti rilevanti, è concreto il rischio che Google non riesca a vederli, portando a conseguenze SEO di diversa entità, a volte anche gravi.
Nella mia esperienza con le ricadute SEO dell’utilizzo di JavaScript ho rilevato alcuni problemi comuni a molti siti web. Non è detto che questi problemi esauriscano il campo della JavaScript SEO, ma sicuramente rappresentano alcune delle criticità più rilevanti e comuni:
#1 Menu caricati in Javascript
Se gli elementi del menu principale o dei menu di navigazione vengono caricati in JavaScript c’è la possibilità che Google non riesca a vedere tutti i link presenti al loro interno. Inoltre, se il caricamento avviene tramite un evento innescato dall’utente (ad esempio il click), questa probabilità si alza ulteriormente.
Il fatto che Google non riesca a vedere i link presenti nel menu comporta importanti conseguenze a livello di link building interna e trasferimento di link juice tra le pagine del sito, limitando la capacità di Google di capire quali sono le pagine gerarchicamente più importanti (ad esempio le macro-categorie e le categorie principali), potenzialmente penalizzandone il ranking.
#2 Iniezione di link ed elementi importanti in Javascript
Generalizzando il punto precedente, possiamo dire che si presenta un rischio di impoverimento della link building interna laddove si iniettano link importanti utilizzando JavaScript. Se alcune pagine hanno come link in ingresso soltanto un link generato in questo modo, c’è il rischio concreto che googlebot non riesca mai a raggiungerle, crawlarle e indicizzarle.
Questa eventualità è più comune di quanto si creda: soprattutto in ambito e-commerce è molto diffusa la pratica di caricare recensioni, commenti, prodotti correlati e suggeriti in JavaScript, o di gestire il caricamento di lunghi listing di prodotti utilizzando JavaScript. In questo modo si corre il rischio che googlebot non veda decine e decine di pagine prodotto e altri elementi che impattano sul ranking della pagina.
Non è raro che le pagine prodotto si posizionino per query specifiche: il rischio è quindi quello di perdere ottimi posizionamenti potenziali per ricerche ad alto tasso di conversione.
Al tempo stesso, JavaScript è prezioso per migliorare le performance delle pagine: occorre quindi trovare sempre in ogni caso concreto il miglior compromesso tra utilizzo di JavaScript e accessibilità ai bot dei motori di ricerca.
#3 Bundle or Not to Bundle
Di norma è buona pratica riunire tutti i file JavaScript in un unico file (bundle) per limitare le richieste di ogni singolo file al server e ridurre in questo modo i tempi di load della pagina. Tuttavia, un bundle troppo grande potrebbe risultare eccessivamente pesante con il rischio che googlebot non riesca a scaricarlo nei tempi dettati dal crawl budget.
Quindi: meglio un unico file più pesante o tanti file più piccoli e leggeri? La risposta non è univoca e va valutata caso per caso. Il punto di partenza è capire se googlebot riesce a scaricare il bundle. Lo capiremo più avanti, ci siamo quasi. ?
#4 Crawl budget limitato
Abbiamo visto quanto il crawl budget sia determinante per permettere a googlebot di eseguire tutti gli script JS (per lo meno tutti quelli che non sono innescati da azioni specifiche dell’utente). Se il tuo sito web è poco autorevole, oppure molto grande e con pagine pesanti, c’è la possibilità concreta che Google dedichi un crawl budget insufficiente a scaricare tutto il contenuto di ogni pagina.
C’è anche la possibilità che si generi un circolo vizioso: vedendo poco contenuto nella pagina, Google decide che non è il caso di dedicare molto crawl budget al sito web. Quindi, non vedrà mai i contenuti iniettati dal JavaScript e continuerà a ritenere il sito di scarsa autorevolezza.
#5 Troppa differenza tra HTML di base e HTML finale
Per ragioni storiche che si sono in parte attenuate ma che risultano ancora valide, Google non ama i siti web che modificano pesantemente l’HTML di base utilizzando JavaScript o il css, poiché in passato si utilizzavano questi linguaggi per far vedere al bot una versione della pagina “più ottimizzata” (diciamo così) rispetto a quella effettivamente visibile all’utente.
Leggi la nostra ultima ricerca: 27 errori SEO che danneggiano i siti web nel 2020.
Best practice con Javascript: le soluzioni ai problemi SEO
Veniamo alla parte che stavi aspettando con trepidazione: le soluzioni.
Ecco cosa suggerisco per le criticità indicate nel paragrafo precedente (e ne approfitto per ringraziare il reparto Frontend dell’agenzia dove lavoro, che con grande competenza mi aiuta sempre a trovare le soluzioni migliori a questi e altri problemi):
#1 Inserisci link e contenuti importanti nel codice sorgente
Il primo suggerimento ovvio è quello di inserire i link e i contenuti testuali rilevanti a livello SEO nel codice sorgente, evitando di iniettarli con JavaScript. In questo modo i crawler di tutti i motori di ricerca potranno vederli senza problemi e rischi di timeout.
I link e i contenuti prettamente testuali sono molto leggeri e non dovrebbero appesantire il caricamento della pagina se inseriti direttamente nel sorgente. Le immagini sono molto più pesanti, quindi se necessario possono essere caricate in un secondo momento utilizzando il lazy loading tramite JavaScript.
Se proprio non puoi inserire alcune risorse nel sorgente per problemi di performance della pagina o di navigabilità, fai in modo che gli elementi più importanti vengano caricati dal JavaScript in automatico invece che iniettati tramite azioni degli utenti (per i più tecnici: tramite handler load o ready, invece che tramite altri handler come il click).
Naturalmente, ricordati anche di inserire tutti gli url delle pagine importanti in sitemap.xml. In questo modo, anche se non potrà raggiungerle tramite linking interna, googlebot almeno saprà che esistono e potrà visitarle. Anche se in assenza di link in ingresso potrebbe dargli importanza minore.
#2 Non bloccare le risorse Javascript nel file Robots.txt
Una raccomandazione di base ma che merita sempre di essere ribadita: non impedire ai bot di accedere alle risorse JavaScript, soprattutto se queste iniettano contenuti importanti.
Ma anche negli altri casi è sempre bene lasciare tutto il codice accessibile (con poche eccezioni) poiché Google ha bisogno di più dati possibile per interpretare la pagina e la gerarchia degli elementi al suo interno: fai quindi in modo che Google possa “dipingere” l’HTML finale senza impedimenti.
Se hai paura che JS rallenti googlebot occupando crawl budget prezioso, o impedisca a Google di vedere tutti gli elementi della pagina, segui i prossimi suggerimenti.
#3 Assicurati che Google riesca a caricare tutti gli elementi importanti della pagina
Utilizza il Test Mobile di Google per vedere come googlebot per smartphone vede la tua pagina, sia a livello di rendering che a livello di HTML finale. Puoi accedere allo stesso strumento anche dalla Google Search Console, tramite lo strumento di controllo per url singoli.
Ecco cosa guardare:
-
Screenshot: utile per uno sguardo di massima a come googlebot riesce a renderizzare la pagina.
-
HTML: è l’HTML finale che vede Google. Importantissimo per capire se tutti i link e i contenuti testuali importanti sono accessibili a googlebot.
-
Problemi di caricamento della pagina: in questa sezione puoi vedere le risorse che googlebot non è riuscito a scaricare, per problemi tecnologici o di crawl budget (o per altri problemi specifici, come il blocco in robots.txt). Qui puoi scoprire quali sono le risorse JavaScript che Google non riesce a vedere, compresi gli eventuali bundle.
Nel caso googlebot non riesca a caricare i bundle JavaScript, una soluzione potrebbe consistere nel dividerli in due: un file per le risorse JS cruciali che servono subito al caricamento della pagina, e un altro file separato per le altre risorse non cruciali (ad esempio gli script per i recaptcha dei form).
#4 Ottimizza l'ordine degli script
All’interno del codice sorgente, inserisci i link agli script JS dopo tutto l’HTML, altrimenti il browser - e quindi googlebot - si dovranno interrompere per scaricare gli script prima di riprendere il parsing del documento HTML. Se hai messo tutti i contenuti e i link importanti nel codice sorgente, questa soluzione migliorerà le performance della tua pagina senza che ci sia il rischio che il crawler si perda gli elementi più importanti.
Naturalmente ci sono delle eccezioni: alcuni script che devono essere eseguiti subito per garantire la corretta navigazione della pagina e altri servizi di tracciamento o di marketing che devono partire immediatamente (parlo ad esempio degli script di Google Analytics, Google Tag Manager, Iubenda…).
#5 Alleggerisci il Javascript
Cerca di utilizzare il JavaScript soltanto nella misura necessaria, applica il minify per ridurlo di peso e compattalo in bundle per diminuire le richieste al server.
Utilizza il Test Mobile di Google per assicurarti che googlebot riesca a scaricare il bundle ed eventuali altre risorse JS (vedi punto 3).
Rimanda tutti gli script che non sono cruciali per la navigazione iniziale dell’utente al termine del load della pagina (tecnicamente: all’handler load); se si tratta di script che caricano elementi che Google può anche non vedere (ad esempio il recaptcha), puoi anche caricarli tramite azioni specifiche dell’utente (ad esempio allo scroll).
Inoltre, inserisci gli script che non vengono usati in tutto il sito solo nelle pagine dove servono (per esempio, lo script di Google Maps solo nella pagina “Contatti”).
Ottimizzando il JavaScript in questo modo risparmierai Crawl Budget e migliorerai le performance della pagina.
#6 Ottimizza il crawl budget e le performance del webserver
Sull’ottimizzazione del crawl budget, naturalmente, potrebbe essere aperto un capitolo a parte per la vastità dell’argomento. Rimando a un articolo precedente di SEMrush per approfondire l’argomento. Come abbiamo visto ai punti precedenti, è anche possibile ottimizzare il crawl budget utilizzando in modo intelligente JavaScript (lazy loading delle immagini, defer di script non cruciali, trigger degli script non importanti tramite azione dell’utente eccetera).
#7 Implementa Server Side Rendering (SSR) sulle Web App Javascript
Alcune Web App sono realizzate interamente in JavaScript (tramite framework come React e Angular) perché questa tecnologia è oggettivamente più veloce, sicura ed efficiente per la creazione di applicazioni web complesse.
In questi casi non è possibile applicare tutti i suggerimenti di ottimizzazione visti in questa guida, ma si può sempre salvaguardare la SEO implementando anche per il framework JavaScript il Server Side Rendering, una tecnica che è normalmente usata per generare l’HTML lato server, e che in questo specifico caso consiste nell’eseguire anche gli script JS direttamente su server così da servire al client una versione dell’HTML già renderizzata.
Se non si usasse questo metodo, il client riceverebbe un codice sorgente praticamente vuoto, con solo gli url delle risorse JavaScript da scaricare ed eseguire per caricare la pagina: il problema è che il processo di richiesta ed esecuzione di tutti questi script richiede tempistiche sicuramente superiori a quelle possibili per googlebot: detto in altri termini, il crawl budget non sarebbe mai sufficiente.
Con SSR, invece, anche i crawler riceveranno direttamente l’HTML finale e non avranno problemi di tempistiche e tecnologie nell’interpretarlo e indicizzarlo. Naturalmente questo metodo può rallentare le performance della pagina perché non permette di utilizzare JavaScript per caricare in asincrono gli elementi più pesanti e meno importanti, ma rappresenta comunque il compromesso ottimale.
Con quest’ultimo suggerimento ho concluso la mia carrellata sui principali problemi JavaScript che possono impattare sulla SEO, e sulle soluzioni che mi sento di raccomandare per prevenirli e risolverli.
Se nella tua esperienza hai riscontrato altri problemi o sperimentato diverse soluzioni scrivilo nei commenti!
