Periodiek schrijven onze online marketeers een blog over een belangrijk onderwerp op het gebied van online marketing. Deze keer behandelt onze online marketeer Stijn hoe SEO te implementeren valt door middel van Google Tag Manager.
Doordat ik bij MvH Media aan bureauzijde met tal van verschillende klanten, projecten, trajecten en bovenal systemen werk, kom ik regelmatig verschillende struikelblokken tegen. Zo werk ik regelmatig met systemen als WordPress, Magento, Prestatshop, Lightspeed en andere open-source platformen, die zich prima lenen voor SEO-optimalisaties, zelfs zonder hulp of tussenkomst van een webbouwer.
Er zijn altijd een aantal scenario’s waar je als SEO-specialist of als zelf uitvoerende online marketeer tegenaan loopt. Zo kan er geen CMS aanwezig zijn, te beperkt zijn of je hebt geen toegang tot de broncode. Daarnaast is het inschakelen van een webbouwer in veel gevallen kostbaar.
Gelukkig is daar Google Tag Manager. Deze (gratis) tool van Google geeft ons de mogelijkheid om direct (zonder tussenkomst van codering en webbouwers) veranderingen aan te brengen in SEO-facetten als pagina titels, meta descriptions, canonical tags, noindex tags etc.
Google Tag Manager maakt gebruik van JavaScript voor het implementeren van deze tags. ‘Ouderwetse’ SEO-specialisten zullen zeggen dat Google hier geen raad mee weet. Tot voor kort was dit ook het geval, maar (gelukkig) kan Google met haar crawlers en renderers tegenwoordig prima JavaScript lezen en begrijpen. Wel gezegd nog steeds op een inefficiëntere manier dan HTML, maar meerdere onderzoeken en resultaten wijzen uit dat er daadwerkelijk aanpassingen worden getoond in de SERP’s van Google.
In dit blogbericht zal ik een voorbeeld geven van het implementeren op twee manieren:
- JavaScript (jQuery) om elementen te injecteren in de pagina
- HTML (in combinatie met CSS Selectors) om te weten welke elementen van de pagina je informatie kunt veranderen/halen.
Voor beide technieken is (basis)kennis van HTML, CSS en codering vereist.
Implementeren middels jQuery in Google Tag Manager
Voor deze techniek is het vereiste dat er jQuery wordt ingeladen op de website. Dit maakt het gemakkelijker om elementen te onttrekken en te schrijven voor de pagina.
In onderstaande voorbeeld maak ik gebruik van de contactpagina van MvH Media.
Implementeren (en vervangen) van meta titels en descriptions
Het kan dus voorkomen dat je geen toegang hebt tot een CMS of broncode, waardoor je geen meta titels en meta descriptions aan kunt passen. Door middel van een Custom HTML tag in Google Tag Manager af te vuren, kan het alsnog werken om gegevens in de DOM van de website te plaatsen of te vervangen.
De volgende Custom HTML tag heb ik ingeschoten, met als trigger de contactpagina:
| <script>
// Deze regel verwijdert de paginatitel jQuery(’title’).remove(); // Deze regel creëert een element, genaamd ‘mt’ (meta titel) var mt = document.createElement(’title’); // Deze regel voegt content toe aan het element ‘mt’ mt.text = ‘Contacteer ons vandaag nog – MvH Media’; // Deze regel zorgt ervoor dat het element in de <head> van de page wordt ingeschoten document.head.appendChild(mt); // Deze regel verwijdert de meta description van de pagina jQuery(‘meta[name=”description”]’).remove(); // Deze regel creëert een element, genaamd ‘md’ (meta description) var md = document.createElement(‘meta’); // Deze regel geeft een naam attribuut mee aan de meta, met als waarde ‘description’ md.name = ‘description’; // Deze regel voegt content toe aan het element ‘md’ md.content = ‘Contact opnemen met MvH Media? Bezoek vandaag onze contactpagina en achterhaal ons telefoonnummer, emailadres of kantooradres.’; // Deze regel zorgt ervoor dat het element in de <head> van de page wordt ingeschoten document.head.appendChild(md); </script> |
Verschil Broncode en de DOM:
Schrik niet dat al wanneer je de broncode bekijkt na doorvoering, het nog altijd de oude meta titels en descriptions kan bevatten:
Dit klopt, maar als we vervolgens de DOM bekijken, zien we dat Google onze JavaScript code gerenderd heeft en dus leest. De DOM is simpel gezegd een gestructureerde en ontleedde versie van de broncode. De HTML is ontleed, JavaScript is geëxecuteerd en de resultaten zijn te zien in de DOM:
Overigens kun je dit ook checken door je paginatitel in je tabblad te bekijken, of crawlers als ScreamingFrog te gebruiken. TIP: vergeet bij ScreamingFrog niet de JavaScript crawler aan te zetten. Ook hier succes:
UPDATE: na 8 dagen had ik resultaat met deze implementatie via Google Tag Manager:
Experiment geslaagd!
De reden dat de veranderingen pas na 8 dagen plaatsvinden, is niet heel schokkend. Google rendert de pagina namelijk minder vaak dan dat het crawlt. Ofwel: Google bezoekt de broncode vaker dan de DOM.
Implementeer Canonical Tags met Google Tag Manager
Het is niet vanzelfsprekend dat er een Canonical Tag wordt ingeladen in de broncode. Ook deze is middels een zelfde soort tag in Google Tag Manager toe te voegen aan de DOM:
| <script>
// Deze regel verwijdert de canonical tag jQuery(‘link[rel=”canonical”]’).remove(); // Deze regel creëert een link, genaamd ‘link’ (meta titel) var link = document.createElement(‘link’); // Deze regel geeft een naam attribuut mee aan de link, met als waarde ‘canonical’ link.rel = ‘canonical’; // Deze regel voegt de daadwerkelijke URL toe link.href = ‘https://www.mvhmedia.be/contact-MvH-Media/’; // Deze regel zorgt ervoor dat het element in de <head> van de page wordt ingeschoten document.head.appendChild(md); </script> |
In bovenstaande geval heb ik enkel de letter mvh-media veranderd in MvH-Media (hoofdlettergevoelig. Normaal gesproken zou het gebruik van hoofdletters in een URL een negatief advies van me zijn, maar het gaat in dit geval om de functie van het script.
Opnieuw geeft de DOM mijn aangepaste Canonical Tag aan, wat betekent dat ik een URL met hoofdletters aan Google voorschotel:
Ook ScreamingFrog (JavaScript) geeft hierin niet de oude, maar de nieuwe Canonical Tag:
Experiment geslaagd!
Buiten de meta titel, description of Canonical Tag toevoegen (óf vervangen), zijn er nog tal van andere elementen toe te voegen aan de DOM (noindex, hreflangs, H1’s etc.).
JSON-LD Structured Data (Dynamisch) met Google Tag Manager
In onderstaande techniek maak ik geen gebruik van jQuery, maar van HTML en CSS Selectors. Ook maak ik geen gebruik van het voorbeeld van de contactpagina van MvH Media, maar van de productpagina’s van Hockeytrends. Hier ga ik middels Google Tag Manager een Product Structured Data Markup toevoegen aan de productpagina’s.
Deze Structured Data wordt gehaald uit de vocabulaire van Schema.org. Deze vocabulaire wordt gebruikt voor het presenteren van data aan zoekmachines. Zo weet Google dat ‘€50,-‘ gaat om een prijs, dat ‘Op Voorraad’ betekent dat het om een voorradig product is en dat ‘8/10’ betekent dat er een beoordeling aan te pas komt. Code technisch kan ieder element worden opgemaakt in de broncode. In plaats van al deze elementen individueel op te maken, verstrek je een (klein) blok met JavaScript die al die info bevat.
Deze JavaScript code is JSON-LD, welke dus weer enkel in de DOM voorkomt en niet in de (HTML) paginabron. Met JSON-LD Structured Data Markup is de kans groter dan zoekmachines Rich Snippets zoals prijs, voorraad of beoordelingen toont in de organische zoekresultaten. Een JSON-LD code is gemakkelijk te lezen door zoekmachines (én mensen) en door Google geadviseerde manier van Structured Data implementeren.
Zoals aangegeven heb ik wil ik de producten van Hockeytrends.nl voorzien van gestructureerde data ter bevordering van Rich Snippets. Momenteel geeft de Google Structured Data Testing Tool enkel de opmaak van de WebPage aan:
Wat ik wil bereiken met onderstaand experiment, is om er een Product Markup aan toe te voegen. Dit wil ik graag dynamisch doen (gezien het aantal producten op de webshop), omdat handmatig onbegonnen en vooral inefficiënt is. Wat ik daarvoor dien te doen, is een aantal variabelen aanmaken. Dit doe ik omdat Google Tag Manager iedere variabele vervangt door een stukje JavaScript die functie functie oproept. Een voorbeeld van een bestaande variabele is {{Page URL}}, welke Google Tag Manager de opdracht geeft om de URL te achterhalen van de desbetreffende pagina. De URL voor elke productpagina is namelijk dynamisch, evenals:
- Naam van het product: {{productNaam}}
- Afbeelding van het product: {{productIMG}}
- Prijs van het product: {{productPrijs}}
Voor bovenstaande facetten dien ik handmatig variabelen aan te maken binnen Google Tag Manager. Dit doe ik door een CSS-Kiezer aan te maken, waarbij ik het element h1 gebruik.
Dit element heb ik weten te achterhalen via de DOM, maar de Chrome-extensie SelectorGadget kan hier een handige hulp in zijn.
Dezelfde handeling doe ik voor de Afbeelding en de Prijs. LET OP: bij de afbeelding is er een extra kenmerk noodzakelijk, omdat het hier om een URL (bron) gaat. Vul daarom bij Naam van het kenmerk altijd de letter ‘src’ van source/bron in.
Dit is hoe de uiteindelijk markup code eruit komt te zien:
| <script>
(function(){ var data = { “@context”: “http://schema.org/”, “@type”: “Product”, “name”: {{productNaam}}, “image”: {{productIMG}}, “url”: {{Page URL}}, “offers”: { “@type”: “Offer”, “availability”: “http://schema.org/InStock”, “priceCurrency”: “EUR”, “price”: {{productPrijs}} } } var script = document.createElement(‘script’); script.type = “application/ld+json”; script.innerHTML = JSON.stringify(data); document.getElementsByTagName(‘head’)[0].appendChild(script); })(document); </script> |
Door een trigger toe te passen die de tag afvuurt op enkel de productpagina’s, geeft een nieuwe test door de Google Structured Data Testing Tool het volgende aan:
Kortom: het lijkt gelukt. Om te checken of Google dit ook vindt, gebruiken we Google Search Console. Ook deze tool begint de gestructureerde data zonder fouten te herkennen:
Hoe langer het experiment loopt, moet meer items er (zonder fouten) zullen worden gedetecteerd en worden overgenomen door Google. Experiment geslaagd!
Conclusie
Er zijn talloze situaties te bedenken waarom er bepaalde SEO-facetten niet doorgevoerd kunnen worden. Zo kan er geen CMS aanwezig zijn, te beperkt zijn of je hebt geen toegang tot de broncode. Daarnaast is het inschakelen van een webbouwer in veel gevallen kostbaar. Google Tag Manager biedt in dit geval een prima oplossing, gezien de geslaagde experimenten uit bovenstaande blogartikel.
Ook gestructureerde data wordt alsmaar belangrijker. Hier schreef ik al over in de blog over SEO Trends van 2018.
Loop je ook tegen problemen aan binnen je systeem voor het doorvoeren van SEO? Neem gerust contact op met onze specialisten.
