NETPROFIT Werbeagentur Logo NETPROFIT Werbeagentur Logo
MNÜ

Lexikon Breadcrumb

Was bedeutet Breadcrumb? Breadcrumb einfach erklärt

Breadcrumb (dt. Brotkrümel) bezeichnet ein Navigationselement, das Nutzern hilft, ihren Standort auf einer Webseite oder Anwendung zu verfolgen. Breadcrumbs werden in der Regel am oberen Rand einer Seite angezeigt und bieten Links zu den übergeordneten Seiten, durch die ein Benutzer navigiert hat, um zur aktuellen Seite zu gelangen.

Breadcrumbs sind vergleichbar mit einem Pfad oder einer "Brotkrumen"-Trail, der den Weg eines Nutzers durch eine Webseite nachzeichnet. Jeder Breadcrumb-Link repräsentiert eine Hierarchieebene der Webseite, von der Startseite bis zur aktuellen Seite. Dieses Navigationselement dient dazu, die Orientierung zu erleichtern und ermöglicht es Benutzern, schnell zwischen verschiedenen Ebenen der Website zu wechseln, ohne den Zurück-Button des Browsers verwenden zu müssen.

Inhaltsübersicht
/files/dateien/bilder/lexikon/breadcrumb/breadcrumb-brotkruemelpfad.png

Beispiele Breadcrumb

Breadcrumbs können verschiedene Formen annehmen, erscheinen aber in der Regel als eine horizontale Spur von Links am oberen Rand einer Webseite. Auf einer E-Commerce-Webseite könnten Breadcrumbs zum Beispiel wie folgt aussehen:


Startseite > Elektronik > Computer & Tablets > Laptops > Apple Laptops


Dieser Breadcrumb-Pfad zeigt an, dass der Benutzer auf der Startseite begonnen hat, dann zum Bereich Elektronik, dann zum Bereich Computer und Tablets und schließlich zum Bereich Laptops navigiert ist. Der Pfad zeigt auch an, dass der Benutzer gerade Apple Laptops ansieht. Anhand dieser Informationen können Benutzer schnell erkennen, wo sie sich in der Hierarchie der Webseite befinden, und bei Bedarf zu den vorherigen Seiten zurücknavigieren.

Implementierung von Breadcrumbs auf der Webseite Best Practice für Breadcrumbs

1
Klar und verständlich

Beim Design von Breadcrumbs ist es wichtig, die Links klar und verständlich zu beschriften. Es bringt nichts, wenn die Nutzer*innen nicht auf Anhieb erkennen können, wo sie sich befinden oder wo die Links hinführen. Halte den Breadcrumb-Trail so kurz wie möglich, ohne wichtige Informationen auszulassen. Weniger ist oft mehr – der Nutzer soll auf einen Blick verstehen, wo er ist und wie er zurückkommt.

2
Hierarchisch strukturiert

Die „Brotkrümel“ sollten die Struktur deiner Webseite widerspiegeln und dem Nutzer zeigen, wie er sich innerhalb der Seitenhierarchie bewegt. Beschriftungen sollten klar und beschreibend sein, damit der Nutzer sofort erkennt, auf welcher Seite er sich gerade befindet und welche Seiten er zuvor besucht hat. Achte darauf, dass der Breadcrumb-Trail immer logisch und nachvollziehbar ist – so bleibt die Navigation einfach und übersichtlich.

3
Einheitliches Design

Ein konsistentes Design ist entscheidend. Egal, auf welcher Seite der Nutzer sich befindet, die Breadcrumbs sollten immer gleich aussehen. Das bedeutet, gleiche Schriftart, Farben und eine einheitliche Platzierung. Dadurch wirkt die Webseite professionell und die Nutzer können sich besser orientieren.

4
Benutzerfreundlichkeit im Fokus

Das Beste am Design ist, wenn es tatsächlich funktioniert. Teste die Breadcrumbs mit echten Nutzer*innen, um sicherzustellen, dass sie einfach zu verwenden sind und den gewünschten Zweck erfüllen. Benutzerfeedback ist hier Gold wert. Oft sind es die kleinen Anpassungen, die die größte Wirkung haben – also scheue dich nicht, nachzubessern.

Breadcrumb-Navigation und Usability

Die Bedeutung von Breadcrumbs in Bezug auf Usability wird besonders deutlich, wenn man die Herausforderungen herkömmlicher Navigationsmittel bedenkt. Obwohl Menüleisten und Browser-Buttons eine Navigation ermöglichen, sind sie mitunter umständlich und kompliziert. Im Sinne einer optimalen User Experience gilt die Regel:

Je weniger Klicks Nutzer benötigen, desto besser fällt die User-Experience aus. Dieser Grundsatz gilt insbesondere für die Navigation. Es gibt kaum etwas Nervigeres, als beim Zurückspringen ständig auf den „Zurück“-Pfeil im Browser klicken oder eine Kategorie in der Menüleiste von neuem durchforsten zu müssen.

Breadcrumbs bieten hier eine elegante Lösung. Sie geben den Nutzern nicht nur die Möglichkeit, schnell und einfach zu vorherigen Seiten zu gelangen, sondern sie schaffen auch Transparenz über die Hierarchie und Struktur der Website. Selbst wenn Nutzer über externe Links direkt auf eine Seite gelangen, zeigt die Breadcrumb-Navigation sofort ihre aktuelle Position. Dies fördert nicht nur das Verständnis der Seitenstruktur, sondern lädt auch zum Erkunden der Seite ein, wodurch das Risiko von Nutzerabbrüchen reduziert wird. Die unkomplizierte Integration und das nahtlose Einpassen in jedes Design machen Breadcrumbs zu einem wertvollen Element für eine verbesserte User Experience. Es gibt somit wenig Grund, auf ein Breadcrumb-Design zu verzichten, außer bei Websites mit sehr flacher Hierarchie, die nur begrenzt von dieser sekundären Navigationsform profitieren würden.

Breadcrumbs und SEO

Breadcrumbs können sich positiv auf die Suchmaschinenoptimierung (SEO) auswirken, indem sie den Crawlern der Suchmaschinen einen klaren und strukturierten Pfad vorgeben, dem sie folgen können. Das bedeutet, dass die Suchmaschinen-Roboter genau wissen, welche Struktur oder Hierarchie sie bei der Indexierung bzw. bei der Aufnahme in ihr Verzeichnis, berücksichtigen können.

Durch die Anzeige der Hierarchie einer Webseite können Breadcrumbs den Suchmaschinen helfen, die Beziehungen zwischen den Seiten und deren Organisation zu verstehen. Dies kann zu einer besseren Sichtbarkeit in den Suchmaschinenergebnisseiten (SERPs) führen.

Darüber hinaus können Breadcrumbs auch zusätzliche interne Verlinkungsmöglichkeiten bieten, was die SEO einer Webseite weiter verbessern kann.

Beispiel für eine Breadcrumb-Hierarchie:

  1. Startseite
  2. Kategorie A
  3. Unterkategorie B
  4. Produktseite C

In diesem Beispiel würde eine Suchmaschine, die die Breadcrumbs analysiert, verstehen, dass die Produktseite C unter der Unterkategorie B in der Kategorie A liegt und dass alle diese Seiten von der Startseite aus erreichbar sind. Dies unterstützt die Suchmaschine dabei, die Seiten in einer logischen Reihenfolge zu indexieren, was wiederum die Präsentation in den Suchergebnissen verbessern kann.

Einbindung der Breadcrumbs

Die Einbindung eines Breadcrumbs in eine Webseite kann je nach Plattform und Design der Webseite auf verschiedene Weise erfolgen.

  1. Ein Ansatz besteht darin, die Breadcrumb-Liste manuell in HTML und CSS der Webseite zu kodieren. Dabei wird eine Liste von Links erstellt, die der aktuellen Seite des Nutzers und den vorherigen Seiten entsprechen.
  2. Alternativ dazu bieten einige Plattformen wie WordPress oder Shopify eine integrierte Breadcrumb-Funktion, die mit wenigen Klicks aktiviert werden kann.

Unabhängig von der verwendeten Methode ist es wichtig, bei der Implementierung von Breadcrumbs einige Punkte zu berücksichtigen, wie etwa, dass die Breadcrumbs gut sichtbar und an einer einheitlichen Stelle auf der Webseite platziert sind, z. B. am oberen Rand der Seite.

Arten von Breadcrumbs

Es gibt drei Haupttypen von Breadcrumbs:

  • Ortsbezogene Breadcrumbs sind der häufigste Typ und zeigen den aktuellen Standort des Benutzers innerhalb der Hierarchie einer Seite an. Wenn ein Benutzer beispielsweise eine Produktseite innerhalb einer bestimmten Kategorie anschaut, zeigt ein ortsbezogener Breadcrumb die Kategorie-, Unterkategorie- und Produktseiten in dieser Reihenfolge an.
  • Attributbasierte Breadcrumbs zeigen den aktuellen Standort des Benutzers auf der Grundlage bestimmter Produktattribute an. Wenn ein Benutzer zum Beispiel eine Produktseite für ein rotes, kurzärmeliges T-Shirt anschaut, würde ein attributbasierter Breadcrumb die Farbe, die Ärmellänge und die Produktseiten in dieser Reihenfolge anzeigen.
  • Historienbasierte Breadcrumbs zeigen den vorherigen Browserverlauf des Benutzers auf einer Webseite an. Wenn ein User beispielsweise zuvor die Produktseite für ein blaues Hemd aufgerufen hat, würde ein Verlaufsbreadcrumb die zuvor aufgerufene Produktseite für blaue Hemden und die aktuelle Produktseite in dieser Reihenfolge anzeigen.

Welche Art von Breadcrumb verwendet wird, hängt von der Struktur der Webseite und dem Browsing-Verhalten des Nutzers ab. Eine gut gestaltete Breadcrumb-Anzeige kann den Nutzern helfen, effizienter durch eine Webseite zu navigieren und die Nutzererfahrung insgesamt zu verbessern.

Breadcrumbs are a handy UX feature that helps improve user navigation across a website, guiding users through the site hierarchy and reducing the number of actions needed to reach higher-level pages.

DEV Community

Vorteile Breadcrumb

Was bringt nun die Implementierung eines Breadcrumbs auf der Webseite? Wir haben die wichtigsten Vorteile kurz zusammengefasst:

  • Die "Brotkrümel" helfen den Nutzern zu verstehen, wo auf der Webseite sie sich befinden und wie sie überhaupt dorthin gelangt sind. Dies erleichtert die Navigation und das Auffinden der benötigten Informationen und Produkte enorm.
  • Auch die SEO profitiert von der Verwendung von Breadcrumbs: Sie können Suchmaschinen helfen, die Hierarchie einer Website zu verstehen, was das Crawlen und Indizieren von Seiten erleichtert. Dadurch ergibt sich ein besseres Ranking in den Suchergebnissen einer Suchanfrage.
  • Ein weiterer zentraler Vorteil von Breadcrumbs ist eine mögliche höhere Verweildauer der User auf der Webseite: Breadcrumbs können Nutzer dazu ermutigen, mehr Seiten auf einer Website zu erkunden, was zu einer längeren Verweildauer auf der Website und einem höheren Engagement führt. Somit sinkt die Absprungrate (Bounce Rate), was ebenso zu einer besseren Platzierung in den SERPs beitragen kann.

Nachteile Breadcrumbs

Dennoch gibt es auch zwei zentrale Nachteile, die trotz der oben genannten Vorteile von Breadcrumbs nicht vernachlässigt werden sollten:

  • Die Breadcrumbs nehmen wertvollen Platz auf einer Webseite ein - wenn sie am oberen Rand (above the fold) platziert werden.
  • Bei Webseiten mit einer sehr komplexen Hierarchie können Breadcrumbs für die Nutzer nur überwältigend und verwirrend wirken.

FAQ Häufige Fragen zu Breadcrumbs

Was ist ein Breadcrumb?

Breadcrumb lässt sich mit Brotkrümel übersetzen und meint eine Pfad-Navigation innerhalb einer Webseite. Die Breadcrumb-Navigation zeigt den Besuchern einer Webseite, wo auf der Webseite sie sich befinden und wie sie dorthin gekommen sind.

Was ist ein Beispiel für eine Breadcrumb-Navigation?

Ein Beispiel für eine Breadcrumb-Navigation könnte etwa so aussehen:

Startseite > Leistungen > Online-Marketing > Content-Marketing

Warum sind Breadcrumbs wichtig?

Breadcrumbs verbessern die Benutzerfreundlichkeit (UX), indem sie den Nutzer*innen ermöglichen, schnell zwischen verschiedenen Ebenen der Webseite zu navigieren. Besonders auf großen Webseiten oder E-Commerce-Seiten helfen Breadcrumbs, die Übersicht zu behalten und die Anzahl der Klicks zu reduzieren, die notwendig sind, um zu einer höheren Ebene zurückzukehren.

Wann sollte ich Breadcrumbs auf meiner Webseite verwenden?

Breadcrumbs sind besonders nützlich auf Webseiten mit komplexer Hierarchie oder vielen Unterseiten, wie z.B. Online-Shops oder Nachrichtenseiten. Bei flachen Seitenstrukturen oder Ein-Seiten-Webseiten sind sie oft nicht notwendig​.

Quellen, weiterführende Links

Suche
Home
Anrufen
Kontakt
nach oben
insert coin
Katzen YouTube Thumbnail

Mit dem Aufruf des Videos erklären Sie sich einverstanden, dass Ihre Daten an YouTube übermittelt werden und Sie die Datenschutzerklärung akzeptieren.