Breadcrumb Navigation

Breadcrumb (dt. Brotkrümmel) beschreibt eine zusätzliche, seitenabhängige Navigation innerhalb einer Webseite. Sie hilft Nutzern dabei, sich innerhalb einer URL zu orientieren und verbessert so die User-Experience (UX). Warum diese Hilfe sich auch auf dein Ranking auswirkt, erklären wir hier.

Definition

Die Breadcrumb Navigation ist eine browserunabhängige, zusätzliche Navigation innerhalb einer Webseite, die es für den Nutzer einfacher macht, sich zu orientieren und zu einer Unterseite zurückzufinden. Bei diesen "Brotkrumen" handelt es sich um interne Verlinkungen, die auf die Einstiegsseite oder eine andere Seite zurückführen und den Pfad zum gewünschten Inhalt darstellen.

Üblicherweise wird die Breadcrumb Navigation als horizontale Leiste unter dem Header der Webseite angezeigt, die einzelnen Unterseiten sind dabei durch Trennzeichen wie Pfeile (>) oder Schrägstriche (/) voneinander getrennt. Jedes Wort repräsentiert dabei eine Unterseite und ist ein klickbarer Link. Ein Beispiel:

Startseite > Kategorie > Unterkategorie > Spezifischer Artikel

Die Breadcrumb Navigation ist in WordPress einfach umsetzbar und verbessert die Übersichtlichkeit der Webseite. Hierdurch profitieren nicht nur die Nutzer, sondern auch die Sichtbarkeit der Seite kann steigen, da Suchmaschinen diese als übersichtlicher einstufen.

Märchenhafter Hintergrund

Die Breadcrumb Navigation bekam ihren außergewöhnlichen Namen durch das ikonische Märchen "Hänsel und Gretel" der Gebrüder Grimm. In diesem hinterlassen die Geschwister Brotkrumen im Wald, um später den Weg nach Hause wiederzufinden.

Obwohl die Brotkrumen im späteren Verlauf der Geschichte von Vögeln gefressen werden und die Geschwister sich verirren, lässt sich die Kernaussage auf deine Webseite übertragen: Die Breadcrumbs zeigen den zurückgelegten Pfad bis zur Startseite und ermöglichen es dem Nutzer, mit einem Klick zurückzukehren. Anders als im Märchen bleiben die Krümel jedoch zuverlässig sichtbar.

Vorteile der Breadcrumb Navigation

Die Breadcrumb Navigation findet sich heute auf den meisten Webseiten. Gerade URLs, auf denen viele Inhalte zu unterschiedlichen Themen hochgeladen werden, nutzen sie als entscheidendes Benefit zur Nutzerorientierung. Dazu gehören beispielsweise Nachrichtensender und Blogs, aber auch Onlineshops mit vielen Unterkategorien und Bereichen. Auf kleineren Webseiten sind sie weniger zu finden.

Die Vorteile der zusätzlichen Navigationsleiste sind vielseitig

• Verbesserte Navigation für den Nutzer, gerade bei komplexen Webseiten wie Onlineshops oder Wissensdatenbanken.
• Zeitersparnis, da der User nicht zurück zur Hauptansicht navigieren muss, um auf die vorherige Seite oder eine Übersichtsseite zu gelangen.
• Verbesserte Nutzererfahrung (UX), da die Navigation intuitiver ist und die Komplexität bei verschachtelten Webseiten reduziert.
• Reduktion der Absprungrate, da die Nutzer dazu tendieren, auf eine Seite innerhalb der Hierarchie zu klicken, was die Verweildauer erhöht.
• Vorteile für die Suchmaschinenoptimierung (SEO), da Google die Breadcrumbs als Hinweis auf die Seitenstruktur interpretiert, was die Indexierung verbessert.

Eine Breadcrumb Navigation lässt sich in WordPress sehr einfach umsetzen und nimmt nur wenig Platz auf der eigenen Webseite ein. Sie ist ein Must-have, um bei komplexen Webseiten Absprungraten (Bounce Rate) zu reduzieren und den User durch die Inhalte zu führen.

3 Arten von Breadcrumbs im Überblick

Breadcrumb Navigationen unterscheiden sich von klassischen Klickpfaden, obwohl beide ähnliche Informationen nutzen können. Der Unterschied lässt sich vereinfacht so erklären: Klickpfade stellen den exakt vom Nutzer zurückgelegten Pfad auf der Webseite dar, inklusive potenziell unlogischer oder zirkulärer Bewegungen. Breadcrumbs hingegen basieren in der Regel auf der strukturierten Darstellung der Daten. Je nach Art der Navigation bilden sie also den exakten Klickpfad oder beziehen sich auf Hierarchieebenen und Eigenschaften der Webseite.

Durch dieses Prinzip lässt sich jede Breadcrumb Navigation einer der folgenden drei Arten zuordnen.

Pfadbasierte Breadcrumbs (Path-Based)

Home > Herrenmode > Winter > Alle > Zurück zu Winter > Hosen > Home

Diese Variante spiegelt immer den tatsächlichen Weg wider, den der Nutzer auf der Webseite gegangen ist. Diese Darstellung ist zwar informativ, wird bei tief verschachtelten Webseiten jedoch schnell unübersichtlich. Zudem sind viele Funktionen einer solchen Navigation bereits über die Vor- und Zurück-Buttons als Teil des User Interfaces der meisten Browser abgedeckt.

Hierarchische Breadcrumbs (Location-Based)

Home > Herrenmode > Winter > Hosen und Jeans

Hier zeigt die Navigation die Position einer Seite innerhalb einer strukturellen Hierarchie der Webseite. So kann der Nutzer nach dem Lesen eines Inhalts beispielsweise mit einem Klick auf die verschiedenen übergeordneten Kategorieseiten zugreifen. Hilfreich ist das beispielsweise bei Wikis oder Mode-Onlineshops mit vielen Ober- und Unterkategorien (siehe Beispiel oben).

Attributbasierte Breadcrumbs (Attribute-Based)

Home > Damenmode > Schuhe > Sneaker > Größe 38

Diese Variante stellt die Kategorie oder Attribute dar, zu denen die Seite gehört. Diese Art der Navigation wird beispielsweise im E-Commerce eingesetzt, wenn Produkte nach Attributen wie Farbe, Marke oder Preis gruppiert werden sollen. Breadcrumbs dieser Art erfordern eine enge Verbindung mit der Datenbank und den Such- und Personalisierungsfunktionen der Webseite. Sie lohnen sich immer dann, wenn Filter-Funktionen für den Nutzer am Ende besonders nützlich sind.

Jede Art der Breadcrumb Navigation bietet am Ende einen Mehrwert für den Nutzer und steigert das Ranking-Potenzial einer Seite. Die Wahl ist hierbei lediglich von der Struktur und Zielsetzung der Webseite abhängig und sollte gut überlegt sein – denn meist wird diese Orientierungshilfe zur Hauptnavigation.

Wann sind Breadcrumbs sinnvoll?

Eine Breadcrumb Navigation ist dann sinnvoll, wenn die Webseite eine komplexe und umfangreiche Seitenstruktur mit vielen Unterseiten und Kategorien aufweist. Sie verbessern auf solchen die User-Experience und Usability, zudem nehmen sie indirekten Einfluss auf das Ranking der Seite in den Suchergebnissseiten (SERPs). Damit die Breadcrumbs jedoch ihren Zweck erfüllen können, ist eine klare und für den Nutzer logische Seitenstruktur entscheidend.

Fehlt eine solche Hierarchie oder ist die Struktur nicht eindeutig, verwirren Breadcrumbs den Nutzer eher, da dieser nicht erkennt, wie die Unterseiten zusammenhängen. Zudem nicht erforderlich ist die zusätzliche Orientierungshilfe, wenn es nur einige große Seiten ohne Unterkategorien gibt.

Breadcrumbs werden nicht nur auf Webseiten genutzt, sondern finden auch in Dateimanagern Anwendung, wo sie die Navigation innerhalb komplexer Dateistrukturen erleichtern. Auf einen Blick erkennt der Nutzer, wo eine spezifische Datei abgespeichert ist und wie er zum übergeordneten Verzeichnis zurückkehren kann. Hierdurch können Dokumente einfacher verschoben werden und auch komplexe Strukturen bleiben übersichtlich und geordnet.

Praktische Umsetzung und Implementierung

Um den genauen Aufbau einer Seitenstruktur festzulegen, lohnt es sich, eine Sitemap zu erstellen. Hierbei handelt es sich um eine strukturierte Übersicht der Website mit allen Unterseiten. Dabei wird auch deutlich, ob die Inhalte logisch zusammenhängen oder ob es Lücken gibt. Der Nutzer sollte zudem alle Breadcrumbs interaktiv und leicht bedienen können, auch hier sind Vorabtests sinnvoll. Anhand dieses Schaubildes kann anschließend eine Breadcrumb Navigation erstellt werden, die zur jeweiligen Webseite passt.

Um die Breadcrumbs anschließend auf der eigenen Website umzusetzen, kann man unterschiedliche Vorgehensweisen verfolgen.

Implementierung durch Plug-in

Verwendest du ein gängiges Content-Management-System (CMS) wie beispielsweise WordPress, gibt es vermutlich bereits ein passendes Breadcrumb-Plug-in. Diese nehmen dir einen Großteil der Arbeit ab, denn sie übernehmen die Kategorien und Seitenhierarchien und wandeln sie in Breadcrumbs um. Ein weiterer Vorteil ist die automatisierte Integration strukturierter Daten, wodurch Breadcrumbs auch in den Suchergebnisseiten (SERPs) korrekt angezeigt werden.

Plug-ins sind ideal für eine schnelle und einfache Lösung zur Umsetzung einer Breadcrumb Navigation, die keine weiterführenden technischen Kenntnisse erfordert.

PHP und JavaScript

Wenn du die Kontrolle über jede Funktion in der Breadcrumb Navigation behalten möchtest, dann kannst du diese direkt in den Quellcode der Seite integrieren, etwa mit PHP oder JavaScript. Hiermit lassen sich auch dynamische Breadcrumbs erstellen, die auf spezifischen Seitendaten oder der URL basieren. Hierfür erfordert es jedoch tiefere Programmierkenntnisse und mehr Zeit als mit vorgefertigten Plug-ins.

Eigene Option im CMS

Je nach Shopsystem oder CMS gibt es bereits in den Optionen im Backend die Möglichkeit, eine Breadcrumb-Navigation zu aktivieren. In diesem Falle ist eine Installation eines Plug-ins oder die Verwendung von Programmiersprachen nicht mehr notwendig.

Integration durch HTML

Bei dieser Möglichkeit werden die Links, die als Breadcrumbs ausgewiesen werden sollen, in einem div-Container zusammengefasst. Da das Design in diesem Falle durch das CSS festgelegt wird, wird die Erscheinungsform der Breadcrumbs automatisch an die Seite angepasst. Diese Methode ist besonders geeignet für statische Seiten oder individuelle Layout-Anforderungen, erfordert jedoch mehr Pflege und regelmäßige Aktualisierung der Breadcrumbs.

Relevanz von Breadcrumbs für SEO

Breadcrumb Navigationen spielen sowohl für die Usability als auch für die Suchmaschinenoptimierung (Technical SEO) eine wichtige Rolle. Sie erleichtern Nutzern die Navigation auf der Seite, da sie sofort deutlich machen, wo man sich aktuell befindet. Das verbessert nicht nur die Benutzerfreundlichkeit, sondern erhöht auch die Verweildauer, da User auf andere Seiten aufmerksam werden.

Diese Verhaltenssignale – besonders die längere Verweildauer und die geringere Absprungrate – werden von Suchmaschinen wie Google erkannt und positiv bewertet. Zudem integriert Google die Breadcrumbs immer mehr als Rich Snippets in die URL-Zeile der SERPs, was Usern mehr Kontext vermittelt und die Struktur der Webseite verbildlicht. Verbessert werden hierdurch sowohl das Ranking als auch die Indexierung der Seite, die Breadcrumbs sind ein entscheidender Faktor in der Onpage-Optimierung.

Suchmaschinen nutzen Breadcrumbs, um den Zusammenhang zwischen Seiten und deren Position innerhalb einer Hierarchie zu verstehen. Bei besonders großen Webseiten ist das ein Vorteil, da Suchmaschinen den Content besser kategorisieren und sinnvoll einordnen können.

Durch die Breadcrumb Navigation haben es Nutzer einfacher, sich auf einer komplexen Webseite zurechtzufinden und zwischen den Unterseiten zu navigieren. Absprungraten werden minimiert und die Verweildauer steigt, da User auch auf anderen Content aufmerksam werden. Zudem wirkt sich die bessere Seitenstruktur positiv auf die Platzierung in den SERPs und die Indexierung der Seite aus.

Breadcrumbs gehören heute zum Standard auf den meisten Webseiten – und das aus den oben genannten, guten Gründen!

Weblinks

Beitrag von Google: Wie funktionieren die Suchergebnisse?

Bedeutung der Seitenstruktur als Erfolgfaktor

Startleitfaden zur Suchmaschinenoptimierung von Google