Tutto quello che devi sapere su JavaScript SEO

Chiedi a qualsiasi programmatore e ti diranno cosa pensano di JavaScript.

Da quando è stato rilasciato, JavaScript (JS) è stato il linguaggio di programmazione più popolare utilizzato dagli sviluppatori web di tutto il mondo. Un recente sondaggio condotto da Stack Overflow tra gli sviluppatori web rivela che JavaScript è il linguaggio di programmazione preferito per otto anni consecutivi.

JS consente agli sviluppatori Web di creare facilmente applicazioni Web su larga scala. Ha un'eccezionale capacità di aggiornare dinamicamente le pagine e renderle più interattive. Inoltre, i framework JavaScript come AngularJS, ReactJS, Vue e NodeJS riducono significativamente la quantità di tempo e fatica necessari per lo sviluppo di siti basati su JS. Non c'è da stupirsi che JavaScript sia alla base del 96% dei siti Web a livello globale.

Eppure i siti basati su JS sembrano avere una relazione di amore-odio con Google. JavaScript può facilmente controllare e modificare l'HTML per rendere le pagine web dinamiche e interattive, migliorando così l'UX del sito. Eppure i motori di ricerca trovano difficile gestire JS, lasciando la maggior parte del contenuto JavaScript non indicizzato.

Analizziamo un po' più a fondo il motivo per cui JavaScript rende il lavoro di Google più difficile e cosa puoi fare per rendere i tuoi contenuti JS adatti ai bot.

In che modo Javascript influisce sulla SEO?

JavaScript consente alle pagine di caricarsi rapidamente, offre un'interfaccia ricca ed è facile da implementare; tuttavia, la fluidità del browser cambia in base all'interazione dell'utente, rendendo difficile per i motori di ricerca comprendere la pagina e associare un valore al contenuto.

I motori di ricerca hanno i loro limiti durante il rendering di pagine Web che contengono contenuto JavaScript. Google esegue una scansione iniziale della pagina e indicizza ciò che trova. Poiché le risorse sono disponibili, i bot tornano a eseguire il rendering di JS su quelle pagine. Ciò significa che il contenuto e i collegamenti basati su JavaScript corrono il rischio di non essere visti dai motori di ricerca, danneggiando potenzialmente la SEO del sito.

Fonte

Tuttavia, Google sa che JavaScript è qui per restare! Di conseguenza, il gigante dei motori di ricerca ha dedicato gran parte delle sue risorse per aiutare i professionisti della ricerca a ottimizzare i loro siti basati su JS.

Dai un'occhiata a questa serie di video su JavaScript SEO di Google che può aiutarti a rendere i tuoi contenuti JS più individuabili online.

Gli esperti SEO devono gestire le loro pagine Web basate su JS in un formato apprezzato da Google. Con una piccola comprensione di come i motori di ricerca elaborano i contenuti JS, JavaScript e SEO possono lavorare insieme per aumentare il posizionamento del tuo sito.

In che modo i motori di ricerca elaborano JavaScript?

I bot di Google elaborano JS in modo diverso rispetto a una pagina non JS. I bot li elaborano in tre fasi, ovvero scansione, indicizzazione e rendering. Queste fasi possono essere facilmente comprese grazie alla grafica di Google Developers di seguito:

Fonte

Strisciando

Questa fase riguarda la rilevabilità dei tuoi contenuti. È un processo complicato, che coinvolge sottoprocessi, vale a dire set di semi, accodamento e pianificazione della scansione, importanza degli URL e altri.

Per cominciare, i bot di Google mettono in coda le pagine per la scansione e il rendering. I bot utilizzano il modulo di analisi per recuperare le pagine, seguire i collegamenti nelle pagine ed eseguire il rendering fino a un punto in cui le pagine vengono indicizzate. Il modulo non solo esegue il rendering delle pagine, ma analizza anche il codice sorgente ed estrae gli URL negli <a href=”…”> snippet.

I bot controllano il file robots.txt per vedere se la scansione è consentita o meno. Se l'URL è contrassegnato come non consentito, i bot lo saltano. Pertanto, è fondamentale controllare il file robots.txt per evitare errori.

Rendering

Il processo di visualizzazione del contenuto, dei modelli e di altre funzionalità di un sito all'utente è chiamato rendering. C'è il rendering lato server e il rendering lato client.

Rendering lato server (SSR)

Come suggerisce il nome, in questo tipo di rendering le pagine vengono popolate sul server. Ogni volta che si accede al sito, la pagina viene visualizzata sul server e inviata al browser.

In altre parole, quando un utente o un bot accede al sito, riceve il contenuto come markup HTML. Questo di solito aiuta il SEO in quanto Google non deve eseguire il rendering di JS separatamente per accedere al contenuto. SSR è il metodo di rendering tradizionale e può rivelarsi costoso in termini di larghezza di banda.

Rendering lato client

Il rendering lato client è un tipo di rendering abbastanza recente che consente agli sviluppatori di creare i propri siti interamente renderizzati nel browser con JavaScript. Quindi, invece di avere una pagina HTML separata per percorso, il rendering lato client consente di creare dinamicamente ogni percorso direttamente nel browser. Sebbene questo tipo di rendering sia inizialmente lento poiché effettua più round al server, una volta completate le richieste l'esperienza tramite il framework JS è veloce.

Tornando a ciò che accade dopo che una pagina è stata scansionata, i bot identificano le pagine che devono essere visualizzate e le aggiungono alla coda di rendering, a meno che il meta tag robots nel codice HTML grezzo non indichi a Googlebot di non indicizzare la pagina.

Le pagine rimangono nella coda di rendering per alcuni secondi, ma potrebbe volerci del tempo, a seconda della quantità di risorse disponibili.

Fonte

Una volta che le risorse lo consentono, il servizio di rendering Web di Google (WRS) esegue il rendering, l'analisi e la compilazione delle pagine ed esegue il JavaScript sulla pagina. Il bot analizza nuovamente l'HTML visualizzato per i collegamenti e mette in coda gli URL che trova per la scansione. L'HTML visualizzato viene utilizzato per l'indicizzazione della pagina.

Indicizzazione

Una volta che il WRS recupera i dati da API e database esterni, l'indicizzatore della caffeina su Google può indicizzare il contenuto. Questa fase prevede l'analisi dell'URL, la comprensione del contenuto delle pagine e la sua rilevanza e la memorizzazione delle pagine rilevate nell'indice.

Come ottimizzare JavaScript per la SEO

JavaScript, se implementato in modo errato, può rovinare la tua SEO. Segui queste best practices SEO Javascript per migliorare il posizionamento del tuo sito.

Sii persistente con i tuoi sforzi SEO on-page

Tutte le regole SEO on-page che servono a ottimizzare la tua pagina per aiutarla a classificarsi sui motori di ricerca si applicano ancora. Ottimizza i tag del titolo, le meta descrizioni, gli attributi alt nelle immagini e i meta tag robot. Titoli e meta descrizioni univoci e descrittivi aiutano gli utenti e i motori di ricerca a identificare facilmente il contenuto. Prestare attenzione all'intento di ricerca e al posizionamento strategico delle parole chiave semanticamente correlate.

Inoltre, è utile avere una struttura URL SEO friendly. In alcuni casi, i siti Web implementano una modifica pushState nell'URL, confondendo Google quando cerca di trovare quello canonico. Assicurati di controllare gli URL per tali problemi.

Assicurati che il tuo JavaScript appaia nell'albero DOM

Il rendering JavaScript funziona quando il DOM di una pagina è stato caricato a sufficienza. Il DOM o Document Object Model mostra la struttura del contenuto della pagina e la relazione di ciascun elemento con l'altro. Puoi trovarlo nella sezione "Ispeziona elemento" del browser nel codice della pagina. Il DOM è il fondamento della pagina generata dinamicamente.

Se i tuoi contenuti possono essere visualizzati nel DOM, è probabile che i tuoi contenuti vengano analizzati da Google. Controllare il DOM ti aiuterà a determinare se le tue pagine sono accessibili o meno dai bot dei motori di ricerca.

I bot saltano il rendering e l'esecuzione JS se il tag meta robots contiene inizialmente noindex. Googlebot non attiva eventi in una pagina. Se il contenuto viene aggiunto alla pagina con l'aiuto di JS, dovrebbe essere fatto dopo che la pagina è stata caricata. Se il contenuto viene aggiunto all'HTML quando si fa clic sul pulsante, durante lo scorrimento della pagina e così via, non verrà indicizzato.

Infine, quando si utilizzano dati strutturati, utilizzare JavaScript per generare il JSON-LD richiesto e inserirlo nella pagina. Per inciso, scopri i migliori trucchi SEO sulla pagina che dovresti implementare fin dall'inizio.

Evita di impedire ai motori di ricerca di accedere ai contenuti JS

Per evitare che Google non riesca a trovare i contenuti JS, alcuni webmaster utilizzano un processo chiamato cloaking che fornisce il contenuto JS agli utenti ma lo nasconde ai crawler. Tuttavia, questo metodo è considerato una violazione delle Istruzioni per i webmaster di Google e potresti essere penalizzato per questo. Invece, lavora per identificare i problemi chiave e rendere i contenuti JS accessibili ai motori di ricerca.

A volte, l'host del sito potrebbe essere bloccato involontariamente, impedendo a Google di vedere il contenuto JS. Ad esempio, se il tuo sito ha alcuni domini figlio che servono a scopi diversi, ognuno dovrebbe avere un robots.txt separato perché i sottodomini sono trattati come un sito web separato. In tal caso, devi assicurarti che nessuna di queste direttive robots.txt impedisca ai motori di ricerca di accedere alle risorse necessarie per il rendering.

Utilizzare codici di stato HTTP pertinenti

I crawler di Google utilizzano i codici di stato HTTP per identificare i problemi durante la scansione di una pagina. Pertanto, dovresti utilizzare un codice di stato significativo per informare i bot se una pagina non deve essere sottoposta a scansione o indicizzazione. Ad esempio, potresti utilizzare uno stato HTTP 301 per dire ai bot che una pagina è stata spostata su un nuovo URL, consentendo a Google di aggiornare il proprio indice di conseguenza.

Fare riferimento a questo elenco di codici di stato HTTP e sapere quando utilizzarli:

Fonte

Correggi i contenuti duplicati

Quando JavaScript viene utilizzato per i siti Web, potrebbero esserci URL diversi per lo stesso contenuto. Ciò causa problemi di contenuto duplicato, spesso causati da maiuscole, ID o parametri con ID. Assicurati di trovare tali pagine, scegli l'URL originale/preferito che desideri indicizzare e imposta tag canonici per evitare che i motori di ricerca si confondano.

Correggi i contenuti e le immagini caricati in modo pigro

La velocità del sito è fondamentale per la SEO. Il caricamento lento è una di queste best practice UX che posticipa il caricamento di contenuti non critici o non visibili, riducendo così il tempo di caricamento della pagina iniziale. Ma oltre a velocizzare il caricamento delle pagine, devi anche assicurarti che i tuoi contenuti siano accessibili ai crawler dei motori di ricerca. Questi crawler non eseguiranno il tuo JavaScript o scorreranno la pagina per guidare i contenuti caricati in modo pigro, influenzando negativamente la tua SEO.

Inoltre, le ricerche di immagini sono anche una fonte di traffico organico aggiuntivo. Quindi, se hai immagini caricate in modo pigro, i motori di ricerca non le sceglieranno. Sebbene il caricamento lento sia ottimo per gli utenti, deve essere eseguito con cura per evitare che i bot perdano contenuti potenzialmente critici.

Usa gli strumenti SEO di JS

Sono disponibili numerosi strumenti che possono aiutarti a identificare e risolvere i problemi con il codice JavaScript. Eccone alcuni che puoi utilizzare a tuo vantaggio.

• Funzione di ispezione dell'URL. Questo strumento si trova in Google Search Console. Può mostrarti se i crawler di Google sono stati in grado di indicizzare o eseguire la scansione delle tue pagine.
• Crawler dei motori di ricerca. Questi strumenti ti consentono di testare e monitorare in modo efficace il modo in cui i motori di ricerca scansionano le tue pagine.
• Insight sulla velocità della pagina. Page Speed ​​Insights di Google condivide i dettagli sulle prestazioni del tuo sito e offre consigli su come migliorarlo.
• Sito: Comando. Questo strumento ti aiuta a vedere se Google ha indicizzato correttamente o meno i tuoi contenuti. Tutto quello che devi fare è inserire questo comando su Google - site: [URL sito web] "snippet di testo o query"

Sfide SEO JavaScript

Ormai hai una buona idea di come i motori di ricerca elaborano i contenuti JavaScript e cosa puoi fare per impostare il tuo sito web sulla corsia preferenziale del successo SEO. Tuttavia, ci sono alcune altre sfide affrontate da esperti SEO e webmaster. La maggior parte di questi derivano dagli errori commessi da loro durante l'ottimizzazione dei loro siti Web basati su JavaScript

1. File JavaScript e CSS non minimizzati

Se stai utilizzando strumenti SEO per controllare il tuo sito Web JS, probabilmente ti saresti imbattuto in un avviso relativo a problemi con Javascript e CSS non minimizzati. Per un periodo di tempo, i file JS e CSS vengono appesantiti da righe di codice non necessarie, spazi bianchi, commenti nel codice sorgente e hosting su server esterni, rallentando il tuo sito web. Assicurati di eliminare le righe, gli spazi bianchi e i commenti non necessari per ridurre il tempo di caricamento delle pagine, migliorare il tasso di coinvolgimento e aumentare la SEO.

2. Uso di hash negli URL

Ricordi cosa ha detto John Mueller sugli URL non validi a un evento SEO?

“Per noi, se vediamo una specie di hash lì, significa che il resto è probabilmente irrilevante. Per la maggior parte, lo elimineremo quando proveremo a indicizzare il contenuto…”

Eppure diversi siti basati su JS generano URL con un hash. Questo può essere disastroso per il tuo SEO. Assicurati che il tuo URL sia compatibile con Google. Non dovrebbe assolutamente assomigliare a questo:

www.example.com/#/about -us OPPURE

www.example.com/about#us

3. Non verificando la struttura dei link interni

Google richiede link <a href> adeguati per trovare gli URL sul tuo sito. Inoltre, se i collegamenti vengono aggiunti al DOM dopo aver fatto clic su un pulsante, i bot non li vedranno. La maggior parte dei webmaster perde questi punti, causando problemi alla loro SEO.

Assicurati di fornire il tradizionale link 'href', rendendoli raggiungibili dai bot. Controlla i tuoi collegamenti utilizzando lo strumento di controllo del sito Web, SEOprofiler per migliorare la struttura dei collegamenti interni del tuo sito.

Dai un'occhiata a questa presentazione di Tom Greenway durante la conferenza I/O di Google per una guida su una struttura di collegamento corretta:

Conclusione

Senza dubbio, JavaScript espande le funzionalità dei siti web. Tuttavia, JavaScript e motori di ricerca non vanno sempre insieme. JavaScript influisce sul modo in cui i motori di ricerca scansionano e indicizzano un sito, influenzando così il suo posizionamento. Pertanto, i professionisti della ricerca devono capire in che modo i bot dei motori di ricerca elaborano i contenuti JS e adottare le misure necessarie per garantire che JavaScript si adatti bene alla loro strategia SEO.

Se hai un sito Web basato su JS e non riesci a trovare i tuoi contenuti su Google, è il momento di affrontare i problemi. Usa le informazioni e i suggerimenti condivisi in questo post per ottimizzare JavaScript per SEO e aumentare i tuoi ritorni.