Techniek · SPA · JavaScript
Mijn strategie voor SEO voor SPAs.
SEO voor Single-Page Applications: hoe je React, Vue en Angular SPAs goed laat ranken via SSR, hydration en routing-strategieën. 5 SPA SEO-issues + 6 fixes voor moderne JavaScript-frameworks.
01 — frameworksReact, Vue en Angular — welk framework + SSR-meta-framework?
SPA-frameworks zelf zijn SEO-neutraal — alle drie de grote (React, Vue, Angular) kunnen prima ranken mits correct geïmplementeerd. Het zit hem in de gekozen meta-framework dat SSR + SEO-features toevoegt. Voor breder context op rendering zie CSR vs SSR voor SEO.
3 frameworks · SSR-keuzes 2026meta-framework matters
React
Next.js (default)
Marktleider voor React-based SEO. SSR, SSG, ISR allemaal supported. Server Components in 14+. Voor 90% van React-projecten de juiste keuze. Goed gedocumenteerd, sterke community.
Alt: Remix (sterker focus op server-rendering), Gatsby (static-first, legacy).
Vue
Nuxt.js (default)
Voor Vue projects de Next.js-equivalent. SSR, SSG, hybrid mode. Module-systeem voor SEO-extensies. Goed voor MKB + enterprise. Beste DX van alle SSR-frameworks volgens veel developers.
Alt: Astro (multi-framework, ook Vue), VitePress (docs-specifiek).
Angular
Angular Universal
Officiële Angular SSR-solution. Integreert direct met Angular CLI. Geschikt voor enterprise. Steiler leercurve dan Next/Nuxt. Sinds Angular 17 verbeterd met Hydration en Server-side rendering improvements.
Alt: AnalogJS (Angular meta-framework geïnspireerd door Next.js).
Mijn advies bij greenfield-projecten: kies framework op basis van team-ervaring, niet op SEO-features. Alle drie kunnen excellent ranken met juiste meta-framework. Belangrijker: voorkom pure CSR (vanilla React/Vue/Angular zonder SSR). Voor breder context zie de invloed van JavaScript op SEO.
02 — issues5 SPA SEO-issues + concrete fixes
Hieronder de 5 meest voorkomende SPA SEO-problemen uit mijn audits. Elk met praktische fix die je vandaag nog kunt implementeren.
5 issues · diagnosis + fixaudit-findings
Lege HTML bij first crawl — Wave 1 indexing failsIssue 01
Initial HTML response = leeg div met "loading". Googlebot Wave 1 ziet niets, Wave 2 komt later (dagen tot weken). Tijd-gevoelige content mist eerste indexering. Tax voor SEO.
Fix: Implementeer SSR via Next.js, Nuxt.js of Angular Universal. Content moet in initial HTML staan, niet wachten tot JS uitvoert. Voor breder context zie prerendering voor SEO.
Client-side routing zonder echte URLsIssue 02
SPA router gebruikt hash-fragments (#/page) of pushState zonder server-config. Diep linken naar pages mislukt, deelbaarheid faalt. Google kan niet alle pages crawlen.
Fix: History API + server-side fallback. Server moet ALLE URLs naar index.html routeren (404-protection). React Router, Vue Router, Angular Router doen dit native met juiste config.
Page-specifieke meta-tags niet dynamisch geüpdatetIssue 03
Title, meta description, OG-tags blijven hetzelfde voor alle "pages". Elke route toont in SERP de homepage-metadata. Geen rich-snippets, geen page-specifieke optimalisatie.
Fix: react-helmet-async (React), useHead (Nuxt 3), Title-service (Angular). Update document.title, meta-tags per page-component. Test via View Source.
Diepe nested data fetches blokkeren renderingIssue 04
Component wacht op data van child wacht op data van grandchild. Loading-state duurt seconden. LCP-impact = direct ranking-issue voor Core Web Vitals.
Fix: Server Components (React 18+), getServerSideProps/getStaticProps (Next.js), async setup (Nuxt 3). Data fetchen op server, niet wachten tot client-side. Streaming SSR voor progressive loading.
Hydration mismatches breken renderingIssue 05
SSR-output verschilt van client-side render. Browser haalt mismatch op, herrendert vanaf scratch. Flash of layout, slechte LCP, soms volledig blanco screen. UX + SEO ramp.
Fix: Vermijd browser-only APIs in SSR-context (window, document op render-tijd). Use useEffect of mount-hooks. Test SSR-output vs client-render in dev-mode. React 18+ heeft strict hydration warnings.
Voorbeeld — Next.js page met SEO-meta + SSR:
// pages/blog/[slug].tsx — Next.js 14
export async function getServerSideProps({ params }) {
const post = await fetchPost(params.slug);
return { props: { post } };
}
export default function BlogPost({ post }) {
return (
<>
<Head>
<title>{post.title}</title>
<meta name="description" content={post.excerpt} />
</Head>
<article>{post.content}</article>
</>
);
}
export async function getServerSideProps({ params }) {
const post = await fetchPost(params.slug);
return { props: { post } };
}
export default function BlogPost({ post }) {
return (
<>
<Head>
<title>{post.title}</title>
<meta name="description" content={post.excerpt} />
</Head>
<article>{post.content}</article>
</>
);
}
03 — faqVeelgestelde vragen
FAQ · 3 vragenklik om te openen
Moet ik mijn bestaande SPA omzetten naar SSR voor SEO?›
Niet altijd — afhankelijk van use-case en groei-fase. Zes overwegingen voor de juiste beslissing. (1) Public-facing pages = SSR/SSG vrijwel altijd nodig. Marketing-sites, blogs, e-commerce productpagina's, kennisbank — alles wat van Google traffic moet ontvangen. (2) App-features achter login = SPA acceptabel. Dashboard, settings, user-profielen. Geen SEO-relevantie want toch niet geïndexeerd. Volle SPA acceptabel. (3) Hybrid is meestal de oplossing. Modern frameworks (Next, Nuxt, Astro) supporten per-route SSR/SSG/CSR keuzes. Geen volledige rewrite — incrementele migratie mogelijk. (4) ROI overweging. SPA naar SSR migratie kost typisch 3-8 weken voor mid-size project. ROI: 30-60% traffic-toename mogelijk binnen 6 maanden bij goede execution. (5) Niet alle SPAs hebben echt SSR nodig. SaaS-applicaties die alleen B2B-clients hebben en geen public landing-pages = SPA prima. Marketing-site apart. (6) Compromise: dynamic rendering. Voor SPAs die niet volledig migrated kunnen worden: Prerender.io of Rendertron als tussen-stap. Werkt, maar SSR is future-proof. Voor breder context zie CSR vs SSR voor SEO.
Hoe debug ik SPA-pages in Search Console?›
URL Inspection-tool is essentieel voor SPA-debugging. Vijf systematische stappen. (1) URL Inspection per probleem-page. Voer URL in van SPA-route die niet rankt. "View crawled page" toont wat Googlebot écht ziet. Lege content = SSR werkt niet. (2) Check "Crawled as" — mobile vs desktop. Mobile-first indexing betekent dat mobile-versie primair is. Test in mobile-view of content zichtbaar is. (3) JavaScript-rendering issues herkennen. Als "Page resources" sectie toont meerdere "blocked" JS-files = robots.txt blokkeert resources die Googlebot nodig heeft. Fix: robots.txt allows op JS/CSS folders. (4) Test live URL vs indexed URL. URL Inspection kan beide tonen. Verschillen = content is gewijzigd of caching-issues. Refresh + recrawl-aanvraag. (5) Page experience signals. URL Inspection toont Core Web Vitals-status. Voor SPAs vaak LCP-issues door late client-side rendering. Fix via SSR. Voor breder context zie Google Search Console gids.
Werkt Next.js Server Components beter dan traditionele SSR?›
Server Components (React 18+) is een belangrijke evolutie. Vijf principes voor de juiste keuze. (1) RSC vs traditionele SSR. Traditionele SSR rendert hele page op server, hydrateert op client. Server Components zijn fundamenteel anders — never run on client. Geen hydration nodig voor pure server-components. (2) Bundle-size reductie. Server Components leveren geen JS naar client. Pure HTML-render. Vaak 30-70% kleinere JavaScript bundles vs traditional SSR. Direct Core Web Vitals benefit. (3) Streaming + Suspense. Server Components support React Suspense voor streaming SSR. Progressive page-loading vóór alle data binnen is. Better perceived performance. (4) Client Components nog steeds nodig. Interactive components (forms, dropdowns, modals) blijven Client Components. "use client" directive markeert ze. Hybrid model. (5) Adoptie-curve. Server Components zijn relatief nieuw (stable Next.js 13.4, mei 2023). Steep learning curve maar significant performance/SEO benefit. Voor nieuwe projecten = first choice. Bestaande Next-projecten = gradual migration. Voor breder context zie de invloed van JavaScript op SEO.
SPA SEO-audit voor jouw site?
Audit van SPA-rendering, identificatie van Wave 1/2 indexing-issues, en migratie-plan naar SSR/SSG met je gekozen framework (Next.js, Nuxt.js, Angular Universal). Plus Core Web Vitals optimalisatie en Server Components-aanbevelingen.
Plan een gesprek met Ralf →