SEO con React: rendering, metadati e link per un'app React che si posiziona

Quiz veloce

La SEO fa per te, e come iniziare?

Domanda 1 di 425%

Le persone cercano su Google ciò che vendi?

Sì, credo di sìNo, è nuovo o molto di nicchiaNon lo so

La SEO con React consiste nel rendere un'applicazione React scansionabile, indicizzabile e comprensibile per i motori di ricerca e gli assistenti IA. React di per sé è neutrale: i problemi nascono dal rendering completo nel browser. Google conferma nelle sue nozioni di base sulla SEO per JavaScript che elabora le app JavaScript in tre fasi (scansione, rendering, indicizzazione) e che il rendering lato server o il pre-rendering «resta un'ottima idea, perché rende il sito più veloce per utenti e crawler, e non tutti i bot possono eseguire JavaScript».

Perché React è difficile per la SEO?

Un'app React creata come single page application consegna un file HTML che contiene poco più di un div radice vuoto e un tag script. Il browser scarica il JavaScript, lo esegue e costruisce la pagina. Un crawler che legge solo l'HTML non vede nulla da indicizzare: niente titoli, niente testo, niente link.

Googlebot esegue JavaScript, ma in un passaggio separato: la pagina viene scansionata, messa in coda per il rendering, renderizzata in un Chromium headless, e solo allora vengono usati i link e i contenuti renderizzati. Ogni passaggio in più è un'occasione di errore (un errore di script, un'API bloccata, un timeout) e aggiunge ritardo prima che le nuove pagine compaiano nei risultati. La nostra guida alla SEO per JavaScript descrive questo processo, e il nostro articolo sull'indicizzazione su Google spiega come far indicizzare le pagine più in fretta.

Altri bot sono meno pazienti. L'analisi di Vercel del dicembre 2024, The rise of the AI crawler, ha rilevato che «nessuno dei principali crawler delle IA esegue attualmente il rendering di JavaScript», citando GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot e PerplexityBot. Una pagina React renderizzata lato client è invisibile per ChatGPT, Claude e Perplexity, anche quando Google la indicizza.

Quale approccio di rendering scegliere per un sito React?

Il team di React raccomanda ormai di iniziare le nuove app con un framework. Ritirando Create React App il 14 febbraio 2025, ha scritto nel suo annuncio che «il rendering lato server può migliorare la SEO» e migliora anche le prestazioni riducendo il JavaScript da scaricare prima di vedere i contenuti. Le opzioni, dalla più debole alla più solida per la ricerca:

Sul rendering dinamico la documentazione di Google è esplicita: «era una soluzione temporanea e non una soluzione a lungo termine», e Google consiglia invece il rendering lato server, il rendering statico o l'hydration. Se stai scegliendo un framework, la nostra guida alla SEO con Next.js approfondisce modalità di rendering, Metadata API e sitemap.

Se la migrazione non è possibile, Google può comunque indicizzare una single page app con qualche accorgimento. La nostra guida alla SEO delle single page application ne elenca le condizioni; il resto di questo articolo vale per entrambi i casi.

Come si impostano title e meta tag in React?

Da React 19 (stabile dal 5 dicembre 2024) i componenti possono renderizzare direttamente i tag title, meta e link, che React sposta nell'head del documento. Le note di rilascio di React 19 precisano che questo supporto nativo funziona «con app solo client, SSR in streaming e Server Components». Prima di React 19 se ne occupavano librerie come react-helmet o react-helmet-async, che restano utili per sovrascrivere i valori predefiniti route per route.

function ProductPage({ product }) {
  return (
    <>
      <title>{`${product.name} | Shop`}</title>
      <meta name="description" content={product.summary} />
      <link rel="canonical" href={`https://example.com/p/${product.slug}`} />
      <h1>{product.name}</h1>
    </>
  )
}

Tre regole valgono qualunque sia il metodo:

• Un solo title per pagina, unico e descrittivo. La documentazione di React avverte che se più componenti renderizzano un title contemporaneamente, «il comportamento di browser e motori di ricerca non è definito». Passagli una sola stringa (un template literal), non un misto di testo e variabili.
• Una description e una canonical per URL, generate dai dati della pagina. Un generatore di meta tag aiuta a scriverle e un verificatore di canonical conferma cosa è online.
• Tag Open Graph nell'HTML iniziale per le pagine che vengono condivise, perché i bot di anteprima dei link leggono in genere l'HTML grezzo.

Quali errori di routing e di link bloccano l'indicizzazione?

Google afferma di «poter scoprire i tuoi link solo se sono elementi HTML a con un attributo href» e sconsiglia di usare i frammenti URL per caricare contenuti diversi. La maggior parte dei problemi SEO in React nasce da dettagli di routing:

Per vedere cosa renderizza Google, usa lo strumento Controllo URL di Search Console e visualizza l'HTML della pagina testata, oppure passa i modelli di pagina principali in un verificatore di indicizzabilità.

Come si gestiscono sitemap e dati strutturati in React?

React non ha una sitemap integrata. Genera sitemap.xml al build a partire da route e dati (o con la funzione sitemap del tuo framework), inserisci solo URL canonical che rispondono 200 e richiamala in robots.txt. Per un piccolo sito statico basta un generatore di sitemap XML.

I dati strutturati seguono la stessa regola dei metadati: renderizza lo script JSON-LD insieme alla pagina, dagli stessi dati, idealmente sul server. Google può leggere un JSON-LD iniettato da JavaScript dopo il rendering, ma il markup assente dall'HTML iniziale è assente anche per i crawler che non fanno rendering. Usa Article per gli articoli, Product per l'e-commerce, Organization su tutto il sito e BreadcrumbList per le pagine profonde.

Come incidono le prestazioni sulla SEO con React?

I bundle JavaScript pesanti danneggiano i Core Web Vitals: il browser deve scaricare, analizzare e idratare il codice prima che la pagina risponda, il che pesa su Largest Contentful Paint e Interaction to Next Paint, soprattutto da mobile. L'annuncio del team React su Create React App ricorda che il rendering lato server invia meno JavaScript e un documento HTML completo, con un First Contentful Paint più rapido e un INP potenzialmente più basso. Leve utili: dividere il codice per route con React.lazy, servire immagini con dimensioni esplicite, caricare in differita i componenti sotto la piega e verificare gli script di terze parti.

Cosa deve contenere una checklist SEO per React?

1. Ogni URL indicizzabile restituisce HTML completo (rendering lato server o pre-rendering), verificato con curl.
2. Title, description e canonical autoreferenziale unici per ogni URL.
3. Route basate sulla history, nessun URL con cancelletto e ogni link interno renderizzato come a con href.
4. Codici di stato reali: 404 per le pagine mancanti, 301 o 308 per quelle spostate.
5. Una sitemap.xml generata dagli stessi dati delle route e dichiarata in robots.txt.
6. JSON-LD renderizzato con la pagina e validato con il test dei risultati multimediali.
7. Script, stili e API necessari al rendering consentiti in robots.txt.
8. Codice diviso per route e Core Web Vitals monitorati sugli utenti reali.

Come rendere visibile un sito React nelle risposte delle IA?

La GEO (ottimizzazione per i motori generativi) parte dall'accesso. Poiché i crawler delle IA recuperano l'HTML grezzo, una pagina React deve fornire testo, titoli e JSON-LD senza JavaScript per essere letta, riassunta e citata. Un audit di scansionabilità per le IA mostra cosa ricevono questi bot dalle tue pagine. La seconda condizione è un contenuto degno di citazione: pagine che rispondono a una domanda per sezione, con fonti, dati e definizioni chiare.

È questa parte di contenuto che Sorank, il nostro prodotto, automatizza. Sorank è un software SEO e GEO in autopilot: il suo generatore di articoli per il blog scrive e pubblica 20, 60 o 120 articoli al mese con fonti, link interni e immagini, e si collega via webhook a stack personalizzati come un sito React o Next.js. Il suo SEO Chat risponde in conversazione alle domande sulle prestazioni del tuo sito nella ricerca.

In sintesi: servi HTML dal server, dai a ogni URL title, description e canonical propri, e usa link veri. React si posiziona così come qualsiasi altro sito e gli assistenti IA possono leggerlo. Per rifornire quel sito di articoli pensati per Google e per le IA, scopri i piani di Sorank, da 49 € al mese con 3 giorni di prova gratuita.