Headless commerce

In een traditionele webshop maakt het platform zelf de pagina's: Magento met Luma of Hyvä, Shopify met een Liquid-thema. Bij headless commerce doet het platform alleen nog het commerce-werk: producten, prijzen, voorraad, winkelwagen, orders. De frontend is een aparte applicatie, vaak in React, Vue of een framework als Next.js, die de data via een API ophaalt.

Bekende varianten zijn Shopify Hydrogen met de Storefront API, Magento met GraphQL en een eigen of open-source frontend, en een Laravel-applicatie die als frontend of als koppellaag naast een platform draait. Composable commerce gaat nog een stap verder: ook zoeken, CMS en checkout komen van losse diensten.

Headless betekent niet automatisch sneller. Een React-frontend met een grote bundle en hydration op elke pagina kan trager zijn dan een goed gebouwd Hyvä- of Liquid-thema. De snelheid hangt af van hoe de frontend gebouwd is, niet van het label.

Alles wat het platform standaard regelt, moet je bij headless zelf bouwen. Canonicals, meta robots, hreflang, XML-sitemaps, 301-redirects bij gewijzigde URL's, structured data, breadcrumbs, 404- en 410-statuscodes. Elk onderdeel dat vergeten wordt, is een SEO-probleem.

Rendering is het tweede punt. Een headless frontend moet de HTML op de server genereren, met server-side rendering of statische generatie. Een frontend die alles client-side opbouwt, levert Googlebot eerst een lege pagina. Google rendert JavaScript later, maar niet elke crawler doet dat. Veel AI-crawlers lezen alleen de ruwe HTML.

Ook lastig: statuscodes. Een single-page app geeft voor een niet-bestaand product vaak een 200 met een foutmelding, wat Google als soft 404 ziet. De server moet de juiste code teruggeven.

Maak vóór de bouw een lijst van alle SEO-functies van het huidige platform en wijs per functie aan wie het in de nieuwe frontend bouwt. Denk ook aan de kleine dingen: trailing slashes, hoofdletters in URL's, gepagineerde categorieën, de afhandeling van uitverkochte producten en de interne zoekfunctie. Zo'n lijst voorkomt dat je na livegang ontdekt wat er ontbreekt.

Headless loont als je frontend dingen moet doen die het platform niet kan: meerdere platformen achter één site, sterk afwijkende content-ervaringen, of meerdere kanalen die dezelfde API gebruiken. Het kost wel meer: een tweede codebase, eigen hosting en meer onderhoud bij elke platformupdate.

Voor de meeste webshops zijn er snellere routes naar dezelfde winst. Voor Magento levert Hyvä een snelle frontend die server-gerenderd is en de SEO-functies van Magento behoudt. Voor Shopify haal je met een schoon thema en minder apps vaak dezelfde Core Web Vitals. Kies headless om een functionele reden, niet alleen voor snelheid.

Er is ook een tussenvorm. Je kunt het platform de meeste pagina's laten renderen en alleen specifieke onderdelen headless bouwen, zoals een configurator, een kennisbank of een landingspagina op Laravel. Dan houd je de SEO-functies van het platform voor de bulk van je pagina's en bouw je maatwerk alleen waar het iets oplevert.

Een headless relaunch zonder redirectplan, waardoor oude URL's van het platform 404 geven. Structured data die alleen client-side wordt toegevoegd. Twee versies van de site die beide bereikbaar zijn: de headless frontend en de oude platform-frontend, zonder canonical of afscherming. En een sitemap die nog door het platform wordt gegenereerd, met URL's die in de nieuwe frontend anders zijn.

Test een headless frontend voor livegang met een crawler die geen JavaScript uitvoert. Wat die niet ziet, ziet een deel van de zoek- en AI-crawlers ook niet.