Begynderguide til Rich Schema Markup

Schema.org er et initiativ startet af Google, Microsoft, Yahoo og Yandex, der har til formål at skabe en standard for, hvordan man kan ”markere” sit indhold i koden, så søgemaskinerne kan forstå det.

Arbejder man med SEO, så kender man uden tvivl til dette. Ved at give Google en øget forståelse af ens indhold kan man nemlig opnå mærkbare fordele ude i søgemaskinen. Dette kan eksempelvis være at blive vist i et knowledge card eller ved at opnå højere placeringer med sit eksisterende indhold.

En af de kæmpe fordele ved Rich Schema Markup er, at man typisk kan lave arbejdet én gang, og så får man effekten på alt indhold af samme type. Eksempelvis at man lave markup af et produkt i selve skabelonen, og så er denne markup automatisk på alle eksisterende og nye produkter.

I denne artikel prøver jeg at give dig et simpelt indblik i, hvordan det fungerer.

Forskellige formater

Der findes som udgangspunkt to slags formater:

• Microdata/RDFa: Her arbejder man med sine eksisterende HTML-tags (tags som h1, h2, img, p og span), men tilføjer bestemt attributter, der forklarer Google, hvilket information præcis dette tag indeholder.
• JSON: Her ligger dataen til søgemaskinen separeret væk fra selve indholdet. Det vil typisk være i slutningen af dokumentet, hvor der placeres et script-tag med alle informationerne på en særligt struktureret måde.

Hvad man vælger, er ikke så vigtigt for resultaterne, men afhængigt af jeres webløsning kan den ene løsning være lettere at implementere end den anden. Jeg har primært arbejdet med den første version (i Microdata-formatet), da den er nem at implementere, hvis man har adgang til HTML-skabelonerne, som bruges til at udskrive indholdet.

Microdata

For eksemplets skyld dykker jeg kun ned i Microdata (og ikke RDFa), da grundprincipperne er præcis de samme – det er blot de forskellige udtryk, der ændres.

HTML-atributter der benyttes

• itemscope – Bruges til at gruppere flere relaterede informationer. Et itemscope kan eksempelvis være PostalAddress som samler oplysninger som adresse, postnummer og by.
• itemtype – Bruges sammen med itemscope til at fortælle, hvilket sæt informationer, der kommer. Det kan eksempelvis være Event, Article, PostalAddress eller Organization.
• itemprop – bruges til at definere en konkret værdi, som eksempelvis de førnævnte adresse, postnummer og by.
• content – Hvis man laver en itemprop, vil den som udgangspunkt tage indholdet af selve tagget som værdi. Med attributten content kan man dog overskrive dette, så man definerer en specifik værdi til selve markup-delen.

Det er vigtigt at være opmærksom på, at der er flere niveauer i Schema Markup, hvilket betyder, at et itemscope godt kan have op til mange itemscopes under sig.

Eksempel på struktur

• itemscope (Organization)
  • itemprop (name): Leadtime ApS
  • itemprop (email): [email protected]
  • itemprop (address): itemscope (PostalAddress)
    • itemprop (addressCountry): Denmark
    • itemprop (addressLocality): Frederiksberg
    • itemprop (postalCode): 2000
    • itemprop (streetAddress): Dronning Olgas Vej 26
  • itemprop (telephone): 70 70 28 70

Eksempel på Microdata-markup

<div itemscope itemtype="https://schema.org/Organization">
<h1 itemprop="name">Leadtime</h1>
<span itemprop="email">[email protected]</span>
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<meta itemprop="addressCountry" content="Denmark" />
<span itemprop="streetAddress">Dronning Olgas Vej 26</span>
<span itemprop="postalCode">2000</span>
<span itemprop="addressLocality">Frederiksberg</span>
</div>
<span itemprop="telephone">70 70 28 70</span>
</div>

Brug af <meta>-tag

Du har muligvis spottet, at jeg i mit eksempel har et enkelt <meta>-tag midt inde i teksten. Det er en måde at sende markup-data med til Google uden at vise det til brugerne. Det kan være relevant mange steder. Har man eksempelvis markup af reviews, så vil Google kræve værdierne ”worstRating” og ”bestRating”, så den ved, hvilken skala der bedømmes på. Har man en visualisering med stjerner, så vil man ikke skrive ”på en skala fra 1 til 5” til brugeren, men vi kan sende værdien på en effektiv måde til Google.

JSON

En af de store fordele ved JSON er overskueligheden. Man skal ikke sidde og kigge mellem et hav af HTML-tags, men har informationen stående isoleret.

Syntaksen:

Selvom syntaks godt kan blive en smule nørdet, så er det godt at have en grundforståelse. Når man arbejder med JSON, vil man i højere grad opleve, at et manglende komma (eller et for meget) kan betyde, at intet virker. Derfor prøver jeg her et give en ultrakort opsummering af, hvordan syntaksen i JSON fungerer:

• { } – Disse paranteser betyder, at det er et object – eller det som vi også kalder for et itemscope, når vi taler om markup.
• [ ] – Disse paranteser betyder, at det er et array – altså en række af elementer. Det kunne eksempelvis bruges, hvis man til en artikel gerne ville definere flere billeder, flere forfattere eller lign.
• “property”: “værdi” – Dette er måden vi definerer en property (eller en variabel). Egentlig betyder citationstegnene omkring værdien, at der er tale om en tekststreng (man ville altså ikke behøve dem, hvis det var et rent tal). Arbejder du med markup, vil jeg anbefale altid at sætte citationstegn omkring din værdi, så den ikke pludselig fejler, hvis der sniger sig tekst ind eller mangler en værdi.
• @context – Bruges til at forklare, at denne bid JSON bruges i henhold til Schema.org-standarden. Det er vigtigt, da JSON også kan bruges til mange andre formål.
• @type – Bruges på samme måde som itemtype til at pege på det specifikke skema, der arbejdes med.
• Komma (,) – Bruges til at adskille to værdier. Vær opmærksom på, at der ikke skal komma efter den sidste værdi, inden et objekt slutter.

Eksempel på JSON-markup:

<script type="application/ld+json">
{
"@context": "https://schema.org",
"type": "Organization",
"name": "Leadtime",
"email": "[email protected]",
"address": {
"@type": "PostalAddress",
"addressCountry": "Denmark",
"streetAddress": "Dronning Olgas Vej 26",
"postalCode": "2000",
"addressLocality": "Frederiksberg"
},
"telephone": "70702870"
}
</script>

De vigtigste skemaer

Der findes et hav af forskellige skemaer, man kan arbejde med, og det kan hurtigt blive lidt uoverskueligt. Jeg vil naturligvis anbefale jer at kigge på den fulde liste over typer for at finde ud af, hvad der kunne være relevant for jer.

Her har jeg dog samlet dem, som jeg typisk arbejder med for kunder:

• Organization – Information om jeres egen virksomhed. Det vil typisk være med den information, I har i jeres footer.
• Product – Det kan både være produkter i traditionel forstand på en webshop, men denne kan også bruges til rejsetilbud, kursuspakker og lign.
• Review – Hvis I nogle steder på jeres website viser reviews, så skal det markeres. Det kan være anmeldelser af jeres forretning, et produkt I sælger eller noget helt tredje.
• Event – Afholder I webinarer, foredrag eller events, så passer dette skema perfekt til dette.
• Article – Hvis I på egen side skriver blogindlæg, nyhedsartikler eller guides.
• ItemList – Bruges eksempelvis til at markere en breadcrumb, så Google får en bedre forståelse for strukturen på jeres website.

Værktøj til at teste det

Der findes et fremragende værktøj til at teste jeres Rich Schema Markup, som er lavet af Google. Værktøjet hedder Rich Results Test, og her kan du enten indsætte et stykke kode eller en URL, og så fortæller Google, hvad den finder (og om der er nogle fejl eller advarsler).

Pas på med at bekymre dig for meget om advarslerne, for ofte vil der være et par oplysninger, som du ikke har mulighed for at levere.