Deutsch Deutsch English English

Brotkrümel

Was sind Breadcrumbs?

Breadcrumbs (Brotkrümel) sind eine sekundäre Navigationshilfe, die Nutzern zeigt, wo sie sich auf einer Website befinden und wie sie dorthin gelangt sind. Sie werden meist horizontal oberhalb des Hauptinhalts angezeigt und zeigen den hierarchischen Pfad von der Startseite zur aktuellen Seite.

Vorteile von Breadcrumbs

Für Nutzer:

  • Verbesserte Navigation und Orientierung
  • Schnelle Rückkehr zu übergeordneten Seiten
  • Verständnis der Website-Struktur
  • Reduzierte Klick-Tiefe

Für SEO:

  • Zusätzliche interne Verlinkung
  • Keyword-Anreicherung durch Ankertexte
  • Verbesserte Durchsuchung-Effizienz
  • Strukturierte Daten für Rich Snippets

Breadcrumb-Typen

1. Location-Based Breadcrumbs

Zeigen die aktuelle Position in der Website-Hierarchie an.

Beispiel:

Startseite > Kategorien > Elektronik > Smartphones > iPhone 15

2. Attribute-Based Breadcrumbs

Zeigen Filter und Attribute der aktuellen Seite an.

Beispiel:

Startseite > Smartphones > Apple > 128GB > Schwarz

3. Path-Based Breadcrumbs

Zeigen den tatsächlichen Navigationspfad des Nutzers an.

Beispiel:

Startseite > Suchergebnisse > Produktdetails > iPhone 15

4. History-Based Breadcrumbs

Zeigen die zuletzt besuchten Seiten an.

Breadcrumb Semantische Auszeichnung

Strukturierte Daten helfen Suchmaschinen, Breadcrumbs zu verstehen und als Rich Snippets anzuzeigen.

JSON-LD Implementation

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Startseite",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Kategorien",
      "item": "https://example.com/kategorien/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Elektronik",
      "item": "https://example.com/kategorien/elektronik/"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Smartphones",
      "item": "https://example.com/kategorien/elektronik/smartphones/"
    }
  ]
}

Microdata Implementation

<nav aria-label="Breadcrumb">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/">
        <span itemprop="name">Startseite</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://example.com/kategorien/">
        <span itemprop="name">Kategorien</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">Elektronik</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

HTML-Implementierung

Semantisches HTML

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Startseite</a>
    </li>
    <li class="breadcrumb-separator" aria-hidden="true">></li>
    <li class="breadcrumb-item">
      <a href="/kategorien/" class="breadcrumb-link">Kategorien</a>
    </li>
    <li class="breadcrumb-separator" aria-hidden="true">></li>
    <li class="breadcrumb-item">
      <a href="/kategorien/elektronik/" class="breadcrumb-link">Elektronik</a>
    </li>
    <li class="breadcrumb-separator" aria-hidden="true">></li>
    <li class="breadcrumb-item breadcrumb-current" aria-current="page">
      Smartphones
    </li>
  </ol>
</nav>

CSS-Styling

.breadcrumb {
  margin: 1rem 0;
  font-size: 0.9rem;
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-link {
  color: #0066cc;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  transition: background-color 0.2s;
}

.breadcrumb-link:hover {
  background-color: #f0f0f0;
  text-decoration: underline;
}

.breadcrumb-current {
  color: #666;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
}

.breadcrumb-separator {
  color: #999;
  margin: 0 0.5rem;
}

Best Practices für Breadcrumbs

1. Konsistente Implementierung

  • Verwende Breadcrumbs auf allen relevanten Seiten
  • Halte das Design und die Struktur einheitlich
  • Stelle sicher, dass sie auf allen Geräten funktionieren

2. Logische Hierarchie

  • Beginne immer mit der Startseite
  • Verwende eine logische, thematische Struktur
  • Vermeide zu tiefe Verschachtelungen (max. 4-5 Ebenen)

3. SEO-Optimierung

  • Nutze aussagekräftige Ankertexte mit relevanten Relevante Begriffe
  • Implementiere Schema Markup für Rich Snippets
  • Stelle sicher, dass alle Links crawlbar sind

4. Accessibility

  • Verwende semantisches HTML mit <nav> und <ol>
  • Füge aria-label und aria-current hinzu
  • Stelle sicher, dass sie mit Screenreadern funktionieren

5. Mobile Optimierung

  • Verwende responsive Design
  • Zeige bei Platzmangel die wichtigsten Ebenen
  • Nutze "..." für ausgelassene Ebenen

Häufige Fehler vermeiden

❌ Falsche Implementierung

  • Breadcrumbs ohne Schema Markup
  • Inkonsistente Hierarchie
  • Fehlende Accessibility-Attribute
  • Zu lange oder unklare Ankertexte

❌ Technische Probleme

  • Broken Links in Breadcrumbs
  • Fehlende Canonical-Tags
  • Doppelte Breadcrumbs auf derselben Seite
  • Breadcrumbs auf 404-Seiten

❌ UX-Probleme

  • Unklare Trennung zwischen Ebenen
  • Fehlende Hover-Effekte
  • Zu kleine Klickbereiche
  • Inkonsistente Positionierung

Testing und Validierung

Schema Markup Testing

  • Google Rich Results Test
  • Schema.org Validator
  • Google Search Console

Accessibility Testing

  • Screenreader-Tests
  • Keyboard-Navigation
  • WCAG-Konformität

Cross-Browser Testing

  • Verschiedene Browser testen
  • Mobile Geräte prüfen
  • Performance messen

Monitoring und Optimierung

Analytics-Tracking

  • Klick-Rate auf Breadcrumb-Links
  • Nutzerverhalten analysieren
  • Conversion-Rate messen

SEO-Monitoring

  • Rich Snippet-Erscheinungen
  • Keyword-Rankings für Breadcrumb-Keywords
  • Crawling-Verhalten beobachten

Variantentest

  • Verschiedene Designs testen
  • Positionierung optimieren
  • Ankertext-Variationen

Tools und Ressourcen

Schema Markup Generatoren

  • Google Structured Data Markup Helper
  • Schema.org Breadcrumb Generator
  • JSON-LD Playground

Testing-Tools

  • Google Rich Results Test
  • WAVE Web Accessibility Evaluator
  • Lighthouse Performance Audit

CMS-Plugins

  • WordPress: Yoast SEO, RankMath
  • Drupal: Breadcrumb2
  • Joomla: Breadcrumbs

Verwandte Themen

Letztes Update: 02. October 2025