BreadcrumbList Schema

Vis sidens hierarki direkte i Google søgeresultater med struktureret breadcrumb data. Hjælp brugere med at forstå hvor de er på din website.

Bedre Navigation

Synlig i SERP

Nem Implementation

Hvad er BreadcrumbList Schema?

BreadcrumbList schema er struktureret data der viser sidens placering i websitets hierarki. Det erstatter den fulde URL i Google søgeresultater med en breadcrumb trail:

Uden breadcrumb schema:

https://example.com/produkter/toj/jakker/vinterjakke-42

Med breadcrumb schema:

ForsideProdukterTøjJakkerVinterjakke 42

Dette gør det meget nemmere for brugere at forstå sidens kontekst og navigere til højere niveauer i hierarkiet.

Fordele ved Breadcrumb Schema

Bedre brugeroplevelse

Brugere kan se sidens placering i hierarkiet allerede i søgeresultaterne

Højere CTR

Strukturerede breadcrumbs er mere attraktive end lange URLs og kan øge klikraten

Nemmere navigation

Brugere kan klikke direkte til højere niveauer fra søgeresultaterne

Bedre site structure

Hjælper Google med at forstå din sites informationsarkitektur

Basis BreadcrumbList Schema

<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": "Produkter",
      "item": "https://example.com/produkter"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Elektronik",
      "item": "https://example.com/produkter/elektronik"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Laptops"
    }
  ]
}
</script>

Bemærk: Det sidste element (den aktuelle side) skal IKKE have et "item" felt, da det ikke er en link men selve siden.

Komplet E-commerce Eksempel

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Hjem",
      "item": "https://example.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Tøj & Mode",
      "item": "https://example.com/toj"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Herretøj",
      "item": "https://example.com/toj/herretoej"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Jakker",
      "item": "https://example.com/toj/herretoej/jakker"
    },
    {
      "@type": "ListItem",
      "position": 5,
      "name": "Vinterjakke Premium Black"
    }
  ]
}
</script>

Blog/Artikel Eksempel

<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": "Blog",
      "item": "https://example.com/blog"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "SEO Tips",
      "item": "https://example.com/blog/seo"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Sådan optimerer du meta tags i 2024"
    }
  ]
}
</script>

Implementation i Next.js

Dynamisk Breadcrumb Component

// components/BreadcrumbSchema.tsx
export function BreadcrumbSchema({ items }: {
  items: { name: string; url?: string }[]
}) {
  const breadcrumbSchema = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": items.map((item, index) => ({
      "@type": "ListItem",
      "position": index + 1,
      "name": item.name,
      // Sidste item skal ikke have URL
      ...(item.url && { item: item.url })
    }))
  }

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{
        __html: JSON.stringify(breadcrumbSchema)
      }}
    />
  )
}

// app/produkter/[category]/[product]/page.tsx
import { BreadcrumbSchema } from '@/components/BreadcrumbSchema'

export default function ProductPage({
  params
}: {
  params: { category: string; product: string }
}) {
  const breadcrumbs = [
    { name: 'Hjem', url: 'https://example.com' },
    { name: 'Produkter', url: 'https://example.com/produkter' },
    {
      name: params.category,
      url: `https://example.com/produkter/${params.category}`
    },
    { name: params.product } // Ingen URL for aktuel side
  ]

  return (
    <>
      <BreadcrumbSchema items={breadcrumbs} />
      {/* Din side indhold */}
    </>
  )
}

Auto-genereret fra URL Path

// lib/generateBreadcrumbs.ts
export function generateBreadcrumbs(pathname: string, baseUrl: string) {
  const segments = pathname.split('/').filter(Boolean)

  const breadcrumbs = [
    { name: 'Hjem', url: baseUrl }
  ]

  let currentPath = baseUrl
  segments.forEach((segment, index) => {
    currentPath += `/${segment}`
    // Sidste segment skal ikke have URL
    const isLast = index === segments.length - 1

    breadcrumbs.push({
      name: segment.charAt(0).toUpperCase() + segment.slice(1),
      ...(isLast ? {} : { url: currentPath })
    })
  })

  return breadcrumbs
}

// app/produkter/elektronik/page.tsx
import { generateBreadcrumbs } from '@/lib/generateBreadcrumbs'
import { BreadcrumbSchema } from '@/components/BreadcrumbSchema'

export default function ElektronikPage() {
  const breadcrumbs = generateBreadcrumbs(
    '/produkter/elektronik',
    'https://example.com'
  )

  return (
    <>
      <BreadcrumbSchema items={breadcrumbs} />
      {/* Din side indhold */}
    </>
  )
}

Vigtige Regler

Position nummering

Start altid fra 1 (ikke 0) og tæl sekventielt op. Position skal matche rækkefølgen.

Sidste element

Det sidste element (den aktuelle side) må IKKE have "item" felt, kun "name".

Fulde URLs

Brug altid fulde URLs med protokol (https://), ikke relative paths.

Synlig breadcrumb

Google anbefaler at du også har en synlig breadcrumb navigation på siden, ikke kun schema markup.

Almindelige Fejl at Undgå

URL på sidste element

❌ Forkert:

{
  "@type": "ListItem",
  "position": 3,
  "name": "Produktside",
  "item": "https://example.com/produkt" // ❌ Skal ikke have URL
}

✅ Korrekt:

{
  "@type": "ListItem",
  "position": 3,
  "name": "Produktside"
  // Intet "item" felt
}

Forkert position nummering

Start fra 1, ikke 0. Brug heller ikke huller i nummereringen (1, 2, 4, 5).

Relative URLs

Brug fulde URLs (https://example.com/side), ikke relative (/side).

For mange niveauer

Hold breadcrumbs på 3-5 niveauer. Hvis du har flere, overvej at simplificere din site struktur.

Synlig Breadcrumb Navigation

Google anbefaler at du også har en synlig breadcrumb navigation på siden. Her er et simpelt React/Tailwind eksempel:

// components/Breadcrumb.tsx
import Link from 'next/link'
import { ChevronRight } from 'lucide-react'

export function Breadcrumb({
  items
}: {
  items: { name: string; url?: string }[]
}) {
  return (
    <nav aria-label="Breadcrumb" className="mb-6">
      <ol className="flex items-center gap-2 text-sm">
        {items.map((item, index) => (
          <li key={index} className="flex items-center gap-2">
            {index > 0 && (
              <ChevronRight className="w-4 h-4 text-gray-400" />
            )}
            {item.url ? (
              <Link
                href={item.url}
                className="text-blue-600 hover:underline"
              >
                {item.name}
              </Link>
            ) : (
              <span className="text-gray-700">{item.name}</span>
            )}
          </li>
        ))}
      </ol>
    </nav>
  )
}

Test og Validering

1
Rich Results Test
Test med Google Rich Results Test
2
Schema Validator
Validér syntax med Schema.org Validator
3
Google Search Console
Check for breadcrumb fejl under "Enhancements" → "Breadcrumb"
4
Manuel test
Søg efter din side på Google og verificér at breadcrumbs vises korrekt i SERP