Skip to content

Breadcrumb

Kontakt

  • Dieses Feld dient zur Validierung und sollte nicht verändert werden.

Breadcrumb

1. Was ist eine Breadcrumb Navigation?

Eine beliebte Navigation auf Webseiten ist die Breadcrumb Navigation, die auch als Brotkrumen- oder Brotkrümelnavigation bezeichnet wird. Der Breadcrumb soll als eine sekundäre Navigation die Orientierung der Nutzer auf der Seite verbessern. Sie ermöglicht dem Nutzer, auf verschiedene Ebenen der Webseite zurückzukehren und den Navigationspfad auf der Seite nachzuvollziehen. Der Einbau einer Breadcrumb verursacht wenig Aufwand und hat gleichzeitig einen großen Einfluss auf die Usability der Seite.

1.1 Wie sieht eine Breadcrumb Navigation aus?

Die Breadcrumb befindet sich in der Regel im oberen Seitenbereich, als ein eher unauffällig gestaltetes Element. Die beliebteste Variante der Breadcrumb, die den Weg des Nutzers nachvollziehbar macht, sieht wie folgt aus: 

                                            Startseite > Leistungen > Search Engine Optimization

Zur Abtrennung nutzt man häufig Pfeile, Grafiken, Buttons oder andere Symbole. Durch eine Breadcrumb kann der User mit nur einem Klick zu einer vorherigen Ebene zurückspringen. Abgeleitet wurde der Begriff Breadcrumb aus dem berühmten Märchen “Hänsel und Gretel” von den Gebrüder Grimm. Hier wurden Brotkrumen verteilt, um den Weg in die Heimat wiederzufinden. Im obigen Beispiel findet der User entweder auf die Startseite oder auf die Übersichtsseite der angebotenen Leistungen zurück.

Das Design ist in der Auswahl der Schriftgröße und der Schriftfarbe unauffällig gehalten, um die Hauptnavigation nicht in den Hintergrund zu rücken. Die Platzierung erfolgt Above the fold, damit der User direkt erkennen kann, wo auf der Seite er sich befindet. Bei der Verwendung einer sekundären Navigation, sollte die gesamte Website konsistent damit ausgestattet sein.

1.2 Welche Arten von Breadcrumb Navigationen gibt es?

Eine Breadcrumb kann sich auf verschiedene Website-Ebenen beziehen und zeigt in der Regel die Klickpfade, die ein User verfolgt hat. Klickpfade hingegen unterscheiden sich von den Breadcrumbs. Sprünge über verschiedene Ebenen der Website sind möglich, die nicht immer logisch und nachvollziehbar sind. Je nachdem welche der folgenden drei Breadcrumb-Variationen vorliegt, kann sie den Klickpfaden oder anderen Elementen der Website entsprechen.

Kategorien (Attribute):

Attributbasierte Breadcrumbs findet man häufig auf E-Commerce Seiten. Die Einordnung der Produkte in Kategorien erfolgt nach ihren Eigenschaften. Ist der User auf der Suche nach einem bestimmten Produkt, klickt er sich von den oberen zu den tiefer gelegenen Kategorien durch. Währenddessen wird dem User dieser Weg in der Breadcrumb ersichtlich gemacht. 

 

Beispiel: Startseite > Damen > Schuhe > Sneaker

Ort (Location):

Die location-based Breadcrumbs zeigen die aktuelle Position des Users in der Hierarchie der Website. Ist eine Website in mehr als zwei Ebenen gegliedert, macht eine Auszeichnung Sinn, um die jeweils höhere Seite im Baum der Seite aufzuzeigen. Es handelt sich um die häufigste Form der Breadcrumb, die nicht unbedingt den tatsächlichen Klickpfad anzeigen muss. Vielmehr wird dem User gezeigt, wie der Klickpfad von der Startseite bis zur aktuellen Position aussieht oder aussehen würde. 

 

Beispiel: Oberkategorie > Unterkategorie 1 > Unterkategorie 1.1 > Unterkategorie 1.1.2

Klickpfad (Path):

Eine pfadbasierte Navigation verdeutlicht den tatsächlichen Klickpfad des Users. Ist der Klickpfad jedoch zu umfangreich und verfügt die Seite über eine zu tiefe Struktur, kann diese Art der Breadcrumb schnell unübersichtlich werden. Zudem könnte der User zur Navigation zur vorherigen Seite auch einfach den Zurück-Button nutzen.

 

Beispiel: Schuhe > Damen > Startseite > Damen > Sneaker

2. Einsatz und Einbau von Breadcrumbs in eine Webseite

2.1 Nutzen von Breadcrumbs

Verfügt eine Website über eine tiefe und komplizierte Struktur,  wird eine Breadcrumb Navigationen empfohlen, um das Hauptmenü zu unterstützen und dem User schnell aufzeigen, wo sie sich gerade befinden. In E-Commerce Shops oder großen Portalen wird dem Nutzer so geholfen, sich in der großen Kategorie- und Produktvielfalt zurechtzufinden. Fehlt einer Seite eine logische Struktur, ist von einer Verwendung abzusehen, da die fehlende Logik den User nur verwirren kann. 

Bei der Überlegung, ob eine Breadcrumb dem User helfen würde, wird eine Sitemap erstellt. In der Sitemap ist dann die Seitenarchitektur ersichtlich, nach der im Anschluss die Breadcrumb aufgebaut wird. Breadcrumb ersetzen keinesfalls ein übersichtliches Hauptmenü, sondern dienen als sekundäre Hilfestellung.

2.2 Einbinden von Breadcrumbs in die Webseite

Die Implementierung einer Breadcrumb ist vergleichsweise einfach und wird in vielen CMS bereits angeboten. Folgende Möglichkeiten gibt es:

Plug-In

Zur Einbindung von Breadcrumbs gibt es je nach verwendetem Content Management System verschiedene Plugins zur Verfügung. Ergänzend zu den Einstellungen im Plugin pflegt man dann strukturierte Daten oder Mikrodaten ein. Hierdurch wird die Breadcrumb auch in den Suchergebnisseiten ausgespielt.

JavaScript und PHP

Eine weitere Möglichkeit eine Breadcrumb in die Website zu integrieren, besteht darin, Code-Elemente verschiedener Programmier- und Skriptsprachen direkt in den Quelltext einzubin

Content Management Systeme

Ebenfalls die Integration als eine Option über das Backend einiger CMS und auch Shopsysteme ist möglich. Hier ist das Einbinden in der Regel einfach und unkompliziert mit nur wenigen Schritten möglich.

HTML

Über HTML lässt sich die Breadcrumb auf der Basis von Link-Elementen. Die Gruppierung erfolgt in Containern. Hierbei zeigen relative Pfade die zuvor aufgerufenen Webseiten des Users.

3. Vorteile & Bedeutung für SEO

3.1 Vorteile von Breadcrumbs

Wie bereits eingehend beschrieben, hat eine Breadcrumb einen maßgeblichen Einfluss auf die Usability von Websites. Breadcrumbs geben dem User eine Hilfestellung bei der Orientierung auf der Seite und verdeutlichen ihm seine aktuelle Position innerhalb der Hierarchieebenen.

Zudem kann mit nur einem Klick zu einer anderen Ebene innerhalb der Seite wechseln. Kommt ein User von der Google Suche auf eine bereits sehr tief liegende Einstiegsseite, kann er schnell erkennen, wo er sich befindet. Gleichzeitig kann eine Breadcrumb das Interesse zu höher liegenden Themenbereichen wecken. 

Weiterhin sollen Breadcrumbs wenig Platz auf der Seite einnehmen und das Hauptmenü lediglich unterstützen. Heutzutage wissen User mit einer Breadcrumb Navigation umzugehen. Dadurch sind negative Auswirkungen bei User-Testings unwahrscheinlich. 

  •  großer Einfluss auf die Usability
  •  Hilfestellung bei der Orientierung für den Nutzer
  • durch interne Verlinkungen mit nur einem Klick die Ebene wechseln
  • Interesse zu höher liegenden Themen wecken
  • Nutzer sind mit Breadcrumbs vertraut

3.2 Breadcrumbs und Suchmaschinen Optimierung

Heutzutage ist der Aspekte der Usability entscheidend. Kann der User effizient und effektiv die Seite verwenden und findet was er sucht? Breadcrumbs sind aus Usability-Sicht unerlässlich, da sie eine wichtige Navigationshilfe darstellen. Eine Breadcrumb unterstützt gleichzeitig die Darstellung einer Silo-Architektur. Der Nutzer kann intuitiv die Seite bedienen und Google hat die Möglichkeit anhand der internen Links die Seite besser zu verstehen. 

Hinsichtlich SEO ist es unabdingbar, die Breadcrumb korrekt zu implementieren, denn Google zeigt Breadcrumbs in den  SERPs an. Die Einbindung der sekundären Navigation sollte direkt im Quellcode mit strukturierten Daten erfolgen. Hierzu bieten sich Mikrodaten, JSON-LD oder auch RDFa an. Google kann die Elemente erfassen, in den Index aufnehmen und in den SERPs ergänzend anzeigen. Der Nutzer soll so schnell erfassen können, welche Inhalte ihn auf der Seite erwarten und so die Relevanz besser beurteilen.