Breadcrumbs

Zuletzt aktualisiert: 15. Juni 2025

Autor: Patrick Grundlach

Pfeil 2

Breadcrumbs – Navigationshilfe für Websites

Breadcrumbs, auch Brotkrümel-Navigation genannt, sind eine Benutzerführungsmethode, die die Hierarchie und die Position der aktuellen Seite innerhalb einer Website strukturiert darstellt. Sie bieten Nutzern eine einfache Möglichkeit, zu übergeordneten Seiten zurückzukehren, und verbessern gleichzeitig die Benutzerfreundlichkeit sowie die SEO der Website. Der Begriff leitet sich aus dem Märchen „Hänsel und Gretel“ ab, bei dem Brotkrümel zur Orientierung im Wald genutzt wurden.

Breadcrumbs sind in der Regel horizontal angeordnet und durch Trennzeichen (z. B. > oder /) voneinander getrennt. Sie erscheinen typischerweise am oberen Rand einer Website, direkt unter der Hauptnavigation oder dem Header.

Technische Beschreibung

Technisch gesehen, bestehen Breadcrumbs aus einer HTML-Struktur, die mit CSS formatiert und häufig mit JavaScript dynamisch generiert wird. Um sie suchmaschinenfreundlich zu machen, wird oft schema.org Markup verwendet, damit Google die Struktur der Navigation korrekt erkennt und in den Suchergebnissen darstellt.

Beispiel einer Breadcrumb-Struktur (HTML + Schema.org)

<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://www.beispiel.de/">
        <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://www.beispiel.de/kategorie/">
        <span itemprop="name">Kategorie</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="https://www.beispiel.de/kategorie/unterkategorie/">
        <span itemprop="name">Unterkategorie</span>
      </a>
      <meta itemprop="position" content="3" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">Aktuelle Seite</span>
      <meta itemprop="position" content="4" />
    </li>
  </ol>
</nav>

Erklärung der technischen Bestandteile:

  • HTML: Die Struktur wird durch ein <ol> (sortierte Liste) aufgebaut, wobei jeder Breadcrumb-Punkt ein <li> (Listenelement) darstellt.
  • Schema.org: Die Auszeichnung itemprop="itemListElement" und itemtype="https://schema.org/ListItem" informiert Google, dass es sich um eine Breadcrumb-Navigation handelt.
  • CSS: Die optische Gestaltung (z. B. Farben, Abstände, Trennzeichen) erfolgt über CSS.
  • SEO: Google erkennt die Breadcrumb-Struktur und kann diese in der SERP (Search Engine Results Page) anzeigen, wodurch die Klickrate (CTR) steigen kann.

Arten von Breadcrumbs

  1. Hierarchische Breadcrumbs
    • Zeigen die Position der aktuellen Seite in der Seitenhierarchie.
    • Beispiel: Startseite > Kategorie > Unterkategorie > Produktseite
  2. Attributbasierte Breadcrumbs (insbesondere in Shops)
    • Zeigen die Filter oder Eigenschaften, die ein Nutzer ausgewählt hat.
    • Beispiel: Startseite > Schuhe > Herrenschuhe > Größe 42 > Farbe: Blau
  3. Pfadbasierte Breadcrumbs
    • Bilden den tatsächlichen Pfad des Nutzers ab (basiert auf der Klickhistorie).
    • Beispiel: Startseite > Angebote > Aktuelle Angebote > Zurück zur Startseite

Vorteile von Breadcrumbs

  1. Benutzerfreundlichkeit (UX)
    • Nutzer können einfach zu übergeordneten Seiten zurückkehren.
    • Die Orientierung auf der Website wird erleichtert.
  2. SEO-Vorteile
    • Google nutzt Breadcrumbs, um die Seitenstruktur besser zu verstehen.
    • Sie erscheinen direkt in den Suchergebnissen und machen das Ergebnis attraktiver.
  3. Reduzierte Absprungrate
    • Wenn Nutzer „verloren“ sind, können sie leicht zu einer höheren Hierarchieebene zurückkehren, anstatt die Seite zu verlassen.
  4. Responsives Design
    • Breadcrumbs passen sich mobilen Geräten an und können als Dropdown oder Scroll-Leiste dargestellt werden.

Zwei Anwendungsbeispiele zu Breadcrumbs

Case 1: Onlineshop für Möbel

Situation:

Ein Nutzer besucht einen Onlineshop, der Möbel verkauft. Er beginnt auf der Startseite und navigiert über die Kategorien „Möbel“ > „Sofas“ > „Ecksofas“. Am Ende gelangt er zu einem speziellen Produkt.

Breadcrumb-Darstellung:

Startseite > Möbel > Sofas > Ecksofas > Ecksofa "Modell XY"

Technische Umsetzung:

  • Die Breadcrumb-Navigation wird serverseitig durch PHP oder JavaScript erstellt.
  • Das aktuelle Produkt wird durch den Produktnamen am Ende der Navigation dargestellt, ist aber kein Link (da es die aktuelle Seite ist).
  • SEO-Tipp: Die Kategorie-Links sollten „follow“ und „dofollow“ sein, um den internen Linkjuice zu stärken.
  • Schema.org Markup wird genutzt, um Google die Navigation zu signalisieren.

Nutzen:

  • Besucher sehen genau, wo sie sich befinden.
  • Sie können zur Kategorie „Ecksofas“ zurückkehren, um weitere Produkte zu durchsuchen.
  • Google erkennt die Produktzugehörigkeit und zeigt die Breadcrumbs in der SERP an.

Case 2: Wissensdatenbank oder Blog

Situation:

Ein Nutzer sucht in einer Wissensdatenbank nach „Fehlercode 404“. Die Navigation könnte so aussehen:
Startseite > Hilfe > Technische Fehler > HTTP-Statuscodes > 404 – Seite nicht gefunden

Technische Umsetzung:

  • Die Navigation wird serverseitig dynamisch über ein CMS (z. B. WordPress) erstellt.
  • JavaScript oder PHP verwendet die Seitenhierarchie, um die Breadcrumbs zu generieren.
  • Jeder Abschnitt verweist auf eine wichtige Kategorie oder Unterseite (z. B. „Technische Fehler“).

Nutzen:

  • Nutzer erkennen sofort, wo sie sich befinden, und können die Hauptkategorie „Technische Fehler“ durchsuchen, um mehr zu erfahren.
  • Google erkennt die Struktur der Hilfeseiten, wodurch die SERP-Darstellung attraktiver wird.
  • Nutzer kehren eher zur übergeordneten Seite zurück, anstatt die Website zu verlassen, was die Absprungrate reduziert.

Best Practices für Breadcrumbs

  1. Nicht die Startseite vergessen
    Immer mit der „Startseite“ beginnen, da sie die erste Anlaufstelle für Besucher ist.
  2. Verwenden Sie Schema.org
    Nutzen Sie die Markups https://schema.org/BreadcrumbList und https://schema.org/ListItem, damit Google die Struktur erkennt.
  3. Dynamische Breadcrumbs mit CMS
    In Systemen wie WordPress, Shopware oder Magento können Breadcrumbs automatisch generiert werden.
  4. Mobile Benutzerfreundlichkeit
    Sorgen Sie dafür, dass die Breadcrumbs auch auf Mobilgeräten nutzbar bleiben (z. B. durch ein Dropdown-Menü oder ein Scroll-Element).
  5. SEO-Strategie
    Verwenden Sie „dofollow“-Links, um die Verlinkung der Kategorien zu stärken.

Fazit

Breadcrumbs sind nicht nur eine visuelle Navigationshilfe, sondern auch ein wertvolles SEO-Werkzeug. Sie helfen Google und Nutzern, die Struktur der Website zu verstehen. Durch die Implementierung von schema.org Markup können die Breadcrumbs in den Google-Suchergebnissen angezeigt werden, was die Klickrate erhöht. Technisch gesehen, können Breadcrumbs durch HTML, CSS, PHP und JavaScript generiert werden. Sie verbessern die Usability, fördern die SEO und senken die Absprungrate.

Die beiden Cases (Onlineshop & Blog) verdeutlichen, wie unterschiedlich Breadcrumbs je nach Website-Typ eingesetzt werden können. Egal, ob Shop, Blog oder Unternehmenswebsite – Breadcrumbs gehören zu den Best-Practices im modernen Webdesign.

zurück zur Lexikon Übersicht