Structured Data: dynamisch opmaken van de content via GTM

De implementatie van Structured Data op een website wordt alsmaar belangrijker. Zeker met de komst van de Google Home en andere spraakgestuurde assistenten die getriggerd worden door spraakopdrachten. De opmaak via Schema.org is in het leven geroepen om zoekmachines een handje te helpen in het begrijpen van de content op je website en om een mogelijk zoekresultaat te verrijken met extra informatie of zichtbaarheid.

Hoe wordt Structured Data geïmplementeerd?

Normaliter wordt Structured Data geïmplementeerd in de broncode van de website, dit gebeurt vaak met hulp van de webbouwer. Er zijn een aantal verschillende manieren om Structured Data op te maken. Een van de talen is JSON-LD, een taal gebaseerd op JavaScript. JavaScript is dynamisch en dat bracht ons op het idee om Structured Data dynamisch op te maken op de website met behulp van Google Tag Manager.

Wat hebben we gedaan?

TamTam heeft de website ontwikkeld voor Rijn IJssel, waarbij  Expand Online heeft geassisteerd om de migratie in goede banen te leiden. Aangezien er een compleet nieuwe website ontwikkeld zou worden, bleek het een mooie kans en test om alle Structured Data markup via Google Tag Manager op te maken.

De volgende elementen zijn door middel van Structured Data markup opgemaakt:

• Algemene informatie: Organisatie, search entry point, breadcrumbs, website
• Alle opleidingen
• Alle cursussen
• Alle trainingen
• Open dagen en evenementen

Binnen dit voorbeeld, de website van Rijn IJssel, zijn dit ook alle elementen waarbij het mogelijk is.

Hieronder delen we hoe we het hebben aangepakt en geven we een aantal tips voor de techies onder ons.

Hoe hebben we dit gedaan?

Structured Data markup wordt geschreven in JSON-LD. Dit zorgt echter voor problemen met Google Tag Manager variabele waarnaar wordt verwezen en dit zorgt weer voor errors in je Structured Data.

De variabele waarnaar wordt verwezen, zijn in veel gevallen de Google Tag Manager variabele: DOM Element of Custom JavaScript. Deze variabele maken gebruik van CSS Selectors, waarmee je informatie van een webpagina kan ‘scrapen’.

De DOM Element variabele is hiervoor het gebruiksvriendelijkst. Kies dan wel voor de selectiemethode CSS Selector. Hiermee kan je op een redelijk eenvoudige manier verwijzen naar bepaalde elementen op je website, enige kennis van HTML en CSS maakt dit wel gemakkelijker.

Meer flexibiliteit in het ‘scrapen’ van elementen krijg je door gebruik te maken van de Custom JavaScript variabele. Hierbij komt basiskennis van JavaScript dan weer van pas. Dit geeft je de mogelijkheid om bepaalde elementen op je website, zoals bijvoorbeeld een datumnotatie, te herschrijven zodat deze voldoen aan de conventies van Structured Data.

In dit geval is het gebruik jQuery aan te raden, hiermee verwijs je gemakkelijk naar elementen op je website. De website moet in dit geval wel jQuery ondersteunen. Als dit niet het geval is, maak dan gebruik van de JavaScript methode querySelector().

Normaal gesproken ziet een Structured Data markup binnen Google Tag Manager eruit zoals hieronder. Waarbij gebruik gemaakt wordt van een Custom HTML tag. De gebruikte Google Tag Manager variabele zoals eerder beschreven staan tussen accolades.

Google Tag Manager variabele met daarin speciale karakters, bijvoorbeeld een slash, worden binnen een JSON-LD script niet juist uitgelezen. Deze karakters worden ge-escaped, waardoor Google het niet meer leest als het oorspronkelijke karakter. Om dit soort errors te voorkomen zal het script aangepast moeten worden. Zoals hieronder te zien is.

Zoals in de afbeelding te zien is, wordt de Structured Data markup binnen ‘normale’ script-tags geplaatst. De JavaScript variabele ‘data’ bevat het object met daarbinnen de Structured Data. De regels 27 – 30 maken deze variabele een JSON-LD script:

1. Er wordt een lege <script>-tag aangemaakt (regel 27)
2. Hier wordt het type “application/ld+json” aan toegekend (regel 28)
3. Vervolgens wordt de Javascript-variabele data hier als een string aan toegevoegd (regel 29)
4. Tot slot wordt deze gehele tag toegevoegd aan de head van de website (regel 30)

Door deze wijzigingen kan Google de Structured Data markup goed verwerken en worden errors voorkomen.

De eerste resultaten

Om goed te kunnen meten wat de impact was op de rankings hebben we ervoor gezorgd dat er naast het toevoegen van de Structured Data geen enkele andere wijziging is geweest. Vervolgens hebben we de periode voor wijziging en na 4 weken gemeten en daar een aantal rankings uit gehaald:

Dit is slechts een greep van de stijgingen die we zagen, op bijna alle zoekopdrachten naar een studie die wordt aangeboden zien we positieve stijgers. Hoewel SEO vaak resultaat heeft op lange termijn, zien we nu al snel de eerste stijgingen. De komende tijd zal er ook aan content worden gewerkt om top 10 posities te kunnen behalen.

Conclusie

Het opmaken van Structured Data via Google Tag Manager kan een hoop tijd schelen. De tijd en investering van de webbouwer is in dit geval niet meer nodig en ook worden fouten vermeden. Echter is er een klein nadeel, dat wanneer er een redesign plaatsvindt of er HTML-elementen veranderen dit invloed kan hebben op de opmaak van Structured Data.

Kortom: wanneer je snel resultaat wilt behalen, helpt het dynamisch opmaken enorm en kunnen eerder gemaakt codes deels gekopieerd worden voor andere websites. We hebben nu inmiddels blogs op meerdere websites eenvoudig kunnen opmaken.

*) Dit artikel is geschreven in samenwerking met Stijn Trompper.