Come rendere JavaScript SEO friendly

Home | Academy | Come rendere JavaScript SEO friendly

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. Index Js 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. Javascript 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). visualizza html 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. Doctype 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 <noscript>, il quale segnala un codice alternativo erogare nel caso in cui JavaScript sia disabilitato o non supportato nel browser. Questo semplice workaround garantisce la graceful degradation su una versione in HTML base del codice altrimenti erogato in JavaScript. Tuttavia, il tag <noscript> può essere una scappatoia impiegata con frequenza occasionale e non rappresenta l’escamotage ideale per situazioni più complesse. Le principali soluzioni suggerite da Google sono:  
  • Hybrid Rendering Rappresenta una commistione di server-side rendering e client-side rendering. Le risorse fondamentali della pagina sono renderizzate direttamente sul server e inviate al browser. Nel caso in cui sia un utente a richiedere la pagina, poi, verrà immediatamente erogato anche tutto il JavaScript aggiuntivo, anch’esso precedentemente renderizzato sul server. Pro: tutti gli elementi utili per il motore di ricerca e per l’utenza sono resi disponibili velocemente. Contro: oltre a rappresentare un certo grado di complessità nell’implementazione, può comunque richiedere il client-side rendering per alcune porzioni di codice.
  • Server Side Rendering La pagina viene interamente renderizzata sul server ed erogata in modo indifferente a Googlebot e utenti. Pro: contenuti, link e tag sono serviti al motore di ricerca su un piatto d’argento, inoltre migliora notevolmente la velocità e le performance del sito. Contro: fortemente energivoro per il server e potenzialmente fastidioso per la UX, in quanto -benché la pagina arrivi all’utente già pronta all’uso- l’utente dovrà comunque attendere la risposta del browser per poter interagire.
  • Dynamic Rendering Il server riconosce gli useragent del Motore di Ricerca e si comporta in modo diverso per crawler e utenti: nel primo caso eroga i contenuti già renderizzati, nella seconda occorrenza lascia che sia il browser a effettuare il rendering. Pro: il codice viene reso disponibile allo spider in modo molto rapido. Contro: richiede un impiego notevole di risorse da parte del server e non rappresenta un valore aggiunto per l’utenza.
  • Isomorphic JavaScript Conosciuto anche come Universal JavaScript, consiste nel rendering degli script sia lato client sia lato server. In un primo momento, viene utilizzato il pre-rendering (ovvero una sorta di anteprima del contenuto finale, creata lato client) per erogare il contenuto sia verso il motore di ricerca sia all’utente, successivamente il codice viene eseguito sul browser per consentire l’interazione. Pro: il contenuto è disponibile in tempi brevi sia per il motore di ricerca che per l’utente. Contro: complesso da implementare, richiede il supporto di applicazioni Node JS per poter funzionare in maniera efficace.
URLs A questo link è possibile trovare la Guida ufficiale Google con le linee guida consigliate e tutte le possibili alternative compatibili con le best practice SEO.

Conclusioni

Google, anno dopo anno, migliora sempre più la propria capacità di interpretazione di JavaScript e delle pagine web in generale. Possiamo ipotizzare, dunque, che il problema della scansione e dell’indicizzazione di questo linguaggio andrà via via assottigliandosi. Oggi Google è in grado di leggere e indicizzare, seppure ancora a fatica, molte più informazioni rispetto al passato ma è importante assistere attivamente questo processo affinché sia completato nel modo più efficiente possibile. Non solo: implementare dei sistemi di rendering JS “Google friendly” significa migliorare anche la disponibilità dei propri contenuti sugli altri motori di ricerca, i quali spesso presentano una tecnologia molto meno avanzata in tal senso. Questo è fondamentale soprattutto per coloro che operano in paesi quali Russia o Cina, dove i motori di ricerca preferenziali della popolazione sono, rispettivamente, Yandex e Baidu e per il quali il codice JavaScript rappresenta tuttora un elemento bloccante per la scansione e l’interpretazione dei contenuti. Fonte immagini: Google Developers

Alessandra Mosconi

SEO Specialist

Classe 1988, dopo la laurea in Studi Orientali presso La Sapienza di Roma conseguo un Master in Comunicazione e Marketing Digitale nella Business School del Sole 24 Ore. Appassionata di antropologia, linguistica e semiotica, mi ritrovo a muovere i primi passi nella SEO trasferendo i principi di queste discipline nello studio del comportamento degli utenti e nel campo dell'intelligenza artificiale applicata ai motori di ricerca. Fruitrice compulsiva di corsi online sugli argomenti più disparati -dallo sviluppo web all'archeoastronomia- dopo un passato da freelance e un'esperienza di 5 anni in Triboo Media (ex Gruppo HTML), prima come SEO Specialist e poi come manager del team SEO, sono approdata infine in ByTek.

Parlaci del tuo Progetto

Condividi con noi i tuoi obiettivi di business e scopri come possiamo aiutarti