React SEO: Gjengivelse, metadata og lenker for en React-app som rangeres

Rask quiz

Passer SEO for deg, og hvordan bør du starte?

Spørsmål 1 av 425%

Søker folk på Google etter det du selger?

Ja, tror jegNei, det er nytt eller svært nisjepregetJeg vet ikke

React SEO er arbeidet med å gjøre en React-applikasjon gjennomsøkbar, indekserbar og forståelig for søkemotorer og AI-assistenter. React i seg selv er nøytralt: problemene kommer av at alt gjengis i nettleseren. Google bekrefter i grunnleggende om JavaScript-SEO at de behandler JavaScript-apper i tre faser (gjennomsøking, gjengivelse og indeksering), og at «serverside- eller forhåndsgjengivelse fortsatt er en god idé, fordi det gjør nettstedet raskere for brukere og crawlere, og ikke alle roboter kan kjøre JavaScript.»

Hvorfor er React vanskelig for SEO?

En React-app laget som en SPA leverer en HTML-fil som består av lite mer enn en tom rot-div og en script-tagg. Nettleseren laster ned JavaScript, kjører det og bygger siden. En crawler som bare leser HTML-en, ser ingenting å indeksere: ingen overskrifter, ingen tekst, ingen lenker.

Googlebot kjører JavaScript, men i et eget steg: siden gjennomsøkes, settes i kø for gjengivelse, gjengis i en headless Chromium, og først da brukes de gjengitte lenkene og innholdet. Hvert ekstra steg er en mulighet for feil (en skriptfeil, et blokkert API-kall, en tidsavbrytelse) og gir forsinkelse før nye sider dukker opp i søk. Vår guide til JavaScript-SEO beskriver denne prosessen i detalj, og artikkelen vår om indeksering i Google viser hvordan du får sider indeksert raskere.

Andre roboter er mindre tålmodige. Vercels analyse fra desember 2024, Fremveksten av AI-crawlere, fant at «ingen av de store AI-crawlerne for øyeblikket gjengir JavaScript», og nevner GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot og PerplexityBot. En klientgjengitt React-side er usynlig for ChatGPT, Claude og Perplexity, selv når Google indekserer den.

Hvilken gjengivelsesmetode bør en React-side bruke?

React-teamet anbefaler nå å starte nye apper med et rammeverk. Da de avviklet Create React App 14. februar 2025, skrev de i kunngjøringen at «serverside-gjengivelse kan forbedre SEO», og at den også forbedrer ytelsen ved at brukerne må laste ned mindre JavaScript før de ser innholdet. Alternativene, fra svakest til sterkest for søk:

Om dynamisk gjengivelse er Googles dokumentasjon tydelig: det «var en omvei og ikke en langsiktig løsning», og Google anbefaler serverside-gjengivelse, statisk gjengivelse eller hydrering i stedet. Hvis du velger rammeverk, dekker vår guide til Next.js-SEO gjengivelsesmodusene, Metadata-API-et og sitemaps i detalj.

Hvis en migrering ikke er mulig, kan Google fortsatt indeksere en SPA, med omtanke. Vår guide til SEO for enkeltsideapplikasjoner lister vilkårene; resten av denne artikkelen gjelder begge tilfeller.

Hvordan setter du titler og metatagger i React?

Fra React 19 (stabil siden 5. desember 2024) kan komponenter gjengi title-, meta- og link-tagger direkte, og React løfter dem opp i dokumentets head. Utgivelsesnotatene for React 19 sier at denne innebygde støtten fungerer «med apper som bare kjører på klienten, streaming-SSR og Server Components». Før React 19 gjorde biblioteker som react-helmet eller react-helmet-async samme jobb, og de er fortsatt nyttige for å overstyre standardverdier per rute.

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 regler gjelder uansett metode:

• En tittel per side, unik og beskrivende. React-dokumentasjonen advarer om at hvis flere komponenter gjengir en tittel samtidig, er «oppførselen til nettlesere og søkemotorer udefinert». Gi den én enkel streng (en malstreng), ikke blandet tekst og variabler.
• En beskrivelse og én canonical per URL, generert fra sidedataene. En generator for metatagger hjelper med å utforme dem, og en canonical-sjekker bekrefter hva som er live.
• Open Graph-tagger i den første HTML-en for sider folk deler, siden forhåndsvisningsroboter for lenker stort sett leser den rå HTML-en.

Hvilke feil i ruting og lenker blokkerer indekseringen?

Google sier at de «bare kan finne lenkene dine hvis de er HTML-elementer med et href-attributt», og fraråder bruk av URL-fragmenter for å laste annet innhold. De fleste SEO-feil i React kommer av detaljer i rutingen:

For å se hva Google gjengir, bruk verktøyet URL-inspeksjon i Search Console og se HTML-en til den testede siden, eller kjør en indekserbarhetssjekk på nøkkelmalene.

Hvordan håndterer du sitemaps og strukturerte data i React?

React har ingen innebygd sitemap. Generer sitemap.xml under bygging fra rutene og dataene dine (eller fra rammeverkets sitemap-funksjon), list bare kanoniske URL-er som returnerer 200, og oppgi filen i robots.txt. En generator for XML-sitemap fungerer for små statiske nettsteder.

Strukturerte data følger samme regel som metadata: gjengi JSON-LD-skriptet sammen med siden, fra de samme dataene, helst på serveren. Google kan lese JSON-LD som JavaScript legger inn etter gjengivelse, men markering som mangler i den første HTML-en, mangler for crawlere som ikke gjengir. Bruk Article for innlegg, Product for netthandel, Organization for hele nettstedet og BreadcrumbList for dype sider.

Hvordan påvirker ytelsen SEO for React?

Store JavaScript-pakker skader Core Web Vitals: nettleseren må laste ned, analysere og hydrere koden før siden blir responsiv, noe som trekker ned Largest Contentful Paint og Interaction to Next Paint, særlig på mobil. Kunngjøringen fra React-teamet om Create React App sier at serverside-gjengivelse sender mindre JavaScript og et fullt HTML-dokument, noe som gir raskere First Contentful Paint og kan senke INP. Praktiske grep: del opp koden per rute med React.lazy, legg ved bilder med eksplisitte dimensjoner, last komponenter under brettkanten sent, og revider tredjepartsskript.

Hva bør en SEO-sjekkliste for React inneholde?

1. Hver indekserbar URL returnerer full HTML (serverside-gjengivelse eller forhåndsgjengivelse), kontrollert med curl.
2. Én unik tittel, beskrivelse og selvrefererende canonical per URL.
3. Historikkbaserte ruter, ingen hash-URL-er, og alle interne lenker gjengitt som en a med href.
4. Ekte statuskoder: 404 for manglende sider, 301 eller 308 for flyttede sider.
5. En sitemap.xml generert fra de samme dataene som rutene, oppgitt i robots.txt.
6. JSON-LD gjengitt med siden, validert med Rich Results Test.
7. Skript, stiler og API-er som trengs for gjengivelse, tillatt i robots.txt.
8. Kode delt opp per rute, og Core Web Vitals overvåket hos reelle brukere.

Hvordan gjør du et React-nettsted synlig i AI-svar?

GEO (generativ søkemotoroptimalisering) starter med tilgang. Siden AI-crawlere henter rå HTML, må en React-side levere teksten, overskriftene og JSON-LD-en sin uten JavaScript for å bli lest, oppsummert og sitert. En AI-revisjon av nettstedets gjennomsøkbarhet viser hva disse robotene får fra sidene dine. Det andre vilkåret er innhold som er verdt å sitere: sider som svarer på ett spørsmål per avsnitt, med kilder, tall og tydelige definisjoner.

Det er innholdssiden Sorank, vårt produkt, automatiserer. Sorank er en SEO- og GEO-programvare som kjører på autopilot: generatoren for blogartikler skriver og publiserer 20, 60 eller 120 artikler i måneden med kilder, interne lenker og bilder, og den kobles til egendefinerte løsninger som et React- eller Next.js-nettsted via en webhook. SEO-chatten svarer på spørsmål om nettstedets søkeresultater i en samtale.

Den korte versjonen: lever HTML fra serveren, gi hver URL sin egen tittel, beskrivelse og canonical, og bruk ekte lenker. React rangeres da like godt som andre nettsteder, og AI-assistenter kan lese det. For å holde nettstedet forsynt med artikler skrevet for Google og AI, se prisene til Sorank, fra $49 per måned med en gratis prøveperiode på 3 dager.