La maggior parte dei siti web odierni impiega JavaScript per offrire dinamicità e interattività. Nonostante i motori di ricerca siano avanzati, potrebbero non interpretare correttamente tutti i contenuti creati tramite JavaScript, con ripercussioni sul posizionamento delle pagine.
La gestione dei contenuti JavaScript è fortemente influenzata dal metodo di rendering adottato dal sito.
Ad esempio, nel rendering lato server, il server ospita i contenuti del sito e, su richiesta, invia al browser una versione HTML già completa.
Al contrario, nel rendering lato client, è il browser a interpretare JavaScript attraverso il DOM.
Una terza opzione è il rendering dinamico, che invia i contenuti lato client al browser e quelli lato server ai motori di ricerca.
Le diverse tecniche di rendering influiscono sul modo in cui JavaScript viene interpretato, e quindi sul posizionamento delle pagine.
Per garantire che tutto il codice JavaScript del tuo sito sia correttamente elaborato, è fondamentale seguire le migliori pratiche SEO specifiche per JavaScript. Ma prima, vediamo nel dettaglio cos’è la SEO per JavaScript.
Cos’è la SEO per JavaScript?
La SEO per JavaScript permette ai motori di ricerca di scansionare e indicizzare senza difficoltà il codice JavaScript (ovvero i contenuti dinamici) di un sito o di una pagina web. Un motore di ricerca, come Google, elabora il JavaScript in tre fasi: scansione, rendering e indicizzazione. Perché Google possa compiere queste azioni, il contenuto JavaScript deve essere ottimizzato per la SEO, ovvero deve essere visibile e accessibile.
Come Google Gestisce i Contenuti JavaScript in una Pagina
Ecco i passaggi seguiti da Googlebot nell’elaborazione del JavaScript:
- Recupera un URL dalla coda di scansione tramite una richiesta HTTP.
- Verifica il file robots.txt per identificare gli URL non autorizzati alla scansione.
- Ignora gli URL bloccati, analizza la risposta per trovare altri URL e li aggiunge alla coda di scansione.
- Mette in coda le pagine per il rendering, a eccezione di quelle indicate come non indicizzabili.
- Chromium esegue il rendering della pagina, interpreta JavaScript e indicizza la pagina.
- Analizza di nuovo l’HTML renderizzato per individuare i link.
- Aggiunge gli URL alla coda per la scansione.
Quando Google non Indicizza i Contenuti JavaScript?
Google può indicizzare JavaScript se implementato correttamente. Se, ad esempio, alcuni file JS e CSS sono nascosti, Google potrebbe non riuscire a scansionare correttamente il sito. Analogamente, se l’HTML non elaborato contiene link non presenti nell’HTML renderizzato, Google potrebbe non scansionare o indicizzare tali collegamenti.
Inoltre, se JavaScript non è direttamente incluso nell’HTML, Google deve scaricare il file per poterlo eseguire. I motori di ricerca possono anche utilizzare una versione memorizzata nella cache di una pagina web (per ottimizzare le prestazioni), e in tal caso il JavaScript sulla pagina potrebbe non essere sincronizzato con la versione in cache.
Dato che ogni porzione di codice JavaScript deve essere letta, un uso eccessivo può rallentare la velocità di caricamento della pagina o generare errori di timeout.
Perché la SEO per JavaScript è Importante?
La SEO per JavaScript è essenziale perché incide su molti elementi della pagina e sui fattori di ranking che Google (o altri motori di ricerca) prendono in considerazione per la SEO:
| Elemento della Pagina | Potenziale Problema SEO | Possibile Soluzione SEO |
| Contenuto Renderizzato | I motori di ricerca (come Google) non possono visualizzare la tua pagina se le sue risorse sono bloccate nel file robots.txt. Inoltre, Google non può indicizzare o eseguire il rendering di file JS e CSS che sono bloccati o nascosti. | Riduci la quantità di JavaScript nel contenuto principale della pagina. Esplora alternative al rendering lato client come il rendering lato server, il rendering dinamico o il rendering ibrido (che combina lato client e lato server). |
| Collegamenti | Se alcuni collegamenti sono interni o se JavaScript genera collegamenti a un URL quando l’utente fa clic su di esso, Google non è in grado di individuarli. | Usa i link di ancoraggio con l’attributo href e testi di ancoraggio descrittivi. I collegamenti pseudo, come quelli creati con i tag
o , non vengono scansionati.
|
| Metadati | Se il sito non usa pacchetti Node.js come vue-meta, i motori di ricerca potrebbero visualizzare metadati incompleti o, nel peggiore dei casi, non visualizzarli affatto per ciascuna pagina o visualizzazione. | Utilizza pacchetti Node.js come react-helmet, vue-meta o react-meta-tags. |
| Immagini a Caricamento Lento | Il crawler dei motori di ricerca non seleziona i contenuti contrassegnati per il caricamento lento. Il motore di ricerca non può scorrere i contenuti e alcuni potrebbero non essere mai visualizzati. | Usa l’API IntersectionObserver per comprendere la visibilità e la posizione degli elementi DOM una volta disponibili. Puoi anche utilizzare la funzionalità di caricamento lento nativa del browser (Chrome). |
| Tempi di Caricamento della Pagina | Una pagina con molti contenuti JavaScript potrebbe caricarsi lentamente, penalizzando il posizionamento nei risultati di ricerca. | Aggiungi il codice JavaScript critico in linea e rimanda il codice JavaScript non critico al termine del rendering del contenuto principale, riducendo la quantità complessiva di codice JavaScript. |
Best Practice per la SEO JavaScript
Adottando alcune delle migliori pratiche, possiamo migliorare la scansione e l’interpretazione delle pagine da parte dei motori di ricerca:
Inserisci Link e Immagini in Modo Standard
Aggiungi i link usando i tag <a href> invece di onclick, #pageurl o window.location.href=’/page-url’. In questo modo, Google potrà scansionare e seguire facilmente i link.
<a href=”https://winadmin.it.com”>Benvenuto nel mondo Geek</a>
Analogamente, aggiungi le immagini con il tag <img src>, anziché con il tag <img data-src>:
<img src=”myimg.png” />
Preferisci il Rendering Lato Server
Assicurati che i contenuti del tuo sito siano accessibili sul server, oltre che nel browser dell’utente.
Verifica che l’HTML Renderizzato Contenga Tutti i Contenuti Importanti
L’HTML renderizzato deve contenere i tag <title>, i metatag per i robot, le meta descrizioni, le immagini, i dati strutturati e i tag canonici.
Come Rendere un Sito Web JavaScript SEO Friendly
Per valutare l’implementazione della SEO per JavaScript sulla tua pagina web, puoi seguire questi passaggi:
- Determina quanto JavaScript utilizza il tuo sito: puoi farlo disabilitando JavaScript nel browser. Se noti una diminuzione significativa dei contenuti, il tuo sito si basa in gran parte su JavaScript.
- Verifica se Googlebot accede a tutti i contenuti e tag importanti: puoi usare lo Strumento di test ottimizzato per dispositivi mobili di Google o lo strumento di test dei risultati multimediali per capire come Googlebot usa l’HTML non elaborato per mostrare i contenuti.
- Puoi anche usare estensioni di Chrome come Visualizza sorgente renderizzata per esaminare come JavaScript modifica la pagina e confrontare l’HTML sorgente con quello renderizzato.
- Verifica i tag importanti (titolo, meta descrizione, ecc.) nell’HTML renderizzato usando l’estensione di Chrome SEO Pro Extension.
Conclusione
Questo articolo ha illustrato come JavaScript possa complicare la gestione SEO e le strategie per affrontare le problematiche causate da un uso eccessivo di JavaScript.
Abbiamo anche analizzato diverse best practice e strumenti utili per rendere il tuo sito web JavaScript SEO-friendly. Altri strumenti utili per aiutare Google a riconoscere e scansionare i tuoi contenuti dinamici sono Prerender, AngularJS e Huckabuy.
Ti consigliamo anche di esaminare le tecniche per ridurre il tempo di caricamento del sito web.
L’articolo ti è stato utile? Condividilo con altri!