Breadcrumb

Was ist eine Breadcrumb?

Die Breadcrumb-Navigation (deutsch: Brotkrumen- oder Brotkrümelnavigation) ist eine sekundäre Navigation auf einer Webseite. Sie erlaubt es dem Nutzer, seine aktuelle Position innerhalb der Websitenstruktur nachzuvollziehen und über die verschiedenen Hierarchieebenen der Seite zurückzuspringen.

Das funktioniert, indem er dem sogenannten Breadcrumb-Trail, also Brotkrumenpfad, folgt. Dieser zeigt Links zu den einzelnen Ebenen in der Struktur der Website an. Diese sind in der Regel hierarchisch geordnet, also z.B. von der Startseite über Kategorie-Seiten und Unterkategorie-Seiten hin zu Produktseiten. 

Ihren Namen hat die Breadcrumb-Navigation übrigens aus dem Märchen „Hänsel und Gretel“, in dem die Geschwister auf ihrem Weg durch den Wald Brotkrumen verstreuen, um wieder zurück nach Hause zu finden. Die Funktionsweise der Breadcrumb-Navigation ist ähnlich – durch sie kann der Nutzer ganz einfach die Ebenen der besuchten Website nachvollziehen und so schnell wieder zur Startseite zurückfinden.

Vor allem bei Websites mit tiefer Struktur, also zahlreichen Kategorien und Subkategorien, ist die Implementierung zur leichteren Orientierung sinnvoll. Da eine Brotkrumennavigation die logische Hierarchie einer Seite nachzeichnet, ist es allerdings wichtig, dass Du Deiner Website einen grundlegenden, logischen Aufbau gibst – andernfalls verwirrst Du den User durch das Einbinden von Breadcrumbs nur.

Wie sieht eine Breadcrumb Navigation aus?

Die Brotkrumen-Navigation findest Du auf einer Webseite Above-the-fold. Das heißt, sie befindet sich im oberen Bereich, der für den Nutzer sofort und ohne zu scrollen sichtbar ist. Das ist wichtig, da sie dem Besucher als Hilfestellung bei der Navigation dient.

In der Regel haben Breadcrumbs ein unauffälliges Design. In ihrer Funktion sind sie nämlich hauptsächlich als Orientierungspunkt für den Nutzer da und sollen nicht die Hauptnavigation oder das Menü einer Website ersetzen. 

Beispiel Breadcrumb dieses Artikels:

So sieht die Breadcrumb dieses Artikels aus
So sieht die Breadcrumb dieses Artikels aus

Die verschiedenen Hierarchieebenen sind mit Ausnahme des letzten Punktes (in der Regel die Startseite) anklickbar. Der Nutzer kann so also ganz einfach durch einen Klick wieder zu den einzelnen Ebenen zurücknavigieren.

Arten von Breadcrumbs

  • Location (Ort): Sie zeigt die Position des Nutzers innerhalb der Website an. Anhand der vordefinierten Ebenen der Seite (z.B. Kategorie, Unterkategorie) wird der Weg zur obersten Hierarchieebene (Startseite) dargestellt. Diese Variante ist die am häufigsten verwendete Navigationsart.
Eine beispielhafte Location-Breadcrumb
Beispiel für eine Location-Breadcrumb
  • Path (Klickpfad): Bildet den tatsächlichen Klickpfad des Nutzers anhand seines zurückgelegten Weges auf der Website ab. Das kann unter Umständen sehr verwirrend sein, wenn der Nutzer häufig innerhalb der Hierarchien hin- und herwechselt. Daher trifft man diese Form nur selten an. Da der Klickpfad von der Einstiegsseite an angezeigt wird, kann der Nutzer nachvollziehen, über welche Schritte er auf die Zielseite gelangt ist.
Eine beispielhafte Path-Breadcrumb
Beispiel für eine Path-Breadcrumb
  • Attribute (attributbasiert): Diese Art von Breadcrumb zeigt die Kategoriezugehörigkeit der aktuell besuchten Seite sowie deren zugeordnete Attribute an. Oft findet sie in Onlineshops Anwendung, wo Produkte nach ihren Eigenschaften sortiert sind. So fällt im untenstehenden Beispiel ein Paar Schuhe in die Kategorie „Sneaker“. Zudem hat es die zusätzlichen Attribute „Größe 38“ sowie die Farbe „weiß“.
Eine beispielhafte Attribute-Breadcrumb
Beispiel für eine Attribute-Breadcrumb

Warum wird die Breadcrumb auf einer Internetseite angezeigt?

Eine Einbindung ist oft sinnvoll, da diese Navigationsart einige Vorteile bietet:

  • Usability: Nutzer können einfach navigieren und auch Ebenen in der Seitenhierarchie zurückspringen
  • Hilfe für den User bei der Orientierung innerhalb der Website
  • Kann Bounce Rate verringern, da Besucher sich in der Ebene zurück navigieren können (z.B. um weitere Produkte einer Kategorie anzuschauen)
  • Ist unauffällig und einfach zu implementieren, nimmt nicht viel Platz ein
  • Intuitive Verwendung durch simple Struktur

Breadcrumbs und SEO

Nicht nur für einen Webseitenbesucher, sondern auch für die Suchmaschinenoptimierung sind Breadcrumbs von Relevanz. Denn eine Breadcrumb Navigation wird als positives Signal zur Nutzerfreundlichkeit gewertet – und  diese zählt im SEO als wichtiger Faktor für ein gutes Ranking.

Breadcrumbs helfen zudem Crawlern von Suchmaschinen, den Aufbau einer Webseite zu verstehen. Damit ein Nutzer die einzelnen Ebenen der Breadcrumb-Navigation anklicken kann, werden diese intern verlinkt. Diesen Links folgt auch der Webcrawler. Dadurch kann er Relevanz und Struktur der Seiten besser erkennen. Auch bevor ein Besucher eine Internetseite überhaupt aufruft, kann er bereits mit deren Breadcrumbs in Berührung kommen. Sie werden nämlich z.T. von Google als Rich Snippet in den SERPs ausgespielt. Damit ersetzt die Breadcrumb die üblicherweise angezeigte URL in den Suchergebnissen. Aufgrund der einfachen Lesbarkeit ist das für den Nutzer oft angenehmer und ein Einfluss auf die Klickrate.

eo:wiki

Kontakt

Dein Kontakt
zu uns

  +49 9381 5829000