JavaScript SEO: Come ottimizzare JS per i motori di ricerca

Se sei un’azienda o un imprenditore che vuole acquistare una consulenza SEO di un’agenzia SEO o di un SEO Freelance, dovrai familiarizzare con alcune tecniche che fanno parte dell’ottimizzazione del tuo sito.

JavaScript SEO è una branca della SEO tecnica che si concentra sulla facilità di indicizzazione, rendering e crawling dei siti web costruiti con JavaScript da parte dei motori di ricerca.

Tra le attività comuni quando si parla di JavaScript SEO ci sono le seguenti:

• ottimizzazione dei contenuti iniettati tramite JavaScript.
• Implementazione corretta del lazy loading.
• Seguire le migliori pratiche di link interno.
• Prevenire, trovare e correggere i problemi di JavaScript.
• E altro ancora.

Come Google esegue il crawling e l’indicizzazione di JavaScript?

Google elabora JS in tre fasi:

• crawling;
• Rendering.
• Indicizzazione.

Il web crawler di Google (noto come Googlebot) mette in coda le pagine per il crawling e il rendering. Esegue il crawling di ogni URL nella coda. Googlebot invia una richiesta, poi il server invia il documento HTML. Successivamente, Googlebot decide quali risorse ha bisogno di elaborare per il contenuto della pagina.

Ciò significa che Googlebot esegue il crawling dell’HTML, non dei file JS o CSS, poiché il rendering di JavaScript richiede molte risorse. Pensa a tutta la potenza di elaborazione di cui Googlebot ha bisogno per scaricare, leggere ed eseguire JS per trilioni di pagine su quasi 2 miliardi di siti web ed ecco spiegato perché limita la scansione dei JS.

Pertanto, Google differisce il rendering di JavaScript. Mette in coda tutto ciò che non è stato eseguito per elaborarlo in seguito, man mano che le risorse diventano disponibili.

Quando le risorse lo permettono, un Chromium senza interfaccia utente (browser Chrome senza interfaccia utente) fa il rendering della pagina ed esegue JavaScript.

Googlebot elabora nuovamente l’HTML renderizzato per trovare i link e mette in coda gli URL trovati per il crawling.

Nell’ultimo passaggio, Google utilizza l’HTML renderizzato per indicizzare la pagina.

Rendering lato server, Rendering lato client e Rendering dinamico

I problemi di indicizzazione di JavaScript di Google si basano principalmente su come un determinato sito esegue il rendering di questo codice: lato server, lato client o rendering dinamico.

Rendering lato server

Il rendering lato server (SSR) avviene quando JavaScript viene eseguito sul server. Una pagina HTML renderizzata viene quindi fornita al client (browser, Googlebot, ecc.).

Ad esempio, quando visiti un sito web, il tuo browser invia una richiesta al server che detiene i contenuti del sito.

Una volta elaborata la richiesta, il tuo browser restituisce l’HTML renderizzato e lo mostra sullo schermo.

SSR tende ad aiutare le pagine a migliorare le loro performance SEO perché:

• può ridurre il tempo necessario per il caricamento del contenuto principale di una pagina.
• Può ridurre gli spostamenti di layout che danneggiano l’esperienza dell’utente.

Tuttavia, SSR può aumentare il tempo necessario per consentire l’input dell’utente sulla tua pagina.

Pertanto, alcuni siti web che utilizzano ampiamente JS optano per l’uso di SSR per alcune pagine e non per altre.

In modelli ibridi come questo, SSR di solito è riservato alle pagine che sono importanti ai fini SEO. Mentre il rendering lato client (CSR) è di solito riservato alle pagine che richiedono molte interazioni e input dell’utente.

Ma l’implementazione di SSR è spesso complessa e impegnativa per gli sviluppatori.

Tuttavia, ci sono strumenti per aiutare a implementare SSR:

• Gatsby e Next.JS per il framework React.
• Angular Universal per il framework Angular.
• Nuxt.js per il framework Vue.js.

Leggi questa guida per saperne di più su come impostare il rendering lato server.

Rendering lato client

Il rendering lato client (CSR) è il contrario del rendering lato server. In questo caso, JavaScript viene eseguito lato client (browser o Googlebot) utilizzando il Document Object Model (DOM).

Invece di ricevere il contenuto dal documento HTML come nel rendering lato server, ottiene un HTML di base con un file JavaScript che fa il rendering del resto del sito utilizzando il browser.

La maggior parte dei siti web che utilizzano CSR hanno interfacce utente complesse o molte interazioni.

Scopri di più su come configurare il rendering lato client leggendo questa guida.

Rendering dinamico

Il rendering dinamico è un’alternativa al rendering lato server.

Essenzialmente, rileva i bot che possono avere problemi con il contenuto generato da JS e fornisce una versione renderizzata sul server senza JavaScript.

Tutto ciò mentre mostra agli utenti la versione renderizzata lato client.

Il rendering dinamico è una soluzione alternativa e non una soluzione raccomandata da Google. Crea complessità e risorse aggiuntive per Google.

Puoi considerare di utilizzare il rendering dinamico se hai un sito web di grandi dimensioni con contenuti che cambiano rapidamente e devono essere indicizzati rapidamente. Oppure se il tuo sito dipende dai social media e dalle app di chat che hanno bisogno di accedere al contenuto di una pagina. O se i crawler importanti per il tuo sito non supportano alcune delle funzioni del tuo JS.

Il rendering dinamico è raramente una soluzione a lungo termine. Puoi saperne di più sull’implementazione del rendering dinamico e su alcuni approcci alternativi dalle linee guida di Google.

Nota: In generale, Google non considera il rendering dinamico come “cloaking” (presentare contenuti diversi ai motori di ricerca e agli utenti). Anche se il rendering dinamico non è l’ideale per altre ragioni, è improbabile che violi le regole di cloaking illustrate nelle politiche antispam di Google.

Come ottimizzare il contenuto JavaScript del tuo sito web in modo che sia SEO friendly?

Puoi seguire diversi passaggi per garantire che i motori di ricerca indicizzino, effettuano il rendering ed eseguano il crawling del contenuto JS del tuo sito web correttamente.

Usa Google Search Console per trovare gli errori

Googlebot si basa sull’ultima versione di Chrome ma non si comporta allo stesso modo di un browser.

Ciò significa che lanciare il tuo sito web non garantisce che Google possa renderizzare il suo contenuto.

Lo strumento di ispezione degli URL in Google Search Console (GSC) può verificare se Google può renderizzare le tue pagine.

Inserisci l’URL della pagina che vuoi testare nella parte superiore e premi Invio.

Successivamente, fai clic sul pulsante “Testa URL in tempo reale” sulla destra.

Dopo uno o due minuti, lo strumento mostrerà una scheda “Test in tempo reale”. Ora, fai clic su “Visualizza pagina testata” e vedrai il codice della pagina e uno screenshot.

Controlla eventuali discrepanze o contenuti mancanti cliccando sulla scheda “Altre informazioni”.

Un motivo comune per cui Google non può renderizzare le pagine JS è perché il file robots.txt del tuo sito blocca il rendering. Spesso in modo accidentale.

Aggiungi il seguente codice al file robot.txt per assicurarti che nessuna risorsa cruciale venga bloccata dal crawling:

User-Agent: Googlebot
Allow: .js
Allow: .css

Nota: Google non indicizza i file .js o .css nei risultati di ricerca. Non c’è motivo di bloccare queste risorse cruciali. Farlo può impedire al tuo contenuto di essere renderizzato correttamente e, di conseguenza, di essere indicizzato.

Assicurati che Google stia indicizzando il contenuto JavaScript

Una volta confermato che le tue pagine vengono renderizzate correttamente, assicurati che vengano indicizzate.

Puoi verificare questo in GSC o sul motore di ricerca stesso.

Per verificare su Google, utilizza il comando “site:”. Ad esempio, sostituisci “tuodominio.com” di seguito con l’URL della pagina che vuoi testare:

site:tuodominio.com/URL-della-pagina/

Se la pagina è indicizzata, la vedrai come risultato, come mostrato qui:

Le pagine indicizzate vengono mostrate nei risultati della SERP.

Se non la vedi, la pagina non è nell’indice di Google.

Se la pagina è indicizzata, controlla se una sezione del contenuto generato da JavaScript viene indicizzata.

Ancora una volta, usa il comando “site:” e includi uno snippet di contenuto JS sulla pagina.

Ad esempio:

site:tuodominio.com/URL-della-pagina/ “snippet di contenuto JS”

Stai verificando se questa specifica sezione di contenuto JS è stata indicizzata. Se lo è, lo vedrai all’interno dello snippet, come questo:

Il contenuto all’interno di JS è indicizzato e viene mostrato nella SERP.

Puoi anche utilizzare GSC per vedere se il contenuto JavaScript è indicizzato. Di nuovo, utilizzando lo strumento di ispezione degli URL.

Questa volta, anziché testare l’URL in tempo reale, fai clic sul pulsante “Visualizza pagina crawldata” e controlla il codice sorgente HTML della pagina.

Scansiona il codice HTML per trovare snippet di contenuto JS.

Se non vedi il tuo contenuto JS, potrebbe essere per diverse ragioni:

• il contenuto non può essere renderizzato.
• L’URL non può essere scoperto perché il JS genera link interni che puntano ad esso in caso di clic.
• La pagina ha un timeout durante l’indicizzazione del contenuto da parte di Google.

Esegui un audit del sito

Eseguire regolarmente audit SEO sul proprio sito è una pratica ottimale di SEO tecnica.

Attraverso la nostra pagina per l’analisi di un sito web puoi richiedere di analizzare il tuo portale così ti possiamo aiutare a trovare i problemi come quelli generati dai JavaScript.

Solitamente scoviamo i problemi JS mettendo in pratica le informazioni che abbiamo visto nella guida ma usiamo anche altri strumenti come Screaming Frog o SemRush.

Problemi principali si SEO JavaScript e come evitarli

Ecco alcuni dei problemi più comuni, nonché alcune delle migliori pratiche per il SEO JavaScript:

• Bloccare i file .js nel file robots.txt può impedire a Googlebot di crawlerizzare tali risorse. Ciò significa che non può renderizzare e indicizzarle. Occorre consentire il crawling di questi file per evitare questo problema.
• Google non aspetta molto tempo per effettuare il rendering del contenuto JS. Il tuo contenuto potrebbe non essere indicizzato a causa di un errore di timeout.
• I motori di ricerca non cliccano sui pulsanti. Usa i link interni per aiutare Googlebot a scoprire le pagine del tuo sito. Se vuoi automatizzare i link interni nei tuoi articoli, clicca sul link per leggere la nostra guida.
• Quando si carica in modo lazy una pagina utilizzando JS, non ritardare il caricamento del contenuto che dovrebbe essere indicizzato. Concentrati principalmente sulle immagini rispetto al contenuto testuale quando configuri il lazy loading.
• Google spesso ignora gli hash, quindi assicurati che vengano generati URL statici per le pagine web del tuo sito. Assicurati che le tue URL siano come queste: (tuodominio.com/pagina-web) e non come queste (tuodominio.com/#/pagina-web) o come queste (tuodominio.com#pagina-web).

Conclusioni

Se seguirai queste linee guida SEO JavaScript, sarai sulla buona strada per realizzare siti web efficienti con un buon posizionamento SEO e che gli utenti amano.

Ci sono molte risorse online che puoi utilizzare per saperne di più sulla SEO e su JavaScript. Ad esempio, puoi consultare le linee guida di Google sul rendering di JS o seguire blog come quello di John Mueller.

Inoltre, puoi continuare a sperimentare e monitorare i risultati attraverso Google Search Console.

In sintesi, la SEO JavaScript è un’importante considerazione tecnica per il posizionamento del tuo sito sui motori di ricerca. È importante ottimizzare il contenuto inserito tramite JS, implementare correttamente il lazy loading, seguire le migliori pratiche di linking interno e prevenire e risolvere eventuali problemi di JavaScript.

Se hai bisogno di un aiuto, contattaci per una consulenza SEO e ti aiuteremo ad ottimizzare correttamente il tuo sito, sfruttando le strategie dei nostri migliori consulenti SEO.