Structured data implementeren via Google Tag Manager

Het is van belang dat zoekmachines begrijpen wat bepaalde stukken content betekenen op je website. Als dat het geval is, kan een zoekmachine haar gebruikers beter bedienen en zogeheten rich snippets tonen. Dit zijn zoekresultaten die meer informatie kunnen bieden, omdat de data opgemaakt zijn met structured data. De data worden dan op een meer visuele manier weergegeven, wat tot een hogere doorklikratio (CTR) kan leiden. Mijn collega Brent heeft een blog geschreven waarin wordt uitgelegd wat rich snippets zijn en waarom je ze als bedrijf zou moeten hebben.

Als je CMS het toelaat, kun je de opmaak van je content ook in de broncode doen. Maar wat gebeurt er als je super veel content hebt om op te maken en er steeds meer content bijkomt?

Dan hebben wij de oplossing: je maakt je content op via Google Tag Manager.

GTM Implementatie: Waarom?

Een groot voordeel van structured data implementeren via Google Tag Manager, is dat je de opmaak dus dynamisch kunt maken zonder de hulp van een webbouwer. Als je de content opmaakt in de broncode van de website, is de opmaak meestal statisch. Dit betekent dat het niet verandert, maar altijd en overal hetzelfde is tenzij iemand dit aanpast in de broncode. Via GTM kun je variabelen maken en toevoegen aan het script. Door middel van deze variabelen wordt de opmaak dynamisch. Als je veel content hebt, is dit dus een snelle, makkelijke manier om je mark-up te maken.

GTM Implementatie: Hoe dan?

De opmaak van content moet gebeuren via schema.org. Er worden drie formaten ondersteund door Google: JSON-LD, Microdata en RDFa. In dit blog ga ik in op de implementatie van structured data via GTM in JSON-LD. Dit is een taal op basis van Javascript die je daardoor dus ook kunt implementeren via Google Tag Manager. Op schema.org vind je verschillende opmaakvormen voor je content. Een aantal voorbeelden is:

Op de site wordt uitgelegd wat er in je stukje code moet komen te staan en welke informatie moet worden vermeld. Ook kun je zien hoe de JSON-LD, Microdata en RDFa eruit moet komen te zien als je het wilt implementeren. De structuur van die codes is ongeveer gelijk aan de opbouw van de code in Google Tag Manager. Om het voor Google Tag Manager implementeerbaar te maken, zul je de code lichtelijk moeten aanpassen. Door naar de opbouw van de voorbeelden te kijken, kun je zien of de code die je hebt nagebouwd in Google Tag Manager op een juiste manier in elkaar steekt.

Code

In Google Tag Manager dien je een aangepaste HTML tag aan te maken waar je de code in kunt plakken. We willen natuurlijk dat de informatie dynamisch ingeladen wordt. Daarom moeten we gaan werken met variabelen die worden aangemaakt in Javascript. Het script dat we van schema.org halen is opgebouwd in JSON-LD waardoor we met twee verschillende talen werken. Om dit goed te laten werken, moet een stukje code toegevoegd worden:

Als dit gedaan is, ziet de opmaak er weer net zo uit als wanneer je de JSON-LD code in je broncode had geplakt. Voor meer uitleg hierover lees je het blog van Chris Goddards op MOZ.

In het voorbeeld hieronder is de opmaak te zien van recepten zoals ik die heb geïmplementeerd voor Lassie. Dit is hoe de code eruit komt te zien in de aangepast HTML tag van Google Tag Manager:

Dit script kun je afvuren op iedere pagina van je website. Stel dat je slechts aan een bepaalde sectie van je website de opmaak wilt toevoegen, kun je een aparte trigger aanmaken. In de trigger neem je dan de pagina’s op die je wilt opmaken, bijvoorbeeld alleen de recepten op je website.

Variabelen

Binnen het script hierboven zie je een aantal variabelen staan. Dat zijn de woorden tussen de {{haakjes}}. Deze variabelen moeten logischerwijs aanwezig zijn in Google Tag Manager, anders vangen ze niet de juiste informatie af en zul je vaak ‘undefined’ zien staan.

Stel je voor dat je de content van een recept wilt taggen. Een aantal zaken dat in de mark-up terug moet komen en dus verplicht is:

  • @context: http://schema.org
    • Dit moet aanwezig zijn, anders weet het script niet hoe het de data moet opmaken.
  • Type content “@type”: “Recipe”
    • Daarna is het van belang om aan te geven wat het type is van de opmaak, dus op welke manier je de data wilt opmaken. In dit geval kiezen we voor Recipe.
  • Naam van het recept “name”: “receptNaam”
  • Image “@type”: “ImageObject”
    • Voor een plaatje / image zijn verschillende opmaak mogelijkheden. Dit verschilt per type content. Je moet dus weten wat het type content is, zodat je op kunt zoeken hoe je plaatje opgemaakt moet worden.
    • Wel moet er altijd een URL naar de foto in de mark-up staan. Deze kun je vinden door in de broncode te kijken en de URL daarna op te vangen via een variabele in GTM.

Er is dus een aantal variabelen dat meegenomen wordt (moet worden) in de opmaak van de content. Persoonlijk kwam ik er door veel testen achter wat echt belangrijk was om mee te nemen en wat een leuke toevoeging zou zijn. Een aantal variabelen is namelijk van belang om de rich snippet tot stand te brengen en dus “verplicht”. Andere variabelen zijn goede toevoegingen om de rich snippet zo compleet mogelijk te maken. Een aantal voorbeelden hiervan is:

  • AggregateRating
    • Dit geeft de gemiddelde review score aan van een recept. Dit wordt getoond in de rich snippets als een aantal sterren. De opmaak toont hoeveel reviews er zijn geplaatst en wat de score is van die review. Google geeft dit dan weer in een aantal sterren met daarachter het aantal reviews. In je code ziet dit er als volgt uit:

 “@type”: “AggregateRating”

“RatingValue”: {{reviewSter}},

“ReviewCount”: {{aantal reviews}}

  • Bereidingstijd
    • Dit kan de totale tijd zijn die het kost om het gerecht te maken “totalTime”: {{bereidingstijd}} of de daadwerkelijke kooktijd (zonder voorbereiding) “cookTime”: {{bereidingstijd}}.
  • Aantal personen
    • De rich snippet toont daarnaast ook voor hoeveel personen het recept is. “recipeYield”: {{aantal Personen}}.
  • Beschrijving
    • Een beschrijving van het gerecht wordt ook getoond in de rich snippet en is daarom interessant om toe te voegen aan je mark-up als je deze hebt. Mocht je deze niet hebben, maar toch willen markeren, dan kun je net als in het voorbeeld ook kiezen om de receptnaam nog een keer te gebruiken. “description”: {{receptNaam}}
  • Aantal calorieën
    • Het aantal calorieën wordt ook vaak getoond in de rich snippet als je deze informatie opmaakt. Dit kan als volgt: “calories”: {{kcal recept}}.
  • Ingrediënten
    • In de rich snippet zul je niet snel ingrediënten terug zien komen. Maar als je de ingrediënten wel opmaakt, kan Google dit beter begrijpen. Mocht iemand dan zoeken op een bepaald ingrediënt, dan kan het zo zijn dat je rich snippet sneller getoond zal worden. Ingrediënten opmaken doe je zo: “recipeIngredient”: {{ingredients}}
  • Vetpercentage
    • Dit wordt niet altijd getoond in de rich snippet. Als iemand zoekt op een gerecht met een bepaald vetpercentage en je hebt dit wel opgemaakt, herkent Google dat jouw recept aansluit bij de zoekopdracht. Zo maak je het op: “fatContent”: {{fatContent}}.
  • En meer..

Vereisten voor rich snippets

Belangrijk is dat de informatie die je mee wilt sturen in je structured data beschikbaar is op de pagina waaraan jij de mark-up wilt hangen. Zo moet er bijvoorbeeld bij een recept duidelijk aangegeven worden wat de bereidingstijd is en voor hoeveel personen dit gerecht is samengesteld. Is deze informatie niet beschikbaar, dan kan de informatie niet dynamisch opgehaald worden.

In Google Tag Manager kun je verschillende variabelen aanmaken die deze gewenste informatie van de pagina halen. Veel van de informatie die ik heb opgehaald om de code te vullen heb ik opgehaald met aangepaste Javascript variabelen. Een basiskennis van Javascript is dus zeker een must om dit goed te kunnen implementeren.

Het spreekt voor zich dat je alleen rich snippets kunt krijgen bij pagina’s die door Google getoond kunnen worden. Als je pagina’s op je site hebt die niet geïndexeerd worden door Google en die Google dus ook niet kan tonen, ga je ook geen rich snippets krijgen.

Structured data testing tool

Er is per schema een aantal zaken dat verplicht is voor de rich snippet. Als je deze variabelen er niet in hebt staan, registreert Google dit als fout en kan het zijn dat de rich snippets niet of niet goed worden getoond. In de Structured data testing tool van Google kun je testen of je opmaak goed is. Je kunt de code of een URL invoeren. Zodra je een URL hebt ingevoerd gaat de testing tool zoeken naar een mark-up. Als een mark-up gevonden wordt, verschijnt dit aan de rechterkant.

Als je een fout hebt gemaakt in de mark-up verschijnt dat bovenaan de rechterkant. Met een fout in je mark-up wordt er geen groene voorbeeldbutton getoond. Je zult dus eerst de fouten weg moeten werken voordat je kunt kijken hoe de rich snippet eruit gaat zien.

De waarschuwingen die worden getoond geven aan wat nog binnen de mark-up past. Dit zijn voorgestelde variabelen, maar deze zijn niet verplicht. Wel kunnen ze worden toegevoegd aan de mark-up, zodat meer informatie meegenomen wordt. Dit kan er dan weer voor zorgen dat de rich snippet relevanter wordt voor Google bij bepaalde zoekopdrachten, waardoor deze wellicht hoger en/of vaker getoond zal worden.

Als je alles goed hebt gedaan, kun je een voorbeeld bekijken. Daar zie je hoe de snippet eruit zal komen te zien. Hieronder zie je daar een voorbeeld van.

Als je klaar bent in Google Tag Manager met het opmaken van de data, kun je de container publiceren en testen of de mark-up zichtbaar is. Ik kwam erachter dat als je slechts de voorbeeldmodus gebruikt van Google Tag Manager om de mark-up te testen, je de mark-up niet altijd ziet. Vandaar dat het verstandig is om de code eerst alleen op één specifieke pagina te plaatsen, de container te publiceren en dan die pagina te testen. Als het allemaal werkt, kun je de trigger aanpassen en de code op alle pagina’s plaatsen die je wilt opmaken.

Het resultaat

Als je tevreden bent met het voorbeeld, kun je de trigger aanmaken en deze plaatsen op alle pagina’s waarvan jij wilt dat de data opgemaakt wordt. Let op: Google zal je content opnieuw moeten crawlen voordat rich snippets getoond kunnen worden. Via Google Search Console kan je Google een seintje geven en aangeven dat jij wilt dat de pagina’s opnieuw worden geïndexeerd (Fetch as Google). In het menu-item Gestructureerde gegevens kan je zien welke types Google gecrawled heeft en of het fouten tegenkomt.

Het kan een tijdje duren voordat Google de pagina’s heeft geïndexeerd. Dit kan bijvoorbeeld liggen aan de grootte van de site en de hoeveelheid pagina’s die opnieuw geïndexeerd moet worden. Wacht een weekje om te checken of dit al is gedaan. Als dit het geval is, dan zie je de rich snippets terug op het moment dat je een zoekopdracht doet in Google. De rich snippets die getoond worden zijn het meest relevant voor de zoekopdracht. Dus ongeacht hoeveel informatie je in je rich snippet zet, hoeveel reviews of sterren je rich snippet heeft; Google bepaalt wanneer het getoond wordt. Mocht je de rich snippet na een week nog niet zien, check dan via Google Search Console of Google al opnieuw heeft gecrawled of dat er iets anders misgaat. Zie je geen gekke dingen, wacht dan nog een weekje.

Zodra je pagina’s zijn geïndexeerd en alle eventuele fouten zijn opgelost in je script, kun je zien dat al je harde werk zijn vruchten heeft afgeworpen.

Dan is het tijd voor:

<script type=”application/ld+json”>

{

     “@context”: “http://schema.org”,

     “@type”: “Recipe”,

           “name”: “Champagne sableren”,

           “description”: “Bruisende wijn uit de Franse wijnregio ‘Champagne’ opengemaakt met een sabel”,

           “image”: “PLOP.jpg”,

           “recipeYield”: “1 fles”,

           “recipeCategory”: “borrel”,

           “recipeCuisine”: “Frans”,

           “recipeIngredient”: [

                “witte druiven”,

                “blauwe druiven”

           ],

           “recipeInstructions”: “Zorg dat de fles goed koud is. Pak je favoriete sabel en zwaai ermee rond als een baas. Heb je geen sabel, dan werkt het ook met een gewoon mes of zelfs een lepel. Houd de fles van je af (duh) met de naad naar je toe en kantel em wat. Glij met je sabel een paar keer over de naad en sla vervolgens in één keer de kurk van de fles. Zorg dat je de sabel op de fles houdt en dat je een doorzwaaiende beweging maakt. O, en richt niet op andere mensen of dieren, want er vliegt glas door de lucht. Schenk de champagne met een zelfgenoegzame blik in. Dat heb je immers verdiend.”,

           “suitableForDiet”: “liquid dinner”,

     “nutrition”: {

           “@type”: “NutritionInformation”,

           “calories”: “622 calorieën”,

           “fatContent”: “0 gram vet”,

           “carbohydrateContent”: “20 gram”,

           “proteinContent”: “0,5 gram”,

           “servingSize”: “1 glas”

     }

}

Als je meer wilt weten over het implementeren van structured data, kun je altijd contact met ons opnemen of laat een reactie hieronder achter.