Breadcrumbs: hvad de er, og hvordan du laver dem

Hvad er breadcrumbs?

Breadcrumbs er en funktion, hvis formål er at gøre navigationen bedre for brugeren og tydeligt vise både søgemaskiner og brugere, hvordan siderne hænger sammen i et hierarki. På den måde kan brugeren hurtigt besøge både den endelige side og de kategorier, siden hører til.

Måder at lave breadcrumbs på

Rent teknisk har vi to muligheder i dag: den, brugerne kan se, og den i koden. I virkeligheden bør begge altid laves sammen og ikke hver for sig.

Synlig

I den synlige udgave lægger websitet breadcrumbs øverst på hver side, så den besøgende ved præcis, hvor han eller hun er. Kigger vi for eksempel på en produktside i en webshop (en HP Envy-computer), ville vi se det her i breadcrumbs:

Forside > Computere > HP > Envy

På den måde fortæller vi brugeren, at det produkt, han eller hun kigger på, hører til kategorien computere og samtidig til HP's familie af computere. Rent navigationsmæssigt er funktionen meget vigtig, for ville brugeren se flere HP-modeller eller blive ved med at kigge på computere, er det kun ét klik væk.

Uden funktionen bliver navigationen langt sværere, og risikoen for, at brugeren forlader websitet, er meget større.

Kode

Hvor den forrige mulighed lod os lægge breadcrumbs ind til brugeren, fortæller denne mulighed søgemaskinerne, hvordan vores indhold er kategoriseret. Det er meget vigtigt, at opsætningen bliver lavet rigtigt, for Google forstår ikke breadcrumbs, der kun er synlige.

Nedenfor kan du se et eksempel på breadcrumbs lavet med et stykke JSON-LD-script.

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Books",
"item": "https://example.com/books"
},{
"@type": "ListItem",
"position": 2,
"name": "Authors",
"item": "https://example.com/books/authors"
},{
"@type": "ListItem",
"position": 3,
"name": "Ann Leckie",
"item": "https://example.com/books/authors/annleckie"
},{
"@type": "ListItem",
"position": 4,
"name": "Ancillary Justice",
"item": "https://example.com/books/authors/ancillaryjustice"
}]
}
</script>

Koden ovenfor fortæller os, at bogen »Ancillary Justice« er skrevet af forfatteren Ann Leckie, og at det er en bog.

Books > Authors > Ann Leckie > Ancillary Justice

Har vi bygget vores website med skræddersyet udvikling eller i et af de store sprog, skal vi lave opsætningen manuelt. Bruger vi derimod Wordpress, har vi flere plugins til rådighed, der hjælper os med opsætningen:

• ›Rank Math
• ›Yoast SEO

Validering af opsætningen

Når opsætningen er lavet, er det vigtigste at tjekke, at det er gjort rigtigt. Hvor det er meget enkelt at tjekke den »synlige« opsætning, fordi vi bare skal se, at alle elementer er linket korrekt og virker, kræver det lidt mere at tjekke opsætningen i koden.

Alligevel har vi et Google-værktøj og en Chrome-udvidelse til rådighed, som gør livet meget lettere.

Googles værktøj til strukturerede data:

Med Googles værktøj kan vi validere vores strukturerede data enten via URL eller på kodeniveau, hvis vi indsætter stykket direkte.

Googles værktøj til strukturerede data

Indsætter vi en URL, giver Google os analysen med alle de strukturerede data, den har fundet.

Eksempel på en analyse af en URL i Googles værktøj til strukturerede data.

Vil vi derimod teste JSON-LD-koden til vores breadcrumbs, før vi lægger den ind, kan vi bruge værktøjet til »kodestykker«, som giver os det her resultat:

Værktøj til at validere kodestykker med strukturerede data.

Structured Data Testing Tool (udvidelse til Google Chrome)

Vil vi validere vores strukturerede data til breadcrumbs (og andre) direkte fra browseren i stedet for at gå ind på Googles værktøj, kan vi bruge udvidelsen »Structured Data Testing Tool«, som viser os alle de fundne strukturerede data og også eventuelle fejl.

Chrome-udvidelse til at validere Structured Data med et eksempel fra en artikel på SEO Alive.

Overvågning af breadcrumbs i Google Search Console

Når opsætningen og valideringen er på plads, mangler vi til sidst kun at holde øje med aktiviteten i Google Search Console, hvor vi kan følge den dagligt og opdage eventuelle afvigelser.

Visning af breadcrumbs-rapporten i Search Console (lanceret i september 2019).

Til sidst vil vi gerne spørge dig: hvilke fejl er du oftest stødt på, når du har lavet dem?

Vi vil gerne samle dem og udgive dem i denne artikel for at hjælpe andre SEO-folk.

Mange tak, og husk at dele dine kommentarer!

Referencer

• ›Googles dokumentation om breadcrumbs