SEO con React per siti ottimizzabili

Pubblicato: Marzo 7, 2020
Autore: Francesco Giammanco
SEO per React

React (chiamato anche React.js eReactJS) è una libreria Javascript open source realizzata da Facebook e diffusa per la sua capacità di generare velocemente interfacce utente, su cui è possibile fare SEO.

Le specifiche e i problemi SEO di React

Dall'inizio del World Wide Web per come lo conosciamo i browser hanno sempre dovuto richiedere per intero una pagina web per renderla visualizzabile, anche se alcuni elementi al suo interno si ripetono in ogni pagina, come ad esempio capita per i menu, il footer e l'header.

Visto il bisogno di maggiore velocità si è cominciato a ridurre i tempi di caricamento delle pagine, tanto che molte tecnologie tra cui React hanno realizzato applicazioni a pagina singola, o SPA (Single Page Application).

Grazie ad un caricamento più preciso che necessita solo di singoli elementi la fruibilità delle pagine è superiore, ma genera un problema di scansione per i crawler come GoogleBot.

Di fatto la generazione dinamica di elementi HTML non permette al crawler di rilevare il completamento di un ciclo di caricamento, perché di fatto non c'è.

Ma per comprendere appieno i problemi SEO generati da React basta porsi delle semplici domande:

Di fatto un sito react è uno spazio HTML con una grande quantità di Javascript.

Problemi di indicizzare React
Google ha problemi a indicizzare siti in React

Proprio per questo durante la prima scansione Google non ha da appiggliarsi a nessun tag HTML, motivo per cui viene sprecato tempo e crawl budget per far comprendere al motore di ricerca cosa ci sia da indicizzare.

Si parla quindi di aspettare una seconda richiesta da parte del crawler, esaudita dopo la renderizzazione delle risorse disponibili.

Il problema non è però insormontabile e neppure limitato a React, anche perché si tratta di un problema comune a molti framework, vedi https://realgood.marketing/seo-considerations-implications-of-adopting-a-spa-javascript-react-framework/.

Caricamenti dinamici e motori di ricerca

Soluzioni SEO per React

Esistono due metodi che permettono ad un sito realizzato con React di essere percepito correttamente per l'indicizzazione su Google, tramite l'isomorphic o tramite la pre-renderizzazione delle risorse.

Isomorphic React

Si occupa di rilevare se Javascript è disabilitato lato client, ed esegue lato server i contenuti da inviare al client.

Nel caso in cui Javascript fosse abilitato, si occuperebbe di fornire le informazioni come una qualsiasi applicazione dinamica.

Pre rendering delle risorse

In questo caso andremo a rendere indicizzabile un sito tramite l'utilizzo di un servizio come Prerender che si occuperà di trasformare le operazioni Javascript in tag HTML statici.

Il vantaggio di questo metodo che avviene in un secondo momento rispetto alla realizzazione dinamica dei contenuti è che non ha bisogno di rendere compatibile il codice lato server.

Proprio per questo il carico di lavoro sul server è minore e se per i piccoli siti potrebbe non essere percepito come un vantaggio reale, per siti che devono essere performanti la differenza si nota.

Approccio ibrido

Esiste anche la possibilità di generare un caricamento ibrido che crea una struttura HTML ma lascia spazio alla creazione di contenuti dinamici da inserire all'interno della pagina.

react ibrido

Componenti aggiuntivi

React non è ottimizzato per i motori di ricerca di base, ma è possibile utilizzare una serie di tools per rendere i siti Web più friendly per i motori di ricerca.

Casco React

Helmet è il componente più importante in termini di SEO per le Single Page Application. React Helmet viene utilizzato per gestire i metadati ed essendo una libreria React è eseguibile sia lato server che lato client.

Un altro vantaggio è che l'integrazione non richiede grandi cambiamenti al coding della pagina.

React Router v4

Router è un componente che può collegare componenti che connettano le pagine o comunque presenti in entrambe le pagine. In questo modo si possono realizzare dei link che connettano le pagine con URL riconoscibili dai motori di ricerca.

Error!
No 'CRP_Widget' widget registered in this installation.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.