Breadcrumb-Navigation

Was ist Breadcrumb-Navigation?

Die Breadcrumb-Navigation hilft Nutzern, ihre Position innerhalb der Hierarchie einer Website leicht zu verstehen. Breadcrumbs sind kleine Textpfade am oberen Rand einer Webseite, die den Nutzern zeigen, wo sie sich auf der Website befinden.

Der Name geht auf das bekannte Märchen „Hänsel und Gretel” zurück, in dem die Figuren Brotkrumen ausstreuen, um den Weg nach Hause zurückzufinden.

Im Webdesign funktioniert die Breadcrumb-Navigation auf die gleiche Weise: Sie führt Nutzer zurück zum Ausgangspunkt und ermöglicht es ihnen, ihre Schritte einfach zurückzuverfolgen.

Welche Arten der Breadcrumb-Navigation gibt es?

Es gibt drei Arten der Breadcrumb-Navigation: standortbasierte, attributbasierte und pfadbasierte Navigation.

Standortbasierte Navigation

Die standortbasierte Breadcrumb-Navigation zeigt Nutzern, wo sie sich innerhalb der Website-Hierarchie befinden. Beispielsweise könnte die standortbasierte Breadcrumb-Navigation einer SEO-Website so aussehen: Startseite > Blog > Glossar > Breadcrumb-Navigation. Diese Breadcrumb-Spur zeigt dem Nutzer, dass er sich aktuell auf der Seite „Breadcrumb-Navigation” befindet, die zum Bereich „Glossar” innerhalb der Kategorie „Blog” gehört.

Attributbasierte Navigation

Die attributbasierte Breadcrumb-Navigation liefert zusätzliche Informationen über die Seite, auf der sich der Nutzer befindet — etwa Filter oder Suchkriterien. Ein Nutzer könnte zum Beispiel eine Produktsuche nach Preisspanne oder Farbe filtern, und die attributbasierte Breadcrumb-Navigation würde diese Filter im Pfad anzeigen.

Pfadbasierte Navigation

Die pfadbasierte Breadcrumb-Navigation kombiniert die standort- und attributbasierten Stile. Sie zeigt dem Nutzer seine aktuelle Position innerhalb der Website-Hierarchie sowie alle angewendeten Filter oder Suchkriterien. Diese Form der Breadcrumb-Navigation kommt am häufigsten in E-Commerce-Websites zum Einsatz und hilft Nutzern, ihre Suchergebnisse leicht zu verfeinern.

Welche Vorteile bietet die Breadcrumb-Navigation?

Es gibt drei wesentliche Vorteile, Breadcrumb-Navigation auf Ihrer Website einzusetzen:

1. Bessere Nutzererfahrung

Die Breadcrumb-Navigation bietet Nutzern eine klare und übersichtliche Möglichkeit, eine Website zu durchsuchen. Sie hilft Nutzern zu verstehen, wo sie sich innerhalb der Hierarchie befinden und wie sie dorthin gelangt sind. So fällt es ihnen leichter, das Gesuchte zu finden und ihre Aufgabe abzuschließen.

2. Höhere Usability

Breadcrumb-Navigation macht eine Website benutzerfreundlicher, weil sie die Anzahl der Klicks reduziert, um zu einer bestimmten Seite zu gelangen. Nutzer können schnell und einfach zu vorherigen Seiten zurückkehren, ohne den Zurück-Button des Browsers nutzen oder ihre Suche neu starten zu müssen.

3. Besseres SEO

Breadcrumb-Navigation kann auch das SEO einer Website verbessern. Durch klare Navigationspfade und interne Links können Suchmaschinen die Seiten der Website leichter crawlen und indexieren.

So richten Sie die Breadcrumb-Navigation ein

Schritt 1: Entscheiden Sie, welche Art der Breadcrumb-Navigation Sie verwenden möchten. Wie bereits erwähnt, gibt es drei Arten: standortbasiert, attributbasiert und pfadbasiert. Überlegen Sie, welche Art Website Sie betreiben und welche Form der Breadcrumb-Navigation für Ihre Nutzer am hilfreichsten ist.

Schritt 2: Legen Sie fest, an welcher Stelle auf Ihrer Website Sie die Breadcrumb-Navigation platzieren möchten. Übliche Platzierungen sind oberhalb des Seitentitels, unterhalb des Seitentitels oder in der Seitenleiste. Wählen Sie eine gut sichtbare Position, die andere wichtige Elemente nicht stört.

Schritt 3: Setzen Sie die Breadcrumb-Navigation per HTML oder CSS um. Wenn Sie nicht selbst programmieren, bieten viele Website-Baukästen und Content-Management-Systeme Breadcrumb-Navigation als fertige Funktion an. Sie können auch Plugins oder Widgets von Drittanbietern verwenden, um Breadcrumbs hinzuzufügen.

Schritt 4: Testen Sie die Breadcrumb-Navigation, um sicherzustellen, dass sie korrekt funktioniert. Navigieren Sie durch Ihre Website und prüfen Sie, ob der Breadcrumb-Pfad Ihre Position innerhalb der Hierarchie korrekt widerspiegelt. Passen Sie Code oder Platzierung bei Bedarf an.