Breadcrumb-Navigation: Bedeutung, Arten und Vorteile

Breadcrumbs: Was klingt wie einer Speisekarte entnommen, ist tatsächlich eine effektive Methode, die Benutzungsfreundlichkeit auf Webseiten zu erhöhen. Was genau sich hinter dem Begriff verbirgt, welche Breadcrumb-Arten es gibt, welche Vorteile eine Breadcrumb-Navigation hat und wie Sie die „Brotkrümelnavigation“ ganz einfach auf Ihrer eigenen Webseite einbinden können, verraten wir Ihnen in diesem Beitrag.

Wie funktionieren Breadcrumbs?

Der Breadcrumb-Einsatz dient dazu, den Usern und Userinnen auf einer Website Orientierung zu geben, besonders bei komplizierten, verschachtelten Onlineshops. Oft zeigt die Breadcrumb-Navigation den Ordner an, indem sich die aktuelle Webseite physisch befindet – zum Beispiel „Damen → Sale → Schuhe → Flache Schuhe”. Damit ist der Breadcrumb ein wichtiges UX-Element.

Breadcrumb: Ein Beispiel

Die meisten E-Commerce-Unternehmen setzen auf eine Breadcrumb-Navigation, um die Onlineshop-Besuchenden leichter durch das große Angebot navigieren zu lassen. So sieht das beispielsweise bei Zalando aus:

Quelle: Screenshot Zalando

Woher kommt der Name Breadcrumbs?

Breadcrumb-Menüs werden auch als „Brotkrümel-Navigation“ oder „Brotkrumen-Navigation“ bezeichnet. Der Name leitet sich aus dem Märchen „Hänsel und Gretel“ ab, in dem die beiden Kinder mithilfe einer Spur aus Brotkrumen aus einem Wald heraus und zurück nach Hause finden wollen. Genau das Gleiche sollen – im übertragenen Sinne – auch Nutzerinnen und Nutzer von Webseiten tun können.

Oft wird die Breadcrumb-Navigation auch mit dem Ariadnepfad verglichen. Ariadne ist eine Figur aus der griechischen Mythologie. Sie gab Theseus einen Faden, damit er einen Weg aus dem Labyrinth des Minotauros finden konnte. Der Breadcrumb-Einsatz ist sinnbildlich der Ariadnepfad einer Website.

Breadcrumb-Navigation: Das sind die Vorteile

Wenn Sie eine Brotkrümel-Navigation einsetzen, hat das unter anderem folgende Vorteile:

• Benutzungsfreundlichkeit: Sie zeigen, dass Sie daran interessiert sind, dass sich Website-Besuchende besser durch Ihr Online-Angebot navigieren können.
• Design: Breadcrumbs fördern die UX, also die User Experience. Das bedeutet, die Nutzererfahrung Ihrer Website wird verbessert.
• Crawler: Mit dem Einsatz von Breadcrumbs können Sie Webcrawler, beispielsweise von Suchmaschinen, das crawlen erleichtern.
• Barrierefreiheit: Nicht nur Bots, sondern auch Menschen mit einer Sehbehinderung finden sich dank der Breadcrumbs auf einer Website besser zurecht.
• Zeitersparnis: Eine Breadcrumb-Navigation hat auch den Vorteil, dass User und Userinnen auf einer Website schneller von einem Punkt zum anderen gelangen.
• SEO: Mit der Verbesserung der Benutzungsfreundlichkeit, der UX und dem Crawling zahlen Breadcrumbs positiv auf Ihre SEO-Maßnahmen ein.

Breadcrumb-Einsatz: Wann ist die Breadcrumb-Navigation sinnvoll?

Das oberste Ziel der Breadcrumb-Navigation ist es, die Benutzungsfreundlichkeit zu erhöhen. Sie kommt insbesondere auf sehr großen, weit verzweigten und tendenziell unübersichtlichen Webseiten zum Einsatz, damit sich Nutzende zu jeder Zeit zurechtfinden.

Besonders hilfreich sind Breadcrumbs, wenn Besucherinnen und Besucher nicht die Startseite als Ausgangspunkt nutzen, sondern ihre Reise über Ihre Website auf einer Unterseite beginnen. Das kann zum Beispiel passieren, wenn Interessenten über eine Google-Suche oder einen Link in den sozialen Medien zu Ihrer Internetpräsenz finden.

Weniger sinnvoll sind Breadcrumbs auf Webseiten, die nur über sehr wenige Seiten verfügen oder auf denen es keine logische hierarchische Struktur gibt. In diesen Fällen genügt ein herkömmliches Menü zur Navigation.

Die verschiedenen Breadcrumb-Arten

Grundsätzlich gibt es drei verschiedene Arten der Breadcrumb-Navigation: Location-based Breadcrumbs, Path-Breadcrumbs und Kategorie-Breadcrumbs.

Location-based Breadcrumbs

Location-Breadcrumbs zeigen Nutzerinnen und Nutzern genau, wo sie sich innerhalb Ihrer Website aktuell befinden. Diese Ebene ist gesondert hervorgehoben, meistens durch eine andere Farbe. Der Pfad sieht dann in der Regel wie folgt aus:

Startseite → Kategorie A → Unterkategorie B → Produkt A (Aktuelle Position)

An Path-Breadcrumbs können Besucherinnen und Besucher ablesen, welchen Weg sie bis zur aktuellen Seite zurückgelegt haben. Sie können mit dem Klickpfad also nachvollziehen, auf welchen Seiten Sie zuvor waren und wie tief Sie in die Seitenhierarchie vorgedrungen sind. Diese Art von Brotkrumennavigation wird oft mit Location-Breadcrumbs kombiniert. Dies könnte zum Beispiel so aussehen:

Startseite → Unterseite A → Unterseite B → Startseite → Unterseite A

Kategorie-Breadcrumbs

Kategorie-Breadcrumbs kommen vor allem in Onlineshops zum Einsatz. Sie bilden die Kategorien ab, die Kundinnen und Kunden gewählt haben. Das sieht in der Praxis zum Beispiel so aus:

Startseite → Bekleidung → Frauen → Hosen → Jeans → Schwarz → Größe 40

Attribute-based Breadcrumbs

In diese Kategorie fallen auch die sogenannten Attribute Breadcrumbs oder Attribute-based Breadcrumbs, die häufig im E-Commerce verwendet werden. Die attributbasierten Brotkrumen zeigen neben dem Pfad auch noch die Filter an, welche die Onlineshoppenden ausgewählt haben.

Breadcrumbs in WordPress einrichten: So einfach geht's

Es ist möglich, eine Breadcrumb-Navigation auf Ihrer Website über die Programmier- und Skriptsprachen PHP, JavaScript und HTML einzurichten. Wenn Sie ein Content-Management-System (CMS) nutzen, geht es häufig auch einfacher.

Für WordPress zum Beispiel können Sie einfach ein spezielles WordPress-Breadcrumb-Plugin installieren, das diese Aufgabe automatisiert erledigt. Oder Sie erzeugen in WordPress ein Breadcrumb ohne spezielles Plugin. Denn viele multifunktionale Erweiterungen haben auch eine Funktion an Bord, um einen Breadcrumb-Trail zu erstellen.

Eine gute Wahl sind hier SEO-Plugins wie Yoast SEO und Rank Math SEO. Diese werden auf den meisten WordPress-Webseiten ohnehin benötigt. Sie sparen sich also ein extra WordPress-Breadcrumb-Plugin, das ausschließlich eine Brotkrümelnavigation erzeugen kann.

Verwenden Sie das SEO-Plugin Rank Math müssen Sie keine Sorge vor einem langwierigen Installations- bzw. Konfigurationsprozess haben. Der integrierte Einrichtungsassistent führt Sie Schritt für Schritt durch den Ablauf hindurch und empfiehlt Ihnen die für Sie passende Konfiguration.

Quelle: Screenshot WordPress

Ähnlich funktioniert die Einrichtung mit Yoast SEO, dort klicken Sie im Menü jedoch auf den Punkt „Search Appearance”.

Gute Drittanbieter-Alternativen sind auch die WordPress-Plugins BreadcrumbNavXT und Flexy Breadcrumb.

Breadcrumbs gezielt einsetzen: Mit diesen Tipps haben Sie Erfolg

Richtig eingebunden, kann eine Breadcrumb-Navigation sich positiv auf die Usibility und Ihr Suchmachinen-Ranking auswirken. Im Folegnden finden Sie sechs Tipps:

1. Sinnhaftigkeit überprüfen: Setzen Sie nicht blindlings eine Breadcrumb-Navigation auf Ihrer Website ein. Wenn Ihre Struktur recht einfach und verständlich ist, ergibt es wenig Sinn, die Besucherinnen und Besucher führen zu wollen.
2. Auf Konsistenz achten: Oft bestehen Websites aus verschiedenen Technologien und technischen Ansätzen. Beispielsweise sind sie eine Mischung aus Onlineshop-System und Blog-CMS. Achten Sie in solch einem Fall darauf, dass Sie eine konsistente Brotkrümelnavigation entwerfen.
3. Interaktive Gestaltung: Der Breadcrumb-Trail darf nicht nur ein optisches Beiwerk sein, sondern sich auch anklicken und entsprechend nutzen lassen. So sollten bei attributbasierten Breadcrumbs die einzelnen Attribute (die Filter) deaktivierbar sein.
4. Breadcrumb-Design: Setzen Sie ein WordPress-Breadcrumb-Plugin oder eine ähnliche Erweiterung ein, kann es vorkommen, dass die Optik der Brotkrumen-Navigation nicht zum Stil der restlichen Website passt. In diesem Fall müssen Sie das Design über CSS- und HTML-Codes anpassen.
5. Passende Platzierung: Wo sollen die Breadcrumbs stehen? Über der Hauptnavigation, unter der Hauptnavigation oder an einer anderen Stelle? Finden Sie eine Lösung, die Ihre User und Userinnen bestens verstehen.
6. Mobile First: Immer mehr Menschen nutzen Smartphones und Tablets, um Webseiten anzusteuern. Das bedeutet für Sie: Achten Sie darauf, dass die Darstellung der Breadcrumbs auf kleinen Displays gut aussieht und dass die Navigation auf Ihrer mobilen Website einwandfrei funktioniert.

Fazit: Breadcrumb-Navigation lohnt sich für große Webseiten

Breadcrumbs verbessern die Benutzungsfreundlichkeit auf komplexen Webseiten mit vielen Klick-Ebenen, darunter auch Onlineshops. Sie helfen Besucherinnen und Besuchern, sich intuitiv zurechtzufinden und können einen positiven Einfluss auf das Google-Ranking haben.

Die Brotkrumen-Navigation ist auch eine sinnvolle Ergänzung zum Hauptmenü, kann es aber nicht ersetzen. Wichtig ist vor allem, dass sie Nutzerinnen und Nutzern mit der Brotkrumen-Navigation einen Mehrwert bieten. Auf keinen Fall sollten diese verwirrt zurückbleiben. Falls Sie nur sehr wenige Seiten auf Ihrer Seite haben oder deren Struktur keiner logischen Hierarchie folgt, ist es ratsam auf Breadcrumbs zu verzichten.

Titelbild: BestForBest / iStock / Getty Images Plus