Die Breadcrumb Navigation in Online-Shops

Für Online-Shops ist es essentiell, Kunden mit einem ansprechenden und überzeugenden Kundenerlebnis zu überraschen. Je besser ein Besucher sich auf Ihrer Seite zurechtfindet, desto wahrscheinlicher wird es, dass dieser am Ende auch mit einem vollen Warenkorb auscheckt. Den Weg des Kunden bis zum Kaufabschluss können Sie mit diversen Maßnahmen so bequem und komfortabel wie möglich gestalten. Eine davon ist die Implementierung der Breadcrumb Navigation.

Was eine Breadcrumb Navigation im Detail ist, welche Vorteile die Nutzung von Breadcrumbs in der Navigation hat und wie Sie diese sekundäre Navigation sinnvoll nutzen, beantworten wir Ihnen in diesem Beitrag.

Was ist die Breadcrumb Navigation?

Bei der Breadcrumb Navigation (übersetzt auch als „Brotkrümel Navigation“) handelt es sich um eine sekundäre Navigation, die Sie ergänzend zu Ihrer primären Navigation einsetzen. Der Breadcrumb Trail bzw. Link-Pfad der Breadcrumb Navigation befindet sich im oberen Bereich der Webseite und dient dem Besucher zur besseren Orientierung im Online-Shop.

Die Breadcrumb Navigation ist logisch von der Einstiegsseite über die unterschiedlichen Ebenen bis zur aktuellen Seite aufeinander aufgebaut. So erkennt der Besucher anhand der Breadcrumb Navigation auf einen Blick, wo er sich gerade in der Hierarchie der Seitenstruktur befindet und auf welchem Wege er dort hingelangt ist. Zudem besteht die Option, dass er über die intern gesetzten Links bequem zu jeder seiner Stationen zurückspringen kann.

Vorteile der Breadcrumb Navigation

Die Breadcrumb Navigation bringt einige nennenswerte Vorteile mit sich. Besucht ein Kunde Ihre Webseite, ist es wichtig, dass sich dieser intuitiv durch die Seitenelemente klicken kann. Die Breadcrumb Navigation steuert maßgeblich dazu bei, da sie relativ selbsterklärend ist. Mit einem Blick sieht der Besucher, in welcher Hierarchieebene er sich aktuell befindet und kann ebenso wieder den Weg zurückverfolgen. Der Link-Pfad ist als Element auf der Seite klein und platzsparend gehalten. Damit hat die sekundäre Navigation kaum Auswirkungen auf das Gesamtdesign.

• Optimiertes Kundenerlebnis: Die verbesserte Navigation auf einer Seite führt zwangsläufig zu einem erhöhten Kundenerlebnis. Je eher ein Besucher auf Ihrer Seite genau das findet, was er sucht, desto größer die Chance auf einen Kaufabschluss. Mit der Breadcrumb Navigation gelingt eine einfache und schnelle Steuerung, ohne immer erst wieder zum Hauptmenü zurückkehren zu müssen. Sie reduzieren mit der Breadcrumb Navigation die Absprungrate und steigern gleichzeitig die Wahrscheinlichkeit eines reibungslosen Checkouts.
• Suchmaschinenoptimierung: Die Breadcrumb Navigation ist ferner eine Möglichkeit, die Suchmaschinenoptimierung (SEO) zu beeinflussen. Die Google-Bots können dem klaren Link-Pfad auf Ihrer Webseite folgen und entsprechend Ihrer Seiten crawlen. Seit 2019 werden die Inhalte der Breadcrumb Navigation in den Suchergebnissen von Google in einigen Fällen statt des URL-Pfads angezeigt. Gleichzeitig ist die reduzierte Absprungrate ein positives Zeichen für die Suchmaschine.
• Conversion Rate Steigerung: Alle genannten Vorteile der Breadcrumb Navigation steigern die Conversion Rate. Wird Ihr Online-Shop in den Suchergebnissen höher platziert und gewinnt an Sichtbarkeit, verzeichnen Sie mehr Besucher. Können diese über die Breadcrumb Navigation schnell genau das finden, was sie suchen, steigt wiederum die Benutzererfahrung und die Chance, dass der Interessent durch den Kaufabschluss zum Kunden konvertiert.

Denken Sie immer daran: Je weniger Klicks ein Nutzer benötigt, um die Lösung zu einem Problem zu finden, desto besser die User Experience und desto höher die Conversion-Wahrscheinlichkeit.

Entscheiden Sie sich für die passende Breadcrumb Navigation

Im Unterschied zur primären Navigation, also Ihrem Hauptmenü, ist die Breadcrumb Navigation deutlich kleiner, dezenter und im Wesentlichen einfacher sowie mit wenig Text gestaltet. Mit dem primären Navigationssystem kann der User direkt die Seiten aufrufen, die ihn vorrangig interessieren – beispielsweise eine bestimmte Kategorieseite. Die Breadcrumb Navigation bietet ihm ergänzend die Möglichkeit, auf bereits zuvor besuchte Seiten zurückzuspringen. Daher wird die Breadcrumb Navigation als sekundäre Navigation nur unterstützend zu Ihrer Hauptnavigation eingesetzt. Im oberen Bereich ist sie als kleine Reihe von Links erkennbar.

Bei der Darstellung der Breadcrumb Navigation können Sie mit Pfeilsymbolen, Slash-Zeichen oder dem „Größer-als-Zeichen“ arbeiten. Sie dienen der logischen Visualisierung des Link-Pfads und bilden den Weg der Hierarchie ab.

Es gibt drei verschiedene Arten der Breadcrumb Navigation:

• Ort (Location-Based): Zeigt die aktuelle Position in der Webseitenhierarchie.
• Klick-Pfad (Path): Bildet den zurückgelegten Klick-Pfad ab.
• Kategorien (Attribute): Verweist auf die Kategorie und die genutzten Suchfunktionen.

Location-Based Breadcrumb Navigation

Startseite > Kategorie XY > Produkt XY

Die Location-Based Breadcrumb Navigation repräsentiert die Webseitenstruktur und zeigt dem Besucher die aktuelle Position innerhalb der Webseitenhierarchie an. Sie kommt recht häufig zum Einsatz.

Klick-Pfad-Navigation

Startseite > Kategorie 1 > Startseite > Kategorie 3 > Kategorie 2 > Startseite

Es ist unschwer zu erkennen, dass die Klick-Pfad-Navigation kompliziert wirkt und in den meisten Fällen das Nutzererlebnis nicht stärkt, sondern im Gegenteil durch Verwirrung schwächt. Für komplexe Seiten eignet sich die Klick-Pfad-Navigation daher eher weniger. Vielmehr sollten Sie auf eine vereinfachte Breadcrumb Navigation setzen.

Breadcrumb Navigation anhand von Kategorien

Startseite > Bekleidung > Herren > Hosen > Jeans > Blau > Größe 32

Für die meisten Online-Shops ist die Navigation anhand der Kategorien interessant. Diese Breadcrumb Navigation stellt den größten Mehrwert für den Besucher dar, da sie aus Nutzersicht äußerst informativ ist. Gleichzeitig binden Sie in den Link-Pfad Ihre wichtigsten Keywords ein.

Wann eine Breadcrumb Navigation unverzichtbar ist

Eine Breadcrumb Navigation ist nicht für alle Webseiten relevant. Sofern Sie eine komplexe Webseite mit untergeordneten Seiten besitzt, auf die nicht von verschiedenen Zielseiten aus zugegriffen werden kann, sollten Sie jedoch auf die Implementierung nicht verzichten. Folglich ist eine Breadcrumb Navigation immer dann sinnvoll, wenn mehrere Seiten linear angelegt sind. Experten raten ab drei Ebenen zu einer Integration der Breadcrumb Navigation. Kleine Webseiten mit wenigen Unterseiten benötigen in der Regel keine Breadcrumb Navigation.

Kleinere Online-Shops mit wenigen Produktkategorien und einem überschaubaren Sortiment sind daher nicht unbedingt auf eine Breadcrumb Navigation angewiesen. Weist Ihr Online-Shop jedoch mehrere Produktkategorien vor und ist das Produktsortiment größer, hilft die Breadcrumb Navigation Ihren Kunden und Besuchern bei der Orientierung.

Wie Sie die Breadcrumb Navigation nutzen

Die Breadcrumb Navigation kann die User Experience steigern und das Crawlen für die Google Bots erleichtern. Das klappt jedoch nur dann, wenn Sie die Breadcrumb Navigation richtig nutzen. Die nachfolgenden Tipps helfen Ihnen dabei.

Breadcrumb einbinden

Sie können die Breadcrumb Navigation auf unterschiedliche Art und Weise auf Ihrer Webseite einbinden.

• Content-Management-System (CMS): Haben Sie ein CMS-System wie WordPress oder Typo3 erfolgt die Einbindung der Breadcrumb Navigation einfach über Ihr Backend. Eventuell müssen Sie zunächst ein Plugin installieren. Nutzen Sie zur Erstellung der Breadcrumb Navigation die Informationen aus Ihren Metadaten.
• PHP/JavaScript: Sie können die Breadcrumb Navigation als Code in PHP oder JavaScript einbetten.
• HTML: Ebenso ist die Definition des Link-Pfads über HMTL möglich. Hier erfolgt die Zusammenfassung über Div und das Design über CSS.

Breadcrumbs sinnvoll aufbauen

Achten Sie bei der Breadcrumb Navigation insbesondere auf einen logischen und schlüssigen Aufbau. Eine Breadcrumb Navigation wird immer von rechts nach links gelesen. Der rechte Link markiert dabei die aktuelle Position. Die vorangegangenen Links markieren den Weg. Lassen Sie auf dem Breadcrumb Trail in keinem Fall eine Ebene aus. Nur wenn alle Ebenen sinnvoll aufeinander aufbauen, findet der Besucher sich zurecht und kann Ihre Seite bequem entdecken.

Halten Sie ferner die Breadcrumb Navigation einheitlich und verwenden Sie prägnante Schlüsselwörter, die eindeutig den Inhalten der Seite widerspiegeln. Verlinken Sie die einzelnen Stationen, damit der Nutzer auch auf die entsprechende Ebene zurückspringen kann.

Idealerweise heben Sie die Breadcrumb Navigation etwas von Ihrem restlichen Webseitendesign ab, sodass diese dennoch dezent im Hintergrund bleibt. Grundsätzlich sollte die Breadcrumb Navigation so unauffällig wie möglich sein und dennoch schnell vom Benutzer gefunden werden, wenn er nach Orientierung sucht. Testen Sie, beispielsweise mit einem A/B-Test unterschiedliche Varianten und spielen Sie mit Farben der Breadcrumb Navigation.

Breadcrumb Navigation mit Schlüsselwörtern optimieren

Um die Vorteile der Suchmaschinenoptimierung bei der Breadcrumb Navigation zu nutzen, ist es wichtig, Keywords in Ihren Breadcrumb Trail einzubauen. Es gibt einige interessante Beispiele, wie Webseiten durch die Einbindung relevanter Schlüsselworte in der Breadcrumb Navigation innerhalb kürzester Zeit deutlich mehr Sichtbarkeit und bessere Rankings bei Google erhielten. Analysieren Sie im Vorfeld Ihre wichtigsten Keywords und fügen Sie diese der Breadcrumb Navigation hinzu.

Nutzen Sie die Vorteile der Breadcrumb Navigation

Mit der Breadcrumb Navigation verbessern Sie die Navigation auf Ihrer Webseite und helfen Kunden bei der Orientierung. Vor allem dann, wenn Ihre Webseite aus vielen Seiten und Ebenen besteht oder es sich um einen Online-Shop handelt, sollten Sie auf eine Breadcrumb Navigation nicht verzichten.

Durch die Optimierung der Nutzererfahrung reduzieren Sie die Absprungrate und erhöhen die Conversion Rate. Gleichzeitig steigern Sie die Chance auf eine bessere Platzierung bei Google.