SEO voor single page applications: een praktische gids
SEO voor single page applications
SEO voor single page applications: React SEO-gids met checklist | We.Inc
Waarom single page apps het moeilijk hebben in zoekmachines en hoe u dat oplost: SSR, statische generatie of prerendering, titels per route in React 19 of react-helmet-async, echte URL's, soft 404's, sitemaps, URL-inspectie en een broncodechecker.
Single page apps sturen zoekmachines vaak een vrijwel lege HTML-schil en bouwen de pagina pas later op met JavaScript. Google kan JavaScript renderen, maar dat gebeurt met vertraging en andere crawlers doen het misschien niet. Los het op door per URL echte HTML te leveren via server rendering, statische generatie of prerendering, met een unieke titel, beschrijving en canonical op elke route.
De drie oplossingen die het meest uitmaken
Oplossing
Waarom
Echte HTML voor elke openbare URL
Crawlers en linkvoorbeelden zien de content meteen
Unieke titel, beschrijving en canonical per route
Elke pagina kan op zichzelf ranken en gedeeld worden
Een echt pad per weergave en een sitemap
Elke pagina kan gevonden en geïndexeerd worden
Deze site is zelf een React single page app die elke openbare pagina bij het builden prerendert, dus dit zijn de controles die we op onze eigen pagina's uitvoeren. Plak de broncode van een pagina in de checker om te zien wat een crawler krijgt voordat er JavaScript draait.
Open een pagina, kies Paginabron weergeven en kopieer alles.
Plak het in de checker hieronder.
Lees welke basiselementen in de ruwe HTML aanwezig zijn en welke ontbreken.
Vul de gaten op met een van de aanpakken en codevoorbeelden op deze pagina.
Bevestig het met URL-inspectie in Search Console, die de HTML toont die Google heeft gerenderd.
Controleer de paginabron, niet het Elements-paneel; dat paneel toont de pagina nadat JavaScript is uitgevoerd.
Houd de geprerenderde HTML identiek aan wat gebruikers zien; andere content voor crawlers is cloaking.
Blokkeer /assets of .js-bestanden niet in robots.txt; Google heeft ze nodig om te renderen.
Linkvoorbeelden van sociale netwerken voeren geen JavaScript uit, dus Open Graph-tags per route moeten in de HTML staan.
Veelgestelde vragen
Kan Google een React single page app indexeren?
Ja. Google rendert JavaScript, maar pagina's wachten in een renderwachtrij en alles wat niet laadt wordt gemist. Andere zoekmachines en bots voor linkvoorbeelden renderen minder of helemaal niet, dus HTML leveren is de veiligere keuze.
Heb ik Next.js nodig voor React SEO?
Nee. Next.js maakt server rendering en statische generatie makkelijk, maar een SPA in de stijl van Vite of Create React App kan zijn openbare routes bij het builden prerenderen en zo dezelfde crawlbare HTML krijgen.
Is react-helmet in React 19 nog nodig?
Niet voor basistags. React 19 rendert title-, meta- en link-elementen vanuit elk component en verplaatst ze naar de head. react-helmet-async blijft nuttig op React 18 en eerder.
Is prerendering cloaking?
Niet als crawlers en mensen dezelfde content krijgen. Prerendering bewaart alleen de pagina die uw gebruikers toch al zouden zien. Het wordt cloaking als de HTML die aan bots wordt geleverd iets anders zegt.
Testen zoals Google
In Search Console toont URL-inspectie of een pagina geïndexeerd is en, met Live URL testen, de HTML die Google heeft gerenderd en de bronnen die niet geladen konden worden. Vergelijk die HTML met uw zichtbare pagina: koppen, hoofdtekst en links moeten er allemaal in staan.
SSR, statische generatie of prerendering
Manieren om crawlers echte HTML te geven
Aanpak
Hoe het werkt
Geschikt voor
Kosten
Server-side rendering (SSR)
De server rendert elk verzoek naar HTML, daarna hydrateert React het
Pagina's die per verzoek of per gebruiker veranderen
Vereist een server; meer bewegende delen
Statische generatie (SSG)
Pagina's worden bij het builden naar HTML gerenderd
Marketingpagina's, documentatie, blogs
Opnieuw builden om content bij te werken
Prerendering van een bestaande SPA bij het builden
Een script laadt elke route bij het builden in een headless browser en slaat de HTML op
Een bestaande client-only app die u niet wilt herschrijven
De build wordt trager naarmate het aantal routes groeit
Alleen client-side
De server stuurt een lege schil; JavaScript bouwt de pagina
Appschermen achter een login die niet geïndexeerd moeten worden
Openbare pagina's zijn afhankelijk van Google die ze later rendert
Oplossingen met code
Titel en beschrijving per route in React 19
Met React 19 kan elk component title-, meta- en link-tags renderen; React verplaatst ze naar de head van het document. Elke route stelt zijn eigen tags in.
Hetzelfde met react-helmet-async (React 18 en eerder)
Wikkel de app één keer in HelmetProvider en stel daarna per pagina tags in. De async-versie is veilig voor server rendering en prerendering.
Echte URL's, geen hash-fragmenten
Google negeert alles na een # bij het bepalen wat een URL is. Gebruik de History API (BrowserRouter, createBrowserRouter) zodat elke weergave een eigen pad heeft.
Crawlbare links
Crawlers volgen a-elementen met een href. Een click handler op een div is voor hen onzichtbaar. Link-componenten van de router renderen een echte anchor.
Voorkom soft 404's voor onbekende routes
Een client-only app beantwoordt elke URL met status 200, dus een ontbrekende pagina lijkt een echte. Voeg een noindex toe aan de not-found-weergave, of lever een echte 404 vanuit de server of de prerenderstap.
Een sitemap van elke openbare route
Vermeld elke openbare URL één keer, met het canonieke adres. Genereer hem uit dezelfde routelijst die uw app gebruikt, zodat ze nooit uit elkaar lopen.
Wilt u de tags voor u laten schrijven? Probeer de
meta-tag generator
Elke openbare pagina heeft een eigen URL-pad (geen #-routes)
De paginabron (niet Inspecteren) toont de kop en hoofdtekst van de pagina
Elke route heeft een unieke titel en meta description
Elke route heeft een canonical link naar zichzelf
Navigatie gebruikt echte a-elementen met href
Onbekende URL's geven status 404 terug of hebben noindex
Een sitemap vermeldt elke openbare URL en is ingediend in Search Console
robots.txt blokkeert geen JavaScript- of CSS-bestanden
De gerenderde HTML in URL-inspectie toont de volledige content
Ingelogde en privéschermen hebben noindex of staan achter een login
Paginabron-checker
Plak de HTML uit Paginabron weergeven om te controleren wat een crawler ontvangt.
Paginabron (het voorbeeld is een typische lege SPA-schil)