Was ist eine Breadcrumb Navigation?
Der Name stammt aus dem Märchen Hänsel und Gretel – genau wie die Brotkrümel im Wald helfen Breadcrumbs auf Websites, den Weg zurückzufinden. Technisch gesehen ist eine Breadcrumb Navigation eine hierarchische Linkstruktur, die den Pfad von der Startseite bis zur aktuellen Seite abbildet.
Es gibt drei Arten von Breadcrumbs: Hierarchiebasierte Breadcrumbs zeigen die Position innerhalb der Seitenstruktur (Home > Kategorie > Unterkategorie > Aktuelle Seite). Das ist die häufigste und für die meisten Websites sinnvollste Variante. Attributbasierte Breadcrumbs kommen vor allem in Online-Shops vor und zeigen Filtereigenschaften (z. B. Schuhe > Sneaker > Größe 42). Pfadbasierte Breadcrumbs bilden den tatsächlichen Klickpfad des Nutzers ab – diese Variante ist in der Praxis kaum noch verbreitet, weil sie bei ungewöhnlichen Klickpfaden verwirrend sein kann.
In der Umsetzung sind Breadcrumbs einfache HTML-Navigationen, die im Quellcode als geordnete Liste oder als Inline-Links umgesetzt werden. Für Suchmaschinen sollten sie zusätzlich mit Schema-Markup (BreadcrumbList) ausgezeichnet werden – das ermöglicht Google, den Breadcrumb-Pfad direkt in den Suchergebnissen anzuzeigen.
Warum sind Breadcrumbs wichtig?
Breadcrumbs lösen ein fundamentales Problem: Auf komplexen Websites mit vielen Unterseiten verlieren Besucher schnell die Orientierung. Eine Breadcrumb Navigation zeigt jederzeit den Kontext – wo bin ich, und wie komme ich eine Ebene zurück?
Für die User Experience (UX) deiner Website bedeutet das: Besucher müssen nicht den Zurück-Button des Browsers nutzen oder sich durch die Hauptnavigation klicken, um zu einer übergeordneten Seite zu gelangen. Das reduziert Frustration und erhöht die Verweildauer.
Für SEO sind Breadcrumbs gleich doppelt wertvoll. Erstens erzeugen sie zusätzliche interne Links zu übergeordneten Seiten und stärken damit deren Autorität. Zweitens zeigt Google Breadcrumb-Pfade als sogenannte Rich Snippets in den Suchergebnissen an – das macht dein Ergebnis visuell ansprechender und kann die Klickrate steigern.
Breadcrumbs in der Praxis: So setzt du sie ein
Breadcrumbs gehören auf jede Website mit mehr als zwei Hierarchieebenen. Platziere sie oberhalb des Hauptinhalts, typischerweise direkt unter der Hauptnavigation oder dem Header. Verwende eine dezente Gestaltung – Breadcrumbs sollen helfen, nicht ablenken.
Die Trennung zwischen den Ebenen erfolgt klassisch mit einem Schrägstrich (/) oder einem Größer-als-Zeichen. Die letzte Ebene (die aktuelle Seite) sollte nicht verlinkt sein, da der Nutzer sich bereits dort befindet – sie kann aber als Text angezeigt werden, um den Kontext zu vervollständigen.
In CMS-Systemen wie WordPress lassen sich Breadcrumbs über Plugins wie Yoast SEO oder RankMath automatisch generieren. Achte darauf, dass das Plugin gleichzeitig das Schema-Markup (BreadcrumbList) im Code hinterlegt – das ist die Voraussetzung dafür, dass Google den Pfad in den Suchergebnissen darstellt.
Teste die Breadcrumbs auf allen Seitentypen: Stimmt die Hierarchie? Führen alle Links zur richtigen Seite? Passt die Darstellung auf mobilen Geräten, wo der Platz begrenzt ist?
