Schema markup til lokal SEO: Sådan får du Rich Snippets med struktureret data

  Skrevet af: Nicolai Sørensen     20-10-2020     Skrevet i: SEO + SEM

Har du også bemærket, at nogle søgeresultater får mere opmærksomhed og fylder mere end andre? Det kan dine også komme til ved hjælp af Schema markup. I denne guide koncentrerer vi os om Schema markup til lokal SEO, mens jeg kommer med helt konkrete kode-eksempler du kan implementere.

Denne guide er teknisk og henvender sig først og fremmest til dig der er SEO-specialist, webdesigner eller webudvikler.

Så, hvad gør Schema markup? Schema markup hjælper Google med at forstå og ranke din hjemmeside korrekt. Derudover kan Schema give udvidet beskrivelse (Rich Snippets), som øger din synlighed og CTR.

Schema.org markup (eller Structured Data) åbner op for mange muligheder, når det kommer til lokal SEO. Lær hvordan du markerer struktureret data til fx advokater, læger og lokale virksomheder.

Over de sidste år, er Schema blevet meget populært blandt SEO konsulenter, som en legitim optimeringsstrategi, for at få de eftertragtede udvidelser (Rich Snippets) i til sit søgeresultat på Google.

Helt fundamentalt, så er Schema et fundament for markupdata, der giver søgemaskiner mulighed for bedre at forstå placeringsbaserede strukturerede oplysninger, såsom adresser, begivenhedsdatoer, telefonnumre og anden information.

Dette fundament bruges derefter i Rich Snippets, videokarruseller, og deslignende, og vises i pæne, kortlignende rækkefølge i et forsøg på at gøre søgeresultaterne mere tiltalende for brugeroplevelsen.

Med det sagt, så lad os gå i gang, og begynde vores arbejde med at lære omkring lokal Schema markup, og hvordan det benyttes til lokal SEO. Schema Markup er i øvrigt en del af teknisk SEO.

Nedenstående guide tager viser dig konkrete eksempler på, hvordan du kan bruge lokal Schema markup til at få vist Rich Snippets i søgeresultaterne. Guiden tager udgangspunkt i den kode der genereres, men hvis du har en WordPress hjemmeside, anbefaler jeg, at du supplere med et plugin til at håndtere din lokale Schema Markup.

Hvad er Schema Markup?

Schema markup, eller Schema Structured Data (struktureret data på dansk), blev lavet af Google, Bing og Yahoo.

Formålet med Schema var at skabe og yde støtte til en fælles gruppe tags, søgeord, der kunne bruges af søgemaskinerne til bedre at forstå og vise data.

Denne markup bruges af mange lokale fysiske butikker i SEO, for at hjælpe med at blive vist i SERP’erne (Search Engine Results Pages), i form af svarbokse, karruseller og andre Rich Snippets, der kan genereres af denne markup.

Hvem kan have gavn af Schema Markup?

I teorien, så kan nærmest enhver forretning have gavn af lokal Schema markup for at skabe opmærksomhed omkring sig og en konkurrencedygtig fordel i SERP’erne.

Indenfor lokal SEO, så genererer Schema markup SERP-data, der er specifikke for bestemte virksomheder, der vises på tværs af SERP’erne.

Forretninger såsom advokater, læger, restauranter, elektronikværksteder, små caféer, sandwich-butikker, elektronikbutikker m.fl. benytter sig af lokal Schema markup for at generere Rich Snippets til deres forretning.

Hvad er Googles retningslinjer for Schema strukturerede data?

Lad os skifte gear en smule her.

I stedet for at give et ord-for-ord-referat af Googles retningslinjer for strukturerede data, så vil jeg gerne give min egen fortolkning af deres retningslinjer, baseret på min egne tidligere erfaringer, og give dig nogle overordnede tips, du kan bruge til at undgå eventuelle problemer, der måtte opstå, hvis du bryder Googles retningslinjer i fremtiden.

Som vi alle er klar over, så har Google massevis af retningslinjer for at begrænse spam i deres Schema markup, og sikre sig, at spam ikke vises i SERP’erne.

Det skal gøres klart at strukturerede data ikke skal være spam på nogen måde, og skal altid forklare præcis, hvad siden handler om.

Hvis du spammer dine strukturerede data i massevis, kan du godt regne med at blive straffet af Google på et eller andet tidspunkt for at misbruge lokale Schema markups.

Googles primære mål er at holde deres søgeresultater fri for spam. Fungerer dette i den virkelige verden? Ikke altid.

Og, som vi alle ved, så er det ikke ligeså som blot at overvåge internettet for spam. Det ville være umuligt med millionvis af forespørgsler om dagen.

For at undgå situationen hvor din markup bliver set som spam, så anbefaler Google at du sikrer dig, at den overholder deres retningslinjer for strukturerede data, og at du ikke drejer alt ind på at kunne benyttes som marketing.

Et af de bedste tips jeg kan give dig, er at sikre dig, at din Schema markups overholder Googles retningslinjer, altså at din markup tilpasser sig brugeroplevelsen.

Det betyder, at et tæt match af brugerens hensigt skal finde sted med al implementering af lokal Schema markup for siden.

Marker ikke en side beregnet til en sportsbegivenhed med en markup, der er beregnet til en restaurant. Selvom det er et mere tænkt eksempel, så kan det ske. Jeg ønskede blot at give et klart eksempel for at fjerne enhver forvirring, der måtte opstå.

Google understreger, at du ikke bør oprette strukturerede data, der gør indhold usynligt for brugere, der læser indholdet. Det skal være det samme som markup’en, der bruges til dette formål. Eksempelvis kan man markere en FAQ på side-niveau i stil med meta titles etc. Her er det så vigtigt, at du ligeledes implementerer FAQ’en fysisk på din landingpage – og at indholdet er exact match.

Du bør heller ikke bruge markups, der enten er ”irrelevante eller misvisende”, i henhold til deres retningslinjer. Hvis din side henvender sig til advokater, skal du ikke bruge Schema markups til at markere data beregnet til læger og omvendt.

Google specificerer også i deres retningslinjer, at din Schema markup skal være komplet for at falde indenfor deres parametre for inkludering. Det betyder, at hvis Schema markup’en kræver et billede, eller andre specifikke informationer, skal du ikke undgå at inkludere det.

Hvilke formater for Schema markup er tilgængelige?

Der er tre formater:

• Standard Schema microdata, som markeres ved hjælp af HTML, er den mest alment brugte, og den nemmeste at lære at implementere. Igennem denne guide, vil jeg referere til det som Schema markup.
• JSON-LD, markeret ved hjælp af JavaScript, er det mest anbefalede format.
• RDFa: RDFa fungerer godt i en række forskellige dokumenttyper, såsom XML, HTML 4, SVG, m.fl.Uanset hvilken type af webdokument du bruger, er det sandsynligt, at RDFa vil fungere. Andre anvendelser af denne datadokumentation inkluderer Facebooks Open Graph-protokol, som er baseret på RDFa.

RDFa ligger dog uden for rækkevidden af denne vejledning, som fokuserer på at komme i gang med Schema markup og JSON-LD.

Lad os derefter se på, hvordan du begynder at implementere strukturerede data.

Googles strukturerede data-testværktøj, eller andre testværktøjer

Før du tilføjer nogen former for kode til din side, så bør du sikre dig, at din kode valideres.

Den bedste måde at gøre dette på, er ved at teste det i Googles strukturerede data-testværktøj, som vi vil komme ind på om lidt.

Opsætning af din kodestruktur

Med Schema markup, er det nødvendigt først at planlægge din struktur, så den overholder Googles retningslinjer. Derefter disse skridt:

1. Find frem til din Schema markup-type på schema.org.
2. Få information om den sidste du ønsker at benytte Schema markup på, og saml alt den kode du ønsker at bruge.
3. Kod dine Schema markups (strukturerede data).
4. Test din kode via Googles Structured Data Testing Tool.
5. Start crawlingen og test din Schema markup i Googles Search Console.
6. Overvåg resultaterne af denne implementering løbende, med resultatrapportering.

Rinse and repeat.

Grundlæggende om kodning med Schema markup

At kode strukturerede data kan lyde som en uoverskuelig, kompleks opgave for nybegyndere, men det er virkelig simpelt, når du først har lært hvordan du gør.

Vi slår over til standard On-page Schema markup i denne specifikke del af artiklen, men vi går også også gennem andre variationer af de strukturerede data.

Lad os komme i gang.

Først og fremmest, så betyder det ikke noget strukturelt om du bruger et span eller et div tag. Begge kan bruges, så længe der bruges en ”parent declaration” til enheden, og man skal holde nøje øje med ens åbnings- og lukningskoder sammen med indlejring af sin kode.

Her er et eksempel, som du måske har set før:

<span itemscope itemtype="https://schema.org/name-of-data-type">
<span itemprop="name">Name of data type, like company name</span>
<span itemprop="name">Name of data type, like company address</span>
<span itemprop="name">Name of data type, like company city</span>
<span itemprop="name">Name of data type, like company state</span>
<span itemprop="name">Name of data type, like company zip code</span>
<span itemprop="name">Name of data type, like company phone number</span>
<span itemprop="url"><a href="domainname.com">Company website</span>
</span>

Her er et eksempel med den samme kode, men med et <span> tag i stedet. Begge versioner er 100% valide i Googles Structured Data Testing Tool.

Husk på, at den eneste ting du skal være bekymret om, når det kommer til implementering, er at sikre sig, at der er et ”parent declaration” tag (erklærer henholdsvis schema.org’s itemscope og itemtype.

Så længe du har den grundlæggende struktur til begge implementeringer af Schema markup, så er du good to go.

Googles Structured Data Testing Tool fortæller os at begge af disse muligheder er valide / korrekte. Jeg har personligt ikke oplevet nogle former for udfordringer med hverken <span> eller <div> – begge fungerer.

Dette er vigtigt at notere sig, specielt hvis dit CMS er selv-kodet, og har problemer med standard Schema markup. Hvis det er tilfældet, så kan <span> være din eneste løsning til at benytte Schema.

Det er vigtigt at sikre sig, at din parent declaration af dit Schemas datatype er tilstede, og at gruppen af tags er ordentligt indlejret, åbnet og lukket. Og selvfølgelig at de er 100% valide.

JSON-LD: En omfattende Schema Markup Protocol, baseret på JavaScript

JSON-LD (JavaScript Object Notation for Linked Data) er en anvendelse af Schema markup anvendt i JavaScript-format.

Det er mindre komplekst at implementere end Schema microdata, fordi du blot tilføjer JSON-LD-kode til et dokument via CTRL-C + CTRL-V, i stedet for at skulle markere HTML-elementer med specielle tags for at skabe koden.

Fordelen ved denne tilgang er, at du hurtigere kan optimerer dine strukturerede data, end du normalvis ville kunne.

En optimering af Schema markup ved brug af JSON-LD er meget hurtigere at kopiere og indsætte, i forhold til at gå gennem kedelige individuelle tags af HTML-markups.

Grundlæggende om kodning med JSON-LD

JSON-LD er alsidigt, simpelt, og nemt at kode.

Først skal du lige blive bekendt med din forretningsspecifikke item data-typer i Schema-ordbogen.

Det er nemmere end Schema markup, fordi JSON-LD kræver ikke nogen kode pakkes rundt om tags i brødteksten på sideindholdet. Du inkluderer blot JSON-LD-kode i sidehovedet på siden.

Lad os gennemgå noget af syntaks-strukturen, der er i JSON-LD.

<script type="application/ld+json">
{
"@context": https://schema.org/,
"@type": "Article",
"name": “Sådan bruger du Schema.org Markup til lokal SEO”
}
</script>

Det er så simpelt som ovenstående.

De variationer, der er inkluderet i denne markup, vil afhænge af den specifikke item type i Schema-ordbogen.

Det anbefales altid, at du sørger for, at din kode valideres ved hjælp af Googles Structured Data Testing Tool for valideringen, før du implementerer koden,

Fejlsøgning af din markup

Hvis du har lavet struktureret data og ikke har kunnet validere denne markup succesfuldt med Google Search Console, så kan der forekomme flere grunde til at du oplever fejl.

1) Syntaksen i din kode har fejl

Vær sikker på, at du ikke har ladet et vildfarent kolon eller semikolon glide ind i din kodning.

Der skal også tages hånd om fejlagtige anførselstegn, apostrofer og parenteser, der er steder, hvor de ikke burde være.

2) Problemer, der stammer fra brugen af Microsoft-programmer

Gæt en gang?

Microsoft-programmer (fx Microsoft Word og Excel som de fleste bruger), kan skabe problemer, når du kopierer og indsætter din kode. Jeg skrev eksempelvis dette indlæg i Word og måtte udskifte alle “-tegn (Ja, det tog mig altså mere end en halv time).

For eksempel gengives anførselstegn ikke korrekt i andre programmer, når de indsættes fra Word eller Excel.

Bare for at være sikker, så sikr dig, at du bruger værktøjer såsom Notepad, Notepad++, eller Dreamweaver, når du kopierer og indsætter koden.

Ellers så vil det være nødvendigt at skrive din kode direkte i Googles Structured Data testværktøj.

Det fører os videre til det næste punkt. Hvis du tester din kode i Googles Structured Data testværktøj, kopierer du kode fra andre programmer, og du ved din kode er korrekt, men den giver dig en fejl – så prøv at skrive koden én linje af gangen.

Din kode er måske korrekt, men anførselstegnene fra andre programmer kaster fejl af sig.

3) Korrekt itemtype i forhold til din Schema-kode

Hvis alle andre fejl er rettet, og din Schema markup stadig skaber problemer, så kan det være, at du ikke har inkluderet alle kravene for din itemtype, som er præsenteret i Schema-ordbogen.

Det er en god ide at foretage en grundig analyse af din kode, i forhold til de krævede itemtypes i Schema-ordbogen, bare for at sikre dig, at din kode passer med kravene.

4) Ethvert brud på Googles retningslinjer eller politikker

Selv Googles retningslinjer og politikker kan skabe problemer. Lav en gennemgang af Googles retningslinjer, blot for at sikre dig, at du ikke har overtrådt store som små politikker, der normalt er beskrevet i disse retningslinjer.

Eksempler på Schema Markup til lokal SEO for at få dig godt i gang

Lad os gennemgå nogle eksempler af Schema markup, med specificeringer af hvilke lokale SEO-situationer, de vil være gode til.

Disse implementeringer af Schema markup-skabeloner og deres eksempler vil være nyttige til at inkludere Schema markup for de mest almindelige, lokal-SEO virksomheder.

Lokal SEO for advokatfirmaer (Schema-eksempel)

Her finder du Schema-ordbogen for “Legal Services”: https://schema.org/LegalService

Et eksempel på schema markup:

<div itemscope itemtype="https://schema.org/LegalService">
<span itemprop="name">Advokatfirmaet</span>
<span itemprop="address">Advokatfirmaets adresse</span>
<div itemscope itemtype="https://schema.org/PostalAddress">
<span itemprop="addressLocality">By</span>,
<span itemprop="addressRegion">Region</span>
<span itemprop="postalCode">Postnummer</span>
</div>
<span itemprop="telephone">Telefonnummer</span>
</div>

Lokal SEO for små fysiske forretninger: Lokal Forretning, eksempel 1

Local Business Schema Markup er en måde små, fysiske forretninger kan bruge Schema til at forbedre deres lokale resultater.

Her finder du Schema-ordbogen: https://schema.org/LocalBusiness

Et eksempel på schema markup for lokale, små forretninger:

<div itemscope itemtype="https://schema.org/LocalBusiness">
<span itemprop="name">Firmaets navn</span>
<span itemprop="address">Firmaets adresse</span>
<div itemscope itemtype="https://schema.org/PostalAddress">
<span itemprop="addressLocality">By</span>,
<span itemprop="addressRegion">Region</span>
<span itemprop="postalCode">Postnummer</span>
</div>
<span itemprop="telephone">Telefonnummer</span>
</div>

Dette er et eksempel hos Sun’s Donuts, der bruger lokal schema markup for deres lokale, lille forretning:

Lokal SEO for restauranter: Lokal Forretning, eksempel 2

Her finder du Schema-ordbogen: https://schema.org/LocalBusiness

<div itemscope itemtype="https://schema.org/LocalBusiness">
<span itemprop="name">Firmaets navn</span>
<span itemprop="address">Firmaets adresse</span>
<div itemscope itemtype="https://schema.org/PostalAddress">
<span itemprop="addressLocality">By</span>,
<span itemprop="addressRegion">Region</span>
<span itemprop="postalCode">Postnummer</span>
</div>
<span itemprop="telephone">Telefonnummer</span>
</div>

Her er et eksempel af Restaurant Schema Review Markup, genereret i SERP’ene:

GeoCoordinates-eksempel

Her finder du GeoCoordinates schema-ordbog: https://schema.org/GeoCoordinates

<div itemscope itemtype="https://schema.org/GeoCoordinates">
<span itemprop="name">Virksomhedens navn</span>
<span itemprop="address">Virksomhedens adresse</span>
<span itemprop="addressCountry">USA</span>
<span itemprop="elevation">37.42242</span>
<span itemprop="latitude">-122.08585</span>
<span itemprop="postalCode">92665</span>
</div>

Her er et eksempel af GeoCoordinates-koden i brug på Wendys multi-lokation-website:

<div class="LocationInfo-address">
<span class="coordinates" itemprop="geo" itemscope itemtype="https://schema.org/GeoCoordinates">
<meta itemprop="latitude" content="33.70261743200274">
<meta itemprop="longitude" content="-117.95383751392365"></span>
<address class="c-address" itemscope itemtype="https://schema.org/PostalAddress" itemprop="address" data-country="US">
<meta itemprop="addressLocality" content="Fountain Valley" />
<meta itemprop="streetAddress" content="17940 Brookhurst Ave" />
<div class=c-AddressRow><span class="c-address-street-1">17940 Brookhurst Ave</span>
</div>
<div class=c-AddressRow><span class="c-address-city">Fountain Valley</span><yxt-comma>,</yxt-comma>
<abbr title="California" aria-label="California" class="c-address-state" itemprop="addressRegion">CA</abbr>
<span class="c-address-postal-code" itemprop="postalCode">92708</span></div>
<div class=c-AddressRow><abbr title="United States" aria-label="United States" class="c-address-country-name c-address-country-us" itemprop="addressCountry">US</abbr>
</div></address></div><div class="LocationInfo-phone">
<div class="c-phone c-phone-main"><div class="c-phone-label c-phone-main-label">Main Number</div>
<div class="c-phone-number-wrapper c-phone-main-number-wrapper">
<div class="c-phone-number c-phone-main-number">
<a class="c-phone-number-link c-phone-main-number-link" href="tel:+1-714-964-2022" data-ya-track="mainphone">(714) 964-2022</a>
<span class="c-phone-number-span c-phone-main-number-span" itemprop="telephone" id="telephone">(714) 964-2022</span>
</div></div></div></div>

PostalAddress Schema-eksempel

PostalAdress-schema kan bruges til at tilføje lokale adresse-informationer til dit opslag.

Her finder du PostalAddress Schema-ordbogen: https://schema.org/PostalAddress

<div itemscope itemtype="https://schema.org/PostalAddress">
<span itemprop="streetAddress">10392 Somewhere Lane</span>
<span itemprop="addressLocality">Irvine</span>
<span itemprop="addressRegion">CA</span>
<span itemprop="addressCountry">USA</span>
<span itemprop="postalCode">92689</span>
</div>

Her er et eksempel af PostalAddress Schema genereret i SERP’ene af Wendy’s:

Reviews Schema-eksempel (anmeldelser)

Her finder du Reviews Schema-ordbogen: https://schema.org/Reviews

<div itemscope itemtype="https://schema.org/Reviews">
<span itemprop="itemReviewed">Personal Injury Law Service</span>
<span itemprop="reviewAspect">This review or rating is relevant to services provided by this law firm.</span>
<span itemprop="reviewBody">”We thought these attorneys were amazing.”</span>
<span itemprop="reviewRating">5</span>
</div>

Her er et eksempel af Reviews Schema genereret i SERP’ene:

Rating Schema-eksempel (Få stjerner i SERP’en)

Når du bruger Rating Schema, er det muligt at se stjernebedømmelserne og anmeldelser i SERP’ene.

Her finder du Rating Schema-ordbogen:
https://schema.org/Ratings

<div itemscope itemtype="https://schema.org/Review">
<span itemprop="itemReviewed">Personal Injury Law Service</span>
<span itemprop="reviewAspect">This review or rating is relevant to services provided by this law firm.</span>
<span itemprop="reviewBody">”We thought these attorneys were amazing.”</span>
<span itemprop="author">John</span>
<span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
<meta itemprop="worstRating" content = "1">
<span itemprop="ratingValue">1</span>/
<span itemprop="bestRating">5</span> stars
</span>
</div>

Her er et eksempel af Ratings Schema, der bliver genereret i SERP’ene:

Event Schema-eksempel

Her finder du Event Schema-ordbogen:
https://schema.org/Event

<div itemscope itemtype="https://schema.org/Event">
<span itemprop="startDate" content="2019-03-02T09:30">Sunday, Mar 2</span>
<span itemprop="name">New Concert at this Concert Hall</span>
<span itemprop="location" itemscope itemtype="https://schema.org/Place">
<span itemprop="streetAddress">5729 N. Cheney St.</span>
<span itemprop="addressLocality">Miami</span>
<span itemprop="addressRegion">FL</span>
<span itemprop="postalCode">92382</span>
<span itemprop="url" href="https://www.concertwebsite.com/">Buy Tickets</span>
</div>

Her er et eksempel af Event Schema markup, der bliver genereret i SERP’ene:

Website Schema markup

Website Schema markup lader din hjemmeside fremstå med et søgefelt i SERP’ene. Her er et eksempel af Website Schema-markup, der bliver brugt af Best Buy, i form af JSON-LD-markup:

<script type="application/ld+json">
{"@context" : "https://schema.org","@type" : "WebSite","name" : "Best Buy","url" : "https://www.bestbuy.com/"}
</script>

Brug af Schema Markup til andet indhold på din side

Schema markups kan ikke kun bruges til at markere strukturerede data, såsom adresser, men du kan også bruge Schema til at fremhæve ting som:

• Breadcrumbs.
• Navigationsmenuer på hjemmesiden.
• Videoer.
• Stort set et hvilket som helst element, du kan tænke på, i form af lokal SEO.

Det er her du kan få schema-ordbøgerne for navigationsmenuer, videoer, og breadcrumbs:

• Breadcrumbs: https://schema.org/breadcrumb
• Video: https://schema.org/video
• Navigationsmenuer: https://schema.org/SiteNavigationElement

Essentielle redskaber til Schema Markup

Googles Structured Data Test-værktøj:
https://search.google.com/structured-data/testing-tool/u/0/

Bing’s Structured Data Markup Validator
https://www.bing.com/toolbox/markup-validator

En liste af Schema-ressourcer og værktøjer til at gøre dit job nemmere

Tjek disse værktøjer og plug-ins ud, for at lave dine schema markup implementering nemmere:
https://www.schemaapp.com/60-structured-data-tools-create-test-plugins-more/

Mens du arbejder med schema markup, så husk grundreglen – valider, valider, valider. Valid kode vil gøre en verden til forskel i forhold til din Schema markup-kodningsindsats.

Go’ fornøjelse!