←Alle eksempler/examples/breadcrumb-navigation

BreadcrumbList til Navigation

NavigationBegynder

BreadcrumbList schema til brødkrumme navigation der viser sidens hierarki i Google.

Træskilt med to pile der peger i hver sin retning — Foto: Jametlene Reskp / Unsplash

Markup

Kodeeksempel

breadcrumb-navigation.htmlNavigation

<!DOCTYPE html>
<html lang="da">
<head>
  <title>iPhone 15 Pro - Smartphones - Elektronik</title>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Forside",
        "item": "https://example.com"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "Elektronik",
        "item": "https://example.com/elektronik"
      },
      {
        "@type": "ListItem",
        "position": 3,
        "name": "Smartphones",
        "item": "https://example.com/elektronik/smartphones"
      },
      {
        "@type": "ListItem",
        "position": 4,
        "name": "iPhone 15 Pro",
        "item": "https://example.com/elektronik/smartphones/iphone-15-pro"
      }
    ]
  }
  </script>
</head>
<body>
  <nav aria-label="Breadcrumb">
    <ol>
      <li><a href="/">Forside</a></li>
      <li><a href="/elektronik">Elektronik</a></li>
      <li><a href="/elektronik/smartphones">Smartphones</a></li>
      <li>iPhone 15 Pro</li>
    </ol>
  </nav>
</body>
</html>

Validér altid, før du sender live

Gennemgang

Forklaring

Dette eksempel demonstrerer BreadcrumbList schema til brødkrumme navigation. Google viser dette som en klikbar sti i søgeresultaterne (f.eks. 'Forside > Elektronik > Smartphones > iPhone 15 Pro'), hvilket hjælper brugere med at forstå sidens placering i hjemmesidens struktur.

Anvendelse