Breadcrumb-Navigation: Welche Vorteile bietet sie?

Wer erinnert sich nicht an das bekannte grimmsche Märchen „Hänsel und Gretel“? Zwei in einem Wald ausgesetzte Geschwister streuen hinter sich Brotkrümel aus, um den Weg zurück nach Hause zu finden. Die Kinder geraten in die Fänge einer menschenfressenden Hexe, können aber entfliehen und aus dem Wald herausfinden. Was dieses düstere Märchen mit Webdesign zu tun hat? Ganz einfach: Auch das World Wide Web und insbesondere komplexe Websites erscheinen mitunter wie ein großer dunkler Wald. Bei der Navigation durch umfangreiche Onlineshops oder weitverzweigte Webportale wünscht man sich als verirrter User mitunter ebenfalls Brotkrümel, um den unkomplizierten Weg zurück auf übergeordnete Seiten zu finden. Die Breadcrumb-Navigation (deutsch: „Brotkrümelnavigation“) dient genau diesem Ziel. Lesen Sie, was eine Brotkrümelnavigation ist, wie ein Breadcrumb-Trail idealerweise aussieht und welche Bedeutung er für die Usability von Websites und SEO hat.

Die Breadcrumb-Navigation ist ein sekundäres Navigationselement, das unterstützend zu den klassischen Menüs im oberen Bereich einer Website eingesetzt wird. Es ermöglicht Nutzern in mehrfacher Hinsicht eine bessere Orientierung: Zum einen ist für den User mit einer Brotkrümelnavigation immer erkennbar, wo auf der Website er sich gerade befindet, und zum anderen zeigt sie typischerweise auch an, welcher Weg zu den übergeordneten Bereichen führt. Der sogenannte Breadcrumb-Trail (deutsch: „Brotkrümel-Pfad“) stellt die einzelnen Stationen logisch-aufeinanderfolgend und üblicherweise hierarchisch gegliedert dar. User bewegen sich von der Startseite über die Kategorieseiten zu den konkreten Inhalten. Der Breadcrumb-Trail bietet Links zu all diesen Stationen an. So können Nutzer die Struktur der Website nachvollziehen und mit nur einem Klick zurückspringen.

Die Breadcrumbs auf Websites erfüllen also die gleiche Funktion wie die Brotkrümel in der Märchenvorlage – mit der entscheidenden Ausnahme, dass sie nicht von Vögeln weggepickt werden können, was Hänsel und Gretel im Märchen den Rückweg erschwert. Die Darstellung einer Breadcrumb-Navigation variiert: Verbreitet sind Pfeilsymbole oder das Größer-als-Zeichen (>), die als Trennzeichen fungieren und zugleich die Hierarchie der Website abbilden. Häufig werden auch grafische Buttons in Pfeilform verwendet. So ergibt sich in der Regel ein Pfad, der ungefähr folgendem Schema entspricht:

• Startseite > Kategorie > Aktuelle Position

Auf besonders komplexen Seiten gibt es häufig noch weitere Kategorien und Subkategorien zwischen der Startseite und der aktuellen Position. Eine Breadcrumb-Navigation nach obigem Schema wird auch Location-Breadcrumb genannt, da die Position und der Weg zur Startseite dargestellt werden. Eine weitere, aber seltenere Darstellungsvariante ist der Path-Breadcrumb, der statt auf die Location den Fokus auf den tatsächlichen Klickpfad legt, was bei komplexen Seiten schnell verwirrend sein kann. Der Path-Breadcrumb bildet das Surfverhalten des Anwenders auf der Site ab – ganz gleich, wie sprunghaft selbiges ist. Diese Variante könnte wie folgt aussehen:

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

Eine dritte Variante bilden die kategorie- oder attribut-basierten Breadcrumbs: Diese findet man häufig im E-Commerce-Bereich und vor allem bei Onlineshops. Sie zeigen dem Anwender die Kategoriezugehörigkeit der aktuell geöffneten Seite und die zugeschriebenen Attribute an. Ermittelt werden selbige anhand von Meta-Informationen. Eine Jeans gehört beispielsweise zur Kategorie der Hosen, kann gleichzeitig aber auch die Attribute „Blau“ und „Größe 32“ tragen:

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

Manch einer mag sich jetzt fragen, wozu eine Breadcrumb-Navigation überhaupt gut sein soll – immerhin hat man ja auch Menüleisten, über die die Navigation abläuft. Zudem verfügt jeder gängige Browser über Buttons zum Vor- und Zurückblättern. Diese Elemente machen die Navigation zwar möglich, sind aber in einigen Fällen sehr umständlich und kompliziert. Eine der wichtigsten Regeln für ein gutes User-Experience-Design lautet schließlich: Je weniger Klicks Nutzer benötigen, desto besser fällt die User-Experience aus. Dieser Grundsatz gilt insbesondere für die Navigation. Es gibt kaum etwas Nervigeres, als beim Zurückspringen ständig auf den „Zurück“-Pfeil im Browser klicken oder eine Kategorie in der Menüleiste von neuem durchforsten zu müssen.

Darüber hinaus wissen Nutzer mit Breadcrumbs stets, wo sie sich auf der Website befinden: Die Hierarchie und Struktur der Seite ist mit einer Breadcrumb-Navigation deutlich transparenter als mit einer singulären Menü-Navigation. Selbst wenn die Nutzer über einen externen oder internen Link auf die Zielseite gelangen und sich nicht von der Startseite bis zur aktuellen Position durchgeklickt haben, erkennen sie mit nur einem Blick in die Breadcrumb-Navigation, wo sie sich gerade befinden. Zudem lädt sie zum Stöbern auf der jeweiligen Seite ein und mindert das Risiko, dass Nutzer abspringen: Die übergeordnete Kategorie ist nur einen Klick entfernt und eine neue Suchanfrage muss dank der Breadcrumb-Navigation nicht gestellt werden. Das bindet auch solche Nutzer, die über externe Links von anderen Seiten oder über Suchmaschinen auf die jeweilige Unterseite gelangt sind.

Für ihre Nutzung spricht auch, dass es im Regelfall schnell und unkompliziert ist, eine Breadcrumb-Navigation zu erstellen und in die Website einzubinden. Der Vorteil für die User-Experience ist gemessen am Aufwand immens. Sie ist unauffällig und fügt sich in nahezu jedes Design nahtlos ein. Selbst wenn sie nur von einem Teil der Besucher aktiv genutzt wird, stört sie in den meisten Fällen die übrigen Anwender nicht. Es gibt somit kaum einen Grund, der gegen ein Breadcrumb-Design spricht. Lediglich Websites mit sehr flacher Hierarchie profitieren kaum von Breadcrumbs als sekundäre Navigation.

Schaut man sich die Bezeichnungen der einzelnen Breadcrumbs an, fällt direkt der zweite wichtige Vorteil für die Suchmaschinenoptimierung auf: Die Breadcrumb-Navigation bietet die perfekte Möglichkeit, ganz natürliche interne Links mit relevanten Keywords zu unterfüttern. Ein logisch strukturiertes Webdesign mit Breadcrumbs macht es dementsprechend nicht nur den Nutzern, sondern auch den Crawlern der Suchmaschinen leichter, den Aufbau und die Relevanz einer Website zu verstehen. Crawler folgen den internen Links und nehmen die gefunden Seiten in den Suchmaschinenindex auf. Im Idealfall resultiert daraus ein besseres Ranking der Seite. Bei den Besuchern wiederum sorgt die bessere Navigation idealerweise für einen längeren Aufenthalt auf der Seite: Und die Aufenthaltsdauer und die Absprungrate der User sind ebenfalls wichtige Rankingfaktoren für die Suchmaschinen.

Eine Breadcrumb-Navigation kann die Usability und sogar das Suchmaschinen-Ranking verbessern – vorausgesetzt, sie wird richtig eingebunden, sinnvoll platziert und bietet tatsächlich einen Mehrwert. Im Folgenden erklären wir alle Dos and Don’ts anhand von Beispielen.

Auf diesem Portal für regionale Nachrichten aus dem Ballungszentrum Mannheim/Ludwigshafen am Rhein gibt es nach der Startseite nur eine weitere Kategorie für die in der Seitennavigation aufgelisteten Ressorts. Wählt man eine beliebige Kategorie aus – hier im Screenshot etwa „Speyer“ – fällt auf, dass es danach keine weiteren Subkategorien gibt. Der Location-Breadcrumb bietet bei einer solch flachen Seitenstruktur kaum Mehrwert.

Gegner von Breadcrumbs argumentieren bei Fällen wie diesem vermutlich, dass die Navigationsmöglichkeit hier eher ein Anzeichen für mangelhaftes Webdesign sei und der Unübersichtlichkeit dieser Website Ausdruck verleihe. Betrachtet man den Screenshot der Diablo-III-Website näher, dürfte aber schnell auffallen, wie umständlich die Navigation ohne Breadcrumbs wäre: Auf der Website gibt es zahlreiche Klassen und Fähigkeiten zu entdecken. Die Struktur der Website geht von der Startseite über den Spielguide bis zu einzelnen Fähigkeiten der Figuren über viele Kategorien weit in die Tiefe. Die Breadcrumb-Navigation mit umfangreichen Mouseover-Dropdown-Menüs ergänzt die Hauptnavigation daher trotz ihres Umfangs sinnvoll und hilft, bei all den Unterkategorien nicht den Überblick zu verlieren. Zudem beschleunigt sie die Auswahl und das Springen von Kategorie zu Kategorie.

So viel zur Theorie – bleibt noch zu klären, wie Sie Breadcrumbs eigentlich erstellen. Dafür stehen Ihnen – je nach Anspruch und vorhandenem CMS – unterschiedliche Wege zur Verfügung: Relativ einfach lassen sich Breadcrumbs mit HTML erstellen. Mit CSS können Sie anschließend das Erscheinungsbild anpassen. Das folgende Code-Beispiel zeigt, wie sich Breadcrumbs mit HTML umsetzen lassen:

Bei dem oben aufgeführten Code-Beispiel fehlt für eine fertige und logische location-basierende Navigation nur noch die Auszeichnung der aktuellen Position. Hierfür ist kein weiterer Hyperlink notwendig, da man sich logischerweise bereits an dieser Stelle befindet. Man kann dafür zudem das Listenelement („li“) verwendet. Alternativ zum „id“-Tag kann auch „class“ und statt „div“ ebenso das „nav“-Tag genutzt werden. Um die Breadcrumbs suchmaschinenfreundlicher zu gestalten, bieten sich optional auch Mikrodaten, RFDa oder JSON-LD an. Werden die Breadcrumbs im Quellcode auf diese Weise semantisch ausgezeichnet, können die Crawler der Suchmaschinen die Elemente auslesen – so lassen sie sich in den SERPs auch als Rich-Snippets darstellen.

Neben der Umsetzung via HTML und CSS gibt es noch einige weitere Möglichkeiten, um Breadcrumbs einzubinden: Die einfachste Variante bieten Content-Management-Systeme an. Dort erfolgt die Implementierung im Backend für gewöhnlich schnell und mit wenigen Klicks. Für CMS, die keine Fertiglösung anbieten, gibt es in der Regel entsprechende Plug-ins. Mit PHP oder JavaScript ist es zudem möglich, auch in dynamischen Websites eine Breadcrumb-Navigation zu implementieren.