SEO con React

Sebbene React sia spesso scelto per aver reso più efficiente lo sviluppo lato front-end, questa libreria tra le più popolari può essere problematica per i motori di ricerca. 

In questo articolo, esaminiamo perché React è richiede particolari attenzioni per avere una SEO sufficiente e analizziamo cosa può essere utile agli sviluppatori per rendere la struttura react SEO Friendly .

Cos’è React

React è un framework che è  stato sviluppato per creare interfacce utente interattive , modulari e multipiattaforma . 

Oggi è uno dei framework JavaScript più popolari, se non il più popolare, per la scrittura di applicazioni front-end ad alte prestazioni.

 Inizialmente sviluppato per scrivere applicazioni a pagina singola (SPA), React è ora utilizzato per creare siti Web , software e applicazioni mobile.

Tuttavia, gli stessi fattori e le stesse caratteristiche che hanno portato alla sua popolarità creano delle problematiche a livello SEO.

Se hai esperienza nello sviluppo web e passi a React, noterai che una quantità importante di codice HTML e CSS si sposta in JavaScript. 

Di conseguenza, tutte le modifiche all’interfaccia utente devono essere apportate tramite il motore di React .

Sebbene questo facilità gli sviluppatori, ciò può comportare però tempi di caricamento più lunghi per gli utenti e più lavoro per i motori di ricerca per trovare il contenuto da indicizzare causando potenziali problemi per la SEO con le pagine Web React.

In questo articolo, descriverò le difficoltà  da affrontare durante la creazione di app e siti Web React nei confronti della SEO (del motore di ricerca).

Come Google scansiona e indicizza le pagine web

Diagramma di Googlebot che indicizza un sito web.

Passaggi di indicizzazione di Google:

1. Googlebot mantiene una coda di scansione contenente tutti gli URL necessari per eseguire la scansione e l’indicizzazione in futuro.
2. Quando il crawler è inattivo, preleva l’URL successivo nella coda, effettua una richiesta e recupera l’HTML.
3. Dopo aver analizzato l’HTML, Googlebot determina se è necessario recuperare ed eseguire JavaScript per eseguire il rendering del contenuto. Se sì, l’URL viene aggiunto a una coda di rendering.
4. Successivamente, il renderer recupera ed esegue JavaScript per eseguire il rendering della pagina e invia l’HTML visualizzato all’unità di elaborazione.
5. L’unità di elaborazione estrae tutti gli URL <a> presenti nella pagina Web e li aggiunge alla coda di scansione.
6. Il contenuto viene aggiunto all’indice di Google.

Si noti che esiste una chiara distinzione tra la fase Elaborazione che analizza l’HTML e la fase Renderer che esegue JavaScript. 

Questa distinzione esiste perché l’esecuzione di JavaScript è costosa , dato che i Googlebot devono guardare più trilioni di pagine web . Pertanto, quando Googlebot esegue la scansione di una pagina Web, analizza immediatamente l’HTML e quindi mette in coda il JavaScript per l’esecuzione in un secondo momento.

 La documentazione di Google menziona che una pagina rimane nella coda di rendering per alcuni secondi, ma spesso il tempo è maggiore.

Vale anche la pena menzionare il concetto di crawl budget . 

La scansione di Google è limitata dalla larghezza di banda, dal tempo e dalla disponibilità delle istanze di Googlebot. Alloca un budget o risorse specifici per indicizzare ogni sito web. 

Se stai costruendo un grande sito web ricco di contenuti con migliaia di pagine (ad es. un sito di e-commerce) e queste pagine utilizzano molto JavaScript per visualizzare i contenuti, Google potrebbe non essere in grado di leggere così tanti contenuti dal tuo sito web .

Perché React SEO necessita di lavoro

Questa breve panoramica della scansione e dell’indicizzazione di Googlebot è un quadro generale delle problematiche da affrontare con React per migliorare la SEO. 

1. Assenza di HTML
2. Tempo di caricamento pagina elevato
3. Assenza di elementi base richiesti da google
4. Assenza di Meta tag
5. Assenza di Sitemap
6. Assenza di Struttura Url