Schema.org structured data toevoegen aan je Lovable-site (2026)

Sterren, prijzen, FAQ-balkjes. Allemaal door één blokje JSON.

Schema.org-markup beschrijft informatie die op de pagina zichtbaar en correct moet zijn. Voeg geen review-, prijs- of FAQ-velden toe die bezoekers niet kunnen controleren.

Kies eerst het type dat bij de pagina past, voeg alleen echte velden toe en test daarna de gerenderde HTML. Een groene validator maakt de inhoud niet automatisch geschikt voor rich results.

Structured data testen · HTML-structuur · Metadata controleren

Onderbouwing: Schema.org · Google structured data policies

Schema.org-markup vertelt Google wat je content eigenlijk is. Goed gebruikt, krijg je rich results — visueel opvallende zoekresultaten met meer ruimte en hogere klikratio's. Hier lees je welke schema's wanneer werken op een Lovable-site.

Twee identieke zoekresultaten op pagina één van Google. Beide titelen "Lovable SEO-pakket - BacklinksWinkel". De ene is een grijze, tekstuele snippet. De andere heeft een prijsindicatie, vier sterren, en drie veelgestelde vragen direct in het resultaat zichtbaar. Welke krijgt de klik?

Dat verschil heet structured data. Het zijn machine-leesbare codeblokjes die in je HTML zitten, onzichtbaar voor bezoekers, maar essentieel voor zoekmachines. En ja, je kunt ze prima aan een Lovable-site toevoegen — mits je een paar dingen weet.

Geeft schema gegarandeerd rich results?

Nee. Google bepaalt eligibility en kan een resultaat anders tonen.

Kun je onzichtbare FAQ's markeren?

Nee. Markup moet overeenkomen met zichtbare, toegankelijke inhoud.

Wat is structured data en waarom doet het ertoe?

Structured data is een afgesproken vocabulaire (Schema.org) waarmee je vertelt: "Deze pagina gaat over een Artikel, met deze auteur, deze datum, dit aantal sterren." Google leest dat, koppelt het aan zijn understanding van content, en kan jouw resultaat dan ver-rijken in de SERP.

Belangrijke kanttekening: Schema-markup geeft Google een hint, geen garantie. Google bepaalt of jouw site "goed genoeg" is voor het rich result. Maar zonder schema is de kans nul.

De vier formats — waarom je JSON-LD wilt

Google ondersteunt drie schema-formats: Microdata, RDFa en JSON-LD. Voor Lovable-sites is JSON-LD de enige zinvolle keuze:

Kritieke waarschuwing: CSR + JSON-LD = problemen

Top 5 schema-types voor Lovable-sites

Schema.org definieert honderden types. Voor 95% van de Lovable-sites zijn deze vijf relevant:

1. Organization — voor je homepage

Wie ben je, waar zit je, hoe bereik je je. Eén keer per site, op de homepage. Geeft Google de basis om je merk te begrijpen en helpt bij de Knowledge Panel.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "JouwMerk",
  "url": "https://jouwdomein.nl",
  "logo": "https://jouwdomein.nl/logo.png",
  "description": "Korte omschrijving in 1-2 zinnen.",
  "sameAs": [
    "https://www.linkedin.com/company/jouwmerk",
    "https://x.com/jouwmerk"
  ],
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+31201234567",
    "contactType": "customer service",
    "availableLanguage": ["Dutch", "English"]
  }
}
</script>

2. Article — voor blogposts en kennisbank

Voor elke long-form content-pagina. Geeft Google auteur, datum, en hoofdafbeelding — wat de "Top Stories" en "News" carousels mogelijk maakt.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Titel van het artikel",
  "image": ["https://jouwdomein.nl/hero.jpg"],
  "datePublished": "2026-05-14T08:00:00+02:00",
  "dateModified": "2026-05-14T08:00:00+02:00",
  "author": {
    "@type": "Person",
    "name": "Auteur Naam",
    "url": "https://jouwdomein.nl/over-de-auteur"
  },
  "publisher": {
    "@type": "Organization",
    "name": "JouwMerk",
    "logo": {
      "@type": "ImageObject",
      "url": "https://jouwdomein.nl/logo.png"
    }
  }
}
</script>

3. Product — voor productpagina's en SaaS-features

Product schema past bij fysieke producten, SaaS-aanbiedingen en digitale downloads wanneer prijs en beschikbaarheid zichtbaar op de pagina staan.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Lovable Boost Pakket",
  "image": "https://jouwdomein.nl/product.jpg",
  "description": "Technische SEO-fixes + 5 backlinks voor Lovable-sites.",
  "brand": { "@type": "Brand", "name": "JouwMerk" },
  "offers": {
    "@type": "Offer",
    "url": "https://jouwdomein.nl/lovable-seo/pakket/",
    "priceCurrency": "EUR",
    "price": "599",
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.7",
    "reviewCount": "23"
  }
}
</script>

Eerlijkheid voorop: verzin geen aggregateRating als je geen echte reviews hebt — Google straft fake reviews zwaar af.

4. FAQ — voor pagina's met veelgestelde vragen

Dit is bijna gratis SEO-real-estate: FAQ-schema kan vragen + antwoorden direct in de SERP tonen. Werkt vooral goed op informatieve landingspagina's.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Werkt schema-markup op een Lovable-site?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Ja, maar bij CSR-projecten heb je prerendering of SSR nodig anders ziet Googlebot het niet bij de eerste crawl."
      }
    },
    {
      "@type": "Question",
      "name": "Welk format gebruik ik?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "JSON-LD is de aanbevolen variant van Google en het makkelijkst te onderhouden in React/JSX."
      }
    }
  ]
}
</script>

Let op: Google heeft in 2023 de criteria voor FAQ-rich results aangescherpt. Alleen autoritatieve government- en health-sites krijgen het nog standaard. Voor commerciële sites werkt het soms, soms niet — maar het kost je niets om het toe te voegen.

5. LocalBusiness — voor lokale dienstverleners

Heb je een fysiek adres en bedien je een lokaal publiek? Dan is LocalBusiness onmisbaar. Google koppelt dit aan Google Business Profile en lokale pack-resultaten.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "JouwMerk Amsterdam",
  "image": "https://jouwdomein.nl/pand.jpg",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Voorbeeldstraat 1",
    "addressLocality": "Amsterdam",
    "postalCode": "1011 AB",
    "addressCountry": "NL"
  },
  "telephone": "+31201234567",
  "openingHours": "Mo-Fr 09:00-17:00",
  "priceRange": "€€"
}
</script>

De Lovable-AI-prompt voor schema-generatie

In plaats van JSON met de hand schrijven, kun je Lovable's AI laten genereren. Deze prompt geeft consistente resultaten:

Voeg JSON-LD structured data toe voor [type pagina] aan deze pagina.

Gebruik schema-type: [Article/Product/FAQ/Organization/LocalBusiness]
Plaats het in een <script type="application/ld+json"> tag in de <head> via react-helmet-async.
Vul realistische, accurate data in op basis van de bestaande pagina-inhoud.
Gebruik volledige absolute URL's (https://...).
Valideer dat het geldige JSON is en geen syntax fouten bevat.

Belangrijke randvoorwaarden om aan Lovable mee te geven:

• Geen verzonnen reviews of ratings — gebruik alleen wat je echt hebt
• Alle URL's absoluut met https://
• Datumformaat ISO 8601 (YYYY-MM-DDTHH:mm:ss+TZ)
• Eén script-blok per schema-type (niet vermengen)
• Bij FAQ-schema: vragen + antwoorden moeten ook zichtbaar zijn op de pagina zelf (Google's regel)

Test je markup met Google Rich Results Test

Wijzigen zonder testen is gevaarlijk. Onjuiste JSON-LD wordt door Google genegeerd — in het slechtste geval levert het waarschuwingen op in Search Console.

Voor CSR-sites: gebruik in de Rich Results Test de "Live URL" optie, niet "Code". Dat dwingt Google om JS te renderen, zodat je ziet wat Wave 2 daadwerkelijk pakt. Vergelijk met de "Code"-optie om te zien wat al in Wave 1 zichtbaar is.

Welke schema geeft welk rich result?

Hoe schema-markup eruitziet in je Lovable-code

Een praktisch voorbeeld voor een React-component met react-helmet-async:

import { Helmet } from 'react-helmet-async'

export function ProductPage({ product }) {
  const schema = {
    "@context": "https://schema.org",
    "@type": "Product",
    "name": product.name,
    "description": product.description,
    "offers": {
      "@type": "Offer",
      "price": product.price,
      "priceCurrency": "EUR",
      "availability": "https://schema.org/InStock"
    }
  }

  return (
    <>
      <Helmet>
        <title>{product.name} - JouwMerk</title>
        <script type="application/ld+json">
          {JSON.stringify(schema)}
        </script>
      </Helmet>
      {/* rest van de pagina */}
    </>
  )
}

In TanStack Start (post-april 2026) gebruik je liever de native <Head> component, want die wordt SSR-gerendered en is direct zichtbaar voor Wave 1.

Veelgemaakte fouten bij schema-markup

Conclusie en actieplan

Schema-markup is een van de weinige SEO-quick-wins die je in een Lovable-project kunt toevoegen zonder grote architectuurwijzigingen — mits je rendering op orde is. Begin met Organization op de homepage, Article op je belangrijkste content-pagina's, en Product op alles wat je verkoopt. Test elke wijziging in de Rich Results Test voordat je deployt.

Voor sites die nog op CSR draaien: schema toevoegen heeft pas zin nadat je rendering hebt opgelost. Onze gids Lovable site niet in Google behandelt die voorvraag stap voor stap. En voor een complete analyse waarin schema, robots.txt, sitemap én linkbuilding samenkomen: bekijk het Lovable Boost Pakket of vraag een audit aan via onze Lovable SEO-pagina.