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