React SEO: rendering, metadata en links voor een React-app die scoort

Korte quiz

Is SEO iets voor jou, en hoe begin je?

Vraag 1 van 425%

Zoeken mensen in Google naar wat je verkoopt?

Ja, ik denk het welNee, het is nieuw of heel nicheWeet ik niet

React SEO is het werk om een React-applicatie crawlbaar, indexeerbaar en begrijpelijk te maken voor zoekmachines en AI-assistenten. React zelf is neutraal: de problemen ontstaan wanneer alles in de browser wordt gerenderd. Google bevestigt in de basisprincipes van JavaScript-SEO dat JavaScript-apps in drie fasen worden verwerkt (crawlen, renderen, indexeren) en dat server-side rendering of prerendering "nog steeds een goed idee is, omdat uw site sneller wordt voor gebruikers en crawlers, en niet alle bots JavaScript kunnen uitvoeren".

Waarom is React lastig voor SEO?

Een React-app die als single page application is gebouwd, levert een HTML-bestand met weinig meer dan een lege root-div en een script-tag. De browser downloadt het JavaScript, voert het uit en bouwt de pagina op. Een crawler die alleen de HTML leest, ziet niets om te indexeren: geen koppen, geen tekst, geen links.

Googlebot voert wel JavaScript uit, maar in een aparte stap: de pagina wordt gecrawld, in de renderwachtrij gezet, in een headless Chromium gerenderd, en pas daarna worden de gerenderde links en content gebruikt. Elke extra stap is een kans op fouten (een scriptfout, een geblokkeerde API, een time-out) en zorgt voor vertraging voordat nieuwe pagina's in de zoekresultaten verschijnen. Onze gids over JavaScript-SEO beschrijft dit proces, en ons artikel over Google-indexering legt uit hoe pagina's sneller geïndexeerd worden.

Andere bots zijn minder geduldig. De analyse van Vercel uit december 2024, The rise of the AI crawler, stelde vast dat "geen van de grote AI-crawlers momenteel JavaScript rendert" en noemde GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot en PerplexityBot. Een client-side gerenderde React-pagina is onzichtbaar voor ChatGPT, Claude en Perplexity, ook als Google haar indexeert.

Welke renderaanpak past bij een React-site?

Het React-team raadt inmiddels aan nieuwe apps met een framework te starten. Bij het stopzetten van Create React App op 14 februari 2025 schreef het in de aankondiging dat "server-rendering SEO kan verbeteren" en ook de prestaties verhoogt, omdat gebruikers minder JavaScript hoeven te downloaden voordat ze content zien. De opties, van zwakst naar sterkst voor zoekmachines:

Over dynamische rendering is de documentatie van Google duidelijk: het "was een noodoplossing en geen oplossing voor de lange termijn", en Google raadt in plaats daarvan server-side rendering, statische rendering of hydratatie aan. Kiest u een framework, dan behandelt onze gids over Next.js SEO rendermodi, de Metadata API en sitemaps in detail.

Is migreren niet mogelijk, dan kan Google een single page app met wat zorg toch indexeren. Onze gids over SEO voor single page applications noemt de voorwaarden; de rest van dit artikel geldt voor beide situaties.

Hoe stelt u titels en meta-tags in React in?

Sinds React 19 (stabiel sinds 5 december 2024) kunnen componenten title-, meta- en link-tags direct renderen, en React verplaatst ze naar de head van het document. De release notes van React 19 vermelden dat deze ingebouwde ondersteuning werkt "met client-only apps, streaming SSR en Server Components". Vóór React 19 deden bibliotheken als react-helmet of react-helmet-async dit werk, en ze blijven nuttig om standaardwaarden per route te overschrijven.

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>
    </>
  )
}

Drie regels gelden ongeacht de methode:

• Eén titel per pagina, uniek en beschrijvend. De React-documentatie waarschuwt dat als meerdere componenten tegelijk een titel renderen, "het gedrag van browsers en zoekmachines ongedefinieerd is". Geef één string mee (een template literal), geen mix van tekst en variabelen.
• Eén beschrijving en één canonical per URL, gegenereerd uit de paginadata. Een meta-tags-generator helpt bij het opstellen, en een canonical-checker bevestigt wat live staat.
• Open Graph-tags in de initiële HTML voor pagina's die gedeeld worden, want bots voor linkvoorbeelden lezen doorgaans de ruwe HTML.

Welke routing- en linkfouten blokkeren indexering?

Google stelt dat het "uw links alleen kan ontdekken als het HTML-elementen a met een href-attribuut zijn" en raadt af URL-fragmenten te gebruiken om verschillende content te laden. De meeste React SEO-problemen zitten in routingdetails:

Om te zien wat Google rendert, gebruikt u de URL-inspectietool in Search Console en bekijkt u de HTML van de geteste pagina, of haalt u belangrijke paginasjablonen door een indexeerbaarheidschecker.

Hoe gaat u in React om met sitemaps en gestructureerde data?

React heeft geen ingebouwde sitemap. Genereer sitemap.xml tijdens de build uit uw routes en data (of met de sitemapfunctie van uw framework), neem alleen canonieke URL's op die 200 teruggeven, en verwijs ernaar in robots.txt. Voor een kleine statische site volstaat een XML-sitemapgenerator.

Gestructureerde data volgt dezelfde regel als metadata: render het JSON-LD-script met de pagina, uit dezelfde data, bij voorkeur op de server. Google kan JSON-LD lezen dat na het renderen via JavaScript is ingevoegd, maar markup die in de initiële HTML ontbreekt, ontbreekt ook voor crawlers die niet renderen. Gebruik Article voor berichten, Product voor e-commerce, Organization sitebreed en BreadcrumbList voor diepe pagina's.

Hoe beïnvloeden prestaties React SEO?

Grote JavaScript-bundels schaden de Core Web Vitals: de browser moet code downloaden, parsen en hydrateren voordat de pagina reageert, wat drukt op Largest Contentful Paint en Interaction to Next Paint, vooral op mobiel. De aankondiging van het React-team over Create React App wijst erop dat server-rendering minder JavaScript en een volledig HTML-document stuurt, wat de First Contentful Paint versnelt en INP kan verlagen. Praktische hefbomen: code per route splitsen met React.lazy, afbeeldingen met expliciete afmetingen leveren, componenten onder de vouw lazy laden en scripts van derden doorlichten.

Wat hoort er op een React SEO-checklist?

1. Elke indexeerbare URL geeft volledige HTML terug (server-rendering of prerendering), gecontroleerd met curl.
2. Een unieke titel, beschrijving en naar zichzelf verwijzende canonical per URL.
3. History-gebaseerde routes, geen hash-URL's, en elke interne link gerenderd als a met href.
4. Echte statuscodes: 404 voor ontbrekende pagina's, 301 of 308 voor verplaatste pagina's.
5. Een sitemap.xml uit dezelfde data als de routes, vermeld in robots.txt.
6. JSON-LD gerenderd met de pagina en gevalideerd met de test voor uitgebreide resultaten.
7. Scripts, stijlen en API's die nodig zijn voor het renderen toegestaan in robots.txt.
8. Code per route gesplitst en Core Web Vitals gemonitord bij echte gebruikers.

Hoe wordt een React-site zichtbaar in AI-antwoorden?

GEO (generative engine optimization) begint bij toegang. Omdat AI-crawlers ruwe HTML ophalen, moet een React-pagina tekst, koppen en JSON-LD zonder JavaScript leveren om gelezen, samengevat en geciteerd te worden. Een AI-crawlbaarheidsaudit laat zien wat deze bots van uw pagina's ontvangen. De tweede voorwaarde is content die het citeren waard is: pagina's die per sectie één vraag beantwoorden, met bronnen, cijfers en heldere definities.

Dat contentdeel automatiseert Sorank, ons product. Sorank is SEO- en GEO-software op autopilot: de Blogartikelgenerator schrijft en publiceert 20, 60 of 120 artikelen per maand met bronnen, interne links en afbeeldingen, en koppelt via een webhook met maatwerkstacks zoals een React- of Next.js-site. SEO Chat beantwoordt in een gesprek vragen over de zoekprestaties van uw site.

Samengevat: lever HTML vanaf de server, geef elke URL een eigen titel, beschrijving en canonical, en gebruik echte links. Dan scoort React zoals elke andere site en kunnen AI-assistenten haar lezen. Om die site doorlopend te voorzien van artikelen voor Google en AI, bekijk de abonnementen van Sorank, vanaf $49 per maand met 3 dagen gratis proberen.