Breadcrumbs

Breadcrumbs, eller brødkrummestier, er en række links, der viser sidens placering i websitets informationshierarki. De hjælper brugeren tilbage til overordnede sektioner og giver søgemaskiner ekstra kontekst om relationen mellem sider.

En breadcrumb er normalt hierarkisk – eksempelvis “Forside → SEO-ordbog → Breadcrumbs” – og er ikke en historik over de sider, den enkelte bruger tidligere har besøgt.

Hvornår giver breadcrumbs mening?

De er især nyttige på webshops, vidensbaser og større websites med kategorier og underkategorier. På et meget lille website med få sider kan en hovedmenu være nok. Brødkrummestien skal afspejle en forståelig struktur, ikke blot kopiere URL’en mekanisk.

Hvert overordnet led bør føre til en rigtig, publiceret side. Den aktuelle side kan stå som tekst uden link, så brugeren tydeligt ser sin placering.

Tilgængeligt HTML-eksempel

<nav aria-label="Brødkrummer">
  <ol>
    <li><a href="/">Forside</a></li>
    <li><a href="/seo-ordbog/">SEO-ordbog</a></li>
    <li aria-current="page">Breadcrumbs</li>
  </ol>
</nav>

nav-elementet og det beskrivende label gør formålet tydeligere for hjælpemidler. En ordnet liste viser rækkefølgen semantisk. Visuelle separatorer som pile kan tilføjes med CSS, så de ikke behøver blive læst op som indhold.

BreadcrumbList i JSON-LD

Den synlige brødkrummesti kan suppleres med struktureret data. Et forenklet eksempel ser sådan ud:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Forside",
      "item": "https://eksempel.dk/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "SEO-ordbog",
      "item": "https://eksempel.dk/seo-ordbog/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Breadcrumbs"
    }
  ]
}
</script>

Navne, rækkefølge og adresser i markuppen skal beskrive den sti, brugeren faktisk kan se og benytte. Korrekt markup gør siden berettiget til en relevant visning, men Google afgør selv, om og hvordan stien vises i søgeresultatet.

Almindelige fejl

• Stien viser en kunstig kategori, som ikke findes i den synlige navigation.
• Alle led linker til samme side eller til adresser, der omdirigerer eller fejler.
• Mobilversionen skjuler stien helt uden et brugbart alternativ.
• JSON-LD og den synlige sti fortæller to forskellige historier.
• Separatorer eller lange kategorinavne gør navigationen vanskelig at læse.

Kontrollér implementeringen

1. Klik alle overordnede led på både mobil og computer.
2. Kontrollér, at rækkefølgen følger sidens reelle hierarki.
3. Test semantikken med tastatur og skærmlæser, hvis muligt.
4. Validér markuppen med Googles Rich Results Test.
5. Hold øje med fejl efter ændringer i kategorier, navigation eller URL’er.

Breadcrumbs supplerer menuen og de kontekstuelle interne links. De erstatter ikke en gennemarbejdet informationsarkitektur, men kan gøre den lettere at se og bruge.