User Experience con Javascript o buon posizionamento organico? Sappi che da oggi puoi scegliere entrambi. Ecco come.
Sito web in Javascript: framework e rendering
Javascript è una tecnologia molto utilizzata nello sviluppo di siti web moderni, grazie alle possibilità offerte in termini di usabilità, dinamicità e soluzioni di layout.
Esistono differenti framework Javascript, ovvero modelli di strutturazione del codice, ma quelli più utilizzati oggi sono:
Pur differenziandosi in specifiche soluzioni tecniche, hanno tutti criticità più o meno rilevanti quando si tratta di essere scansionati, a seconda del tipo di rendering che utilizzano.
Per rendering si intende la costruzione dell’HTML di un dato contenuto partendo, ad esempio, dalla sua declinazione in Javascript.
La conversione HTML può essere fatta:
- direttamente dal server, quindi dalla struttura tecnica su cui abita il sito.
In questo caso si parla di server-side rendering. - demandata al client, quindi ad esempio al browser di un utente oppure al crawler dei motori di ricerca. In questo caso si parla di client-side rendering.
- prevedere una parte di rendering server-side e una parte di client-side. In questo caso si parla di hybrid rendering.
- prevedere un tipo differenziato a seconda di chi accede alla risorsa, ad esempio fornendo un rendering server-side ai motori di ricerca e un rendering client-side agli utenti. In questo caso si parla di dynamic rendering.
Ma perché è necessario convertire in HTML le informazioni costruite in Javascript?
Javascript e i motori di ricerca: fu guerra
I motori di ricerca acquisiscono le informazioni sui contenuti presenti in un sito scansionando di link in link tutte le risorse che trovano, leggendone il codice HTML e interpretandolo.
Il Javascript però permette di generare contenuti dinamici, che si modificano o addirittura vengono realizzati soltanto a seguito di una interazione in pagina.
Ad esempio, in una pagina di prodotti possono venire aggiunti nuovi elementi soltanto una volta eseguito uno scroll. Oppure un testo può essere presentato in pagina soltanto a seguito di un click.
I motori di ricerca non interagiscono all’interno di una pagina web come gli utenti, e si limitano a leggere quanto gli viene fornito dal codice al momento del loro accesso alla pagina.
Hanno quindi funzioni limitate, o per meglio dire, hanno risorse limitate: dovendo scandagliare il vasto internet dedicano un budget di tempo ed effort preciso ad ogni sito web (detto crawl budget).
Se quindi le informazioni non vengono fornite in maniera chiara, rapida e in HTML si corre il rischio che i crawler non vedano mai il contenuto in pagina.
Javascript e Googlebot: odi et amo
Google è sempre stato all’avanguardia circa la gestione del Javascript, almeno rispetto ad altri motori di ricerca meno evoluti.
Infatti ha sempre effettuato tentativi di rendering pur tentando di disincentivarne l’uso, per una serie di limiti: sia di risorse in termini di crawl budget, sia di sviluppo tecnologico.
Fino al mese scorso, Googlebot utilizzava per scansionare i siti web una versione datata del software Chrome, precisamente la versione Chrome 41. Quanto vecchia? Beh, basti pensare che al momento la versione disponibile per gli utenti è la numero 74.
Questo vuol dire che per valutare siti web moderni, Google utilizzava una tecnologia vecchia di circa quattro anni.
A Maggio 2019 però, Google ha annunciato non soltanto di aver aggiornato il proprio bot alla versione del software più recente ma anche di garantirne il costante aggiornamento. Con un delay di circa due settimane rispetto a quanto rilasciato per gli utenti del web.
Cosa significa esattamente? Che le potenzialità di comprensione delle moderne versioni e framework di Javascript sono aumentate, e potrebbero essere molto vicine all’esperienza che abbiamo quotidianamente noi utenti navigando una pagina.
Come Google indicizza il Javascript
Come abbiamo visto, i motori di ricerca devono renderizzare le pagine in Javascript, per poterle comprendere. Ma quali sono le fasi che Google deve compiere per poter indicizzare una pagina con contenuti Javascript?
- Crawling — tramite i link, acquisisce le pagine da scansionare.
- Scanning— trovata una pagina procede con la lettura del codice HTML disponibile. Se trova del contenuto in Javascript lo inserisce in una lista di attesa di risorse che deve renderizzare in un secondo momento.
- Indexing — inizia il processo di valutazione per l’indicizzazione della pagina.
- Rendering — dopo aver effettuato il primo processo di valutazione per l’indicizzazione e superata la lista di attesa, procede col rendering della pagina in Javascript.
- Indexing — al termine del rendering dei contenuti in Javascript, effettua nuovamente il processo di valutazione per l’indicizzazione della pagina.
Le pagine contenenti Javascript vengono quindi scansionate e valutate in due momenti differenti: una prima volta per l’HTML e una seconda per comprendere gli script. Tra la prima fase di indexing e la seconda può passare del tempo, variabile a secondo del crawl budget del bot e della lista di attesa.
In realtà, recentemente Google ha annunciato che la valutazione in due tempi (Scanning + Indexing / Rendering + Indexing) potrebbe nel futuro prossimo non costituire più un limite per le pagine Javascript. Infatti, man mano che le capacità del bot aumentano, Googlebot tenderà a far passare per la fase di Rendering tutte le risorse incontrate nel web, anche quelle che apparentemente non ne avrebbero bisogno.
Per un approfondimento su come il Googlebot elabori e valuti le risorse web, Google ha fornito una guida sui concetti base del Javascript.
Javascript e SEO: problema risolto?
Possiamo quindi cedere alle delizie promesse dal Javascript e considerarci salvi dai suoi pericoli?
Purtroppo, la risposta è no. Occorre infatti tener conto di alcuni importanti fattori:
- Sebbene leader del mercato (in Italia), Google non è l’unico motore di ricerca. Volendo preservare il traffico organico proveniente da altri motori di ricerca verso il proprio sito, occorre ricordare che l’aggiornamento non vale per tutte le fonti.
- I problemi di effort e tempo (crawl budget) restano validi: se il vostro sito impiega troppo tempo o fornisce troppe problematiche di renderizzazione, continuerà a non essere correttamente scansionato da Googlebot.
- L’effettiva compatibilità con tutte le versioni Javascript non è ancora stata accuratamente testata: trattandosi di un aggiornamento recente, non ci sono ancora case study rilevanti di cui tenere conto.
- La testabilità non è ancora completamente possibile, dal momento che i tool di monitoraggio di Google non sono ancora aggiornati rispetto alle ultime novità.
- Occorre prestare attenzione a tutte quelle risorse che fino ad ora erano consapevolmente ignorate da Google, e che ora potrebbero invece essere considerate (ad esempio la navigazione per filtri di un e-commerce).
Per poter essere sicuri che i nostri preziosi contenuti vengano correttamente letti dai motori di ricerca, rimane quindi prioritario fornirli anche in HTML.
Qual è quindi il vero fattore rivoluzionario? Google ha teso un ramoscello di ulivo al Javascript, andando incontro alle moderne necessità del web e degli sviluppatori.
Occorre quindi restare all’erta per gli sviluppi del futuro e assicurarsi che il proprio sito continui ad essere SEO compliant ma anche al passo coi tempi.
Ho un problema SEO con Javascript?
Come capire se il proprio sito in Javascript ha delle criticità lato motori di ricerca? In realtà ci sono diversi test e prove da effettuare, utilizzando anche tool proprietari e a pagamento.
Google però fornisce una serie di strumenti gratuiti a supporto di sviluppatori e webmaster, e ha annunciato ad Agosto 2019 che manterrà i tool aggiornati al passo con gli update di chromium di Googlebot.
Cosa vuol dire? Che grazie a questi tool sarà possibile avere una sorta di “vedi come Google” sempre al passo coi tempi.
I tool di Google nel dettaglio:
- Google Search Console — all’interno dello strumento è possibile testare una URL specifica per capire come “Google vede la pagina” e come interpreta il codice.
- Mobile Friendly Test — consente di testare la compatibilità con i dispositivi mobile secondo parametri di velocità e usabilità, ma mostra anche come il sito viene renderizzato da Google.
- Rich Result Test — consente di testare la correttezza del codice per dati strutturati (ad esempio Schema.org) e rich snippet, e quindi come Google legge e interpreta le informazioni fornite.
- AMP Test — consente di testare la correttezza del codice di una pagina tipo AMP.
E il Javascript visto da Bing?
Anche se per una questione di market share si tende a concentrarsi unicamente su Google (in Italia si parla di oltre il 90% del mercato), esistono anche altri motori di ricerca che, a seconda del vostro target geografico di riferimento, potrebbero essere altrettanto strategici. Come si comportano, quindi, gli altri motori di ricerca rispetto al Javascript?
Microsoft ha recentemente annunciato, al Pubcon 2019, un importante aggiornamento del suo motore di ricerca, Bing: da ora in poi, utilizzerà il moderno software Edge per renderizzare il Javascript. Ma non solo! Proprio come il Googlebot, anche il Bingbot diventa evergreen, e sarà quindi sempre aggiornato rispetto alle ultime versioni di Edge.
L’aggiornamento verrà rilasciato nel corso dei prossimi mesi, e potrà portare ad un cambiamento nella nomenclatura dell’user-agent di Bing.
Anche in questo caso, dunque, le possibilità di comprensione del Javascript dovrebbero essere aumentate, ma restano valide le stesse avvertenze riportate per Google, circa testabilità e compatibilità.
Hai trovato interessante questo articolo?
Possiamo fare tanto per il tuo business e siamo sempre in cerca di nuove sfide. Mettici alla prova, raccontaci di te e della tua realtà!
