E-commerce schema voor Lovable-webshops

Een Lovable-webshop zonder Product-schema is voor Google een blanco pagina. Niet alleen mis je rich results — je product is letterlijk onzichtbaar in de Shopping-tab. Hier vind je de minimaal vereiste markup en hoe je die in je Vite-build laat genereren.

Het probleem: dynamische productpagina’s

Lovable-webshops halen productdata vaak op via een API-call na initial render. Dat betekent: prijs, voorraad, recensies — niets daarvan staat in de HTML die Googlebot binnenkrijgt. Het rendert dus een lege producttitel zonder enige metadata.

De fix is niet je hele stack overhoop halen. Het is: bij build-tijd of bij eerste request, een server-side render genereren van de productpagina met JSON-LD ingebed.

Product-schema: de minimale set

Google’s Product Schema heeft een wettelijk vereiste set velden voor rich results: name, image, description, brand, sku, offers.price, offers.priceCurrency, offers.availability. Mist één van deze, dan vervalt je rich result.

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Bamboe Boekenstandaard",
  "image": "https://shop.nl/img/standaard.jpg",
  "description": "Verstelbare leesstandaard van duurzaam bamboe.",
  "brand": { "@type": "Brand", "name": "Voorbeeld" },
  "sku": "BBS-001",
  "offers": {
    "@type": "Offer",
    "price": "29.95",
    "priceCurrency": "EUR",
    "availability": "https://schema.org/InStock",
    "url": "https://shop.nl/standaard"
  }
}

Review-schema: rating-stars in de SERP

Wil je sterren in je zoekresultaat? Voeg aggregateRating toe. Eén regel: gebruik alleen écht verzamelde reviews — Google’s spam-team controleert dit.

"aggregateRating": {
  "@type": "AggregateRating",
  "ratingValue": "4.6",
  "reviewCount": "127"
}

Pre-render of SSR — kies één

Voor Vite-gebaseerde Lovable-builds zijn er twee paden. Pre-render (statisch, build-time) werkt voor catalogi tot ~5.000 producten. SSR (server-side rendering, request-time) schaalt verder maar vereist een runtime. Voor 80% van de NL-shops is pre-render genoeg.

Met vite-plugin-prerender of vite-ssg bouw je voor elke productpagina een statische HTML-snapshot, inclusief JSON-LD, klaar voor Googlebot.

Veelgemaakte fouten

• JSON-LD pas na JavaScript injecteren — Googlebot rendert wel, maar trager en minder betrouwbaar.
• Prijs zonder priceCurrency — wordt afgekeurd in de Search Console.
• availability: "InStock" terwijl het voorraad-veld leeg is — leidt tot rich-result-suspensies.
• Meerdere @id-velden door hergebruik van componenten zonder unieke parameter.

Welk schema-type gebruik je waarvoor

Schema is niets meer dan een blokje JSON in je HTML dat aan Google vertelt wat er op de pagina staat. Niet welke woorden er staan — dat leest hij zelf — maar wat het is: een product, een review, een bedrijf. Er bestaan honderden types op schema.org; voor een Lovable-webshop heb je er vier nodig.

Type	Zet je op	Wat het oplevert
Product	elke productpagina	prijs, voorraad en beoordeling in het zoekresultaat
ProductGroup	een product met varianten (maten, kleuren)	voorkomt dat elke variant als los product wordt gezien en je eigen pagina’s elkaar wegdrukken
Organization	één keer, op je homepage	je logo en bedrijfsgegevens in het kennispaneel
BreadcrumbList	categorie- en productpagina’s	het kruimelpad in plaats van een kale URL onder je titel

Schema is geen rankingfactor. Het verandert niet op welke plek je staat, wel hoe je resultaat eruitziet als je er staat. Dat scheelt kliks, niet posities. Waarom dat onderscheid ertoe doet staat in structured data is geen rankingknop. Meer schema-praktijk vind je in de artikelen over JSON-LD en rich results.

Varianten: waar het bij Lovable-webshops misgaat

Verkoop je hetzelfde shirt in vier maten, dan is de verleiding om vier productpagina’s te maken met elk hun eigen Product-schema. Google ziet dan vier vrijwel identieke producten en kiest er zelf één. De andere drie verdwijnen.

De juiste opbouw: één ProductGroup met de varianten als hasVariant eronder. Je geeft per variant alleen op wat verschilt — maat, kleur, prijs, voorraad. De rest erft van de groep. Zo blijft er één URL over die alle signalen verzamelt.

• Zet variesBy op de eigenschap die daadwerkelijk verschilt, bijvoorbeeld size of color.
• Geef elke variant een eigen sku. Zonder sku kan Google ze niet uit elkaar houden.
• Laat de prijs in Offer overeenkomen met wat de bezoeker op de pagina ziet. Wijkt het af, dan vervalt je snippet zonder melding.

Rijke resultaten of Merchant-vermeldingen: niet hetzelfde

Deze twee worden vaak door elkaar gehaald, en het verschil bepaalt of je iets moet aanleveren.

• Rijke resultaten komen uit het schema op je eigen pagina. Je hoeft niets aan te melden; Google leest ze bij het crawlen. Gratis.
• Merchant-vermeldingen komen uit een productfeed die je in Google Merchant Center zet. Dat is een aparte koppeling met eigen regels en eigen afkeuringen.

Voor een kleine Lovable-webshop begin je bij het schema. Dat is een middag werk en het werkt meteen. Merchant Center is pas interessant als je ook wilt adverteren of in de Shopping-tab wilt staan.

Controleren of het werkt

Plak je product-URL in Google Rich Results Test. Zie je daar ‘Product detected’ met groene vinkjes, dan ben je klaar voor de Shopping-tab. Zie je rode kruisjes? De foutmelding wijst exact aan welke property ontbreekt.