Dynamisk Schema Markup i Google Tag Manager

Hvis du har en webshop, har du en oplagt mulighed for at løfte både dine visninger og CTR i de organiske søgeresultater. I det har post, vil jeg gennemgå, hvordan du som webshop-ejer, dynamisk kan tilføje schema markup til alle dine produktsider – uden at involvere udviklere. Det hele implementeres igennem Google Tag Manager.

Hvorfor Schema Markup på produktsider?

For det første – og det giver næsten sig selv – ved at fortælle Google eksplicit besked om, hvad din side handler om, er Google bedre i stand til at evaluere relevansen af dit indhold op imod intentionen i søgningen. Har du eksempelvis en side, der handler om cykler, kan du gøre det tydeligt for Google at brugeren kan købe cykler på din side, og ikke blot læse anmeldelser.

For det andet, kan du ved struktureret at kommunikere til Google, hvad din side handler om, få vist yderligere information ude i søgeresultaterne i ’Rich snippets’. Det kan eksempelvis være anmeldelse af produktet fra andre brugere, lagerstatus og pris eller kontaktoplysninger til din butik. Ved at præsentere mere information i søgeresultatet, bliver din placering mere synlig, og du vil typisk opleve en højere CTR.

Sådan skal dit ’schema mark up’ se ud

Der findes en række prædefinerede schema mark up-kategorier, som du kan kategorisere dit site og enkelte sider indenfor. Du finder en oversigt over tilgængelig schema markups med eksempler her:

https://developers.google.com/search/docs/data-types/product

For eksemplet skyld, fortsætter jeg her med en cykelshop som eksempel. På de enkelte produktsider, vil jeg fortælle Google:

• At det er et produkt, brugeren kan købe
• Hvad produktet hedder
• Hvilket brand cyklen er fra
• URL til produktbillede
• Beskrivelse af produktet
• Hvad prisen er for produktet
• Produkt SKU
• En gennemsnitlig rating fra andre kunder
• Antallet af bedømmelser

Google anbefaler at koden implementeres som et ’JSON-LD’-objekt. Jeg kommer til at gennemgå step-for-step, hvordan du kan automatisere implementeringen, så det er ikke afgørende, at du er bekendt med hverken JavaScript eller JSON-objekter. For nu er det nok at vide, at det endelige objekt, skal se nogenlunde således ud:

<script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Product",
      "name": "[Produktnavn]", //Erstattes af produktnavnet
      "image": "[Produktbillede URL]", //Erstattes af URL til produktbillede
      "description": "[Beskivelse af produkt]", //Erstattes af beskrivelse af produktet
      "sku": "[Produkt SKU]", //Erstattes af produkt SKU’en
      "brand": {
        "@type": "Brand",
        "name": "[Produkt brand]" //Erstattes af produktbrandet
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "[Produkt rating]", //Erstattes af den gennemsnitlige bedømmelse
        "reviewCount": "[Antal bedømmelser]" //Erstattes af antallet af bedømmelser
      }
    }    
</script>

Implementering af schema markup i GTM

Ovenstående schema mark up kan naturligvis implementeres direkte på dit site, men hvis du enten har begrænset mulighed for at lave ændringer til kildekoden på dit site eller ikke ønsker at bruge udviklingsressourcer på implementeringen, kan du implementere schema mark up igennem Google Tag Manager.

Step 1 – Identificér side type

Afhængigt af hvilket schema markup, du vil implementere, kan det være nødvendigt identificere sidetypen. For mit tidligere eksempel med cykelshoppen, ved jeg, at alle produktsider er placeret hierarkisk under ’produkter’ og ’produktkategori’. Et eksempel på en produktside URL, vil således være:

’https://mincykelshop.dk/produkter/produktkategori/eksempel-på-en-cykel’

Hvis ikke du har en URL-struktur i din shop, så du simpelt kan identificere produktsider ud fra URL’en alene, bør din SEO-indsats starte ved at give din URL-struktur et gennemsyn.

Step 2 – Byg trigger i GTM

Med en URL-struktur på plads til at identificere produktsider, er vi klar til at bygge en trigger i GTM. I mit tilfælde er strukturen ’/produkter/[en produktkategori]/[et produktnavn]’. Jeg vil derfor implementere schema markup for produkter på alle URL’er der starter med ’/produkter/’, efterfølges af en tekststreng af vilkårlig længde (fordi, der kan tilføjes nye  produktkategorier, vil vi helst ikke definere de eksisterende udelukkende), og slutteligt have en vilkårlig tekststreng (indeholdende produktnavnet) i tredje niveau.

For at sikre det kan vi benytte en regular expression (RegEx) til at ramme netop disse URL’er:

RegEx:
'^\/produkter\/[a-zA-Z|\-]{1,99}\/[a-zA-Z]{1,99}'

1.	Urlen skal starte med /produkter/
        ^\/produkter\/’

2.	Herefter 1-99 tegn, der er bogstaver eller ’-’ 
        [a-zA-Z|\-]{1,99}

3.	Slutteligt en ’/’ samt en vilkårlig tekststreng
        \/[a-zA-Z]{1,99} 

Når du skal bygge dine egne regler, kan du teste din regular expression her. I Google Tag Manager opretter du en trigger, der skal aktiveres på ale ’Page View’ GTM-events, hvor URL’en matcher ovenstående RegEx.

Step 3 – Opsætning af variabler

Som nævnt i det indledende afsnit, er der en række informationer, vi skal have implementeret i sidens schema markup. Vi ønsker ikke at oprette et nyt tag for hvert eneste produkt. I stedet vil vi bruge information, som allerede er tilgængeligt på siden til vores tag.

De værdier, vi skal bruge i tagget er:

• Produktnavn
• Produktbrand
• URL til produktbillede
• Produktbeskrivelse
• Stykpris
• Produkt SKU
• Gennemsnitlig rating fra andre kunder
• Antal bedømmelser

For at kunne hente værdierne fra siden, er der grundlæggende tre variabel type, vi kan benytte. I prioriterede rækkefølge, er de tre variabel-typer ’Data Layer’, ’DOM element’ og ’Custom JavaScript’.

Data Layer

Hvis du har en webshop, bør du allerede have installeret Enhanced Ecommerce på dit site. Hvis du har det – og implementeringen er igennem Google Tag Manager – vil du på alle produktsider have et GTM-event, der definere information om produktet i sidens Data Layer inden Google Tag Manager loades. Hvis du allerede har Enhanced Ecommerce implementeret, vil du kunne hente produktnavnet ved at ’pege’ på det rette objekt i sidens dataLayer. Præcis hvordan du rammer eksempelvis produktnavnet, vil afhænge af dit CMS-system og eventuelle shop-modul.

DOM elementer

Hvis ikke information om produktet, anmeldelser og andet er tilgængeligt, kan du bruge enten ID’er fra HTML-elementer eller CSS-selectors til at trække information fra en side. I langt de fleste tilfælde, vil informationen om produktet, anmeldelser, osv. være struktureret i HTML-koden på en ensartet måde på tværs af produkter. Det betyder, at vi kan benytte identifikatorer fra HTML-koden til at trække værdierne. På min egen produktside for ’Google Tag Manager Audits’, kan produktnavnet findes i en span, der er placeret indeni et h1-element med class’en ’product-title’. For at trække værdien til Google Tag Manager, vil jeg derfor kunne vælge CSS-selector og indtaste ’.product-title span’.

Custom JavaScript

Kan det ikke lade sig gøre at trække værdierne igennem Data Layer’et eller DOM elementer, kan en sidste udvej være at udvikle en snippet kode til at hente værdierne.

Det er en sidste udvej, og hvis du alligevel skal benytte Custom JavaScript, er det ofte bedre tjent for jeres forretning, at implementere et Data Layer på siden, som I kan benytte til både schema mark up og andre aktiviteter.

Step 4 – Sæt det sammen

Når du har oprettet variabler for alle de værdier, vi skal bruge, er vi klar til at implementere schema mark up i et Custom HTML-tag.

I eksemplet her, har jeg oprettet 8 GTM-variabler:

Dem sætter jeg ind i JSON-LD-objektet fra tidligere:

    {
      "@context": "https://schema.org/",
      "@type": "Product",
      "name": {{Produkter – Data Layer - Produktnavn}},
      "image": {{Produkter – DOM – Produkt IMG URL}},
      "description": {{Produkter – DOM – Produktbeskrivelse}},
      "sku": {{Produkter – Data Layer – Produkt SKU}},
      "brand": {
        "@type": "Brand",
        "name": {{Produkter – Data Layer - Produktbrand}}
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": {{Produkter – DOM – Gns bedømmelse}},
        "reviewCount": {{Produkter – DOM – Antal bedømmelser}}
      }
    }

I Google Tag Manager, skal nedenstående kode implementeres, så schema markup scriptet bliver injected når siden loades. Benyt triggeren fra Step 2 som til at sende tagget:

<script>
  (function(){
    var data = {
      "@context": "https://schema.org/",
      "@type": "Product",
      "name": {{Produkter – Data Layer - Produktnavn}},
      "image": {{Produkter – DOM – Produkt IMG URL}},
      "description": {{Produkter – DOM – Produktbeskrivelse}},
      "sku": {{Produkter – Data Layer – Produkt SKU}},
      "brand": {
        "@type": "Brand",
        "name": {{Produkter – Data Layer - Produktbrand}}
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": {{Produkter – DOM – Gns bedømmelse}},
        "reviewCount": {{Produkter – DOM – Antal bedømmelser}}
      }
    }

   //Opret en JS-variabel, der opretter et HTML-element ('script')
    var script = document.createElement('script');
  
  // Sæt typen for script-elementet til 'application/ld+json'
    script.type = "application/ld+json";
  
  // Tilføj koden fra schema mark up ovenfor til det nyoprettede script-element
    script.innerHTML = JSON.stringify(data);
  
  // Find sidens head-tag og implementér scriptet i sidens head-tag
    document.getElementsByTagName('head')[0].appendChild(script); 
  })(document);
</script>   

Step 5 – Sæt strøm til

Når tagget er sat op, er du klar til at teste implementeringen. Ved at sætte Google Tag Manager i Preview-mode, kan du sikre dig, at GTM læser variablerne korrekt og rent faktisk implementerer scriptet. Når containeren er i preview, kan du se det oprettede schema markup script ved at inspicere siden. Her bør du kunne finde et script af typen ’application/ld+json’ med de rette værdier.

Når du har bekræftet, at scriptet implementeres korrekt, kan du sætte ændringerne live og teste implementeringen i Google’s Structured Data Testing Tool: https://search.google.com/structured-data/testing-tool

Får du ingen fejlmeddelseser her, er implementeringen succesfuld, og du har nu en dynamisk implementering af schema markup på alle dine produktsider.

Tillykke – Du er færdig!

Brug for hjælp til implementeringen?
Kontakt mig på 60655677 / kontakt@jesperreinholdt.dk eller se mere om produktet her.