JSON+LD en gestructureerde data met voorbeelden uit de praktijk

Machines zijn niet bijster slim. We horen vaak indrukwekkende verhalen over kunstmatige intelligentie die de wereld gaat overnemen, waardoor veel van onze banen binnen enkele jaren zouden verdwijnen. Toch is het nog niet zover, want machines hebben nog een lange weg te gaan. Om machines te laten leren, is er veel data nodig. Het blijkt lastig voor machines om te leren van ongestructureerde gegevens. Een methode om machines beter inzicht te geven in onze code en inhoud is door middel van informatie toe te voegen, en een manier om dit te doen is door gebruik te maken van gestructureerde gegevens via JSON+LD.

In het kort: Het eerste deel van dit stuk bespreekt de achtergrond en het nut van JSON+LD. Als je al bekend bent met dit onderwerp, kun je direct naar de praktijkvoorbeelden gaan.

Wat is JSON+LD?

Laten we beginnen met de vraag: wat is JSON? JSON staat voor JavaScript Object Notation en is een manier om gegevens te beschrijven, zoals hieronder wordt weergegeven:

{
'bedrijfsnaam': 'Softdigital',
'contactopties': {
'e-mail': 'info@softdigital.nl',
'website': 'https://www.softdigital.nl'
}
}

JSON wordt onder andere gebruikt om gegevens uit te wisselen tussen verschillende systemen, evenals voor communicatie tussen de front-end en back-end van websites.

JSON+LD is als het ware een uitbreiding op JSON, waarbij LD staat voor 'Linked Data' (Gekoppelde Gegevens). JSON+LD is een specificatie vastgesteld door de W3C (World Wide Web Consortium, de organisatie die webstandaarden beheert). Deze specificatie voegt elementen toe aan JSON om te kunnen linken naar externe URL's en om gebruik te maken van schema's.

In de praktijk voegen we JSON+LD toe aan de <head> (of een andere plek) van de HTML-code van onze websites. Hier komen we later op terug in dit artikel. Met JSON+LD kunnen we informatie specificeren over een document, organisatie, recepten, artikelen, auteurs, links naar andere platforms, en meer. JSON+LD wordt niet alleen gebruikt voor interne koppelingen, maar ook om externe verbindingen te definiëren. Zo kunnen we bijvoorbeeld in JSON+LD voor een organisatie ook links naar sociale media-profielen opnemen.

Gestructureerde gegevens

HTML brengt structuur aan in je inhoud, maar elke website hanteert zijn eigen HTML-structuur. Terwijl de ene ontwikkelaar <h1> gebruikt voor de kop van een artikel, kiest een andere ontwikkelaar misschien voor <h2>. Weer anderen gebruiken helemaal geen koppen (wat niet aan te raden is). Dit maakt het voor machines zoals de Google Bot lastig om de inhoud te indexeren en vaak wordt deze verkeerd geïnterpreteerd.

Bovendien zijn er gegevens die je niet zichtbaar wilt maken op je website, maar die wel van belang kunnen zijn voor machines. Denk bijvoorbeeld aan de laatste update van een artikel, de sociale media-profielen van de auteur, en meer.

Met JSON+LD kunnen we een gestandaardiseerd formaat gebruiken dat gemakkelijk begrepen wordt, met name door zoekmachines zoals Google.

Hoe voegen we JSON+LD toe aan een website?

Er is geen vaste locatie waar JSON+LD moet worden geplaatst in een HTML-document. Meestal voegen we het toe aan de <head> van een website, maar het kan ook halverwege de <body> geplaatst worden voor bijvoorbeeld een artikel.

JSON+LD ziet er als volgt uit:

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organisatie",
"url": "https://www.softdigital.nl"
}
</script>

Wat hier vooral opvalt zijn de vermeldingen van @context en @type. Deze geven aan welk schema wordt gebruikt. Als we dit schema bekijken op schema.org, kunnen we zien welke velden beschikbaar zijn en ingevuld kunnen worden.

Elk schema biedt tal van velden die ingevuld kunnen worden. Over het algemeen zijn onze implementaties van JSON+LD vooral gericht op zoekmachines (zoals Google en Bing) en sociale media-platforms (voornamelijk Facebook op dit moment). Deze partijen ondersteunen een beperkt aantal schema's (hoewel er regelmatig nieuwe worden toegevoegd), en van de ondersteunde schema's wordt slechts een deel van de velden gebruikt.

Enkele schema's die gebruikt worden en de moeite waard zijn om te implementeren voor grote platforms zijn:

Article
Google kan blogberichten gemakkelijker oppakken en bijvoorbeeld de publicatiedatum weergeven in zoekresultaten.
Broodkruimelspoor - Geeft machines inzicht in de structuur van je website.

Event
Evenementen worden weergegeven in de zoekresultaten van Google wanneer mensen zoeken naar bijvoorbeeld "evenementen in Ermelo dit weekend." Je kunt zelfs je evenement zo opzetten dat tickets direct vanuit Google kunnen worden besteld.

Vacature
Google heeft Google Jobs. Als je vacatures markeert met de JobPosting-specificatie, worden ze weergegeven in Google Jobs.

Product
Hiermee kun je prijzen, beschikbaarheid en beoordelingen van producten weergeven in zoekresultaten.
Voor een overzicht van alle momenteel mogelijke JSON+LD-schema's kun je de Google-documentatie raadplegen. Ze bieden ook codevoorbeelden voor verschillende schema's.

JSON+LD in de code

@id
Vaak komen in JSON+LD-schema's dezelfde gegevens voor. Om dubbele informatie te voorkomen, kunnen we de @id gebruiken om te verwijzen naar andere JSON+LD-blokken in je HTML. Bijvoorbeeld:

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@id": "softdigital-organisatie",
"@type": "Organisatie",
// Meer informatie
}
</script>

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Artikel",
"title": "Ons blogbericht",
"author": {
"@id": "softdigital-organisatie"
},
"publisher": {

"@id": "softdigital-organisatie"
}
}
</script>
We hebben eerst een algemeen JSON+LD-blok voor de organisatie geplaatst (mogelijk hebben we dit op elke pagina). Als we vervolgens een artikel willen markeren met JSON+LD, kunnen we de auteur koppelen met een @id.

mainEntityOfPage

mainEntityOfPage kom je ook vaak tegen in JSON+LD. Het geeft aan op welke URL het beschreven item het belangrijkst is. Als je bijvoorbeeld een blogpost markeert, is de URL van het artikel de mainEntityOfPage.

Voorbeeld:

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Artikel",
"title": "Ons blogbericht",
"mainEntityOfPage": "https://www.softdigital.nl/nieuws/ons-blog-bericht"
}
</script>

Voorbeeld: Organisatie

Laten we beginnen met het markeren van de organisatie in JSON+LD. Bijna elke website heeft wel een organisatie. Hier is een voorbeeld van onze eigen website (met enkele kleine aanpassingen):

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organisatie",
"@id": "https://www.softdigital.nl#identiteit",
"logo": "https://www.softdigital.nl/public/sd/media/image/logo.png",
"image": "https://www.softdigital.nl/public/sd/media/image/logo.png",
"name": "Softdigital",
"address": {
"@type": "PostalAddress",
"streetAddress": "Jagerserf 24",
"addressLocality": "Ermelo",
"postalCode": "3851SM",
"addressCountry": "Nederland"
},
"url": "https://www.softdigital.nl",
"telephone": "+31341123456",
"contactPoint": [{
"@type": "ContactPoint",
"telephone": "+31341123456",
"contactType": "klantenservice",
"areaServed": "nl",
"availableLanguage": "Nederlands"
}],
"sameAs": [
"https://twitter.com/softdigital",
"https://www.facebook.com/softdigitalnl/",
"https://www.linkedin.com/company/softdigital/",
"https://www.instagram.com/softdigital/"
]
}
</script>
Veel van deze informatie spreekt voor zich: logo, naam, adres, klantenservice/contactpunt, telefoonnummer en URL. sameAs is wellicht wat lastiger te begrijpen. Volgens Schema.org verwijst dit naar:

URL van een verwijzende webpagina die ondubbelzinnig de identiteit van het item aangeeft.

In de bovenstaande code hebben we een @id opgenomen die we later in andere JSON+LD-blokken kunnen terugvinden.

Voorbeeld: Artikel

We kunnen ook artikelen of blogposts markeren met JSON+LD. Hierdoor wordt bijvoorbeeld de publicatiedatum weergegeven in Google. Met een beetje geluk wordt het artikel zelfs in de nieuwslijst van Google getoond.

Een voorbeeld:

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Persoon",
"@id": "https://www.softdigital.nl#persoon",
"description": "Beschrijving van de persoon",
"jobTitle": "Functieomschrijving",
"name": "Naam van auteur",
"mainEntityOfPage": "https://www.softdigital.nl/over-ons/team/naam-van-auteur",
"memberOf": {
"@id": "https://www.softdigital.nl#identiteit"
}
}
</script>

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Artikel",
"mainEntityOfPage": {
"@type": "WebPagina",
"@id": "https://www.softdigital.nl/academy/blog-bericht"
},
"headline": "Blogbericht",
"image": [
"https://www.softdigital.nl/public/sd/media/image.jpg"
],
"datePublished": "2019-07-16T00:00:00+02:00",
"dateModified": "2019-08-21T11:11:08+02:00",
"author": {
"@id": "https://www.softdigital.nl#persoon"
},
"publisher": {
"@id": "https://www.softdigital.nl#identiteit"
},
"copyrightHolder": {
"@id": "https://www.softdigital.nl#identiteit"
},
"description": "Omschrijving van het blogbericht"
}
</script>
In het eerste gedeelte definiëren we een persoon, die we, net als een organisatie, kunnen hergebruiken door gebruik te maken van @id. Deze persoon is ook verbonden met de organisatie via memberOf.

Het tweede deel bevat daadwerkelijk het artikel. Bovenaan staat mainEntityOfPage, waar we eerder al over gesproken hebben. Dit geeft aan waar het artikel te vinden is.

De @id-koppelingen laten zien hoe we de auteur, uitgever en auteursrechtbezitter verbinden.

Voorbeeld: Vacature

Google Jobs is een nieuwe dienst van Google, bedoeld als een soort vacaturebank die automatisch wordt bijgewerkt met nieuwe vacatures. Om ervoor te zorgen dat de vacatures op jouw website ook worden weergegeven in Google Jobs, kun je ze markeren met JSON+LD.

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Vacature",
"title": "Functietitel",
"description": "Functieomschrijving",
"hiringOrganization": {
"@id": "https://www.softdigital.nl#identiteit"
},
"employmentType": "FULL_TIME",
"occupationalCategory": "categorie_naam",
"jobLocation": {
"@type": "Plaats",
"address": {
"@type": "PostalAddress",
"streetAddress": "Jagerserf 24",
"addressLocality": "Ermelo",
"postalCode": "3851SM",
"addressCountry": "NL"
}
},
"workHours": "32-40 uur per week",
"datePosted": "2019-06-06"
}
</script>
Een patroon begint zich af te tekenen in de manier waarop JSON+LD wordt geschreven. We zien opnieuw een @id-koppeling in hiringOrganization. Ook zien we geneste JSON+LD-blokken, bijvoorbeeld voor de locatie van de functie.

Hoe kan ik JSON+LD testen en controleren?

In de bovenstaande voorbeelden hebben we slechts een klein aantal mogelijke velden laten zien. De verplichte velden zijn benadrukt, maar er is veel meer mogelijk. Hoe kun je dan jouw implementatie van JSON+LD testen?

Ten eerste kun je de documentatie van Google doornemen. Ze beschrijven enkele belangrijke schema's en de vereiste velden. Voor meer informatie kun je zoeken op schema.org voor specifieke schema's.

Ten tweede heeft Google een tool ontwikkeld waarmee je JSON+LD kunt valideren. Deze tool heet de Google Structured Data Testing Tool. Je kunt een URL invoeren of direct HTML toevoegen. Aan de rechterkant worden de gedetecteerde blokken weergegeven, inclusief waarschuwingen en fouten. Sommige typen kunnen zelfs als voorbeeld worden bekeken.

Tenslotte kun je, zodra je JSON+LD online staat, alles in de gaten houden met Google Search Console. Dit platform biedt inzicht in de indexering van je website in Google. Houd er rekening mee dat het enkele dagen kan duren voordat je resultaten ziet nadat je JSON+LD hebt toegevoegd. Je kunt ook eventuele fouten in je gestructureerde gegevens in de gaten houden.

Conclusie

JSON+LD is een waardevolle toevoeging aan je website om gegevens te structureren, zodat machines ze gemakkelijk kunnen begrijpen. De meeste voorbeelden in dit stuk zijn gericht op Google, wat een belangrijke reden is om JSON+LD op websites toe te passen. Ook Bing ondersteunt gestructureerde gegevens met behulp van JSON+LD.