SEO Blog
Write a comment

Codice JavaScript e SEO

 

JavaScript e SEO

JavaScript offre enormi possibilità rispetto ai normali siti Web basati solo su HTML e CSS.
Purtroppo, nonostante JavaScript consenta un'interazione dinamica col web per gli utenti, esso crea problemi non da poco per gli sviluppatori.

Per questo motivo, il connubio JavaScript e SEO è diventato qualcosa di impossibile da ignorare, in particolare quando si tratta di assicurarsi che Googlebot analizzi correttamente il rendering degli elementi della pagina.


Come funziona JS?

Per coloro che non hanno familiarità con JavaScript, ecco una rapida introduzione.

Insieme a HTML e CSS, JavaScript è una delle tre principali tecnologie di sviluppo web.
L'HTML viene utilizzato per creare pagine statiche, il che significa che il codice viene visualizzato nel browser così com'è e non può cambiare in base alle azioni dell'utente, JavaScript invece rende dinamica una pagina Web: uno sviluppatore può utilizzarlo per modificare i valori e le proprietà di un tag HTML quando l'utente fa clic su un pulsante o sceglie un valore da una casella a discesa.

JavaScript per poter funzionare viene inserito nella pagina insieme al codice HTML e interagisce col codice.


Rendering lato client e lato server

Esistono due concetti da conoscere quando parliamo di JavaScript, ed è molto importante capirne le differenze: rendering lato server e rendering lato client.

Tradizionalmente, come nel caso delle pagine HTML statiche, il codice viene visualizzato sul server (rendering lato server); quando si visita una pagina, Googlebot ottiene il contenuto completo, quindi non deve fare altro che scaricare i CSS e mostrare le informazioni nel tuo browser.

JavaScript, invece, viene generalmente eseguito sulla macchina client (rendering lato client), il che significa che Googlebot inizialmente ottiene una pagina senza alcun contenuto, quindi JavaScript crea il DOM (Document Object Model) che viene utilizzato per caricare il rendering contenuto e questo accade ogni volta che viene caricata una pagina del sito.

Quindi, se Googlebot non è in grado di eseguire e visualizzare correttamente JavaScript, non eseguirà il rendering della pagina e del contenuto principale che volevi che vedesse, ed è qui che derivano la maggior parte dei problemi lato SEO.


Come verificare se il tuo sito Web è visualizzato correttamente

Per fare in modo che Googlebot visualizzi correttamente il tuo sito dovrai concentrarti sul rendering corretto sia dei link che dei contenuti.
Se non esegui il rendering dei link, Googlebot avrà difficoltà a scoprire nuove sezioni nel tuo sito e se non esegui correttamente i contenuti, Googlebot non sarà in grado di vederli.

Ecco alcune soluzioni per migliorare l'interazione SEO con JavaScript.

1. L'operatore 'site:'

site: ti mostra quante pagine del tuo sito web sono attualmente indicizzate da Google e se molte non sono ancora nell'indice, potrebbe essere un sintomo di problemi di rendering con i link.

Per i contenuti, devi trovare una determinata riga di testo che non è inclusa nel codice HTML iniziale pre-caricamento (cioè, che viene caricata solo dopo l'esecuzione di JavaScript).
Cerca quindi questa riga di testo nell'indice di Google usando il comando 'site:iltuodominio.it "TESTO CHE CERCHI"'.

Il comando SITE di Google per cercare una stringa di testo in un sito.

Questo stratagemma non funzionerà con il comando cache poiché le versioni delle tue pagine li memorizzate contengono il codice originale e non ancora sottoposto a rendering.

2. Gli aggiornamenti di GoogleBot

Googlebot è il Crawler che visita le pagine web per includerle nell'indice di Ricerca di Google.
La domanda numero uno che Google ha sempre ricevuto dalla community in occasione di svariati eventi è stata se si poteva aggiornare Googlebot all'ultima versione di Chromium.
Al momento in cui scrivo, GoogleBot lavora sull'ultima versione di Chrome, 74.
Questo è un punto di svolta per la SEO, perché ora puoi controllare come Google esegue effettivamente il rendering di una pagina invece di indovinare e sperare per il meglio.

Nuove funzionalità da Google

3. Strumenti di sviluppo di Chrome

Alcune parti del tuo sito Web basato su JavaScript potrebbero essere sviluppate per essere eseguite in base all'azione di un determinato utente: un clic, uno scorrimento, ecc.
Tuttavia, Googlebot non è un utente, quindi, non cliccherà, non scorrerà verso il basso e non vedrà il contenuto in seguito a queste azioni.
Il modo più rapido e semplice per verificare se tutti gli elementi basati su JavaScript siano caricati senza alcuna azione dell'utente è utilizzare Chrome DevTools:

Apri il tuo sito web in Chrome

Apri la scheda Elementi in DevTools

Guarda come è stata visualizzata la tua pagina attraverso il DOM reale creato dal browser: assicurati che tutti gli elementi di navigazione e di contenuto cruciali siano presenti.

Ti consiglio di verificarlo in Chrome 41. Questo ti darà la certezza che l'elemento può essere visto tecnicamente da Googlebot ma puoi anche farlo nella tua versione attuale di Chrome e fare dei confronti.

Gli strumenti di analisi di Chrome.

4. Recupero e rendering di Google Search Console

Un altro utile strumento che può fornirti un'idea di come Google esegue il rendering del tuo sito Web, è la funzione Recupera e visualizza in Google Search Console.
La trovi qui.

Recupera e visualizza da Search Console.

 

Così facendo capirai se Googlebot può eseguire il rendering della tua pagina e visualizzare articoli, testi o link correlati in modo corretto.
Da Google Search Console puoi anche utilizzare il test di ottimizzazione mobile che ti mostrerà eventuali errori JavaScript e il codice della pagina sottoposta a rendering.

5. Analisi dei registri del server

Per verificare come Googlebot esegue la Scansione del tuo sito web è possibile eseguire l'analisi dei log server.
Esaminando attentamente i log del server, puoi verificare se URL specifici e sezioni sono state o meno scansionate da Googlebot.

Nei server log puoi analizzare molti elementi, ad esempio, puoi verificare se Googlebot visita tutti i tuoi articoli, anche quelli datati, e tutte le sezioni del sito; in caso contrario, probabilmente c'è un problema che potrebbe essere causato da errori di rendering JS.

I log del server non ti mostrano come Googlebot vede le pagine. Puoi solo verificare se sono state visitate e quali codici di risposta hanno restituito, sarà necessaria poi un'ulteriore analisi per determinare se JavaScript ha causato o meno problemi.
Esaminando i log del server, puoi verificare se Googlebot ha richiesto il tuo codice JavaScript per il rendering HTML o se lo ha completamente ignorato.


Possibili problemi nel rendering JavaScript del tuo sito web

Anche se la tua pagina è visualizzata correttamente da Fetch and Render nella Search Console, devi tenere a mente alcuni punti.
Iniziamo con alcuni dei maggiori problemi che Javascript potrebbe creare, compromettendo seriamente la SEO.

1. Timeout

I valori esatti di timeout non sono mai stati specificati.
Fetch and Render ti mostra se la pagina può essere visualizzata da Google, ma non mostra i valori di timeout.
È importante ricordare che Fetch and Render è molto più tollerante di Googlebot, quindi dovrai solo assicurarti che gli script nella tua pagina possano essere caricati almeno in 5 secondi.

2. Limitazioni del browser

Come accennato in precedenza, Google utilizza una versione un po' obsoleta del suo browser per il rendering di siti Web: Chrome 41 infatti ha tre anni.
Poiché JavaScript e SEO si sono evoluti e continuano a evolversi molto velocemente, alcune funzionalità presenti nelle ultime versioni di Chrome potrebbero non essere supportate nel vecchio Chrome 41.

La soluzione ideale è scaricare il browser Chrome 41 (al momento in cui scrivo, Chrome 41 è la versione che utilizza Google per il rendering web) e familiarizzare con esso. Controlla il registro della console per vedere dove si verificano eventuali errori e chiedi ai tuoi sviluppatori di risolverli, oppure, contatta il supporto dei template che usi perché spesso i problemi si annidano negli stupendi effetti che alcuni template offrono (e qui non faccio nomi su un noto template per Wordpress che crea troppe rogne lato SEO).

3. Contenuto che richiede l'interazione dell'utente per il caricamento

Googlebot non si comporta come un utente.
Googlebot non fa clic sui pulsanti, non espande i "leggi di più", non entra nelle schede, non compila nessun modulo. Googlebot si limita a leggere e seguire link.
Ciò significa che l'intero contenuto di cui desideri eseguire il rendering deve essere caricato immediatamente nel DOM e non dopo che l'azione è stata eseguita da azioni varie, come ad esempio l'apertura di un menu hamburger.

Cosa possiamo fare per aiutare Googlebot a migliorare il rendering dei siti Web?

Esistono molte tecniche che gli sviluppatori possono applicare per aiutare Googlebot ad eseguire il rendering.

Evita i link "OnClick".
I motori di ricerca non trattano 'onclick="window.location="' come normali link, il che significa che nella maggior parte dei casi non seguiranno questo tipo di navigazione.
È fondamentale che i link siano nel DOM prima che venga effettuato il clic. Puoi verificarlo aprendo gli Strumenti per sviluppatori in Chrome 41 e verificare se i link importanti sono già stati caricati, senza azioni aggiuntive dell'utente.

Funzione

Evita #negli URL.
L'identificatore # non è supportato ed è ignorato da Googlebot: invece di usare la struttura dell'URL esempio.com/#url , attieniti ad una formattazione pulita dell'URL: esempio.com/url

Identificatore CANCELLETTO negli url Javascript.

URL univoci per contenuti univoci
I tuoi contenuti devono trovarsi "da qualche parte" affinché un motore di ricerca possa trovarli e indicizzarli. Questo è il motivo per cui è importante ricordare che se modifichi dinamicamente i tuoi contenuti lasciando inalterato un URL, confonderai Google.

Evita gli errori JavaScript
L'HTML è molto tollerante, ma JavaScript sicuramente non lo è.
Se il tuo sito web contiene errori negli script JS, questi non verranno eseguiti, il che potrebbe comportare la mancata visualizzazione del contenuto del tuo sito web, e un errore nello script può causare un effetto domino con conseguenti altri problemi.
Per controllare il codice e mantenere i tuoi JavaScript privi di errori, puoi utilizzare ancora una volta Chrome DevTools ed esaminare la scheda Console per vedere quali problemi si sono verificati e in quale riga del codice.

Non bloccare JavaScript in robots.txt
Il blocco dei file JS è una pratica molto vecchia e spesso la si trova ancora come impostazione predefinita in alcuni CMS.
Se l'obiettivo è ottimizzare il crawl budget bloccando la Scansione dei file JS (e i fogli di stile CSS), si tratta di una pessima pratica.

Google stesso raccomanda:

"We recommend making sure Googlebot can access any embedded resource that meaningfully contributes to your site's visible content, or to its layout. That will make Fetch as Google easier for you to use, and will make it possible for Googlebot to find and index that content as well."

In definitiva non bloccare la Scansione dei Crawler dei motori di ricerca aggiungendo queste righe:

user-agent: *
Disallow: /*.css$
Disallow: /*js$

Prerender
Quando scopri che Google ha un problema di rendering Javascript sul tuo sito Web, puoi avvalerti del prerendering.

Il prerendering, come intuible dal termine, fornisce un documento HTML del tuo sito web.
Ciò significa che Googlebot non riceve il codice render HTML dal JS, ma puro HTML già fruibile, mentre l'utente che visita il sito ottiene la versione JavaScript della tua pagina.

La soluzione più comune è utilizzare servizi esterni per il prerendering, come Prerender.io, che è compatibile con tutti i framework JS più importanti.
In sostanza, esegui il rendering dell' HTML aggiungendo un middleware o uno snippet al tuo server web.

Conclusioni

JavaScript è l'argomento più dinamico e critico nel mondo della SEO e merita attenzione, soprattutto perché in continuo sviluppo.

I problemi descritti in questo articolo sono solo una piccola parte di ciò che puoi analizzare per assicurarti che Googlebot stia visualizzando correttamente il tuo sito web per poterlo indicizzare.

 

Write comments...
symbols left.
or post as a guest
Loading comment... The comment will be refreshed after 00:00.

Be the first to comment.

Andrea Giudice Esperto seo e consulente google ads itlaiaAndrea Giudice, esperto SEO e consulente Google ADS

Contattami subito senza impegno per un analisi al tuo sito o per dare vita ad un progetto in rete

Chiedi una consulenza

Contatti

Scegli il tuo piano SEO

 

Andrea Giudice su Facebook Andrea Giudice su Twitter Andrea Giudice su linkedin Andrea Giudice su instagram Il feed del blog di Andrea Giudice esperto seo freelance

Abbiamo 31 visitatori e nessun utente online

Ultimi commenti