We bouwden een receptensite met honderden pagina’s.
Alles werkte perfect — voor bezoekers.
Maar voor Google was de site vrijwel leeg.... ik zoeken in Search console...
Pas toen we de HTML-bron bekeken, zagen we het probleem:
de hele site bestond uit een React-app waarin de echte content pas na JavaScript verscheen.
De architectuur die AI bouwt
Toen we recepten.pb.nl begonnen te bouwen wilden we vooral één ding: snel live.
Met behulp van AI en Replit stond er in korte tijd een complete site:
honderden recepten
filters en categorieën
een CMS
een moderne interface
De technische stack die daaruit kwam is tegenwoordig heel gebruikelijk:
React + Express
Dat betekent dat de site gebouwd is als een Single Page Application (SPA).
Voor dashboards en tools werkt dat uitstekend.
Maar voor een content site met honderden pagina’s werkt het anders. En google moet dus een pagina genereren om hemm te zien zeg maar....
Het resultaat
In Google Search Console begonnen de meldingen binnen te komen:
Soft 404
Page indexed without content
Crawled – currently not indexed
Toen we het overzicht bekeken bleek het probleem groter dan verwacht.
Meer dan 700 pagina’s werden niet geïndexeerd.
De site werkte dus prima voor bezoekers,
maar voor Google bestond hij eigenlijk nauwelijks, echt kak dus.....
Performance vertelde hetzelfde verhaal
Toen we de site gingen meten zagen we hetzelfde patroon.
Omdat alle content via JavaScript geladen moest worden:
First Contentful Paint: ±6.4 seconden
Largest Contentful Paint: ±9.6 seconden
honderden kilobytes JavaScript voordat er iets zichtbaar was
De site functioneerde technisch als een webapplicatie, niet als een content website.
De tijdelijke oplossing
Onze eerste reactie was een snelle fix.
We injecteerden server-side HTML buiten React, zodat Google toch iets kon lezen.
Dat werkte gedeeltelijk.
Google begon ineens recepten te herkennen.
Maar het bleef een hack bovenop een architectuur die hier eigenlijk niet voor bedoeld was.
De echte oplossing
Daarom besloten we het probleem bij de bron aan te pakken, ik zette claude aan het werk voor een plan, en liet chatgpt mee denken, dus twee AI's die me overtuigde de juiste keuzes te maken.
We veranderden niet alleen de code, maar ook de renderingstrategie van de site.
De oplossing werd Next.js.
Next.js kan pagina’s server-side of statisch genereren, waardoor de HTML direct compleet is wanneer een crawler de pagina opent.
Dus wanneer Google nu een pagina opvraagt, ziet het meteen:
de titel
de ingrediënten
de bereidingsstappen
de recipe structured data
Zonder JavaScript uit te voeren en alle onderdelen perfect uit te lezen na check via https://search.google.com/test/rich-results.
React SPA vs Next.js
Het verschil tussen beide benaderingen is eigenlijk vrij simpel.
React SPA:
Browser → HTML leeg
→ JavaScript laden
→ API ophalen
→ React render
→ Content zichtbaar
Next.js:
Browser → HTML compleet
→ Content direct zichtbaar
→ JavaScript alleen voor interactie
Voor zoekmachines maakt dat een wereld van verschil.
Wat er nu anders is
Na de migratie ziet de site er voor bezoekers bijna hetzelfde uit.
Maar onder de motorkap is alles veranderd.
De recepten worden nu statisch gegenereerd.
In plaats van een React-app die content ophaalt, krijgt elke pagina zijn eigen HTML.
In ons geval betekent dat:
770+ statische pagina’s
server-side HTML
recipe structured data
levering via een CDN
Pagina’s laden nu vrijwel direct, echt snel en echt een heel verschil in beleving vind ik zelf.
En belangrijker: zoekmachines kunnen ze eindelijk volledig lezen.
Wat we (ik) hiervan geleerd hebben
AI kan tegenwoordig razendsnel een werkende applicatie bouwen.
Maar AI bouwt meestal apps.
Niet automatisch SEO-vriendelijke contentsites.
Voor tools en dashboards is een SPA perfect.
Voor een site met honderden artikelen of recepten blijft één principe belangrijk:
HTML die direct leesbaar is.
Waar we nu staan
De nieuwe site draait inmiddels als een Next.js build met statisch gegenereerde pagina’s.
De eerste tests laten zien dat Google de recepten nu direct kan herkennen, en we zijn echt zoveel sneller in loading.
Al met al, is claude code (terminal) met 3 extra agents ruim uurtje of 4 met mijn als tester constant toch wel bezig geweest alles frond-end en cms om te bouwen, valt me steeds wel op dat je als een havik alles moet benoemen en controleren wat ze laten zo onderdelen weg, en was ook even; (had bypass aan staan dus ging als de brandweer) OEPS! frond-end staat al live....... Maar goed alles was er bijna dus zo gelaten, osm even warm maar gewon gaan. En onze Json auto uploads (voor recepten) was weg en image compress...pff.... nu bijna gefixt :)
Nu Wacht op google, alles weer aangeboden in seach console.
Endoor Peet.