Rendere indicizzabile una SPA React con Vite: prerender, lingue e sitemap

Questo sito è una single-page app React compilata con Vite. All’inizio l’HTML consegnato era un <div id="root"></div> vuoto: Google esegue JavaScript, ma altri crawler e le anteprime social no, e l’HTML era in inglese mentre la pagina si apriva in italiano. Ecco cosa ho fatto, in ordine.

1. Un URL per lingua

La lingua stava in localStorage: un solo URL, due lingue. Ora l’italiano è su / e l’inglese su /en/, il pulsante IT/EN cambia l’indirizzo con la History API e ogni pagina dichiara canonical e hreflang reciproci (it, en e x-default).

2. Prerender dopo la build

Uno script Node che gira dopo vite build legge l’index.html generato e produce una copia per lingua con title, description, Open Graph, dati strutturati JSON-LD e un riepilogo del contenuto dentro #root. React sostituisce quel riepilogo quando parte. Non è SSR completo: per un sito di una pagina è più semplice e più che sufficiente.

3. Sitemap generata

Il sitemap non è più un file scritto a mano: lo script lo genera in build, con le pagine e gli alternati hreflang. La data lastmod è quella dell’ultima modifica ai file di contenuto in git, non quella della build, così non cambia a ogni deploy.

4. Caricamento

• CSS inserito direttamente nell’HTML, per togliere una richiesta bloccante.
• Preload dei font usati nel titolo e del ritratto, con imagesrcset e imagesizes identici a quelli dell’immagine.
• Immagine social ridotta da 404 KB a 80 KB: alcune piattaforme scartano le anteprime troppo pesanti.

Con Lighthouse in locale il punteggio di performance è passato da 93 a 98 e il First Contentful Paint da 2,2 a 1,2 secondi. Sono misure su localhost, senza rete reale: vanno ripetute in produzione.

5. Cosa ha detto Search Console

Search Console ha mostrato 8 pagine non indicizzate: 3 varianti con reindirizzamento (http e dominio senza www), 4 vecchi URL del sito precedente che davano 404 e una vecchia pagina /admin. Nessun problema reale: ho reindirizzato i vecchi percorsi alle sezioni equivalenti e lasciato in 404 ciò che non esiste più.