Oggi i motori di ricerca riescono a eseguire JavaScript e a indicizzare il contenuto generato. Ma molti siti hanno ancora problemi di JavaScript che danneggiano la SEO. Il contenuto che dipende da JavaScript per caricarsi può non essere indicizzato. Le immagini caricate in modalità lazy possono non essere trovate. Il rendering lato client può essere troppo lento. I motori di ricerca possono non aspettare che tutto si carichi. Una buona ottimizzazione di JavaScript fa in modo che i motori di ricerca vedano tutto il tuo contenuto, lo capiscano e possano scansionarlo in modo efficiente.
Come i motori di ricerca gestiscono JavaScript
Google scansiona le pagine come farebbe un browser. Esegue JavaScript, genera il contenuto e indicizza ciò che vede. È una buona notizia. Anche le applicazioni JavaScript complesse possono essere indicizzate.
Google elabora le pagine in due fasi. Nella prima scansiona l'HTML per vedere la struttura di base della pagina. Nella seconda esegue JavaScript per vedere il contenuto dinamico. Questo processo in due fasi richiede tempo e risorse.
Per le pagine con JavaScript complesso o rendering pesante, Google può non aspettare che tutto si carichi. Può indicizzare solo ciò che è visibile dopo qualche secondo di rendering. Il contenuto che si carica lentamente o in modalità lazy può non essere indicizzato.
Problemi comuni di JavaScript SEO
Il rendering lato client ritarda la visibilità del contenuto. Si carica una pagina HTML vuota che poi carica JavaScript per generare il contenuto. All'inizio Google vede la pagina vuota. Se il rendering richiede troppo tempo, Google può indicizzare la versione vuota.
Le immagini e i contenuti in lazy loading si caricano solo quando gli utenti scorrono la pagina. Google non scorre sempre. Il contenuto in lazy loading sotto la parte visibile può non essere trovato o indicizzato.
Gli errori JavaScript interrompono il rendering. Se JavaScript ha errori, la pagina può non essere generata correttamente. I motori di ricerca vedono un contenuto rotto e incompleto.
Gli URL generati dinamicamente con parametri (page?id=123&sessionid=abc) creano contenuti duplicati. Ogni parametro diverso crea un nuovo URL. I motori di ricerca possono vedere migliaia di duplicati dello stesso contenuto.
I meta tag generati da JavaScript possono non essere visti da tutti i crawler. I tag Open Graph, le Twitter card e altri meta tag aggiunti con JavaScript possono non essere letti correttamente dai crawler dei social media.
Rendering lato server e rendering lato client
Il rendering lato server genera l'HTML sul server e lo invia al browser. L'HTML contiene già tutto il contenuto. I browser lo mostrano subito. I motori di ricerca vedono subito tutto il contenuto.
Il rendering lato client invia un HTML minimo e JavaScript che costruisce la pagina nel browser. Il contenuto viene generato nel browser dopo l'esecuzione di JavaScript. Ci vuole più tempo e i motori di ricerca possono non vedere tutto.
Per la SEO sono meglio il rendering lato server o la generazione statica. L'HTML viene inviato completo al browser (e ai motori di ricerca). Il contenuto è visibile subito.
Come testare il rendering di JavaScript
Usa lo strumento Controllo URL di Google Search Console. Inserisci una pagina con molto JavaScript. Google mostra cosa ha trovato dopo il rendering. Puoi confrontare la pagina così come è stata scansionata (ciò che vede Google) con quella che vedi nel browser.
Usa Lighthouse negli strumenti per sviluppatori di Chrome. Verifica quanto è scansionabile la tua pagina e segnala i problemi legati a JavaScript.
Guarda il sorgente della pagina nel browser per vedere l'HTML grezzo. Poi ispeziona l'elemento per vedere il DOM generato. Confrontali. Se sono molto diversi, hai un rendering lato client che può confondere i motori di ricerca.
Usa un servizio per testare il sito su browser e dispositivi diversi. Simula ciò che Google scansiona e ciò che viene generato.
Buone pratiche per JavaScript SEO
Usa il rendering lato server (SSR) o la generazione di siti statici (SSG) per i contenuti critici. Così il contenuto è nell'HTML inviato ai motori di ricerca.
Precarica o carica subito i contenuti importanti. Non affidarti al lazy loading per i contenuti nella parte visibile della pagina. Carica subito le immagini e i testi critici.
Evita gli URL generati dinamicamente con parametri inutili. Usa URL semplici e puliti. Se devi usare i parametri, usa i tag canonical per riunire i duplicati.
Fai in modo che i meta tag siano nell'HTML o generati rapidamente da JavaScript. I crawler dei social media e i motori di ricerca dovrebbero vedere subito i meta tag, non dopo un rendering pesante.
Testa con Google Search Console. Controlla cosa vede Google dopo il rendering. Correggi qualsiasi differenza tra ciò che vedi tu e ciò che vede Google.
Riduci al minimo le dimensioni del bundle JavaScript. I file JavaScript grandi richiedono più tempo per essere scaricati ed eseguiti. I bundle più piccoli si generano più in fretta e i motori di ricerca scansionano più velocemente.
Framework e SEO
I framework moderni più diffusi usano di default il rendering lato client. Questo crea sfide per la SEO, perché il contenuto deve essere generato prima che i motori di ricerca possano vederlo.
Esistono meta-framework che aggiungono il rendering lato server o la generazione statica ai framework lato client. Risolvono molti dei problemi del rendering lato client.
Se usi un framework lato client senza rendering lato server, devi fare ancora più attenzione alla JavaScript SEO. Testa con cura con Google Search Console.
Domande frequenti
Google riesce a indicizzare i contenuti con molto JavaScript?
Sì, Google può eseguire JavaScript e indicizzare il contenuto generato. Però ci vogliono tempo e risorse. Un JavaScript molto pesante può non essere indicizzato del tutto se il rendering richiede troppo tempo. Mantieni JavaScript efficiente e testa con Google Search Console per assicurarti che il tuo contenuto venga indicizzato. Con il creatore di siti di WEMASY puoi impostarlo direttamente sul tuo sito.
Meglio il rendering lato server o lato client?
Il rendering lato server è meglio per la SEO. Il contenuto è nell'HTML inviato ai motori di ricerca. I motori di ricerca lo vedono subito, senza aspettare JavaScript. Il rendering lato client crea ritardi e rischia che il contenuto non venga indicizzato. Usa il rendering lato server o la generazione statica per i contenuti che devono posizionarsi nei risultati di ricerca.
Devo servire HTML diverso ai motori di ricerca?
No. Google preferisce che tu serva lo stesso HTML a tutti. Non creare versioni speciali per Googlebot. Usa un corretto rendering lato server o il rilevamento del rendering. Google scansionerà la normale versione per gli utenti e dovrebbe vedere tutto il contenuto.
Come correggo le immagini in lazy loading per la SEO?
Precarica le immagini critiche nella parte visibile della pagina. Usa il lazy loading nativo (loading="lazy") con alternative adatte per i browser più vecchi. Usa l'Intersection Observer API per caricare le immagini mentre gli utenti scorrono. Testa con Google Search Console per assicurarti che Google veda le tue immagini.
JavaScript rallenta il mio sito?
Sì, l'esecuzione di JavaScript richiede tempo. I bundle JavaScript grandi e le elaborazioni pesanti rallentano il caricamento della pagina. Questo danneggia l'esperienza dell'utente e i Core Web Vitals. Riduci le dimensioni del bundle JavaScript, dividi il codice e rimanda il JavaScript non critico. Carica solo ciò che serve.
Devo usare JavaScript per generare i meta tag?
Evitalo, se possibile. I meta tag dovrebbero essere nel sorgente HTML. I crawler dei social media e alcuni motori di ricerca possono non eseguire JavaScript. Se devi generare i meta tag con JavaScript, usa il rendering lato server o il pre-rendering per essere sicuro che siano nell'HTML.