Breadcrumb

Inhaltsverzeichnis

Was ist ein Breadcrumb?

Mit dem Begriff Breadcrumb (aus dem Englischen: Brotkrümel) wird eine Form der sekundären Navigation innerhalb einer Webseite bezeichnet. Diese zweite Navigation hat eine Verbesserung der User-Experience zum Ziel. Breadcrumbs oder Brotkrumen bieten Anwendern die Möglichkeit, den Weg zur ursprünglichen Seite oder anderen Unterseiten möglichst schnell zu erreichen. Bei großen und hierarchisch organisierten Webseiten erweist sich die Breadcrumb-Navigation als nützlich, damit User zu übergeordneten und parallelen Webseiten gelangen.

Überblick und Allgemeines zur Breadcrumb-Navigation

Die Breadcrumb-Navigation bildet den Navigationspfad ab und ermöglicht es Benutzern, genau zurückzuverfolgen, welche Seiten sie zuvor besucht haben. Der Begriff wurde inspiriert von dem Märchen Hänsel und Gretel, das durch die Gebrüder Grimm Bekanntheit erlangte. Hänsel und Gretel markierten ihren Weg mit Brotkrumen, um wieder nach Hause zu finden. Die sekundäre Navigation durch sogenannte Breadcrumbs bedient sich strukturell einem ähnlichen Prinzip.

Die Breadcrumb-Navigation hat einen hierarchischen Aufbau und ermöglicht es, den gesamten Pfad von der Einstiegsseite bis zur gegenwärtigen Position in der Seitenhierarchie logisch nachzuvollziehen. Damit wird der Weg des Nutzers nachvollziehbar. Gleichermaßen kann der Nutzer innerhalb der zuvor besuchten Hierarchie-Ebenen springen.

Darstellung und grafische Umsetzung der Breadcrumb-Navigation

Breadcrumb-Navigationselemente sind im Allgemeinen nicht besonders auffällig und meist im oberen Bereich einer Seite positioniert. Sie ermöglichen es, durch nur geringen Aufwand einen wertvollen Beitrag zur Usability und Nutzererfahrung einer Webseite beizutragen. Trennzeichen lassen sich durch bestimmte typographische Symbole darstellen, beispielsweise Pfeile oder Buttons. Auch Grafiken kommen zum Einsatz. Durch Klick auf eines der Symbole können Nutzer wieder zur Startseite oder zu einer zuvor besuchten Seite gelangen.

Um die Haupt-Navigation der Seite nicht zu beeinträchtigen, befindet sich die Breadcrumb-Navigation meist darstellungsbezogen im Hintergrund. So sind Schriftgröße sowie Farbgebung grundsätzlich dezent gehalten. Beim Einsatz der sekundären Navigation ist es wichtig, auf Konsistenz zu achten. Wird diese Art der Navigation in einem Bereich der Seite angewandt, so sollte dies auch auf sämtlichen anderen Seitenbereichen und Unterseiten geschehen.

Breadcrumb-Typen

Klickpfaden

Grundsätzlich lassen sich Brotkrumen-Navigationen dahingehend unterschieden, auf welche Bereiche der Webseite oder welche Klickpfade sie sich beziehen. Manche Breadcrumb-Varianten sind hinsichtlich ihrer Navigation mit Klickpfaden identisch.

Location-based-Breadcrumb

Ist von einem Brotkrümel die Rede, so handelt es sich in den meisten Fällen um einen Location-based-Breadcrumb. Diese Variante zeigt Nutzern, in welchem Bereich der Seitenhierarchie sie sich gegenwärtig befinden. Damit ähnelt dieser Typus der Hauptnavigation. Er beginnt bei der Startseite und reicht bis zum gegenwärtigen Standort. Location-based-Breadcrumb hilft nicht nur Nutzern, sondern ist auch aus Perspektive der Suchmaschinen von Bedeutung. Diese Variante unterstützt das Crawling der Internetseite und hat damit indirekten Einfluss auf die Indexierung und damit auch auf das Ranking der Seite.

Attribute-based-Breadcrumb

Der Attribute-based-Breadcrumb bezieht sich an Stelle der Hierarchie auf ausgewählte Attribute der Webseite. Dieser Typus findet insbesondere in Online-Marketing und E-Commerce Anwendung. Nutzer profitieren von dieser Art Brotkrümel dahingehend, ihre Suche genauer eingrenzen und spezifizieren zu können. In Abhängigkeit der Attribute gelangen Nutzer somit schneller zum gewünschten Produkt.

Path-based-Breadcrumb

Der Path-based-Breadcrumb kommt der ursprünglichen Bedeutung, die Brotkrumen im Märchen haben, besonders nahe. Dieser Typus zeigt Nutzern jeden separaten Schritt auf, den sie gegangen sind, bis sie zum gegenwärtigen Punkt der Seite gelangten.

Eignung und Anwendungsbereiche der Breadcrumb-Navigation

Primäres Anwendungsgebiet dieser Typen von Breadcrumbs sind umfangreiche, große Webseiten mit viel Inhalt. Online-Shops mit großem Produktportfolio profitieren besonders. Branchen-Riesen wie etwa Amazon haben diese Navigationsform auf ihren Angebotsseiten implementiert.

Die Orientierung und Navigation auf den Seiten dieser Anbieter gelten als vorbildlich. Breadcrumbs ermöglichen es Besuchern, sich schnell und effizient durch die verschiedenen Hierarchie-Ebenen zu manövrieren. Je komplexer die Strukturen auf einer Webseite sind und je mehr Hierarchien vorhanden sind, desto lohnenswerter ist die Navigation mit Breadcrumbs. Dies gilt nicht nur für das Nutzererlebnis für die Besucher, sondern auch für den Webseitenbetreiber, da dieser indirekt von einer vorteilhafteren Indexierung profitiert.

Kleinere E-Commerce-Anbieter und andere Webseiten können auf diese Navigationsart jedoch verzichten, sofern auf den ersten Blick ersichtlich ist, wo sich ein Nutzer gerade befindet. Im Hinblick auf einen Richtwert, ab dem die Einbindung von Breadcrumbs als sinnvoll erachtet wird, haben sich in der Praxis drei Ebenen etabliert. Dabei ist es von Vorteil, Breadcrumbs ab der Startseite beginnen zu lassen. Auf diese Weise gelingt es Benutzern, jederzeit schnell wieder zur Hauptseite zu gelangen. Von Bedeutung ist es zudem, den Breadcrumb eindeutig vom Rest der Seite abzuheben, auf dem er sich befindet. Für die Darstellung ist eine horizontale Markierung zwischen den Ebenen am einfachsten, um die Tiefe der Ebenen zu markieren.

Einbindung und Nutzung der Breadcrumbs auf Webseiten

Die Einbindung der Breadcrumbs kann auf vielseitige Weisen erfolgen.

Eine Möglichkeit der Einbindung besteht in Plug-ins. Je nachdem, welche Software beziehungsweise welches Content-Management-System (CMS) verwendet wird, finden sich unterschiedliche Arten von Plug-ins zur Implementierung von Breadcrumbs. Mit diesen Zusatzprogrammen können Webseitenbetreiber nicht nur sekundäre Navigation einfügen, sondern zudem diverse Einstellungen vornehmen. Häufig werden optional auch strukturierte Daten unterstützt, die Suchmaschinen dabei helfen, Breadcrumbs besser einlesen und in den SERPs anzeigen zu können.

Weiterhin gibt es die Option, Breadcrumbs in Form von PHP- oder JavaScript-Code einzubinden. Durch entsprechende Code-Bestandteile dieser Programmiersprachen lassen sich Navigationselemente in den Quellcode implementieren. In PHP können Nutzer etwa eine Funktion festlegen, um sie anschließend später im Dokument wieder aufzurufen. Ähnliche Möglichkeiten bietet auch JavaScript, das auch dynamisch generierten Webseiten die Einbindung von Breadcrumbs ermöglicht. Auch via HTML bietet sich eine Variante an. Diese manuelle Vorgehensweise nutzt in einem Div zusammengefasste Links. Die Gestaltung des Designs erfolgt in diesem Falle mit CSS.

Schließlich bieten auch einige CMS und andere Shopsysteme gleich ab Werk die Möglichkeit, Breadcrumbs zur Navigation einzusetzen. Diese Optionen finden sich meist im Backend des CMS und lassen sich im Rahmen weniger Klicks intuitiv nutzen.

Darstellung der Breadcrumbs in den SERPS

Breadcrumbs werden in den Google Suchergebnissen über dem Title der Seite anstattt der URL angezeigt:

Screenshot Google Suchergebnisse

Damit Breadcrumbs dargestellt werden können, sollten diese Navigationspfade mit strukturierten Daten nach schema.org versehen werden. Google kann die Breadcrumbs aber auch ohne strukturierte Daten in den Suchergebnissen anzeigen. Hier gab es von Google in der Veragangheit mehrere Tests.

Stellenwert in der Suchmaschinenoptimierung (SEO)

Die Navigationshilfe durch Breadcrumbs gilt als wesentlicher Beitrag zu einer positiven Nutzererfahrung. Dies gilt insbesondere für große Webauftritte mit umfangreichen Inhalten, beispielsweise Online-Shops mit großem Angebot. Die Usability spielt eine große Rolle in der Suchmaschinenoptimierung, da Suchmaschinen solche Seiten bevorzugen, die ihren Besuchern eine gute Nutzererfahrung bieten. Als wichtiger Beitrag zur On-Page Optimierung ist es daher von hoher Relevanz, Breadcrumbs richtig einzufügen. Dies gilt umso mehr, da Google in vielen Fällen die Breadcrumb-Navigationselemente bereits in den SERPs in Form von Rich-Snippets anzeigt.

Sie haben noch Fragen?

Kontaktieren Sie uns