Breadcrumb

breadcrumb

Copyright © Shutterstock/megaflopp

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.

Beispiel einer Breadcrumb-Navigation

© OSG

Überblick und Allgemeines zur Breadcrumb-Navigation

Die Breadcrumb-Navigation 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

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

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

Kostenloser SEO-Check der OSG


Weitere Inhalte