Zuletzt aktualisiert: September 22, 2021

Du hast im Zusammenhang mit Webseiten von Breadcrumbs oder Brotkrümel gehört und kannst damit noch nicht so richtig was anfangen? Hier erfährst du alles Wichtige rund um diese digitale Navigationsmethode. Der Begriff bezieht sich dabei auf das Nachverfolgen des zurückgelegten Weges auf einer Webseite.

Mithilfe von Brotkrümeln soll dem Benutzer angezeigt werden, wo er sich gerade auf der Seite befindet und wie er mit einem Klick wieder zu den vorherigen Ebenen zugreifen kann. In unserem Beitrag zu Breadcrumbs 2021 versorgen wir dich mit allen wichtigen Informationen zu diesem Thema. Deshalb findest du im Folgenden die wichtigsten Fragen dazu kompakt beantwortet.

Das Wichtigste in Kürze

  • Breadcrumbs sind eine Form der sekundären Navigation auf Webseiten. Sie ermöglichen dem Benutzer ein einfaches Wechseln der verschiedenen Ebenen auf einer Seite.
  • Mithilfe der logischen Darstellung der Seitenstruktur in einem dezenten Design wird die Übersichtlichkeit erhöht, ohne das Frontend zu überladen. Je nachdem welchen Zweck die Seite erfüllt, können verschiedene Formen von Breadcrumbs eingesetzt werden.
  • Das Implementieren von Breadcrumbs ist in den meisten Fällen relativ einfach. Werden dabei gewisse Dinge beachtet, kann diese Form der Navigation einen positiven Effekt auf deine Seitenoptimierung haben.

Glossareintrag: Der Begriff Breadcrumb im Detail erklärt

Damit du umfangreich über das Thema informiert bist, haben wir für dich im nächsten Abschnitt die wichtigsten Fragen rund um das Thema Breadcrumbs beantwortet. So weißt du, worum um es dabei geht und worauf du achten solltest.

Was ist ein Breadcrumb?

Als Breadcrumb wird eine bestimmte Form der Navigation auf Websites bezeichnet. Häufig wird diese Methode als sekundäre Navigation innerhalb einer Website genutzt, um die Seite übersichtlicher und benutzerfreundlicher zu Gestalten(1).

Der Name Breadcrumb leitet sich dabei aus dem englischen für Brotkrümel her. Dies ist metaphorisch zu verstehen, denn die Seite wird dabei sozusagen in Brotkrümel gegliedert, welche logisch aufeinander aufbauen. So kann der Benutzer sich durch die Seite klicken und immer wieder zur Ausgangsseite zurückfinden.

Angelehnt an das Märchen von Hänsel und Gretel, soll sich der Nutzer mithilfe der Brotkrümel auf der Website nicht mehr “verlaufen” können.

Es dient vor allem als unterstützendes Element für die Navigation auf der Seite. Neben der einfachen Übersicht für den Nutzer kann dieser auch den hierarchischen Aufbau der Website besser nachvollziehen. Es wird deutlich welche Bereiche über- und untergeordnet sind, wodurch ein intuitiver Weg zum Benutzen der Seite entsteht.

Der Benutzer kann von der Startseite ausgehend, auf die Kategorien zugreifen und sich von dort genauer, nach seinen Interessen, in die gewünschte Richtung bewegen. Dabei hat er immer die Möglichkeit zurückzuspringen und auf die vorherigen Elemente der Seite zuzugreifen.

Wie funktionieren Breadcrumbs?

Die Funktion von Breadcrumbs kann auf unterschiedliche Art und Weise auf einer Website platziert werden. Je nachdem welches Programm und mit welcher Programmiersprache gearbeitet wird, können die Breadcrumbs verschieden eingebunden werden.

  • Content-Managment-System: Mithilfe von Voreinstellungen und Optionen im Backend
  • HTML: Links werden in einem DIV umschlossen und über CSS angepasst
  • Progammiersprachen wie JavaScript: Passende Codezeilen werden in den Quellcode eingefügt

Bei vielen Content-Management-Systemen lassen sich Breadcrumbs durch gewisse Voreinstellungen mithilfe von Optionen im Backend einfügen. Dadurch benötigt man nur wenige Klicks, um die Funktion auf der Seite zu implementieren.

Bei HTML werden die benötigten Links in einem DIV umschlossen. Das Design kann dann beliebig über CSS angepasst werden(2).

Mit JavaScript und anderen Programmiersprachen, werden lediglich Codezeilen in den Quellcode eingefügt. Dadurch ist es auch möglich auf dynamischen Seiten eine Breadcrumb-Navigation einzufügen(3).

Je nachdem wie die Website aufgebaut ist und welchen Zweck sie erfüllen soll, kann die Breadcrumb-Navigation unterschiedlich designed sein. Dem Schema nach funktioniert die Methode immer ähnlich, unterscheidet sich aber in Details, um die Benutzerabsicht bestmöglich aufzugreifen und zu unterstützen.

Wie werden Breadcrumbs dargestellt?

Visuell stechen Breadcrumbs meistens weniger heraus. Relativ klein, zeigen sie dem Nutzer auf der Seite an, wo er sich gerade in der Hierarchie der Seitenstruktur befindet. Die einfachsten Pfade folgen dabei einem Schema beginnend bei der Startseite, über die Kategorien hin zu einzelnen Themen.

Mithilfe von Breadcrumbs kann ein virtuelle Pfad bzw. Weg, den ein Nutzer gegangen ist, dargestellt werden. (Bildquelle: 123rf / masterhands)

Die Zeichen werden dabei in Form von kleinen Symbolen oder Kästchen angezeigt. Je tiefer der Nutzer auf die Website zugreift, desto mehr Elemente werden an die Reihenfolge der Breadcrumbs angelegt. Durch einen Klick auf eines der Symbole kann der Nutzer wieder auf die Startseite oder andere Teile des Pfades zurückkehren.

Auf den letzten Breadcrumb in der Folge, kann nicht geklickt werden, da dieser in der Regel die aktuelle Position auf der Seite anzeigt. In der Regel sind die Breadcrumbs im oberen Bereich der Website zu finden, über dem eigentlichen Text. Dieser wird auch Above the fold genannt(4).

Welche Arten von Breadcrumbs gibt es?

Wie schon erwähnt können Breadcrumbs unterschiedlich eingesetzt werden, wodurch gewisse Bereiche der Navigationsfunktion stärker zum Einsatz kommen als andere. Am ehesten wird dabei unterschieden zwischen welchen Ebenen die Breadcrumbs aufeinander zugreifen und auf welche Klickpfade sie sich beziehen(5).

  • Klickpfad: Klickpfade müssen nicht unbedingt immer auch Breadcrumbs sein, dennoch besitzen die Methoden viel Gemeinsames und Breacrumbs bauen oft auf Klickpfaden auf. Bei diesen wird der tatsächliche Pfad den der User auf der Seite zurückgelegt hat angezeigt, bis zu aktuellen Position. Bei komplexen Seiten bietet sich diese einfache Form der Navigation weniger an. Diese würde schnell unübersichtlich werden und den Benutzer mit vielen unwichtigen Informationen versorgen. Außerdem können die Pfade dadurch sehr lang werden.
  • Ort: Bei dieser Form der Breadcrumbs wird dem Benutzer angezeigt auf welcher Ebene der Website er sich gerade befindet. Dabei bekommt er seine aktuelle Position, bezogen auf die Hierarchie der Seite, angezeigt. Bei Websites mit mehreren Ebenen, wird diese Methode gerne verwendet, damit der Benutzer problemlos zwischen den Ebenen rotieren kann.
  • Kategorien: Bei dieser Art der Breadcrumbs wird dem Nutzer angezeigt in welcher Kategorie auf der Seite er sich befindet und welche speziellen Attribute diese mitträgt. Diese Methode findet oft Anwendung bei Online-Shops, welche dem Kunden bestimmte Produkte einer Kategorie anzeigen wollen. Dabei wird die Funktion oft mit Suchmaschinenfunktionen verknüpft, um dem Benutzer zielgerichtete Inhalte vorzuschlagen.

Wo setzt man Breadcrumbs ein?

Die Navigation mithilfe von Breadcrumbs wird besonders bei umfangreichen und großen Websites angewendet, welche nach einer hierarchischen Struktur aufgebaut sind.
Ihre Anfänge fanden die Breadcrumbs im Online-Handel.

Daneben findet sich auf den meisten Online-Shops eine solche Gliederung der einzelnen Kategorien. Diese helfen dem Benutzer sich auf den Seiten gut zurechtzufinden.

Besitzt eine Seite keinen großen Umfang oder ist nach keiner bestimmten hierarchischen Logik aufgebaut, lohnt es sich meist weniger Breadcrumbs einzusetzen. Denn gerade das Visualisieren der strukturellen Logik einer Seite ist der große Vorteil dieser Navigationsmethode.

Wozu werden Breadcrumbs eingesetzt?

Die Navigation durch Breadcrumbs fungiert auf einer Website immer als sekundäre Navigationsmethode. Das bedeutet es ist ein hilfreiches Mittel für die Strukturierung einer Website, es ersetzt aber keine primäre Navigation wie Inhaltsverzeichnisse oder Kategoriegruppen.
Sie sollen den User beim Benutzen der Seite unterstützen.

Der Breadcrumb zeigt dem Benutzer an, wo er sich gerade auf der Website befindet, mit den dazugehörigen logischen Vorstufen. So wird das Suchen auf einer Seite vereinfacht, besonders wenn der Nutzer noch nicht mit dieser Vertraut ist. Zudem wird die logische Gliederung der Seite sichtbar gemacht, was die Transparenz für den Benutzer erhöht.

Die Benutzerfreundlichkeit steht dabei im Vordergrund. Es soll dem User möglich sein mit so wenigen Klicks wie möglich, auf der Seite zu navigieren. Dadurch wird sogenannte User experience gesteigert und er greift im Idealfall wieder eher auf die Seite zurück.

Welche Vor- und Nachteile gibt es bei Breadcrumbs?

Zusammengefasst erleichtern es Breadcrumbs dem Benutzer einer Website sich auf dieser Zurechtzufinden. Es werden die Ebenen der Seite sichtbar gemacht, welche zur Navigation auf dieser genutzt werden können. Dadurch kann die Übersichtlichkeit hervorgehoben werden. Zusätzlich gestalten sich Breadcrumbs als ein Element, welches sich relativ einfach implementieren lässt.

Gegen eine Breadcrumb-Navigation auf einer Website sprechen kaum Gründe. In den meisten Fällen stört das Design nicht, auch wenn es nicht von allen Benutzern verwendet wird. Lediglich kleine Seite ohne mehrere Ebenen oder logischen Aufbau würden kaum einen Mehrwert daraus ziehen.

Die Vor- und Nachteile von Breadcrumbs im Überblick.

Worauf sollte man bei der Verwendung von Breadcrumbs achten?

Wie wir nun erfahren haben können Breadcrumbs ein relativ einfacher Weg sein, um die Benutzerfreundlichkeit einer Seite zu erhöhen. Damit diese Navigationsmethode aber auch tatsächlich einen Mehrwert bietet, sollte man auf gewisse Dinge achten(6).

  • Soll Mehrwert bieten: Damit die Breadcrumbs auch wirklich hilfreich für den User sind und diesen nicht noch zusätzlich irritieren, sollten diese immer einen Mehrwert bieten. Deshalb sollte das Tool nicht auf Biegen und Brechen eingesetzt werden, sondern nur dann, wenn diese auch sinnvoll sind. Bei kleinen Seiten ohne tief greifende Struktur lohnt sich immerhin die Frage, ob der Einsatz von Breadcrumbs nicht dem ganzen Design eher im Weg steht. Breadcrumbs können ihr volles Potenzial meistens erst ab einer gewissen Seitenkomplexität entfalten.
  • Logischer Aufbau notwendig: Im besten Fall sollten die Breadcrumbs logisch und für den User nachvollziehbar aufgebaut sein. Eine ledigliche Zusammenfassung der primären Navigation kann dabei nicht immer hilfreich sein. Achte besser darauf die Breadcrumbs dezent zu halten und an den Benutzer anzupassen. Es sollte stets für den Benutzer ersichtlich sein auf welcher Ebene er sich innerhalb der Website gerade bewegt.
  • Kein Ersatz für primäre Navigation: Nur in den seltensten Fällen ist es sinnvoll nur auf Breadcrumbs bei der Navigationsstruktur einer Website zu setzen. Die primäre Navigation sollte deutlicher als die Brotkrümel zum Vorschein kommen und nur durch diese Unterstützt werden. Als ergänzendes Element sollten die Breadcrumbs dementsprechend dezent und klein gehalten werden. So wirken sie nicht überfordernd und ablenkend auf den Benutzer, können ihn aber dennoch hilfreich navigieren.

Lohnt sich der Einsatz von Breadcrumbs bei der Suchmaschinenoptimierung?

Einige Tests rund um Breadcrumbs und ihre Nützlichkeit für das Optimieren von Webseiten haben herausgefunden, dass diese eine erhebliche Navigationshilfe für die Benutzer sind.
Der Einsatz von Breadcrumbs kann das Google-Ranking einer Webseite verbessern.

Deshalb finden Breadcrumbs verstärkt Anwendung im Aufbau von Seiten und den dazugehörigen Bereichen. Besonders für die Optimierung des Frontends aus SEO Perspektive ist die Implementierung von Breadcrumbs besonders wichtig geworden.

Seit dem Google in den SERPs die Breadcrumb Navigation teilweise in die Rich Snippets integriert hat, ist es umso empfehlenswerter diese Einzusetzen. Weitere Informationen dazu findest du bei Google selbst(7).

Wie lassen sich Breadcrumbs bei WordPress einfügen?

Breadcrumbs lassen sich bei WordPress auf eine relativ leichte Art und Weise einfügen. Mithilfe von Plug-ins ist der Einsatz von verschiedenen Breadcrumbs möglich. Mithilfe von diesem Programm können Einstellungen an der sekundären Navigation nach Belieben verändert werden.

Damit die Breadcrumbs aber von der Suchmaschine verarbeitet und auf den SERPs angezeigt werden können, müssen zudem strukturierte Daten und Mikrodaten eingesetzt und verarbeitet werden.

Fazit

Mithilfe von Breadcrumbs kann die Übersichtlichkeit einer Webseite erhöht werden. Besonders für den Benutzer ist es damit einfacher sich zurechtzufinden und zwischen den Ebenen der Seite zu wechseln. Besonders auf Seiten mit vielen Kategorien und Unterkategorien ist der Einsatz von Breadcrumbs sinnvoll.

Da diese Form der sekundären Navigation sich einfach und dezent implementieren lässt, fügt sie sich meist gut in das Design ein ohne störend zu wirken. Voraussetzung für den sinnvollen Einsatz von Breadcrumbs ist eine gewisse Komplexität der Seite und eine logische Struktur. Daneben können Breadcrumbs auch im SEO Bereich sinnvoll sein, da sie Auswirkungen auf die SERPs haben können.

Weiterführende Literatur: Quellen und interessante Links

[1] https://onlinemarketing.de/lexikon/definition-breadcrumb

[2] https://www.html-seminar.de/breadcrumbs-navigation-erstellen.htm

[3] http://www.javascriptkit.com/script/script2/breadcrumb.shtml

[4] https://de.ryte.com/magazine/above-the-fold-webseiten-richtig-aufbauen

[5] https://de.wikipedia.org/wiki/Brotkr%C3%BCmelnavigation

[6] https://www.ionos.de/digitalguide/websites/webdesign/breadcrumb-navigation-bedeutung-und-beispiele/

[7] https://developers.google.com/search/docs/data-types/breadcrumb?hl=de

Bildquelle: 123rf / welcomia

Warum kannst du mir vertrauen?

Testberichte