Comprensione del rendering JavaScript per la SEO (+6 semplici modi per testare!)

JavaScript è un potente linguaggio di programmazione che può migliorare l'esperienza dell'utente e aggiungere interattività ai siti web.

Ma ecco il punto: i motori di ricerca non vanno sempre d'accordo con JavaScript .

È importante capire in che modo il rendering JavaScript influisce sulla SEO. Quindi, puoi adottare le misure necessarie per garantire che il tuo sito web ottenga la visibilità che merita.

In questa guida tratteremo:

• Gli aspetti da conoscere del rendering JavaScript
• Sei semplici modi per testare come i motori di ricerca visualizzano il tuo sito web
• Tecniche SEO pratiche per siti JavaScript

Che cos'è JavaScript e cosa significa il rendering?

JavaScript è un popolare linguaggio di programmazione per la creazione di pagine Web dinamiche e interattive.

Quando Google esegue la scansione di un sito Web, deve comprendere il contenuto e la struttura del sito per indicizzarne le pagine.

Utilizza un processo chiamato "rendering JavaScript" per raggiungere questo obiettivo. Google esegue il codice JavaScript e quindi analizza il contenuto HTML risultante.

Fonte immagine

Ciò consente ai motori di ricerca di indicizzare i contenuti generati dinamicamente.

Tuttavia, questo processo non è perfetto. Google impiega 9 volte più tempo per eseguire la scansione dei contenuti JavaScript nelle pagine rispetto a una semplice pagina HTML.

A volte i motori di ricerca non eseguono JavaScript in modo completo o corretto , lasciando preziosi elementi della pagina non rilevati dai crawler e potenzialmente inibendo il posizionamento.

Quali sono i problemi con JavaScript per SEO?

Uno dei problemi principali è che i motori di ricerca possono avere difficoltà a eseguire la scansione e il rendering dei contenuti generati da JavaScript.

Se Google non riesce a eseguire la scansione di un elemento di una pagina, quella sezione di contenuto non verrà aggiunta all'indice di Google .

In alcuni casi, questo può essere l'intero contenuto di una pagina, il che significa nessuna possibilità di posizionamento!

Una pagina non scansionabile non solo impedisce la sua capacità di classificare, ma può anche inibire la SEO di un sito in generale .

Se Google vede più pagine come identiche a causa di un errore con il rendering JavaScript, potrebbe trattarle erroneamente come contenuti duplicati. Ciò può portare a una canonicalizzazione indesiderata o a pagine importanti completamente ignorate dai crawler, il che può essere dannoso per la tua SEO complessiva.

Qualsiasi link su una pagina che un crawler non è riuscito a visualizzare non verrà nemmeno scansionato, quindi nessuna equità di collegamento da quella pagina passerà a fonti interne o esterne.

Con collegamenti interni significativi che vengono persi dai crawler, anche la comprensione da parte di un motore di ricerca della navigazione del tuo sito potrebbe essere distorta, mentre esiste anche la possibilità che pagine importanti vengano trattate come pagine orfane .

Alcuni altri problemi SEO che potrebbero derivare da un rendering JavaScript non riuscito includono:

• Immagini eliminate dall'indice, riducendo il traffico di immagini.
• I titoli delle pagine generati dinamicamente possono essere trascurati, influenzando le classifiche di ricerca e le percentuali di clic.

Perché utilizzare JavaScript per un progetto SEO?

Quindi, ci possono essere molti mal di testa SEO causati da JavaScript.

Potresti chiederti perché dovresti mai utilizzare JavaScript per un progetto SEO , dati questi potenziali problemi.

Bene, in realtà ci sono molte ragioni per cui vorresti usarlo per un progetto di sviluppo web.

JavaScript può migliorare in modo significativo l'esperienza utente e il coinvolgimento sul tuo sito web. Puoi usarlo per creare presentazioni, animazioni e altre funzioni interattive.

Può anche migliorare le prestazioni e la velocità del tuo sito web. Puoi ottimizzare il tuo sito utilizzando il lazy loading, la suddivisione del codice, la memorizzazione nella cache e i service worker.

Puoi anche creare contenuti dinamici e personalizzati in base al comportamento, alle preferenze e alla posizione dell'utente.

C'è un motivo per cui oltre il 98% dei siti web utilizza JavaScript.

Il Web è passato dal semplice HTML: come SEO puoi abbracciarlo. Impara dagli sviluppatori JS e condividi con loro le conoscenze SEO. JS non se ne andrà.

— John Mueller (ufficiale) · #StaplerLife (@JohnMu) 8 agosto 2017

Devi solo usarecorrettamenteJavaScript e testare eventuali problemi!

6 semplici modi per testare il rendering JavaScript per SEO

Testare il rendering JavaScript può aiutarti a identificare potenziali problemi che potrebbero impedire a Google di eseguire la scansione e l'indicizzazione dei tuoi contenuti.

Ecco sei semplici modi per farlo :

1. Verifica se Chrome può caricare la pagina quando JavaScript è bloccato

Il primo punto di riferimento è disabilitare JavaScript dal tuo browser.

Se il tuo browser non è in grado di visualizzare completamente il contenuto, allora deve esserci un problema con il rendering di JavaScript in un documento HTML.

Una volta caricata la pagina in Google Chrome, fai clic sul lucchetto nella barra degli indirizzi e seleziona "Impostazioni sito".

Quindi, scorri verso il basso fino a JavaScript e seleziona Blocca.

Quando torni alla scheda, Chrome ti suggerirà di ricaricare la pagina. Fare clic su Ricarica.

Riesci ancora a vedere il contenuto?

Se la pagina è completamente scomparsa, come nell'esempio sopra, c'è evidentemente un problema con il rendering JavaScript della pagina.

Probabilmente Google non sarà in grado di eseguire la scansione dei contenuti.

In alcuni casi, nella pagina mancheranno solo alcune funzionalità, come i banner pubblicitari.

Stai cercando di verificare che tutti i contenuti di cui vuoi eseguire la scansione siano visibili. Ad esempio, se Google non riesce a eseguire la scansione di interi paragrafi, perderà informazioni chiave, compromettendo il potenziale di posizionamento della pagina.

Non è solo il contenuto del corpo della pagina a rischio...

2. Controlla come uno strumento di analisi SEO visualizza la pagina

L'utilizzo di uno strumento di analisi SEO rapido e semplice è un modo ancora più semplice per identificare i problemi SEO JavaScript.

Imitando il processo di scansione, puoi ottenere qualche indicazione su come i motori di ricerca interpretano la pagina.

Fai clic sull'icona nella barra degli indirizzi e ripristina nuovamente l'autorizzazione di JavaScript in Chrome.

Ora, analizza il SEO on-page della pagina web utilizzando un componente aggiuntivo del browser come SEOMinion.

Verrà avviata una barra laterale. Ora seleziona "Analizza SEO on-page".

Usa il report generato e confrontalo con ciò che puoi effettivamente vedere sulla pagina:

• Qual è il conteggio delle parole della pagina?
• Sono presenti tutti i tag Heading?
• Il numero di immagini è corretto?
• Ci sono altri elementi che appaiono in modo diverso a seconda dello strumento di analisi?

In questo esempio, possiamo vedere che il conteggio delle parole per la pagina è solo una parola, il che renderebbe un articolo molto sottile!

C'è solo un tag di intestazione (l'H1) sulla pagina, e questo sembra funzionare bene. Ma, se ci fossero tag H2 o H3, probabilmente non funzionerebbero, poiché il conteggio delle parole indica che il corpo del contenuto non viene visualizzato correttamente.

La pagina ha tre immagini, ma questo strumento mostra che solo una è visibile.

Durante il download del file immagine, abbiamo scoperto che questo era il logo del sito (estratto dall'intestazione).

Se ciò che puoi vedere è in conflitto con ciò che "vede" il rapporto, allora questa è un'altra indicazione che il contenuto all'interno del corpo della pagina non può essere scansionato correttamente.

3. Test ottimizzato per dispositivi mobili di Google

Puoi anche utilizzare lo strumento Test ottimizzato per dispositivi mobili di Google per controllare il codice HTML visualizzato della tua pagina web.

Inserisci l'URL che vuoi controllare e vedrai uno screenshot della pagina sul lato destro della pagina dei risultati.

Questa è una rappresentazione visiva di come Googlebot vede la tua pagina. Puoi confrontare lo screenshot con la tua pagina e verificare la presenza di elementi mancanti.

Se noti qualcosa di irregolare, controlla l'HTML renderizzato e identifica se manca qualcosa nello screenshot anche nel codice HTML.

Nota: Google rimuoverà questo strumento alla fine del 2023. Non preoccuparti però, poiché la SEO Kristina Azarenko ha un'ottima soluzione, sia per ora che per quando si presenterà:

Google abbandonerà lo strumento Mobile-Friendly Test alla fine di quest'anno.

Per molto tempo, molti SEO tecnici hanno utilizzato lo strumento Mobile-Friendly Test per controllare il codice HTML di una pagina. È molto utile quando non hai accesso allo strumento di controllo URL di Google Search Console... pic.twitter.com/AcSh7J7jhu

— Kristina Azarenko (@azarchick) 12 giugno 2023

Questo ci porta perfettamente a...

4. Strumento per i risultati multimediali di Google

Il Rich Results Test di Google offre informazioni simili su come Googlebot esegue il rendering dei file JavaScript.

Inserisci il tuo URL ed esegui un test per vedere uno screenshot che rivela come Googlebot vede la pagina.

5. Ispezione dell'URL di Google Search Console

Puoi utilizzare lo strumento Controllo URL di Google Search Console per controllare il rendering di JavaScript per un URL specifico sul tuo sito web.

Lo strumento fornirà informazioni dettagliate sullo stato di indicizzazione della pagina e sul rendering JavaScript.

Indicherà se JavaScript viene eseguito correttamente o presenta problemi.

Prestare attenzione agli errori relativi all'esecuzione di JavaScript. Questi possono influenzare il modo in cui i motori di ricerca comprendono e indicizzano i tuoi contenuti.

6. Utilizzare uno strumento di rendering specializzato

Un altro modo efficace per testare il rendering JavaScript per SEO è utilizzare uno strumento di rendering specializzato.

Questi strumenti simulano il modo in cui i crawler dei motori di ricerca interagiscono con JavaScript e visualizzano le pagine web.

Strumenti gratuiti:

• Fetch & Render: questo strumento imita il processo di rendering (simile agli strumenti di ispezione di Google) ma ti consente di testare utilizzando diversi agenti utente.
• Lo strumento di test di pre-rendering consente di confrontare le informazioni di pre-rendering di diversi crawler. Inserisci semplicemente il tuo URL e seleziona un agente utente e ti consentirà di confrontare i contenuti che vengono offerti a diversi crawler prima del processo di rendering.

Strumenti a pagamento:

Oggi sono disponibili molti software SEO tecnici davvero potenti, particolarmente utili per progetti su larga scala o a livello aziendale.

Tutti i seguenti includono strumenti per testare il rendering JavaScript:

• Botifica
• JetOctopus
• Lumar
• Rana Urlante
• OnCrawl
• Semrush

Indipendentemente dallo strumento che utilizzi, assicurati che i seguenti elementi vengano visualizzati correttamente per garantire la scansione e l'indicizzabilità e che il tuo contenuto sia classificato nel miglior modo possibile dal punto di vista tecnico:

• Copia sulla pagina
• immagini
• Etichetta canonica
• Titolo e metadescrizione
• Tag meta robot
• Dati strutturati
• Hreflang
• Tag di intestazione
• video
• Contenuti all'interno di elementi interattivi (ad es. caratteristiche della fisarmonica)

Come rendere il tuo sito JavaScript SEO-friendly

Puoi implementare diverse best practice SEO JavaScript per aiutare i motori di ricerca a scansionare e indicizzare le tue pagine web in modo efficace.

Collegamenti

Utilizza i tag di ancoraggio HTML con un attributo href per i tuoi collegamenti interni ed esterni.

I motori di ricerca riconoscono e interpretano i tag <a> come link. Googlebot estrae questi link e li aggiunge alla coda di scansione.

Utilizza testi di ancoraggio descrittivi per aiutare Google a comprendere i contenuti della pagina collegata. Evita frasi generiche e opta per un testo di ancoraggio naturale e ricco di parole chiave che rappresenti accuratamente la pagina di destinazione.

immagini

Includi tag alt descrittivi per le tue immagini. I tag alt forniscono un testo alternativo che descrive il contenuto dell'immagine.

Questo aiuta i motori di ricerca a capire la pertinenza dell'immagine rispetto al contenuto circostante.

Si consiglia inoltre di utilizzare nomi di file descrittivi e ricchi di parole chiave per le immagini.

Puoi utilizzare il markup dei dati strutturati come ImageObject di schema.org per fornire un contesto aggiuntivo sulle tue immagini.

Rendering lato server o rendering dinamico

I siti Web creati utilizzando framework JavaScript come Angular e React sono predefiniti per il rendering lato client.

Il rendering della pagina web avviene nel browser dell'utente.

Il problema è che i crawler dei motori di ricerca potrebbero non essere in grado di comprendere il contenuto: vedono una pagina vuota.

Un'alternativa consiste nell'utilizzare il rendering lato server (SSR) per generare versioni HTML delle tue pagine pesanti in JavaScript.

Ciò consente a Google di accedere direttamente e indicizzare il contenuto HTML pre-renderizzato.

Tuttavia, SSR può essere costoso e dispendioso in termini di risorse.

Una soluzione consiste nell'utilizzare il rendering dinamico.

Questo è quando una pagina pre-renderizzata viene offerta ai bot dei motori di ricerca mentre gli utenti normali continuano a sperimentare la versione completamente dinamica della pagina generata da JavaScript.

Padroneggiare JavaScript SEO

La SEO va oltre l'ottimizzazione delle parole chiave e la protezione dei backlink. Implica anche considerare come il tuo sito web viene visualizzato e presentato ai crawler dei motori di ricerca mentre passi alla SEO tecnica.

Garantendo che il rendering JavaScript non ostacoli l'accessibilità del crawler, puoi migliorare la tua visibilità nei risultati di ricerca e indirizzare il traffico organico verso le tue pagine.

Sappiamo quanto impegno metti per assicurarti ottimi link e creare contenuti di grande impatto per te e i tuoi clienti; non lasciare che questo sforzo venga annullato da problemi tecnici SEO e JavaScript scadenti!