Definitie
JSON-LD is een notatie om structured data als los scriptblok in een pagina te zetten. Het is het formaat dat Google aanraadt voor schema-markup.
Wat is JSON-LD?
JSON-LD staat voor JavaScript Object Notation for Linked Data. Het is een W3C-standaard om gegevens over een pagina vast te leggen in gewone JSON. Je plaatst het in een script-tag met het type application/ld+json. De browser doet er niets mee. Zoekmachines en andere crawlers lezen het uit.
Drie sleutels kom je overal tegen. @context zegt welke woordenlijst je gebruikt, bijna altijd https://schema.org. @type zegt wat het ding is: Product, Offer, Organization. @id geeft het ding een vaste identifier, zodat je er vanuit andere blokken naar kunt verwijzen.
Dat laatste is het 'Linked Data'-deel. Met @id koppel je de Organization op je homepage aan de seller in elke Offer, zonder alles te herhalen.
Waarom JSON-LD en niet microdata?
Microdata zet attributen als itemprop direct op je HTML-elementen. Verandert een frontend-bouwer de opmaak van de prijs, dan kan de markup stilletjes breken. JSON-LD staat los van de layout. Je genereert het op één plek uit je productdata en het blijft werken, wat er ook met de HTML gebeurt.
Google ondersteunt alle drie de formaten, maar raadt JSON-LD aan. Voor een webshop met duizenden producten is het ook gewoon beter te testen: één blok, één bron, één plek om te debuggen.
JSON-LD in Magento, Shopify en Laravel
In Magento 2 genereer je JSON-LD het netst in een eigen module of ViewModel dat de productdata uitleest, en render je het in de head of onderaan de body. Let op de full page cache: de prijs en voorraad in het blok worden mee-gecachet. Dat is prima zolang de cache bij een prijswijziging wordt geleegd.
In Shopify schrijf je JSON-LD in Liquid, in een snippet in het product-template. Gebruik de json-filter voor teksten, anders breekt één aanhalingsteken in een productnaam het hele blok. In Laravel bouw je het als array uit je model en geef je het met json_encode door aan de view.
Bij headless-shops (Next.js, Vue Storefront en dergelijke) hoort het blok in de server-gerenderde HTML. Wordt het pas na hydration toegevoegd, dan ziet niet elke crawler het.
Veelgemaakte fouten
Ongeldige JSON door een komma te veel of een niet-geëscapet aanhalingsteken, waardoor het hele blok wordt genegeerd. Prijzen met een komma ("19,95") in plaats van een punt. Relatieve URL's voor afbeeldingen. Meerdere losse blokken die hetzelfde product met andere waarden beschrijven. En HTML-tags of entiteiten in de description die ongecontroleerd uit de CMS-editor komen.
Test na elke thema- of extensie-update. Plak de URL in de Rich Results Test, bekijk de gerenderde HTML en controleer of er precies één Product-blok staat, met de prijs die de bezoeker ziet. Bij een shop met veel producten is een steekproef per paginatype (product, categorie, CMS) genoeg om de meeste fouten te vangen.
Organization en WebSite gekoppeld via @id
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"@id": "https://www.voorbeeldshop.nl/#organization",
"name": "Voorbeeldshop",
"url": "https://www.voorbeeldshop.nl/",
"logo": "https://www.voorbeeldshop.nl/logo.png"
},
{
"@type": "WebSite",
"@id": "https://www.voorbeeldshop.nl/#website",
"url": "https://www.voorbeeldshop.nl/",
"name": "Voorbeeldshop",
"publisher": { "@id": "https://www.voorbeeldshop.nl/#organization" }
}
]
}
</script>Verder lezen
Gerelateerde begrippen
Veelgestelde vragen
Waar zet ik JSON-LD: in de head of de body?+
Beide werken. Google leest het blok op beide plekken. Kies wat in je template het makkelijkst te onderhouden is.
Mag ik meerdere JSON-LD-blokken op één pagina hebben?+
Ja. Zorg alleen dat ze elkaar niet tegenspreken. Met @graph en @id kun je ze ook in één samenhangend blok zetten.