React SEO: Rendering, metadata och länkar för en React-app som rankas

Snabbquiz

Är SEO rätt för dig, och hur ska du börja?

Fråga 1 av 425%

Söker folk på Google efter det du säljer?

Ja, jag tror detNej, det är nytt eller mycket nischatJag vet inte

React SEO handlar om att göra en React-applikation genomsökbar, indexerbar och begriplig för sökmotorer och AI-assistenter. React i sig är neutralt: problemen kommer av att allt renderas i webbläsaren. Google bekräftar i sina grunder för JavaScript-SEO att de bearbetar JavaScript-appar i tre faser (genomsökning, rendering, indexering) och att ”server-side- eller förrendering fortfarande är en mycket bra idé, eftersom den gör din webbplats snabbare för användare och sökrobotar, och inte alla robotar kan köra JavaScript.”

Varför är React svårt för SEO?

En React-app skapad som single page application skickar en HTML-fil som innehåller lite mer än en tom root-div och en script-tagg. Webbläsaren laddar ner JavaScriptet, kör det och bygger sidan. En robot som bara läser HTML:en ser inget att indexera: inga rubriker, ingen text, inga länkar.

Googlebot kör visserligen JavaScript, men i ett separat steg: sidan genomsöks, köas för rendering, renderas i en headless Chromium, och först därefter används de renderade länkarna och innehållet. Varje extra steg är en chans att något går fel (ett skriptfel, ett blockerat API, en timeout) och lägger till fördröjning innan nya sidor syns i sökresultaten. Vår guide till JavaScript-SEO beskriver processen i detalj, och vår artikel om indexering i Google visar hur du får sidor indexerade snabbare.

Andra robotar är mindre tåliga. Vercels analys från december 2024, The rise of the AI crawler, fann att ”ingen av de stora AI-robotarna för närvarande renderar JavaScript”, och nämner GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot och PerplexityBot. En React-sida som renderas i klienten är osynlig för ChatGPT, Claude och Perplexity, även när Google indexerar den.

Vilket renderingssätt bör en React-webbplats använda?

React-teamet rekommenderar nu att nya appar startas med ett ramverk. När det avvecklade Create React App den 14 februari 2025 skrev det i sitt meddelande att ”rendering på servern kan förbättra SEO”, och att den även förbättrar prestandan genom att minska mängden JavaScript som användarna måste ladda ner innan de ser innehållet. Här är alternativen, från svagast till starkast för sökning:

Om dynamisk rendering skriver Googles dokumentation tydligt att det ”var en lösning och inte en långsiktig lösning”, och Google rekommenderar i stället rendering på servern, statisk rendering eller hydrering. Om du väljer ramverk täcker vår guide till Next.js SEO renderingslägena, Metadata API och sitemaps i detalj.

Om en migrering inte är möjlig kan en single page application fortfarande indexeras av Google, med omsorg. Vår guide till SEO för single page applications listar villkoren; resten av artikeln gäller i båda fallen.

Hur sätter du titlar och metataggar i React?

Sedan React 19 (stabil sedan 5 december 2024) kan komponenter rendera title-, meta- och link-taggar direkt, och React flyttar dem till dokumentets head. Versionsnoteringarna för React 19 anger att det inbyggda stödet fungerar ”med appar som enbart körs i klienten, streaming-SSR och Server Components”. Före React 19 gjorde bibliotek som react-helmet eller react-helmet-async samma jobb, och de är fortfarande användbara för att åsidosätta standardvärden per rutt.

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äller oavsett metod:

• En titel per sida, unik och beskrivande. Reacts dokumentation varnar för att om flera komponenter renderar en titel samtidigt är ”beteendet hos webbläsare och sökmotorer odefinierat”. Ge den en enda sträng (en template literal), inte blandad text och variabler.
• En beskrivning och en canonical per URL, genererade från sidans data. En generator för metataggar hjälper dig att skriva utkast, och en canonical-kontroll bekräftar vad som är live.
• Open Graph-taggar i den första HTML:en för sidor som folk delar, eftersom robotar för förhandsvisning av länkar i allmänhet läser den råa HTML:en.

Vilka fel i routing och länkar blockerar indexeringen?

Google säger att det ”bara kan upptäcka dina länkar om de är a-element med ett href-attribut” och avråder från att använda URL-fragment för att ladda olika innehåll. De flesta SEO-problem i React kommer från detaljer i routingen:

För att se vad Google renderar, använd verktyget URL-inspektion i Search Console och granska HTML:en för den testade sidan, eller kör en indexerbarhetskontroll på viktiga mallar.

Hur hanterar du sitemaps och strukturerad data i React?

React har ingen inbyggd sitemap. Generera sitemap.xml vid bygget från dina rutter och data (eller med ditt ramverks funktion för sitemaps), ta bara med canonical-URL:er som returnerar 200, och ange den i robots.txt. En generator för XML-webbplatskartor fungerar för små statiska webbplatser.

Strukturerad data följer samma regel som metadata: rendera JSON-LD-skriptet tillsammans med sidan, från samma data, helst på servern. Google kan läsa JSON-LD som JavaScript injicerar efter rendering, men märkning som saknas i den första HTML:en saknas för robotar som inte renderar. Använd Article för inlägg, Product för e-handel, Organization för hela webbplatsen och BreadcrumbList för djupa sidor.

Hur påverkar prestanda React-SEO?

Stora JavaScript-paket skadar Core Web Vitals: webbläsaren måste ladda ner, tolka och hydrera koden innan sidan blir responsiv, vilket tynger Largest Contentful Paint och Interaction to Next Paint, särskilt i mobilen. React-teamets meddelande om Create React App noterar att rendering på servern skickar mindre JavaScript och ett komplett HTML-dokument, vilket ger en snabbare First Contentful Paint och kan sänka INP. Praktiska åtgärder: dela upp koden per rutt med React.lazy, leverera bilder med angivna dimensioner, ladda komponenter under vikningen lazy och granska tredjepartsskript.

Vad bör en checklista för React-SEO innehålla?

1. Varje indexerbar URL returnerar komplett HTML (rendering på servern eller förrendering), kontrollerat med curl.
2. En unik titel, beskrivning och självrefererande canonical per URL.
3. Historikbaserade rutter, inga hash-URL:er, och varje intern länk renderad som ett a med href.
4. Riktiga statuskoder: 404 för saknade sidor, 301 eller 308 för flyttade sidor.
5. En sitemap.xml genererad från samma data som rutterna, angiven i robots.txt.
6. JSON-LD renderad tillsammans med sidan, validerad med Rich Results Test.
7. Skript, stilmallar och API:er som behövs för rendering tillåtna i robots.txt.
8. Kod uppdelad per rutt, och Core Web Vitals övervakade med verkliga användare.

Hur gör du en React-webbplats synlig i AI-svar?

GEO (generative engine optimization) börjar med åtkomst. Eftersom AI-sökrobotar hämtar rå HTML måste en React-sida leverera sin text, rubriker och JSON-LD utan JavaScript för att kunna läsas, sammanfattas och citeras. En AI-granskning av genomsökbarhet för webbplatser visar vad de här robotarna får från dina sidor. Det andra villkoret är innehåll värt att citera: sidor som besvarar en fråga per avsnitt, med källor, siffror och tydliga definitioner.

Innehållsdelen är vad Sorank, vår produkt, automatiserar. Sorank är en programvara för SEO och GEO på autopilot: dess generator för bloggartiklar skriver och publicerar 20, 60 eller 120 artiklar per månad med källor, interna länkar och bilder, och den kopplar till egna uppsättningar, till exempel en React- eller Next.js-webbplats, via en webhook. Dess SEO-chatt svarar i ett samtal på frågor om din webbplats sökprestanda.

Kort version: servera HTML från servern, ge varje URL en egen titel, beskrivning och canonical, och använd riktiga länkar. React rankas då som vilken annan webbplats som helst, och AI-assistenter kan läsa den. För att hålla webbplatsen försedd med artiklar byggda för Google och AI, se Sorank:s abonnemang, från $49 per månad med 3 dagars gratis provperiod.