Een woonwinkel herbouwd zodat AI-zoekmachines de catalogus kunnen lezen

Wat we aantroffen

Het merk verkocht al twee jaar online via een webshop op WordPress en WooCommerce, en er kwam nauwelijks iets uit. Niemand kon nog bij de WordPress-beheeromgeving, dus lazen we de catalogus uit via de publieke WooCommerce Store API en bouwden we hem stuk voor stuk opnieuw op: 24 producten, 93 varianten, 19 series, 9 categorieën en 137 afbeeldingen.

De audit legde problemen bloot die niets met vormgeving te maken hadden. Verzendkosten werden als vast bedrag beloofd terwijl de echte vervoerderstarieven dat niet toelieten. Er stonden doorgestreepte prijzen zonder een echte eerdere prijs erachter. En een paar beweringen over het product en over de betaalpagina waren niet hard te maken, dus die zijn eruit gehaald.

Toen kwam de bevinding die de volgorde van het werk veranderde. Op 4 augustus 2026 haalden we elke URL op zoals GPTBot, ClaudeBot, PerplexityBot en OAI-SearchBot die zien. Alle 65 pagina's gaven nul tekens tekst terug. De winkel bestond pas nadat JavaScript was uitgevoerd, dus voor een AI-assistent was de catalogus leeg.

Wat we bouwden

We bouwden de winkel opnieuw op onze eigen stack, niet op weer een plugin-ecosysteem: Vite, React en TypeScript met Tailwind en shadcn/ui, TanStack Query voor de data, Supabase voor Postgres, Storage, Auth en Deno edge functions, en Vercel voor de hosting. Row level security staat aan en is afgedwongen op alle 25 tabellen, en prijzen worden op de server opnieuw gelezen voordat er iets wordt afgeschreven.

• Alle 65 routes worden bij de build voorgerenderd, elk met een eigen title, description, canonical, Open Graph-tags en JSON-LD. Drie build guards laten de build falen zodra een route onder de 400 tekens zakt, zodat de leesbaarheid niet stilletjes kan wegzakken.
• De gemigreerde afbeeldingen zijn opnieuw gegenereerd als WebP in drie breedtes. Alleen al de tweede fotobatch ging van 80,0 MB PNG naar 11,3 MB, 85,9 procent minder.
• Verzendkosten worden in Postgres berekend op gewicht en zone, en dezelfde functie bedient zowel de schatting in de browser als de server die de bestelling aanmaakt.
• Kaartbetalingen lopen via de virtuele terminal van de eigen bank van de klant over het CECA-protocol, met het bedrag opnieuw gelezen op de server, een geverifieerde handtekening en idempotente herhaalde meldingen.
• Het team van het merk runt de winkel zelf vanuit een beheerpaneel voor bestellingen, producten, prijzen, voorraad, series en verzending.

Hoe het nu draait

De catalogus levert 105.212 tekens leesbare HTML over 65 URL's, en een GitHub Actions-cron roept elke ochtend een Vercel deploy hook aan zodat de voorgerenderde pagina's voorraad- en prijswijzigingen volgen. Bij elke build wordt een productfeed met 92 referenties gegenereerd voor Google Merchant Center, Meta en Pinterest. Een sitemap van 64 pagina's is geaccepteerd in Search Console, en de oude WooCommerce-sitemap, die alleen nog fouten gaf, is weg. Orderbevestigingen vertrekken vanaf het eigen subdomein van de klant.

Voor de opening liepen vijf audits met meerdere agenten, elke bevinding adversarieel geverifieerd, en meer dan 70 zijn opgelost. Een paar daarvan kostten echt geld: een scène die zwarte stukken verkocht terwijl er blauwe te zien waren, een bestelling die 99 stuks afrekende, een winkelwagen die aantallen verdubbelde, en een btw-fout op de behandelkosten van ongeveer 80 euro per 100 bestellingen.