Breadcrumbs

Breadcrumbs (brødkrummesti) er en navigationssti, der viser brugere, hvor de befinder sig på en hjemmeside, og hvordan de kan navigere tilbage til tidligere niveauer. Breadcrumbs forbedrer både brugeroplevelsen (UX) og SEO, da de gør det lettere for brugere og søgemaskiner at forstå websitets struktur.

Eksempel på breadcrumbs

Hjem > Kategorier > SEO > Breadcrumbs

I HTML vises breadcrumbs ofte sådan:

<nav aria-label="breadcrumb">
  <ol>
    <li><a href="https://clickin.dk/">Hjem</a></li>
    <li><a href="https://clickin.dk/seo/">SEO</a></li>
    <li>Breadcrumbs</li>
  </ol>
</nav>

Hvorfor er breadcrumbs vigtige?

1. Forbedret brugeroplevelse (UX)

• Giver en hurtig oversigt over sidens placering
• Reducerer klikafstand og gør navigation mere intuitiv
• Hjælper brugere med at vende tilbage til tidligere niveauer uden at bruge browserens “Tilbage”-knap

2. SEO-fordele

• Google bruger breadcrumbs i søgeresultater, hvilket gør links mere klikbare
• Hjælper søgemaskiner med at forstå websitet bedre
• Reducerer bounce rate ved at tilbyde alternative navigationsmuligheder

3. Mindre afhængighed af hovednavigation

• Især nyttigt for e-commerce-websites og store hjemmesider med mange kategorier

Typer af breadcrumbs

1. Hierarkiske (location-based)

• Viser sidens placering i websitets struktur
• Eksempel: Hjem > Tøj > Herretøj > Skjorter

2. Sti-baserede (path-based)

• Viser brugerens specifikke navigation gennem hjemmesiden
• Eksempel: Hjem > Tilbudsside > Produktside > Blog > Kontakt

3. Dynamiske (attribute-based)

• Bruges ofte på e-commerce-websites med filtrering
• Eksempel: Hjem > Laptops > Apple > MacBook Pro

Best Practices for breadcrumbs

• Hold dem enkle og intuitive: Brug logiske kategorier og undgå lange stier
• Brug struktureret data (Schema Markup): Implementér schema.org for bedre SEO
• Gør dem klikbare: Hver breadcrumb (undtagen den aktuelle side) bør være et link
• Placér dem øverst på siden: Typisk lige under navigationsmenuen

Eksempel på struktureret data (Schema Markup)

For at optimere breadcrumbs til SEO kan du bruge JSON-LD:

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Hjem",
      "item": "https://clickin.dk/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "SEO",
      "item": "https://clickin.dk/seo/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Breadcrumbs"
    }
  ]
}

Breadcrumbs er en vigtig del af en hjemmeside, både for brugervenlighed og din SEO-strategi. De hjælper brugere med at navigere nemt, reducerer bounce rates og forbedrer Google-indeksering.