Best practices SEO per i siti di e-commerce React
Pubblicato: 2022-04-05React è emerso come uno dei principali framework JavaScript in uso su una varietà di siti Web diversi e in particolare sui siti di e-commerce.
A causa del modo in cui sono costruiti, i siti Web React hanno alcune considerazioni specifiche quando si tratta di ottimizzazione dei motori di ricerca (SEO), con un insieme distinto di migliori pratiche SEO per le applicazioni React Single Page (SPA).
In questa guida esamineremo come garantire che un sito di e-commerce React sia configurato correttamente per la SEO e alcuni dei pro e dei contro dell'utilizzo di React su un sito Web di e-commerce ottimizzato per la ricerca.
Cos'è Reagire?
React è una libreria JavaScript che può essere utilizzata per creare interfacce utente basate su componenti comuni dell'interfaccia utente. È gestito dalla società madre di Facebook Meta, insieme a una comunità open source di sviluppatori tra cui aziende e individui.
Poiché è open-source, React è anche gratuito. Può costituire la struttura di base di un'applicazione a pagina singola (SPA sopra menzionata) o di un'app mobile.
Perché React va bene per l'e-commerce?
L'attenzione di React sull'interfaccia utente significa che è uno strumento utile per creare siti Web di e-commerce fluidi e senza interruzioni che mettono l'esperienza utente (UX) al centro del design.
Il contenuto viene servito sul lato client e le pagine non devono essere aggiornate, rendendo più veloce e più facile per i clienti la navigazione in un sito Web, con minori ritardi del server che influiscono sulla velocità di caricamento delle pagine.
La versatilità di React significa che può essere utilizzato su siti di e-commerce desktop e app mobili allo stesso modo, rendendolo una delle opzioni più semplici per gli sviluppatori che desiderano creare app Web progressive.
I motori di ricerca possono eseguire la scansione dei siti Web React?
Come con qualsiasi sito Web ottimizzato per la ricerca, è importante capire come i robot (e in particolare Googlebot) vedono il contenuto su un sito React.
In generale, Google esegue la scansione del sito Web in due fasi, identificando il contenuto man mano che procede.
Scansiona il codice sorgente
Innanzitutto, Googlebot eseguirà la scansione del sito Web e recupererà il codice sorgente, inclusi HTML, intestazioni di pagina e così via.
Rendi il DOM
In secondo luogo, Googlebot esegue il rendering del Domain Object Model (DOM) incluso qualsiasi JavaScript utilizzato nella pagina: puoi identificarlo utilizzando gli strumenti per sviluppatori integrati di Chrome e le funzioni equivalenti in altri browser.
React è un framework JavaScript lato client, il che significa che Googlebot potrebbe avere difficoltà a identificare le pagine. Questo perché, a differenza di un sito Web tradizionale, React non invia richieste al server durante la navigazione da una pagina all'altra, rendendo difficile per Google la visualizzazione delle diverse pagine.
Puoi configurare React per utilizzare il rendering lato server, ma Googlebot non eseguirà comunque il rendering dei file JavaScript e di altre risorse basate sul server durante la navigazione nel tuo sito. Per questo motivo, è importante configurare il tuo sito e-commerce React per la SEO in linea con le migliori pratiche.
Problemi SEO comuni con React
Esistono diversi problemi SEO comuni con i siti Web di e-commerce React:
Contenuto non trovato/lento nell'indicizzazione
Googlebot assegna un "budget di rendering" a ciascun sito Web di cui esegue la scansione e in genere lascerà una volta che il budget è stato speso. Ciò garantisce che i siti Web più piccoli ricevano la loro quota di attenzione del crawler e prevenga infiniti loop di scansione, ad esempio su siti Web che generano URL dinamici durante la navigazione.
Poiché i siti Web React funzionano come SPA, è necessario eseguire il rendering dell'intero sito prima di poter eseguire la scansione di tutto il suo contenuto. Ciò può ritardare l'individuazione del contenuto e consumare risorse aggiuntive dal lato del crawler, il che potrebbe portare a un minor numero di pagine scansionate e indicizzate.
Il rendering lato server e il pre-rendering possono alleggerire parte del carico di risorse dei robot, contribuendo a migliorare la velocità con cui le nuove pagine vengono visualizzate nell'indice.
I robot di ricerca sono lenti a notare i contenuti aggiornati
Questa è una derivazione del problema di cui sopra: quando modifichi una pagina, potrebbe essere necessario del tempo prima che tali modifiche vengano filtrate nei risultati di ricerca.
Ancora una volta, ciò è dovuto al modo in cui le pagine vengono visualizzate quando si utilizza React, il che può portare a pagine aggiornate che passano inosservate più a lungo dalle risorse limitate del crawler di Google.
Le pagine "profonde" sono state scansionate raramente (o mai)
Le pagine sepolte in profondità nella gerarchia del tuo sito hanno meno probabilità di essere raggiunte da Googlebot, soprattutto se ha già speso un budget di rendering significativo più in alto nella tua gerarchia.
Ancora una volta, il pre-rendering può essere uno strumento prezioso per aiutare i crawler di ricerca a penetrare più in profondità nella struttura delle cartelle del tuo sito web, prima che esauriscano il budget di scansione assegnabile.
[Ebook] Scansionabilità
Leggi l'ebookCome ottimizzare i siti di e-commerce React
Con alcune best practice per la SEO e-commerce React, puoi dare al tuo sito - e alle tue singole pagine - una prospettiva migliore di entrare nell'indice di ricerca.
URL di pagina univoci
La controparte migliore per il problema degli URL dinamici sopra menzionato consiste nell'attribuire a ogni pagina il proprio URL univoco e statico sul tuo sito web. Il contenuto viene quindi associato a un'unica posizione permanente, un URL canonico per la pagina, che i motori di ricerca possono scansionare, indicizzare e classificare con sicurezza nelle pagine dei risultati.
React Router è il modo per raggiungere questo obiettivo sui siti Web React. React Router può assegnare a ogni pagina del sito il proprio URL permanente, oltre ad allineare l'interfaccia utente con un URL specifico.
Reazione isomorfa
Isomorphic React è un modo per abilitare il rendering lato server, per alleviare la pressione sui budget di rendering dei crawler. Funziona rilevando quando JavaScript è disabilitato sul lato client e creando una forma di rendering lato server dell'HTML del sito Web. Se è disponibile il rendering lato client, il sito Web verrà caricato come React SPA nel solito modo.
In questo modo, Isomorphic React supera i problemi di visibilità per i crawler di ricerca, migliorando la rilevabilità delle pagine, senza alcun danno per l'esperienza React fluida e senza interruzioni per i visitatori umani con JavaScript lato client attivato.
Pre-rendering
Il pre-rendering è un altro modo per ottenere un risultato simile a Isomorphic React. Funziona generando una versione memorizzata nella cache dell'HTML visualizzato, a cui i crawler possono quindi accedere al posto del codice sorgente non visualizzato.
I visitatori umani ricevono il sito Web React lato client, offrendo loro ancora una volta tutti i vantaggi di una SPA fluida e fulminea. Ci sono molti servizi di pre-rendering tra cui scegliere, inclusi Google Puppeteer, Prerender.io e SEO4Ajax.
Ottimizzazione dei metadati
Infine, assicurati che i tuoi contenuti abbiano metadati ottimizzati, ancora un elemento importante nella SEO on-page, anche dopo tutti questi anni.
Oltre a un URL univoco e ottimizzato, ogni pagina dovrebbe avere un tag title univoco e qualsiasi altro meta tag pertinente, per aiutare le pagine a distinguersi e segnalare ai robot di ricerca di associare la pagina a un determinato argomento o parola chiave principale.
React Helmet è un buon modo per raggiungere questo obiettivo, fornendo accesso diretto alla modifica dei metadati SEO sui siti Web di e-commerce React. In questo modo, puoi combinare le migliori pratiche SEO della vecchia scuola e le classiche parole chiave sui metadati, con tutti i vantaggi di un sito Web di e-commerce React moderno e ottimizzato per i dispositivi mobili.