Artikel

React og SEO — JavaScript-rendering og søgesynlighed

Ren React (Create React App) er client-side rendered og problematisk for SEO. Løsningen er Next.js (SSR/SSG), Astro (static-first) eller prerendering for eksisterende React-sites.

Sidst opdateret:

React er verdens mest udbredte JavaScript UI-bibliotek, men dets standard konfiguration — client-side rendering (CSR) via Create React App — er problematisk for SEO. Problemet er strukturelt: HTML leveres tomt til Googlebot, og indhold genereres via JavaScript i browseren. Det kræver at Googlebot venter på Googles rendering-kø — en forsinkelse på dage til uger — for at indeksere indholdet korrekt.

Hvad Googlebot ser på en CSR-React-side

Googlebots crawler modtager ved første request denne HTML fra en standard React-app:

<!DOCTYPE html>
<html>
  <head><title>React App</title></head>
  <body>
    <div id="root"></div>
    <script src="/static/js/main.chunk.js"></script>
  </body>
</html>

Indholdet er tomt. For at se det faktiske indhold skal Googlebot eksekvere JavaScript og vente på at React renderer DOM’en. Det sker — men med forsinkelse.

Renderingforsinkelse og SEO-konsekvenser

Google renderer JavaScript i to faser: crawl og rendering. Crawlede sider sendes til en render-kø der processeres med forsinkelse (timer til dage afhængigt af crawl-prioritet). Lavprioritets-sider kan vente dage på rendering, hvilket forsinker indeksering.

Komplikationer: JavaScript-fejl, langsom bundle-størrelse, og API-kald der fejler under rendering kan resultere i tomme sider der indekseres uden indhold.

Løsningshierarkiet

  1. Nyt projekt: Brug Next.js (SSR/SSG) eller Astro (static-first) fra start — undgå CSR-only tilgang
  2. Eksisterende Next.js: Sørg for at pages bruger getStaticProps eller getServerSideProps korrekt
  3. Eksisterende CSR React: Evaluer prerendering (Prerender.io) som kortsigtet fix
  4. Migration: Migrer til Next.js App Router på sigt — det er den langsigtede løsning

Googles officielle anbefaling er server-side rendering for indhold der skal indekseres optimalt. → Denne artikel er en del af JavaScript og rendering — Scripts, DOM og CSR vs SSR.

Del af: JavaScript og rendering — Scripts, DOM og CSR vs SSR →

Andre artikler i samme emne

Relaterede begreber

Emne JavaScript og rendering — Scripts, DOM og CSR vs SSR JavaScript er SEOs største rendering-udfordring — forstå CSR vs SSR, DOM, lazy loading og hvad Googlebot faktisk ser. Artikel Next.js og SEO — Server-side rendering og SEO Next.js er den primære React-løsning for SEO-venlig rendering — med App Router, Metadata API og hybrid SSR/SSG i samme projekt. Det eliminerer de fleste JavaScript-SEO-problemer. Artikel Prerendering — Forhåndsrenderet HTML til crawlere Prerendering genererer HTML-snapshots af JavaScript-sider til crawlere. Det er en løsning til eksisterende SPA-sites der ikke kan migreres til SSR eller SSG. Artikel Hydration — SSR og client-side JavaScript kombineret Hydration er JSs overtagelse af en SSR-renderet side. Det giver interaktivitet uden at ofre SEO — men kan forårsage INP-problemer og TBT ved tung JavaScript-indlæsning. Artikel JavaScript og crawling — Hvad Googlebot ser og ikke ser Googlebot renderer JavaScript, men rendering sker i en separat wave og med forsinkelse. Indhold der kun eksisterer i JavaScript kan indekseres — men er det garanteret. Artikel Server-side rendering — SSR og fordele for SEO SSR leverer færdig HTML fra serveren — Googlebot ser straks indholdet uden rendering-kø, og FCP forbedres markant.

Ofte stillede spørgsmål

Renderer Googlebot React-sider?
Ja — Google renderer JavaScript og har gjort det siden 2016. Men rendering sker i en separat kø (ikke real-time) og er ressourcebegrænset. Crawl-prioritet til render-køen er lavere end til HTML-sider. Effekten: React-sider kan indekseres korrekt, men med forsinkelse — og sider med kompleks JavaScript eller langsom rendering kan indekseres ufuldstændigt.
Hvornår er ren React-med-CSR acceptabelt for SEO?
For applikationer der kræver login for at tilgå indhold er CSR acceptabelt — indholdet er ikke relevant for søgemaskiner. SaaS-dashboards, admin-interfaces, bruger-specifikke views: CSR er fint. For offentligt indhold der skal rangere i søgeresultater: brug SSR, SSG eller Astro i stedet for ren CSR-React.
Hvordan tester man om Googlebot ser indholdet korrekt på en React-side?
Brug URL Inspection Tool i Google Search Console → Test live URL → View Rendered HTML. Det viser præcist hvad Googlebot faktisk ser efter rendering. Sammenlign med View Source (Ctrl+U) i browseren — forskel indikerer JavaScript-genereret indhold der kræver rendering-køen. Tjek at H1, primær tekst og interne links er synlige i det renderede output.
Hvad er hydration og er det relevant for SEO?
Hydration er processen der aktiverer JavaScript-interaktivitet på en SSR-renderet HTML-side. Googlebots behøver ikke vente på hydration — den indekserer HTML-indholdet direkte. Men hydration-mismatch (forskel mellem server-renderet HTML og client-renderet DOM) kan resultere i at Googlebot ser andet indhold end brugeren. Next.js App Router med React Server Components minimerer hydration-overhead.
Kan interne links i en React-SPA indekseres korrekt af Googlebot?
Links i en React-SPA genereret med JavaScript (f.eks. via React Router) er tilgængelige for Googlebot — men kun efter rendering-fasen. Hvis interne links kun eksisterer i JavaScript-genereret DOM, opdages de ikke i fase 1-crawl og indekseres med forsinkelse. For kritiske interne links: sørg for at de er tilgængelige i HTML-kildekoden uden JavaScript-eksekvering. Med Next.js og SSR/SSG er alle interne links i HTML fra start og opdages straks ved crawling.

Placering i ordbogen

Kode — Webkode og teknisk SEO
JavaScript og rendering — Scripts, DOM og CSR vs SSR
React og SEO — JavaScript-rendering og søgesynlighed