Open Graph in een React SPA: waarom je preview leeg blijft
Je hebt og:-tags toegevoegd met react-helmet, maar Facebook, X en Slack tonen niets? Dat klopt: de scrapers van social platforms voeren geen JavaScript uit. Ze zien alleen de kale index.html die je server terugstuurt — en daar staan je tags niet in. Dit is geen bug in je code; het is een architectuurprobleem van client-side rendering.
De gratis checker toont je previews voor X, LinkedIn, Facebook, Slack en Discord.
Begrijp het probleem
Een React SPA stuurt één lege index.html en bouwt de pagina in de browser met JavaScript. Social scrapers (Facebook, X, LinkedIn, Slack, Discord, WhatsApp) renderen geen JS — zij zien dus voor élke route dezelfde lege head. Alles wat react-helmet client-side toevoegt, bestaat voor hen niet.
Oplossing 1 (beste): server-side rendering
Migreer naar een framework met SSR of static generation: Next.js, Remix of Astro. De tags staan dan in de HTML-response zelf en elke scraper ziet ze. Dit is de structurele oplossing.
Oplossing 2: prerendering
Genereer bij het builden een statische HTML-snapshot per route (bijv. met vite-plugin-ssr/prerender-opties van je bundler). Werkt goed voor sites met een beperkt aantal vaste routes.
Oplossing 3: meta-injectie op de server/edge
Laat je webserver of een edge-function per route de juiste og:-tags in de index.html injecteren vóór verzending. Een pragmatische tussenoplossing als migreren geen optie is.
Controleer als een scraper
Test nooit alleen in de browser — daar draait JS wél. Plak je URL in de MetaPeek-checker: die haalt de pagina op zoals een scraper dat doet, zonder JavaScript.
Veelgemaakte fouten
- "Maar Google ziet mijn tags wel"Google rendert JavaScript, social scrapers niet. Dat je pagina goed indexeert zegt niets over je social previews.
- Testen in de browserView-source (Ctrl+U) toont wat de server stuurt — dáár moeten je tags staan. De elements-inspector toont het resultaat ná JS en is dus misleidend.
Veelgestelde vragen
Werkt react-helmet dan helemaal niet?
Voor de browsertab en voor Google: prima. Voor social previews: alleen als je het combineert met SSR, zodat de tags al in de server-response staan.
Wat is de snelste fix zonder migratie?
Meta-injectie op je server of edge (oplossing 3): één middleware die per route de juiste tags in de HTML zet. Geen React-wijzigingen nodig.
Plak je URL en zie binnen twee seconden of alles klopt — op elk platform.