Product schema voor Lovable-webshops

Met product schema vertel je Google wat je verkoopt: naam, prijs, voorraad en beoordelingen. Daarmee komt je productpagina in aanmerking voor rijke resultaten, zoals een productsnippet met prijs en sterren, en voor merchant-vermeldingen. Hier vind je de markup en hoe je controleert of Google hem krijgt. Het is een van de gidsen over Lovable SEO.

Het probleem: dynamische productpagina’s

Lovable-webshops halen productdata vaak op via een API-call na de eerste render. Bij een oudere Lovable-app kan zulke laat geladen inhoud in de prerender voor Googlebot ontbreken. Dan mist Google prijs, voorraad en beoordelingen, en vaak ook je JSON-LD.

De fix is niet je hele stack overhoop halen. Zorg dat productdata en JSON-LD al in de HTML staan als de pagina geleverd wordt. Bij nieuwe apps kan dat met server-rendering, mits de productdata bij het renderen al wordt opgehaald. Bij een oudere app controleer je wat in de prerender staat, of upgrade je naar TanStack Start. In beide gevallen check je per product-URL in de geteste HTML of prijs, voorraad en JSON-LD erin staan.

Product-schema: de minimale set

Welke velden Google vereist, hangt af van het resultaat. Voor een productsnippet is name verplicht, plus minstens één van review, aggregateRating of offers. Voor merchant-vermeldingen vraagt Google onder meer name, image en een offers met price en priceCurrency. Velden als description, brand, sku en availability zijn aanbevolen: ze maken je resultaat completer. Een stap-voor-stapvoorbeeld staat in JSON-LD schema voor Lovable bouwen.

{
  "@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. Gebruik alleen beoordelingen die klanten echt hebben gegeven, en toon de waardering ook zichtbaar op de productpagina. Zo staat het ook in de richtlijnen van Google voor review-snippets.

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

Krijgt Google je productpagina’s te zien?

Op Lovable-hosting is dat geregeld. Apps die vanaf 13 mei 2026 zijn gemaakt (Enterprise: vanaf 22 juni 2026), gebruiken TanStack Start met server-rendering. Oudere apps sturen Googlebot een prerender. Lovable waarschuwt wel dat inhoud die laat laadt in die prerender kan ontbreken (hostingdocumentatie). Haalt je shop prijs of voorraad pas na een API-call op, controleer dan met URL-inspectie in Search Console of die en je JSON-LD in de geteste HTML staan.

Host je de shop zelf, buiten Lovable, dan regel je dit zelf. Met een prerender-plugin zoals vite-plugin-prerender bouw je statische HTML-versies, inclusief JSON-LD. Dat werkt alleen als de lijst met product-URL’s en de productdata tijdens de build beschikbaar zijn; de plugin maakt niet vanzelf voor elke productpagina volledige HTML.

Veelgemaakte fouten

• JSON-LD pas na een API-call injecteren. In de prerender van een oudere Lovable-app kan laat geladen inhoud ontbreken. Check het met URL-inspectie.
• Prijs zonder priceCurrency. Search Console meldt dat als fout bij merchant-vermeldingen.
• availability: "InStock" terwijl het voorraad-veld leeg is — dat botst met wat op de pagina staat, en dat is tegen de richtlijnen van Google voor structured data.
• 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)	laat Google zien welke varianten bij één product horen
Organization	één keer, op je homepage	helpt Google je naam, logo en bedrijfsgegevens te koppelen
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 kan meer kliks opleveren, geen hogere positie. 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 kun je dat op twee manieren opzetten: één pagina waar de bezoeker de maat kiest, of een eigen URL per variant. Google ondersteunt beide. Zonder groepering staan er wel vier losse Product-blokken die niets van elkaar weten.

De opbouw: één ProductGroup met de varianten als hasVariant eronder. Per variant geef je op wat verschilt: maat, kleur, prijs, voorraad. Heeft elke variant een eigen URL, dan zet je die URL in de variant. Welke URL Google indexeert, beslist Google zelf; je canonicals en interne links sturen daarin mee.

Een voorbeeld voor één productpagina waar de bezoeker de maat kiest. Elke variant heeft een eigen URL met een parameter die die maat direct selecteert, zoals Google voor deze opzet vraagt. productGroupID houdt de groep bij elkaar, variesBy gebruikt de volledige schema.org-URL van de eigenschap.

{
  "@context": "https://schema.org",
  "@type": "ProductGroup",
  "name": "Linnen shirt",
  "url": "https://jouwshop.nl/linnen-shirt",
  "brand": { "@type": "Brand", "name": "Jouwmerk" },
  "productGroupID": "linnen-shirt",
  "variesBy": ["https://schema.org/size"],
  "hasVariant": [
    {
      "@type": "Product",
      "sku": "linnen-shirt-s",
      "name": "Linnen shirt maat S",
      "size": "S",
      "url": "https://jouwshop.nl/linnen-shirt?maat=s",
      "image": "https://jouwshop.nl/img/linnen-shirt.jpg",
      "offers": {
        "@type": "Offer",
        "price": "39.95",
        "priceCurrency": "EUR",
        "availability": "https://schema.org/InStock"
      }
    },
    {
      "@type": "Product",
      "sku": "linnen-shirt-m",
      "name": "Linnen shirt maat M",
      "size": "M",
      "url": "https://jouwshop.nl/linnen-shirt?maat=m",
      "image": "https://jouwshop.nl/img/linnen-shirt.jpg",
      "offers": {
        "@type": "Offer",
        "price": "39.95",
        "priceCurrency": "EUR",
        "availability": "https://schema.org/OutOfStock"
      }
    }
  ]
}

• Zet variesBy op de eigenschap die daadwerkelijk verschilt, bijvoorbeeld size of color.
• Geef elke variant een eigen sku of GTIN, zodat de varianten in je data uit elkaar te houden zijn.
• Laat de prijs in Offer overeenkomen met wat de bezoeker op de pagina ziet. Wijkt het af, dan is dat tegen de richtlijnen en kan Google je snippet weglaten.

Rijke resultaten of Merchant-vermeldingen: niet hetzelfde

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

• Productsnippets komen uit het schema op je eigen pagina. Je hoeft niets aan te melden; Google leest het bij het crawlen.
• Merchant-vermeldingen, zoals in de Shopping-tab, kunnen uit Product-markup op je pagina komen of uit een productfeed in Google Merchant Center. Merchant Center heeft eigen regels en eigen afkeuringen.

Voor een kleine Lovable-webshop begin je bij het schema. Merchant Center wordt interessant als je wilt adverteren of meer controle wilt over hoe je producten in Shopping verschijnen. In alle gevallen geldt: geschikt zijn betekent niet dat Google het resultaat ook toont.

Controleren of het werkt

Plak je product-URL in Google Rich Results Test. Zie je geldige items voor productsnippets of merchant-vermeldingen, dan is je markup in orde. Een groene test garandeert geen vertoning. Zie je fouten, dan wijst de melding aan welke property ontbreekt of niet klopt.