Perché le single page app faticano nei risultati di ricerca e come rimediare: SSR, generazione statica o prerendering, titoli per route in React 19 o react-helmet-async, URL reali, soft 404, sitemap, Controllo URL e un verificatore del sorgente.
Le single page app spesso inviano ai motori di ricerca una shell HTML quasi vuota e costruiscono la pagina in un secondo momento con JavaScript. Google sa eseguire il rendering di JavaScript, ma lo fa con un ritardo e altri crawler potrebbero non farlo. La soluzione è servire HTML reale per ogni URL tramite rendering lato server, generazione statica o prerendering, con un title, una description e un canonical unici su ogni route.
Le tre correzioni che contano di più
Questo stesso sito è una single page app React che esegue il prerendering di ogni pagina pubblica in fase di build, quindi questi sono i controlli che facciamo sulle nostre pagine. Incolla il sorgente di una pagina nel verificatore per vedere cosa riceve un crawler prima che venga eseguito qualsiasi JavaScript.
Sì. Google esegue il rendering di JavaScript, ma le pagine aspettano in una coda di rendering e tutto ciò che non si carica viene perso. Altri motori di ricerca e i bot delle anteprime dei link eseguono meno rendering o nessuno, quindi servire HTML è la scelta più sicura.
No. Next.js rende facili il rendering lato server e la generazione statica, ma una SPA in stile Vite o Create React App può eseguire il prerendering delle route pubbliche in fase di build e ottenere lo stesso HTML scansionabile.
Non per i tag di base. React 19 esegue il rendering degli elementi title, meta e link da qualsiasi componente e li sposta nella head. react-helmet-async resta utile con React 18 e versioni precedenti.
No, se crawler e persone ricevono lo stesso contenuto. Il prerendering salva solo la pagina che i tuoi utenti vedrebbero comunque. Diventa cloaking se l'HTML servito ai bot dice qualcosa di diverso.
Modi per dare ai crawler HTML reale
React 19 permette a qualsiasi componente di generare tag title, meta e link; React li sposta nella head del documento. Ogni route imposta i propri.
Avvolgi l'app una volta in HelmetProvider, poi imposta i tag per ogni pagina. La versione async è sicura per il rendering lato server e il prerendering.
Google ignora tutto ciò che segue un # quando decide cos'è un URL. Usa la History API (BrowserRouter, createBrowserRouter) così ogni vista ha il proprio percorso.
I crawler seguono gli elementi a con un href. Un gestore di clic su un div per loro è invisibile. I componenti Link del router generano un vero anchor.
Un'app solo lato client risponde a ogni URL con stato 200, quindi una pagina mancante sembra reale. Aggiungi un noindex alla vista di pagina non trovata, oppure servi un vero 404 dal server o dalla fase di prerendering.
Elenca ogni URL pubblico una sola volta, con il suo indirizzo canonico. Generala dallo stesso elenco di route usato dalla tua app, così non si disallineano mai.
Vuoi che i tag vengano scritti per te? Prova il
Verificatore del sorgente della pagina
Incolla l'HTML da Visualizza sorgente pagina per controllare cosa riceve un crawler.
Sorgente della pagina (l'esempio è una tipica shell SPA vuota)
Checklist SEO per SPA
Title
"{title}" ({n} caratteri)
Nessun title nell'HTML
Meta description
{n} caratteri
Mancante
Link canonical
Intestazione principale (h1)
Nessun h1 prima dell'esecuzione di JavaScript
Testo visibile
{n} parole nel body prima dell'esecuzione di JavaScript
Link scansionabili
{n} elementi a con un href reale
Title Open Graph (anteprime dei link)
Indicizzazione consentita
meta robots: {robots}
Nessun meta robots (indicizzabile)
Inizia gratis · Nessuna carta di credito richiesta