Rich snippets markups implementeren via Google Tag Manager

Dat Google steeds meer informatie toont binnen de zoekresultaten is niet iets nieuws. In 2015 schreef ik een blog over wat rich snippets zijn en hoe je deze van Google krijgt. Nu denk je als online markteer misschien “waaaaah, dat is mij te technisch allemaal”, om het vervolgens over de schutting te gooien richting je IT-afdeling. Nou, het valt allemaal reuze mee, want je kunt via Google Tag Manager ook de inrichting van je snippets verzorgen. In dit blog leg ik je uit hoe je de markups (extra informatie) voor rich snippets kunt implementeren binnen Google Tag Manager.

Google Tag Manager

We trappen af met een korte introductie in Google Tag Manager. Deze gratis tool van Google werkt als een soort CMS waarbij scripts kunnen worden ingeladen op de juiste momenten zonder dat daar een developer aan te pas hoeft te komen. Kort gezegd werkt Google Tag Manager op basis van drie elementen: tags, triggers en variabele.

Tags -> de tags bevatten de codes of informatie die worden geladen wanneer een trigger wordt geactiveerd.

Triggers -> een trigger bevat de voorwaarde voor wanneer een bepaalde tag moet worden geactiveerd. Dit zou bijvoorbeeld een klik op een button kunnen zijn, of wanneer een bepaalde pagina wordt geladen.

Variabele -> een variabele kan gebruikt worden door triggers en tags, zodat veelvuldige acties mogelijk worden gemaakt zonder telkens unieke variabele te moeten aanmaken. Denk hierbij bijvoorbeeld aan een UA-code van Google Analytics. Verderop in dit blog zal je zien hoe handig deze functie is voor het implementeren van markups voor rich snippets.

Lisa schreef een mooi artikel over hoe Google Tag Manager werkt. Super handig! OK en dan nu een stappenplan om de markups toe te voegen aan je website. Voor het gemak maak ik onderscheid tussen markups met statische informatie (eenvoudige rich snippets) en markups waarin dynamische informatie moet worden ingeladen (geavanceerde rich snippets).

Eenvoudige rich snippet markups toevoegen

In dit voorbeeld maak ik gebruik van de markup voor openingstijden voor een local business.

Stap 1

De eerste stap zou zijn: het opmaken van de snippet markup. Ik maak voor mijn voorbeeld gebruik van JSON-LD markups:
"openingHoursSpecification": [
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday"
],
"opens": "09:00",
"closes": "21:00"
},
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": [
"Saturday",
"Sunday"
],
"opens": "10:00",
"closes": "23:00"
}
]

Stap 2

We willen dat deze markup geplaatst op de homepage van de website. In deze stap moeten we in Google Tag Manager een tag aanmaken waarin de markup wordt geladen. Ga in Google Tag Manager naar Tags en creëer een nieuwe tag met als tagconfiguratie aangepaste HTML.Plak de aangemaakte markup in het veld en vink document.write ondersteunen aan. Geef de tag een logische naam, klik op opslaan en je hebt je tag aangemaakt.

De volgende actie is het creëren van een trigger zodat het script wordt geladen op de homepage. Dit doe je door een nieuwe trigger toe te voegen voor een paginaweergave. Kies daarbij voor sommige paginaweergaven en dan page url is gelijk aan /. Geef de trigger een logische naam en sla het op. Koppel deze vervolgens aan de tag en klaar ben je.

Stap 3

Zodra je klaar bent met het instellen van je tags en triggers publiceer je de wijzigingen naar de live versie. Vervolgens is het belangrijk om de markup te testen in de live omgeving via de structured data testing tool van Google.

Dat was niet zo moeilijk, toch? Tijd voor de volgende stap in het implementeren van rich snippet markups via Google Tag Manager.

Geavanceerde rich snippet markups toevoegen

Wanneer je honderden productpagina’s hebt, dan wil je niet bovenstaande werkwijze hanteren voor elke unieke pagina. Via Google Tag Manager kunnen we ook gebruik maken van het element ‘variabele’ om dit te automatiseren. Ik laat je aan de hand van een article markup zien hoe je dit kunt doen.

Stap 1

We starten met het opmaken van de JSON-LD markup voor article rich snippets. Ik neem even als voorbeeld het blog van Pure en pak als startpunt een interessant blog van Sjoerd “SEO voor webshops! Voorkom dubbele content met canonical tags”. De volgende markup zou ik willen gebruiken voor dit blog:
{
"@context": "http://schema.org",
"@type": "Article",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://www.pure-im.nl"
},
"headline": "SEO voor webshops! Voorkom dubbele content met canonical tags",
"image": [
"https://www.pure-im.nl/wp-content/uploads/2016/10/14801.jpg"
],
"datePublished": "2018-06-08",
"dateModified": "2018-06-08",
"author": {
"@type": "Person",
"name": "Sjoerd Hutmacher"
},
"publisher": {
"@type": "Organization",
"name": "Pure Internet Marketing",
"logo": {
"@type": "ImageObject",
"url": "https://www.pure-im.nl/wp-content/uploads/2018/08/pure-logo-vierkant-1000px.jpg"
}
},
"description": "De canonical tag, oftewel “rel canonical” is in te zetten voor het gebruik van canonicalisatie (canonicalization). Wat mij betreft de grootste tongbreker binnen het online marketing landschap. Zeg het maar eens tien keer snel achter elkaar ;). "
}


Stap 2

Nu we de markup hebben opgemaakt is het zaak dat we gaan kijken welke variabelen moeten worden ingeschoten. In ons voorbeeld zou dit gaan om de volgende elementen:

• Headline
• Image
• datePublished
• dateModified
• Name
• Description

In Google Tag Manager kunnen we bepaalde elementen zoals specifieke divs of css elementen inzetten als variabele. Eigenlijk zijn we op zoek naar een uniek element dat een van de hierboven opgesomde elementen markeert. Een handige tool hiervoor is de Chrome extentie SelectorGadget. De tool ziet er absoluut niet uit, maar doet zijn werk en bespaart je erg veel tijd. Als je de extentie eenmaal hebt gedownload kun je op zoek gaan naar de unieke elementen, door bijvoorbeeld de naam van Sjoerd te selecteren. Deze wordt groen gemarkeerd. Klik vervolgens alle overige geel gemarkeerde elementen weg tot je enkel de naam overhoudt. SelectorGadget geeft je vervolgens een uniek element terug, in dit voorbeeld “.col–left a”. Hier kunnen we wat mee!

Ga nu naar Google Tag Manager en creëer een nieuwe variabele met voor dit voorbeeld het type DOM-element en methode CSS-kiezer en voeg hier het unieke element toe.

Zodra je dit hebt opgeslagen heb je een variabele gecreëerd die je kunt gebruiken in je tag. OK, nu is het aan jou om de overige elementen uit te zoeken. Dit onderdeel heet niet voor niets geavanceerde markups, het kan je dus wat tijd en speuren kosten om tot de juiste oplossingen te komen.

Stap 3

Nu we alle elementen als variabele hebben opgeslagen in Google Tag Manager kunnen we deze gaan inzetten in de tag. Ga naar tags en plak daar je markup uit stap 1 in een aangepaste-HTML tag. Nu willen we de statische informatie vervangen door de variabele die we zojuist hebben aangemaakt. Zodra je na de “ begint met {{ zal Google Tag Manager je een lijst met mogelijke variabelen geven en dan kies je de juiste uit de lijst.

Stap 4

Het aangepaste standaard script dat je zojuist hebt aangemaakt werkt niet altijd even goed in Google Tag Manager. Yoast.com heeft een handige tool gemaakt waarin je het script kunt omzetten naar Google Tag Manager script. Kopieer het bovenste script en plak deze in je tag in Google Tag Manager.

Stap 5

Herhaal nu stap 2 en 3 van de eenvoudige markup implementatie. Belangrijk: pas wel de trigger voor paginaweergave aan voor de benodigde instelling, in mijn voorbeeld zou dat zijn alle pagina’s achter /blog/. Zie je geen problemen meer? Dan ben je klaar met een geautomatiseerde manier van rich snippet informatie implementeren via Google Tag Manager. Yay!