React SEO: Rendering, metadata og links til en React-app, der rangerer

Hurtig quiz

Passer SEO til dig, og hvordan skal du starte?

Spørgsmål 1 af 425%

Søger folk på Google efter det, du sælger?

Ja, det tror jegNej, det er nyt eller meget nicheprægetJeg ved det ikke

React SEO er arbejdet med at gøre en React-applikation crawlbar, indekserbar og forståelig for søgemaskiner og AI-assistenter. React i sig selv er neutral: problemerne opstår, når alt renderes i browseren. Google bekræfter i sine grundlæggende principper for JavaScript-SEO, at det behandler JavaScript-apps i tre faser (crawling, rendering, indeksering), og at „server-side rendering eller prerendering stadig er en god idé, fordi det gør dit website hurtigere for brugere og crawlere, og ikke alle bots kan køre JavaScript.“

Hvorfor er React svært for SEO?

En React-app bygget som single page application leverer en HTML-fil, der ikke indeholder meget mere end en tom rod-div og et script-tag. Browseren henter JavaScriptet, kører det og bygger siden. En crawler, der kun læser HTML'en, ser intet at indeksere: ingen overskrifter, ingen tekst, ingen links.

Googlebot kører JavaScript, men i et separat trin: siden crawles, sættes i kø til rendering, renderes i en headless Chromium, og først derefter bruges de renderede links og indholdet. Hvert ekstra trin er en chance for fejl (en scriptfejl, en blokeret API, en timeout) og giver forsinkelse, før nye sider dukker op i søgningen. Vores guide til JavaScript-SEO gennemgår processen i detaljer, og vores artikel om Google-indeksering viser, hvordan du får sider indekseret hurtigere.

Andre bots er mindre tålmodige. Vercels analyse fra december 2024, Fremkomsten af AI-crawlere, fandt, at „ingen af de største AI-crawlere i dag renderer JavaScript“, og nævnte GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot og PerplexityBot. En React-side, der renderes i klienten, er usynlig for ChatGPT, Claude og Perplexity, selv når Google indekserer den.

Hvilken renderingsmetode bør en React-side bruge?

React-teamet anbefaler nu at starte nye apps med et framework. Da det udfasede Create React App den 14. februar 2025, skrev det i sin meddelelse, at „server-rendering kan forbedre SEO“, og at det også forbedrer ydelsen, fordi brugerne skal downloade mindre JavaScript, før de ser indholdet. Mulighederne, fra svagest til stærkest for søgning:

Om dynamisk rendering er Googles dokumentation tydelig: den „var en løsning og ikke en langsigtet løsning“, og Google anbefaler i stedet server-rendering, statisk rendering eller hydrering. Hvis du vælger et framework, dækker vores Next.js SEO-guide renderingstilstande, Metadata API og sitemaps i detaljer.

Hvis en migrering ikke er mulig, kan en single page app stadig indekseres af Google, med omhu. Vores guide til SEO for single page applications lister betingelserne; resten af artiklen gælder for begge tilfælde.

Hvordan sætter du titler og meta-tags i React?

Siden React 19 (stabil siden 5. december 2024) kan komponenter rendere title-, meta- og link-tags direkte, og React flytter dem op i dokumentets head. Udgivelsesnoterne til React 19 siger, at denne indbyggede understøttelse virker „med apps, der kun kører i klienten, streaming SSR og Server Components“. Før React 19 gjorde biblioteker som react-helmet eller react-helmet-async det samme arbejde, og de er stadig nyttige til at overskrive standarder pr. 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 regler gælder, uanset metode:

• Én titel pr. side, unik og beskrivende. Reacts dokumentation advarer om, at hvis flere komponenter renderer en titel samtidig, er „browsernes og søgemaskinernes adfærd udefineret“. Giv den én enkelt streng (en template literal), ikke blandet tekst og variabler.
• Én beskrivelse og én canonical pr. URL, genereret ud fra sidens data. En generator til meta-tags hjælper med at udkaste dem, og en canonical-tjekker bekræfter, hvad der er live.
• Open Graph-tags i den første HTML på sider, folk deler, da forhåndsvisningsbots til links generelt læser den rå HTML.

Hvilke fejl i routing og links blokerer indekseringen?

Google siger, at det „kun kan finde dine links, hvis de er HTML-elementer med et href-attribut“, og advarer mod at bruge URL-fragmenter til at indlæse forskelligt indhold. De fleste SEO-problemer i React skyldes detaljer i routingen:

For at se, hvad Google renderer, brug værktøjet URL-kontrol i Search Console og se HTML'en for den testede side, eller kør en indekserbarhedstjekker på de vigtigste skabeloner.

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

React har ingen indbygget sitemap-funktion. Generér sitemap.xml på bygningstidspunktet ud fra dine routes og data (eller via dit frameworks sitemap-funktion), list kun canonical-URL'er, der returnerer 200, og henvis til filen i robots.txt. En XML-sitemap-generator fungerer til små statiske sites.

Struktureret data følger samme regel som metadata: render JSON-LD-scriptet sammen med siden, ud fra de samme data, helst på serveren. Google kan læse JSON-LD, der er indsat af JavaScript efter rendering, men markup, der mangler i den første HTML, mangler for crawlere, der ikke renderer. Brug Article til artikler, Product til e-handel, Organization for hele sitet og BreadcrumbList til dybe sider.

Hvordan påvirker ydelse SEO i React?

Store JavaScript-bundles skader Core Web Vitals: browseren skal hente, parse og hydrere koden, før siden bliver responsiv, hvilket belaster Largest Contentful Paint og Interaction to Next Paint, især på mobil. React-teamets meddelelse om Create React App påpeger, at server-rendering sender mindre JavaScript og et fuldt HTML-dokument, hvilket giver en hurtigere First Contentful Paint og kan sænke INP. Praktiske greb: del koden op pr. route med React.lazy, lever billeder med eksplicitte dimensioner, indlæs komponenter under foldelinjen først, når de skal bruges, og gennemgå tredjepartsscripts.

Hvad bør en SEO-tjekliste for React indeholde?

1. Hver indekserbar URL returnerer fuld HTML (server-rendering eller prerendering), kontrolleret med curl.
2. Én unik titel, beskrivelse og selvrefererende canonical pr. URL.
3. Historikbaserede routes, ingen hash-URL'er, og hvert internt link renderet som en a-tag med href.
4. Rigtige statuskoder: 404 for manglende sider, 301 eller 308 for flyttede sider.
5. Et sitemap.xml genereret ud fra de samme data som routes, og listet i robots.txt.
6. JSON-LD renderet sammen med siden og valideret med Rich Results Test.
7. Scripts, stilarter og API'er, der er nødvendige for rendering, tilladt i robots.txt.
8. Kode opdelt pr. route, og Core Web Vitals overvåget på rigtige brugere.

Hvordan gør du et React-site synligt i AI-svar?

GEO (generativ motoroptimering) starter med adgang. Da AI-crawlere henter den rå HTML, skal en React-side levere sin tekst, sine overskrifter og sin JSON-LD uden JavaScript for at kunne læses, opsummeres og citeres. Et AI-audit af website-crawlbarhed viser, hvad disse bots modtager fra dine sider. Den anden betingelse er indhold, der er værd at citere: sider, der besvarer ét spørgsmål pr. afsnit, med kilder, tal og klare definitioner.

Det er indholdssiden, som Sorank, vores produkt, automatiserer. Sorank er software, der kører på autopilot til SEO og GEO: dens artikelgenerator til blog skriver og udgiver 20, 60 eller 120 artikler om måneden med kilder, interne links og billeder, og den kan forbindes til egne stacks, som et React- eller Next.js-site, via en webhook. Dens SEO-chat besvarer spørgsmål om dit sites søgeresultater i en samtale.

Den korte version: lever HTML fra serveren, giv hver URL sin egen titel, beskrivelse og canonical, og brug rigtige links. React rangerer så ligesom ethvert andet site, og AI-assistenter kan læse det. For at forsyne sitet med artikler bygget til Google og AI, se Soranks priser, fra 49 USD pr. måned med en gratis prøveperiode på 3 dage.