Breadcrumb Navigation

Die Breadcrumb Navigation, auch als Brotkrümelnavigation bezeichnet, ist eine sekundäre Navigationstechnik, die den Besuchern einer Webseite hilft, ihre Position innerhalb der Seitenstruktur zu erkennen und nachzuvollziehen.

Sie bietet eine visuelle Darstellung des Pfades, den ein Nutzer von der Startseite bis zur aktuellen Seite zurückgelegt hat, und ermöglicht es ihm, einfach zu höheren Ebenen der Webseite zurückzukehren.

Die Bezeichnung “Breadcrumb” (dt. Brotkrümel) leitet sich von der Geschichte “Hänsel und Gretel” der Gebrüder Grimm ab, in der die beiden Protagonisten Brotkrümel auf ihrem Weg hinterlassen, um den Rückweg aus dem Wald zu finden.

Analog dazu geben Breadcrumbs den Webseitenbesuchern Orientierungspunkte, um ihren Weg durch komplexe Webseitenstrukturen zu navigieren.

Die Breadcrumb Navigation hat mehrere Vorteile, darunter:

Verbesserte Benutzerfreundlichkeit: Breadcrumbs erleichtern die Navigation und helfen Benutzern, sich auf der Webseite zurechtzufinden.
Erhöhte Transparenz: Breadcrumbs verdeutlichen die Hierarchie und Struktur einer Webseite.
Schnellerer Zugriff auf übergeordnete Seiten: Breadcrumbs ermöglichen es Benutzern, direkt zu höheren Ebenen der Webseite zurückzukehren, ohne den gesamten Navigationspfad erneut durchlaufen zu müssen.

Ein Beispiel für Breadcrumb Navigation wäre:

Home > Kategorie > Unter-Kategorie > Artikel

In diesem Beispiel repräsentiert jedes Element einen Abschnitt der Webseite, wobei das Home-Symbol die Startseite darstellt und die anderen Elemente verschiedene Ebenen der Seitennavigation abbilden. Durch Anklicken eines Elements in der Breadcrumb-Navigation können Benutzer direkt zu diesem Abschnitt der Webseite gelangen.

Es gibt unterschiedliche Arten von Breadcrumbs, die im weiteren Verlauf des Artikels behandelt werden.

Warum ist eine Breadcrumb Navigation für die Nutzererfahrung relevant?

Die Breadcrumb Navigation spielt eine entscheidende Rolle für die Nutzererfahrung (User Experience, UX), da sie den Webseitenbesuchern Orientierung und einfachen Zugang zu relevanten Inhalten bietet.

Eine gut durchdachte Breadcrumb-Navigation trägt maßgeblich zur Zufriedenheit der Nutzer bei und kann ihre Interaktion mit der Webseite positiv beeinflussen.

Die Relevanz einer Breadcrumb Navigation für die Nutzererfahrung zeigt sich in verschiedenen Aspekten:

Intuitive Navigation: Breadcrumbs unterstützen die Benutzer bei der Orientierung innerhalb einer Webseite und zeigen ihnen den Weg zurück zu übergeordneten Seiten. Dies erleichtert die Navigation und minimiert die Wahrscheinlichkeit, dass Benutzer sich “verlaufen”.
Struktur und Hierarchie: Breadcrumbs visualisieren die Struktur einer Webseite und machen die Hierarchie der einzelnen Seiten transparent. Dies hilft Benutzern dabei, ein besseres Verständnis der Webseitenarchitektur zu erlangen und schneller die gewünschten Inhalte zu finden.
Reduzierung der Klicks: Durch die Breadcrumb Navigation können Benutzer direkt zu höheren Ebenen der Webseite zurückkehren, ohne den gesamten Navigationspfad erneut durchlaufen zu müssen. Dies spart Zeit und Aufwand und erhöht die Effizienz der Navigation.

Darüber hinaus kann eine positive Nutzererfahrung durch die Verwendung von Breadcrumbs indirekt auch die Absprungrate (Bounce Rate) verringern und die Verweildauer auf der Webseite erhöhen.

Eine niedrigere Absprungrate und längere Verweildauer sind Faktoren, die von Suchmaschinen wie Google bei der Bewertung der Webseitenqualität und der Suchmaschinenoptimierung (SEO) berücksichtigt werden.

Um die Vorteile der Breadcrumb Navigation für die Nutzererfahrung voll auszuschöpfen, sollten Webseitenbetreiber darauf achten, dass die Breadcrumbs übersichtlich gestaltet und leicht verständlich sind. Sie sollten zudem darauf achten, dass die Breadcrumbs konsistent auf der gesamten Webseite eingesetzt werden, um eine einheitliche Benutzererfahrung zu gewährleisten.

Wie unterstützt die Breadcrumb Navigation die SEO-Strategie?

Die Breadcrumb Navigation leistet einen wertvollen Beitrag zur Suchmaschinenoptimierung (SEO), indem sie die Benutzerfreundlichkeit und Zugänglichkeit einer Webseite verbessert.

Indem sie den Besuchern eine klare und einfache Navigation bietet, kann die Breadcrumb Navigation auch positive Auswirkungen auf verschiedene SEO-relevante Faktoren haben.

Die Breadcrumb Navigation unterstützt die SEO-Strategie in folgenden Bereichen:

Verbesserung der Crawlability: Suchmaschinen-Crawler, wie der Googlebot, nutzen Breadcrumbs, um die Struktur einer Webseite besser zu verstehen. Dies erleichtert das Crawling und die Indexierung der Seiten, was zu einer besseren Sichtbarkeit in den Suchergebnissen führen kann.
Erhöhung der Click-Through-Rate (CTR): Durch die klare Darstellung des Navigationspfads können Breadcrumbs die CTR erhöhen, da Benutzer dazu ermutigt werden, auf höherwertige Seiten innerhalb der Webseite zu klicken. Eine höhere CTR wird von Suchmaschinen als Indikator für die Relevanz und Qualität einer Webseite angesehen.
Verringerung der Absprungrate: Breadcrumbs tragen dazu bei, die Absprungrate zu reduzieren, indem sie Benutzern eine bessere Orientierung und einfachere Navigation bieten. Eine niedrigere Absprungrate signalisiert Suchmaschinen, dass die Webseite für die Benutzer relevant ist, und kann somit die Position in den Suchergebnissen positiv beeinflussen.

Google selbst hat die Bedeutung der Breadcrumb Navigation für die SEO anerkannt und empfiehlt die Verwendung von Breadcrumbs in den Google Search Console-Hilfeartikeln.

Webseitenbetreiber können durch die Einbindung von strukturierten Daten für Breadcrumbs in ihren HTML-Code dafür sorgen, dass die Breadcrumbs auch in den Suchergebnissen angezeigt werden.

Dies trägt zur Verbesserung der Sichtbarkeit und Auffindbarkeit der Webseite bei und kann potenzielle Besucher dazu animieren, auf die Seite zu klicken.

Welche technischen Aspekte sind bei der Umsetzung von Breadcrumbs zu beachten?

Die korrekte Umsetzung von Breadcrumbs erfordert die Berücksichtigung verschiedener technischer Aspekte, um eine optimale Funktionalität und Benutzerfreundlichkeit zu gewährleisten. Die folgenden Punkte sollten bei der Implementierung von Breadcrumbs beachtet werden:

HTML-Struktur: Die Breadcrumb Navigation sollte in einer geordneten Liste (z. B. mit dem <ol>-Tag) implementiert werden, um die hierarchische Struktur der Webseite widerzuspiegeln. Jedes Element der Liste sollte mit dem <li>-Tag und einem entsprechenden Link versehen werden, der auf die jeweilige Seite verweist.
CSS-Styling: Die Breadcrumbs sollten visuell ansprechend und übersichtlich gestaltet sein, um eine optimale Benutzerfreundlichkeit zu gewährleisten. Hierzu kann man individuelle CSS-Stile anwenden, um beispielsweise die Schriftgröße, Farben und Abstände der Breadcrumb-Elemente anzupassen.
Strukturierte Daten: Um die Sichtbarkeit der Breadcrumbs in den Suchergebnissen zu erhöhen, sollte man strukturierte Daten in Form von JSON-LD oder Microdata integrieren. Google empfiehlt die Verwendung des Schema.org-Vokabulars für BreadcrumbList und ListItem. Dies ermöglicht es Suchmaschinen, die Breadcrumb-Informationen korrekt zu interpretieren und in den Suchergebnissen anzuzeigen.
JavaScript und dynamische Webseiten: Bei der Implementierung von Breadcrumbs auf dynamischen Webseiten oder in Single-Page-Applications (SPAs) sollte darauf geachtet werden, dass die Breadcrumbs korrekt aktualisiert werden, wenn der Inhalt der Seite sich ändert. Hierfür kann man JavaScript-Frameworks wie React oder Angular nutzen, um die Breadcrumb-Navigation dynamisch anzupassen.

Wie kann man Breadcrumbs für verschiedene Content-Management-Systeme (CMS) einrichten?

Die Einrichtung von Breadcrumbs variiert je nach dem verwendeten Content-Management-System (CMS). Im Folgenden werden einige gängige CMS und deren Breadcrumb-Integration vorgestellt:

WordPress: Bei der Nutzung von WordPress als CMS kann man Breadcrumbs mithilfe von Plugins oder individuellen Code-Anpassungen im Theme einrichten. Beliebte Plugins wie Yoast SEO oder Breadcrumb NavXT bieten einfache Lösungen, um Breadcrumbs auf der gesamten Webseite einzubinden. Alternativ kann man Breadcrumbs auch manuell im Theme-Code implementieren, indem man entsprechende Funktionen in der functions.php-Datei und den gewünschten Template-Dateien einfügt.
Joomla: Für Joomla-Websites gibt es mehrere Erweiterungen, die Breadcrumbs ermöglichen. Eine Option ist das Standardmodul “Breadcrumbs”, das in jeder Joomla-Installation enthalten ist. Dieses Modul kann über die Modulverwaltung aktiviert und an einer geeigneten Position im Template platziert werden. Weitere Breadcrumb-Module von Drittanbietern stehen zur Verfügung und bieten zusätzliche Funktionen und Anpassungsmöglichkeiten.
Drupal: In Drupal ist die Breadcrumb-Navigation in der Regel Teil des verwendeten Themes. Man kann Breadcrumbs über die Theme-Einstellungen aktivieren oder die entsprechenden PHP- und Twig-Dateien im Theme bearbeiten. Zusätzlich gibt es Module wie “Easy Breadcrumb” oder “Path Breadcrumbs”, die erweiterte Breadcrumb-Funktionalitäten bieten und eine einfache Integration ermöglichen.
Shopware: Für Shopware-basierte Onlineshops kann man Breadcrumbs über die Theme-Konfiguration oder die Anpassung von Smarty-Template-Dateien einrichten. Einige Shopware-Themes integrieren bereits standardmäßig Breadcrumbs, die über die Theme-Einstellungen aktiviert werden können. Bei Bedarf kann man die Breadcrumb-Struktur durch Anpassungen der Template-Dateien oder die Nutzung von Shopware-Plugins erweitern.

Welche Tools und Plugins sind für die Implementierung von Breadcrumbs empfehlenswert?

Es gibt zahlreiche Tools und Plugins, die bei der Implementierung von Breadcrumbs hilfreich sein können. Die folgende Liste stellt einige empfehlenswerte Lösungen für verschiedene Content-Management-Systeme (CMS) und Anwendungsbereiche vor:

Yoast SEO (WordPress): Das bekannte SEO-Plugin Yoast SEO bietet eine integrierte Breadcrumb-Funktion, die eine einfache Implementierung und Anpassung der Breadcrumb Navigation ermöglicht. Die Einstellungen für Breadcrumbs können direkt im WordPress-Backend vorgenommen werden, und das Plugin generiert automatisch die entsprechende HTML-Struktur und strukturierten Daten für Suchmaschinen.
Breadcrumb NavXT (WordPress): Breadcrumb NavXT ist ein weiteres populäres WordPress-Plugin, das sich ausschließlich auf die Implementierung von Breadcrumbs konzentriert. Es bietet zahlreiche Anpassungsmöglichkeiten, einschließlich der Option, eigene Breadcrumb-Templates und Formatierungen zu erstellen.
Easy Breadcrumb (Drupal): Easy Breadcrumb ist ein leichtgewichtiges Drupal-Modul, das eine automatische Breadcrumb-Generierung für Drupal-Websites ermöglicht. Es verwendet die URL-Struktur, um die Breadcrumbs zu erstellen, und bietet einfache Anpassungsoptionen, um die Breadcrumb-Struktur an individuelle Anforderungen anzupassen.
Path Breadcrumbs (Drupal): Das Path Breadcrumbs-Modul für Drupal bietet erweiterte Funktionen zur Breadcrumb-Generierung, einschließlich der Möglichkeit, benutzerdefinierte Breadcrumb-Pfade für einzelne Seiten oder Inhalte festzulegen. Es bietet zudem Unterstützung für mehrsprachige Websites und kann mit anderen Drupal-Modulen wie Views oder Panels integriert werden.
Standard Breadcrumbs-Modul (Joomla): Das in Joomla enthaltene Standard Breadcrumbs-Modul bietet eine grundlegende Breadcrumb-Navigation, die über die Modulverwaltung aktiviert und konfiguriert werden kann. Es unterstützt mehrsprachige Websites und kann mit verschiedenen Joomla-Templates verwendet werden.
Google Structured Data Markup Helper: Dieses Online-Tool von Google hilft beim Hinzufügen von strukturierten Daten (Schema.org-Markup) zu Breadcrumbs. Mit dem Tool kann man die Breadcrumb-HTML-Struktur eingeben und die entsprechenden strukturierten Daten generieren lassen, um sie anschließend in den Quellcode der Webseite einzufügen.

Die Auswahl des geeigneten Tools oder Plugins hängt von verschiedenen Faktoren ab, wie dem verwendeten CMS, den individuellen Anforderungen und den technischen Fähigkeiten des Webseitenbetreibers. Durch die Verwendung dieser empfohlenen Tools und Plugins können Breadcrumbs effektiv und benutzerfreundlich implementiert werden, um die Nutzererfahrung und die SEO-Performance zu verbessern.