Was versteht man unter Breadcrumb?
Breadcrumb (zu Deutsch: Brotkrümel, Brotkrumen) ist eine sekundäre Navigation innerhalb einer Webseite, die zusätzlich zu der Hauptnavigation eingesetzt wird. Die Breadcrumb Navigation bietet Nutzern eine einfache Orientierungshilfe, da sie so jederzeit nachvollziehen können, wo auf der Webseite sie sich genau befinden.
Namensherkunft der Brotkrumennavigation
Der Begriff „Breadcrumb“ ist angelehnt an das Märchen „Hänsel und Gretel“ der Gebrüder Grimm, in welchem die beiden Kinder mithilfe von Brotkrümeln den Weg zurück zu ihrem Zuhause markierten.
Genau wie im Märchen bieten auch Breadcrumbs dem Nutzer die Möglichkeit, von seinem aktuellen Standort auf der Webseite aus, den Weg zurück zu seinem Ausgangspunkt zu verfolgen.
Auch eine andere Bezeichnung der Breadcrumb Navigation – nämlich Ariadnepfad – hat seinen Ursprung in einer Geschichte. Denn in der griechischen Mythologie half Ariadne – Tochter des kretischen Königs Minos – dem Helden Theseus dabei, den Minotaurus zu besiegen. Als er das Labyrinth betrat, in welchem Minotaurus wohnte, schenkte sie ihm hierfür ein Wollfadenknäuel. Dieses entrollte Theseus auf seinem Weg durch das Labyrinth schrittweise, sodass er nach dem Sieg über das Ungeheuer unversehrt wieder zum Anfang des Labyrinths zurückfand.
Aufbau der Breadcrumb Navigation
Die Breadcrumb Navigation ist in der Regel seitenhierarchisch aufgebaut und zeigt den logischen Pfad von der Einstiegsseite bis hin zur aktuellen Position des Nutzers innerhalb des Seitenstrukturbaums. So wird sein Weg durch die Webseite jederzeit nachvollziehbar und erlaubt außerdem ein einfaches Zurückspringen zu Hierarchieebenen der Domain, die er vorher besucht hat.
Eine Breadcrumb Navigation befindet sich dabei häufig horizontal im oberen above the fold Bereich einer Seite. Um eine Verwechslung mit der Hauptnavigation auszuschließen, hat die Brotkrumennavigation in der Regel bewusst kein auffälliges optisches Design.
Die einzelnen Pfade werden meistens anhand von Pfeilen voneinander getrennt dargestellt. Diese Darstellung hat sich in den letzten Jahren durchgesetzt, weil sie die den Weg durch die Webseite am besten abbilden:
Starseite > Leistungen > Leistung 1
Auch gebräuchlich, aber wesentlich seltener, ist die Trennung der Hierarchieebenen mithilfe von Doppelpunkten, Schrägstrichen oder senkrechten Strichen (auch Pipe genannt):
Startseite : Leistungen : Leistungen 1
Startseite / Leistungen / Leistung 1
Startseite | Leistungen | Leistung 1
Arten von Breadcrumbs
Man unterscheidet grundsätzlich zwischen drei verschiedenen Arten der Bread Crumb Navigation:
Location Breadcrumb (Ort Breadcrumb)
Die am meisten genutzte Variante ist der Location Breadcrumb. Dieser ist vor allem bei Webseiten sinnvoll, die aus mehr als zwei Ebenen bestehen.
Unabhängig vom tatsächlichen Klickpfad des Nutzers wird bei dieser Variante die Hierarchie einzelner Seiten in ihrer logischen Reihenfolge abgebildet. Das bedeutet, der Besucher kann jederzeit genau verfolgen, aus welcher „Wurzelseite“ die aktuelle Seite entspringt und welche weiteren Seiten zwischen Wurzelseite und aktueller Seite liegen. Dies sorgt für eine insgesamt bessere Seitenstruktur und Themengewichtung bzw. -relevanz.
Path Breadcrumb (Klickpfad Breadcrumb)
Im Gegensatz zum Location Breadcrumb werden bei dieser Methode die einzelnen Seiten innerhalb der Breadcrumb Navigation nicht entsprechend ihrer Hierarchie angezeigt. Stattdessen wird der tatsächliche Klickpfad des Nutzers in der Breadcrumb Navigation abgebildet.
Klickt ein Besucher beispielsweise von der Startseite aus auf die Seite „Über uns“, springt dann wieder zurück auf die Startseite und ruft von dort dann erst das Impressum und anschließend die Kontaktseite auf, würde der Path Breadcrumb wie folgt aussehen:
Startseite > Über uns > Startseite > Impressum > Kontakt
Der Vorteil des Path Breadcrumbs liegt darin, dass die einzelnen Navigationsschritte des Benutzers festgehalten werden, sodass er jederzeit verfolgen kann, wie er zu der aktuellen Seite gelangt ist.
Nachteilig ist jedoch, dass der Path Breadcrumb vor allem bei komplexen Webseiten schnell verwirrend und unübersichtlich werden kann. Zudem sind zusammenhängende Themen und deren Gewichtung schwer zuzuordnen.
Attribute Breadcrumb (Attributsbasierter Breadcrumb)
Die Attribute Breadcrumbs finden sich hauptsächlich in Onlineshops und auf Blogseiten.
Produkte in Onlineshops werden fast immer nach gewissen Eigenschaften geordnet und in bestimmten Kategorien katalogisiert. Demnach erfolgt auch die Darstellung der Breadcrumb Navigation in diesem Fall attributbasiert. Ein möglicher Aufbau könnte wie folgt aussehen:
Startseite > Bekleidung -> Herren -> Hosen -> Kurz -> Schwarz -> Größe 30
Blogs werden üblicherweise ebenfalls in verschiedene Kategorien unterteilt. Der vollständige Breadcrumb Pfad eines Beitrags könnte folglich so aussehen:
Startseite > Blog > Online Marketing > Suchmaschinenoptimierung > Blogthema
Vorteile einer Breadcrumb Navigation
Die Nutzung einer Breadcrumb Navigation kann sich positiv auf die Benutzerfreundlichkeit und User Experience einer Webseite auswirken. Vor allem auf komplexen Webseiten mit tiefgehenden Hierarchien wird dem Nutzer die Navigation durch das eigene Angebot deutlich erleichtert und verhindert, dass er die Orientierung verliert.
Klickt ein Nutzer innerhalb eines Shops beispielsweise auf ein Produkt und gefällt ihm dieses nicht, kann er bequem über die Breadcrumb Navigation zur ursprünglichen Kategorie zurückspringen, ohne diese zunächst suchen zu müssen. Der Einsatz von Breadcrumbs kann demnach auch Absprungraten und Kaufabbrüche reduzieren.
Durch die Förderung der Usability haben Breadcrumbs indirekt auch einen positiven Nutzen hinsichtlich der SEO einer Seite. Finden sich Nutzer auf einer Webseite schnell und intuitiv zurecht, verweilen sie oftmals auch länger auf ihr, was für Google wiederum ein positives Signal für die Relevanz einer Seite für eine bestimmte Suchanfrage ist.
Doch auch dem Googlebot selbst kann eine Breadcrumb Navigation das Crawlen der Inhalte erleichtern und dazu beitragen, dass zusammenhängende Themen von Google besser zugeordnet werden können. Das kann die Themenrelevanz einer Webseite zu einer Suchanfrage zusätzlich positiv beeinflussen.
Weiterhin wichtig zu wissen ist, dass Breadcrumbs einer Seite oft in den Google SERPs als sogenanntes Rich Snippet neben der URL des Suchergebnisses dargestellt werden.
Vorteile von Breadcrumbs im Überblick:
- Nutzer finden sich auf der Webseite leichter zurecht, was die Bounce Rate deutlich reduzieren kann
- Breadcrumbs machen die Hierarchie und Struktur einer Webseite transparenter und damit einfacher zu verstehen
- Breadcrumbs wirken sich positiv auf die Usability und User Experience einer Webseite aus
- Breadcrumbs können auch Crawlern wie dem Googlebot eine Orientierungshilfe an die Hand geben, sodass Webseiteninhalte durch die interne Verlinkung leichter erfasst und indexiert werden können
- Breadcrumbs sind einfach zu implementieren, nehmen nur wenig Platz ein und fügen sich durch die dezente Darstellung in nahezu jedes Design nahtlos ein
Wo kann auf den Einsatz von Breadcrumbs verzichtet werden?
Der Einsatz von Breadcrumbs macht nur bei komplexen Seiten Sinn, die aus mehr als zwei Hierarchieebenen bestehen. Bei Webseiten mit flachen Hierarchien oder nur sehr wenigen Unterseiten, ist die Verwendung von Breadcrumbs daher eher nicht zu empfehlen.
Auch bei mobilen Webseiten kann auf Breadcrumbs verzichtet werden. Denn je nach Tiefe der Webseitenstruktur nimmt die Brotkrumennavigation zu viel Platz auf kleinen Bildschirmen ein, was schnell überladen und unübersichtlich wirken kann.
