Eine Breadcrumb-Navigation – im Deutschen auch „Brotkrumen-Navigation“ – ist ein sekundäres Navigationselement auf einer Webseite, das den aktuellen Standort eines Nutzers innerhalb der Seitenhierarchie als horizontale Kette von Links abbildet. Sie ergänzt die Hauptnavigation und das Hauptmenü, ersetzt sie aber nicht. Typisch ist eine Darstellung in der Form Startseite › Kategorie › Unterkategorie › aktuelle Seite, wobei die einzelnen Stationen mit ›, / oder einem Pfeil-Symbol getrennt werden. Breadcrumbs schaffen Orientierung, beschleunigen das Navigieren auf großen Webseiten und werden von Google als strukturiertes Datenelement direkt in den Suchergebnissen ausgespielt.
Woher kommt der Name „Breadcrumb“?
Der Begriff stammt aus dem Märchen „Hänsel und Gretel“ der Gebrüder Grimm: Die beiden Geschwister streuen Brotkrumen aus, um den Weg zurück nach Hause zu finden. Diese Metapher übertragen Web-Designer auf die Nutzerführung – die Breadcrumbs markieren den Pfad, den ein Besucher von der Startseite bis zur aktuellen Seite zurückgelegt hat, und machen den Rückweg jederzeit sichtbar.
Drei Typen von Breadcrumbs
Nicht jeder Breadcrumb funktioniert gleich. In der Praxis haben sich drei Varianten etabliert, die unterschiedliche Zwecke verfolgen.
Standortbasierte Breadcrumbs (location-based)
Sie zeigen die hierarchische Position der aktuellen Seite innerhalb der Seitenstruktur. Beispiel: Startseite › Leistungen › Webentwicklung › SEO. Diese Variante ist am verbreitetsten und passt zu jeder Seite mit einer klaren, baumartigen Struktur – etwa Online-Shops, Magazine, große Unternehmensauftritte oder umfangreiche Wissensdatenbanken.
Attributbasierte Breadcrumbs (attribute-based)
Statt einer Hierarchie spiegeln sie die Filtereigenschaften der aktuellen Ansicht wider, häufig auf Produktlistenseiten in E-Commerce-Shops. Beispiel: Schuhe › Damen › Größe 39 › Schwarz. Jede Station entspricht hier einem aktiven Filter, kein hierarchischer Schritt. Sie helfen Nutzern, ihre Auswahl zu reflektieren und einzelne Filter gezielt wieder zu entfernen.
Pfadbasierte Breadcrumbs (path-based)
Diese zeigen den tatsächlichen Klickpfad eines Besuchers an – also die Reihenfolge der zuletzt aufgerufenen Seiten. Sie entsprechen funktional dem Vor- und Zurück-Button im Browser und gelten heute als veraltet, weil sie für jeden Nutzer anders aussehen und deshalb keine verlässliche Orientierung bieten.
Vorteile einer Breadcrumb-Navigation
Bessere Usability
Breadcrumbs zeigen jederzeit, wo sich der Nutzer befindet, und erlauben einen Sprung zurück um beliebig viele Ebenen mit einem einzigen Klick. Das reduziert die Bounce-Rate, weil Besucher leichter auf eine höhere Kategorieebene wechseln, statt die Seite zu verlassen.
SEO-Vorteile
Google nutzt strukturierte Daten vom Typ BreadcrumbList (Schema.org), um die Pfadstruktur direkt in den Suchergebnissen anzuzeigen – statt einer kompletten URL erscheint dort eine lesbare Hierarchie wie aceart.de › glossar › breadcrumb. Das verbessert die Klickrate (CTR) und liefert Google zusätzliche Hinweise zur Seitenstruktur, was den Crawling-Prozess effizienter macht.
Klare Informationsarchitektur
Breadcrumbs zwingen Redakteure und Entwickler dazu, eine saubere Sitemap und Kategorisierung zu pflegen. Eine inkonsistente Hierarchie fällt im Breadcrumb sofort auf und kann korrigiert werden, bevor sie sich im restlichen Seitenaufbau verfestigt.
Geringer Platzbedarf
Eine Breadcrumb-Zeile beansprucht nur eine schmale Zeile – meist direkt unter dem Header. Verglichen mit einer ausgeklappten Side-Navigation ist sie unauffällig und stört das eigentliche Layout kaum, liefert aber die gleichen Orientierungsinformationen.
Mobile-Tauglichkeit
Auf kleinen Bildschirmen, wo Mega-Menüs schnell unübersichtlich werden, schaffen kompakte Breadcrumbs Klarheit über den aktuellen Standort und ergänzen ein Mobile-First-Designkonzept ideal.
Wann lohnen sich Breadcrumbs – und wann nicht?
Breadcrumbs sind sinnvoll, sobald eine Webseite mehr als zwei Hierarchieebenen hat. Klassische Einsatzbereiche:
- Online-Shops mit Produktkategorien, Filtern und Detailseiten
- Magazine und Blogs mit Themen- und Tag-Strukturen
- Wissensdatenbanken, Glossare, Dokumentationen und Help-Center
- Mehrsprachige Konzern-Webseiten mit tiefer Länder-Sprach-Bereich-Struktur
- Behördenseiten und große öffentliche Portale
Verzichten kann man auf Breadcrumbs bei:
- Einseitigen Landingpages ohne weitere Unterseiten
- Sehr flachen Webseiten mit höchstens zwei Ebenen (Startseite + ein paar Unterseiten)
- Single-Page-Applications mit einer rein modal-basierten Navigation
Best Practices für Breadcrumbs
- Startseite immer mitnennen – „Startseite“ oder „Home“ als erstes Element der Breadcrumb-Kette.
- Aktuelle Seite nicht verlinken – die letzte Station ist Klartext, nicht klickbar, damit Nutzer nicht fälschlich auf die Seite verlinken, auf der sie schon stehen.
- Klare Trennzeichen verwenden –
›,/oder ein Pfeil-Symbol. Konsistent über die ganze Seite hinweg. - Logische Hierarchie abbilden, nicht den Klickverlauf des Nutzers. Standortbasiert > pfadbasiert.
- Mobile Optimierung – auf kleinen Screens lange Kategorienamen ggf. abkürzen oder die mittleren Stationen zu „…“ zusammenfassen.
- Strukturierte Daten ergänzen (siehe unten) – ohne
BreadcrumbList-Markup bleibt der SEO-Effekt aus. - Konsistent platzieren – idealerweise immer an derselben Stelle, meistens links oben unter dem Header.
Breadcrumbs mit Schema.org auszeichnen
Damit Google die Breadcrumb-Kette in den SERPs (Search Engine Result Pages) anzeigt, muss sie mit dem Schema-Typ BreadcrumbList als JSON-LD im Quelltext eingebettet sein:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Startseite",
"item": "https://www.aceart.de/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Glossar",
"item": "https://www.aceart.de/glossar/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Breadcrumb",
"item": "https://www.aceart.de/glossar/breadcrumb/"
}
]
}
</script>
Alternativ funktioniert auch die ältere Microdata- oder RDFa-Auszeichnung – JSON-LD ist von Google empfohlen, weil es sich sauber vom sichtbaren Markup trennen lässt. Im sichtbaren HTML genügt eine semantische <nav aria-label="Breadcrumb"> mit einer geordneten Liste <ol> darin – das macht die Navigation auch für Screenreader klar als solche erkennbar.
Häufige Fragen zu Breadcrumbs
Sind Breadcrumbs ein direkter Ranking-Faktor? Nein, nicht offiziell. Google verarbeitet sie aber als strukturiertes Datenelement und nutzt sie für die Darstellung in den SERPs. Indirekt verbessern sie Crawling, Klickrate und Verweildauer – alles Signale, die das Ranking positiv beeinflussen.
Müssen Breadcrumbs der URL-Struktur folgen? Idealerweise ja, ist aber nicht zwingend. Wichtiger als die exakte URL-Übereinstimmung ist die thematische Hierarchie. Wenn eine Seite über mehrere Wege erreichbar ist, sollte die Breadcrumb-Kette die primäre thematische Einordnung zeigen.
Wie tief darf eine Breadcrumb sein? Drei bis fünf Ebenen sind die Komfortzone. Bei sechs oder mehr Stationen lohnt es sich, die Informationsarchitektur zu hinterfragen – tiefere Pfade deuten oft auf eine zu zerklüftete Struktur hin.
Können Breadcrumbs Mega-Menüs ersetzen? Nein. Breadcrumbs zeigen den Standort, das Hauptmenü zeigt den Zugang zu allen Bereichen. Beide haben unterschiedliche Aufgaben und ergänzen sich.
Fazit
Breadcrumbs sind ein leichtgewichtiges, vielseitiges Navigationselement, das gleichzeitig die Usability, die Informationsarchitektur und – mit korrektem Schema.org-Markup – die Sichtbarkeit in Google verbessert. Bei jeder Webseite ab drei Hierarchieebenen gehören sie zur Standardausstattung. Wir beraten dich gerne zur idealen Navigationsstruktur für deine Webseite – melde dich für ein unverbindliches Beratungsgespräch.