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.

Warum sind Breadcrumbs wichtig?

Breadcrumbs spielen eine entscheidende Rolle sowohl für die Benutzererfahrung (User Experience, UX) als auch für die Suchmaschinenoptimierung (SEO) einer Website. Ihre Bedeutung lässt sich in mehreren zentralen Punkten zusammenfassen:

1. Verbesserte Benutzerführung und Navigation

Breadcrumbs bieten den Nutzern eine einfache und intuitive Möglichkeit, sich auf einer Website zu orientieren. Besonders auf umfangreichen Websites mit tiefen Navigationsstrukturen erleichtern sie es, den aktuellen Standort innerhalb der Seitenhierarchie schnell zu erkennen und bei Bedarf zu einer höheren Ebene zurückzukehren. Dies reduziert die Notwendigkeit, den „Zurück“-Button des Browsers zu verwenden, und fördert eine nahtlose Navigation. Durch diese klare Strukturierung können Nutzer schneller die gesuchten Informationen finden, was die Zufriedenheit und Verweildauer erhöht.

2. Reduzierung der Absprungrate

Eine gut platzierte Breadcrumb-Navigation kann dazu beitragen, die Absprungrate (Bounce Rate) zu senken. Nutzer, die über eine Suchmaschine direkt auf eine Unterseite gelangen, erhalten durch Breadcrumbs sofort einen Überblick darüber, wo sie sich auf der Website befinden. Dies motiviert sie häufig dazu, sich weiter auf der Seite umzusehen, anstatt sie gleich wieder zu verlassen. Eine geringere Absprungrate wird von Suchmaschinen positiv bewertet und kann sich somit indirekt auf das Ranking der Website auswirken.

3. Verbesserte interne Verlinkung

Breadcrumbs tragen zur internen Verlinkung bei, indem sie Links zu höheren Ebenen der Website-Hierarchie bereitstellen. Diese Verlinkungen sind nicht nur für die Nutzer hilfreich, sondern auch für Suchmaschinen-Crawler, die durch die Breadcrumb-Navigation eine bessere Vorstellung von der Struktur und den Beziehungen zwischen den verschiedenen Seiten einer Website erhalten. Eine starke interne Verlinkung kann die Indexierung durch Suchmaschinen verbessern und somit die Sichtbarkeit in den Suchergebnissen erhöhen.

4. SEO-Vorteile durch Rich Snippets

Durch die Implementierung von strukturierten Daten (Schema Markup) für Breadcrumbs können diese direkt in den Suchergebnissen (SERPs) als Rich Snippets angezeigt werden. Dies verbessert nicht nur die Auffälligkeit des Suchergebnisses, sondern bietet dem Nutzer auch eine Vorschau auf die Struktur der Website. Rich Snippets können die Klickrate (Click-Through-Rate, CTR) erhöhen, was wiederum positive Auswirkungen auf das Ranking haben kann.

5. Klare und übersichtliche Struktur

Breadcrumbs tragen zur Klarheit und Übersichtlichkeit einer Website bei. Besonders bei komplexen Seitenstrukturen können sie verhindern, dass Nutzer sich „verlaufen“ oder überfordert fühlen. Eine klare und logische Struktur unterstützt nicht nur die Navigation, sondern hinterlässt auch einen professionellen Eindruck und trägt zur positiven Wahrnehmung der Marke bei.

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:

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.

• 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.

• 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ß“.

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ücknavigieren 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.

Häufige Fehler bei der Nutzung von Breadcrumbs