Stell dir vor, du betrittst ein riesiges Kaufhaus auf der Suche nach einer neuen Kaffeemaschine. Du folgst verschiedenen Hinweisschildern, landest aber statt bei den Kaffeemaschinen plötzlich zwischen Lampen und Wohnaccessoires.
Wo bist du falsch abgebogen und wie kommst du wieder zurück? Keine Schilder, kein Übersichtsplan, kein Hinweis auf die nächste Abteilung: Aus einem entspannten Einkaufsbummel wird eine Geduldsprobe.
Ganz ähnlich kann es deinen Kund:innen in deinem Onlineshop ergehen. Verlieren sie zwischen Kategorien, Unterkategorien und Produktseiten die Orientierung, brechen sie ihre Suche möglicherweise ab. Website-Breadcrumbs dienen hier als digitale Wegweiser: Sie zeigen deinen Besucher:innen, wo sie sich befinden und über welche übergeordneten Seiten sie dorthin gelangt sind.
In diesem Beitrag erfährst du, wie du Website-Breadcrumbs richtig einsetzt, welche Arten es gibt und worauf es wirklich ankommt.
Was sind Website-Breadcrumbs?
Website-Breadcrumbs sind zusätzliche Navigationspfade, die Nutzer:innen zeigen, wo sie sich innerhalb einer Website befinden. Je nach Art bilden sie die Website-Hierarchie, den bisherigen Klickweg oder ausgewählte Eigenschaften ab. Über verlinkte Ebenen gelangen Besucher:innen schnell zu vorherigen beziehungsweise übergeordneten Seiten zurück.
Inhaltsverzeichnis
Welche Vorteile bieten Website-Breadcrumbs?
Bessere Orientierung
Website-Breadcrumbs zeigen deinen Besucher:innen auf einen Blick, wo sie sich innerhalb deiner Website befinden. Besonders in Onlineshops mit vielen Kategorien und Unterkategorien erleichtern sie die Navigation und helfen dabei, schnell zu übergeordneten Seiten zurückzukehren.
Schneller Wechsel zu übergeordneten Seiten
Klare Navigationspfade verkürzen die Klickwege und machen die Nutzung deiner Website angenehmer. Deine Kund:innen müssen nicht umständlich über das Hauptmenü navigieren, sondern können mit einem Klick zur gewünschten Ebene wechseln.
Längere Verweildauer
Landet eine Person auf einer unpassenden Produktseite, kann sie über die Breadcrumbs direkt zur zugehörigen Kategorie gelangen und ähnliche Angebote entdecken. Dadurch sinkt das Risiko, dass sie deinen Onlineshop sofort wieder verlässt. Das kann sich positiv auf die Verweildauer und die Absprungrate auswirken.
Höhere Verkaufschancen
Indem du die Navigation erleichterst, führst du deine Kund:innen gezielt zu weiteren relevanten Produkten. Je einfacher sie dein Sortiment erkunden können, desto größer ist die Wahrscheinlichkeit, dass sie ein passendes Angebot finden und einen Kauf abschließen.
Einfache Integration
Website-Breadcrumbs lassen sich unkompliziert in deinen Shopify-Store integrieren. Wenn du über grundlegende Programmierkenntnisse verfügst, kannst du sie über den Theme-Code einbinden. Als Einsteiger:in oder als Person ohne Coding-Erfahrung kannst du stattdessen auf eine passende App zurückgreifen.
Suchmaschinenoptimierung
Breadcrumbs erleichtern nicht nur deinen Kund:innen die Navigation, sondern helfen auch Suchmaschinen dabei, die Struktur deines Onlineshops nachzuvollziehen. Durch interne Links können sie deine Seiten und deren Beziehungen zueinander besser erfassen, was die Sichtbarkeit deiner Inhalte unterstützen kann.
Mithilfe strukturierter Daten kannst du Suchmaschinen zusätzliche Informationen über deine Breadcrumb-Navigation übermitteln. Google kann den Pfad dadurch in den Suchergebnissen anzeigen. So erkennen Besucher:innen bereits vor dem Klick, in welchem Bereich deines Onlineshops sich eine Seite befindet.
Arten von Website-Breadcrumbs
Wie die Brotkrümel im Märchen sollen auch Website-Breadcrumbs einen nachvollziehbaren Weg durch verzweigte Strukturen markieren. Dabei lassen sich drei grundlegende Arten unterscheiden.
Hierarchiebasierte Breadcrumbs
Hierarchiebasierte Breadcrumbs werden besonders häufig eingesetzt und zeigen, an welcher Stelle sich eine Seite innerhalb der festen Struktur deines Onlineshops befindet. Nutzer:innen erkennen dadurch, welchen übergeordneten Kategorien die aktuelle Seite zugeordnet ist.
Beispiel:
Startseite > Küchengeräte > Kaffeemaschinen > Kaffeevollautomaten > Kaffeevollautomat Modell X
Verlaufsbasierte Breadcrumbs
Verlaufsbasierte Breadcrumbs zeigen dagegen den individuellen Weg, den eine Person bis zur aktuellen Seite zurückgelegt hat. Da sich dieser Weg je nach Nutzungsverhalten unterscheidet, kann auch der angezeigte Navigationspfad variieren.
Beispiel:
Startseite > Sommerangebote > Suchergebnisse "Kaffee" > Kaffeevollautomat Modell X
Attributbasierte Breadcrumbs
Diese Variante bildet ausgewählte Produkteigenschaften oder aktive Filter ab. Sie wird häufig in Onlineshops eingesetzt, damit Kund:innen ihre Auswahl nachvollziehen und einzelne Kriterien unkompliziert entfernen können.
Beispiel:
Kaffeemaschinen > Kaffeevollautomaten > Mit Milchsystem > Schwarz > Bis 500 Euro
8 Tipps für gelungene Website-Breadcrumbs
- Halte die Navigation übersichtlich
- Achte auf Größe, Position und Design
- Nutze eine horizontale Darstellung
- Bleibe einheitlich
- Verlinke die übergeordneten Ebenen
- Hebe die aktuelle Seite hervor
- Teste die Benutzerfreundlichkeit
- Denke an die Barrierefreiheit
Halte die Navigation übersichtlich
Breadcrumbs sollen deinen potenziellen Kund:innen die Orientierung erleichtern und sie nicht von deinen Produkten ablenken. Nutze daher eindeutige Symbole wie „>" oder „/" um die Kategorien voneinander zu trennen und die Hierarchie darzustellen.
Achte auf Größe, Position und Design
Platziere den Navigationspfad gut sichtbar, üblicherweise oberhalb des Hauptinhalts im oberen Bereich der besuchten Seite. Achte darauf, dass die Schriftarten und -farben zu dem restlichen Design deines Onlineshops passen. In der Regel sollten Breadcrumbs kleiner als der Seitentitel oder die Hauptnavigationselemente sein.
Nutze eine horizontale Darstellung
In der Regel werden die einzelnen Ebenen horizontal von links nach rechts dargestellt. So lässt sich die Reihenfolge der Ebenen schnell erfassen, ohne unnötig viel Platz auf der Seite einzunehmen.
Bleibe einheitlich
Verwende auf allen Seiten dieselbe Position, Gestaltung und Reihenfolge. Eine konsistente Darstellung hilft deinen Besucher:innen, die Breadcrumbs schnell wiederzuerkennen und intuitiv zu nutzen.
Verlinke die übergeordneten Ebenen
Alle vorherigen Stationen des Navigationspfads sollten anklickbar sein. So können deine Kund:innen direkt zu einer übergeordneten Kategorie wechseln, ohne den Umweg über das Hauptmenü nehmen zu müssen.
Hebe die aktuelle Seite hervor
Kennzeichne die aktuelle Position optisch, beispielsweise durch eine andere Schriftfarbe oder -stärke. Da sich Nutzer:innen bereits auf dieser Seite befinden, muss der letzte Eintrag nicht erneut verlinkt werden.
Teste die Benutzerfreundlichkeit
Prüfe deine Breadcrumbs auf verschiedenen Geräten und Bildschirmgrößen. Kontrolliere dabei, ob alle Links funktionieren, die Hierarchie verständlich ist und deine Kund:innen problemlos zu vorherigen Ebenen zurückgelangen.
Denke an die Barrierefreiheit
Gestalte deine Breadcrumb-Navigation so, dass sie auch von Menschen genutzt werden kann, die auf Screenreader angewiesen sind. Verwende dafür semantische HTML-Elemente wie <nav> und passende ARIA-Attribute. So können assistive Technologien den Navigationspfad eindeutig erkennen und korrekt wiedergeben.
In diesem Video (auf Englisch) findest du noch mehr Tipps, mit denen du deinen Shopify-Store optimieren kannst.
Häufige Fehler bei der Nutzung von Breadcrumbs
Damit Breadcrumbs ihren Zweck erfüllen, müssen sie verständlich aufgebaut und sinnvoll in die bestehende Navigation eingebunden sein. Vermeide daher insbesondere die folgenden Fehler:
Breadcrumbs als Ersatz für die Hauptnavigation verwenden
Breadcrumbs ergänzen das Hauptmenü, ersetzen es jedoch nicht. Während sie den aktuellen Standort innerhalb der Website-Hierarchie zeigen, bietet die Hauptnavigation einen umfassenden Überblick über die wichtigsten Bereiche deines Onlineshops. Deine Kund:innen sollten deshalb jederzeit auf beide Navigationsmöglichkeiten zugreifen können.
Einen unvollständigen Navigationspfad anzeigen
Ein Breadcrumb-Pfad sollte die tatsächliche Struktur deines Onlineshops verständlich widerspiegeln. Fehlende Ebenen, eine falsche Reihenfolge oder unpassende Kategorien können deine Besucher:innen zusätzlich verwirren.
Nur die aktuelle Position nennen
Eine reine Positionsanzeige ohne übergeordnete Ebenen bietet kaum Mehrwert. Steht dort lediglich der Name der aktuellen Produktseite, können deine Kund:innen weder den Kontext erkennen noch zu einer passenden Kategorie zurückkehren.
Zu viele Ebenen einbinden
Auch ein unnötig langer Navigationspfad kann unübersichtlich werden. Beschränke dich auf die Ebenen, die für die Orientierung wirklich relevant sind, und vermeide kleinteilige Zwischenschritte ohne zusätzlichen Nutzen.
Unklare oder nicht anklickbare Bezeichnungen verwenden
Nutze kurze und eindeutige Linktexte, die den Inhalt der jeweiligen Seite beschreiben. Übergeordnete Ebenen sollten zudem anklickbar sein – andernfalls zeigt der Pfad zwar die Position an, erleichtert aber nicht die Navigation.
Fazit: Kleine Navigation mit großer Wirkung
Website-Breadcrumbs wirken auf den ersten Blick wie ein kleines Detail, können die Nutzung deines Onlineshops jedoch spürbar verbessern. Sie zeigen deinen Kund:innen, wo sie sich gerade befinden, verkürzen den Weg zu übergeordneten Kategorien und erleichtern es, weitere passende Produkte zu entdecken. Besonders bei einem umfangreichen Sortiment mit vielen Kategorien und Unterkategorien sorgen sie für mehr Übersicht.
Auch für die Suchmaschinenoptimierung können Breadcrumbs hilfreich sein. Sie verdeutlichen die Struktur deines Onlineshops, verknüpfen zusammengehörige Seiten miteinander und helfen Suchmaschinen dabei, deine Inhalte besser einzuordnen. Ergänzt du sie um strukturierte Daten, kann der Navigationspfad außerdem in den Suchergebnissen erscheinen.
Achte bei der Umsetzung darauf, dass deine Breadcrumbs logisch aufgebaut, einheitlich gestaltet und auf allen Geräten gut bedienbar sind. Sie sollten deine Hauptnavigation nicht ersetzen, sondern sinnvoll ergänzen. Richtig eingesetzt werden die digitalen Wegweiser so zu einem unscheinbaren, aber wirkungsvollen Bestandteil deines Onlineshops.
