Breadcrumb


Breadcrumb (deutsch: Brotkrumen, Brotkrümel) ist eine sekundäre Navigation innerhalb einer Webseite. Sie wird auch als Breadcrumb- oder Brotkrumen-Navigation oder Brotkrümelnavigation bezeichnet. „Brotkrumen“ bieten auf der Webseite den Benutzern in Form von internen Links die Möglichkeit, den Weg zurück zur Einstiegsseite zu finden oder andere Ebenen der Webseite schnell zu erreichen. Bei der Brotkrumen-Navigation kann der User somit nachvollziehen, welche Seiten er vorher besucht hat. Diese sekundäre Pfad-Navigation ist üblicherweise seitenhierarchisch aufgebaut und zeigt den logischen Pfad von der Einstiegsseite bis hin zur aktuellen Position. Eine Breadcrumb Navigation befindet sich häufig im oberen Seitenbereich und ist in der Regel als Design-Element nicht allzu auffällig.

Hintergrund zur Breadcrumb-Navigation

Der Begriff leitet sich aus dem Märchen „Hänsel und Gretel“ der Gebrüder Grimm ab. Im Märchen haben die beiden Kinder Brotkrümel verwendet, um den Weg zurück nach Hause zu finden. Auf Websites übertragen, erledigen Breadcrumb die gleiche Aufgabe: Sie machen den Weg des Nutzers nachvollziehbar und erlauben ihm ein einfaches Springen zu Hierarchieebenen, die er vorher besucht hat. Die am häufigsten genutzte Variante kann folgendermaßen aussehen: 

Startseite > Wiki > Breadcrumb

Breadcrumb

Grafische Darstellung von Breadcrumbs

Mitunter werden die Trennzeichen durch Pfeile, andere typografische Symbole oder Grafiken und Buttons dargestellt. Durch einen Klick gelangt der Nutzer entweder zur Startseite oder zur Hauptseite des Wikis. Der letzte Punkt der Navigation ist indessen nicht anklickbar. Breadcrumbs werden stets im Above the fold-Bereich einer Website angezeigt; sie halten sich jedoch in Sachen Schriftgröße und Farbgebung dezent zurück, damit die Hauptnavigation nicht in den Hintergrund rückt. Auch Konsistenz ist relevant: Wenn eine sekundäre Navigation verwendet wird, sollte sie auf allen Seiten und Unterseiten verfügbar sein.

Arten von Breadcrumbs

Genau genommen sind Breadcrumbs zwar von Klickpfaden zu unterscheiden, weil Klickpfade sich durch Sprünge in unterschiedliche Hierarchieebenen auszeichnen können, möglicherweise zirkulär und nicht unbedingt logisch sind. Aber die Daten zur Erzeugung von Breadcrumbs stammen häufig aus den Klickpfaden, die der Nutzer verfolgt hat. Je nach Breadcrumb-Variante ist die Navigation mit Klickpfaden identisch oder sie ist relativ zu anderen Elementen und Ebenen der Website.

Breadcrumb Navigationen können entsprechend danach unterschieden werden, auf welche relative Website-Ebenen oder Klickpfade sie sich beziehen:[1]

  • Klickpfad (Path): Dies ist eine pfadbasierte Navigation, die den tatsächlichen Klickpfad nachzeichnet und die aktuelle Position anzeigt. Bei umfangreichen Pfaden und Websites mit tiefgehender Struktur ist diese Variante wenig praktikabel. Zumal der Nutzer mit den Vor- und Zurück-Buttons des Browsers die gleichen Funktionen realisieren kann. Darüber hinaus ist die Implementation von den Daten aus der Klickpfad-Analyse abhängig und unter Umständen können pfadbasierte Navigationen sehr lang werden.
  • Ort (Location): Eine sogenannte location-based Breadcrumb verweist auf die aktuelle Position des Nutzers in der Hierarchie der Website. Websites mit mehr als zwei Unterebenen setzen diese Variante häufig ein, um die Vaterelemente im Seitenbaum der Website schnell erreichen zu können.
  • Kategorien (Attribute): Attributbasierte Breadcrumbs erlauben dem Nutzer zu sehen zu welchen Kategorien die aktuell besuchte Seite gehört und welche Attribute dieser Seite zugeschrieben werden. In der Regel werden solche Navigationshilfen von E-Commerce-Websites und Onlineshops auf Produktebene eingesetzt und gemeinsam mit Such- und Personalisierungsfunktionen angeboten. Die Implementation ist entsprechend komplexer, da die Breadcrumb an die Funktionen der Webseite und eventuell auch an die Datenbank angepasst werden muss.[2]

Einsatzmöglichkeiten

Eine Breadcrumb-Navigation wird vor allem bei sehr großen Webseiten und Portalen verwendet, die eine komplizierte hierarchische Struktur aufweisen. Auch bei Onlineshops sind diese Navigationsmöglichkeiten häufig anzutreffen, da sie dem Benutzer behilflich sind, sich in der großen Kategorie- und Produktauswahl zu Recht zu finden. Hat eine Webseite keine logische Hierarchie, dann ist vom Einsatz der Brotkrumen-Navigation abzuraten, weil gerade die Logik einen Vorteil für den Nutzer darstellt.

Eine sinnvolle Möglichkeit ist es, zunächst eine Sitemap zu erzeugen und dann zu überprüfen, ob eine Breadcrumb Navigation dem Nutzer helfen würde. Falls die Seitenstruktur mehrere Ebenen umfasst, ist dies in der Sitemap ersichtlich. Anschließend kann die Breadcrumb wie die Sitemap aufgebaut werden, weil sie die Seitenarchitektur widerspiegelt.

Wichtig ist folgende Regel: Die Brotkrumen Navigation ist stets eine sekundäre Hilfe, die weder ein Menü noch eine Navigation ersetzt. Deshalb sollten primäre und sekundäre Navigation auch hinsichtlich des Layouts und Designs voneinander getrennt werden.

Umsetzung von Breadcrumbs auf der Webseite

Breadcrumbs können auf unterschiedliche Arten eingebunden werden:

  • Plug-in: Je nach CMS (zum Beispiel WordPress) sind verschiedene Plug-ins für Breadcrumbs möglich. Das Zusatzprogramm erlaubt es, Einstellungen vorzunehmen und die sekundäre Navigation einzubinden. Optional ist die Unterstützung von strukturierten Daten oder Mikrodaten, damit Breadcrumbs auch von Suchmaschinen eingelesen und auf den SERPs angezeigt werden.
  • PHP und JavaScript: Alternativ können Codeteile verschiedener Programmier- und Skriptsprachen in den Quellcode eingebunden werden. Eine Funktion in PHP würde zum Beispiel definiert werden, um sie später im Dokument aufzurufen.[3] Mit JavaScript erfolgt dies auf ähnliche Weise – wobei auch dynamisch generierte Websites eine Breadcrumb erhalten können.[4], [5]
  • Content Management System: Einige CMS und Shopsysteme bieten Breadcrumbs als Option im Backend an. Die Implementation ist meist relativ einfach und mit wenigen Klicks möglich.
  • HTML: Die manuelle Variante basiert auf Links, die in einem Div zusammengefasst werden. Relative Pfade deuten auf die vorher besuchten Seiten hin. Das Design wird via CSS gestaltet und sollte konsistent sein.[6]

Vorteile einer Breadcrumb-Navigation

Breadcrumbs haben folgende Vorteile für die Usability von Websites:

  • Sie zeigen Nutzern die aktuelle Position an – relativ zu anderen Hierarchieebenen der Website. Somit sind Breadcrumbs eine Hilfestellung zur Benutzung und Navigation.
  • Sie erlauben es, mit einem Klick nach oben in die Seitenhierarchie zu navigieren. Wenn Nutzer über die Google-Suche oder etwaige Deep Links mitten in der Informationsarchitektur landen, sind Breadcrumbs eine schnelle und unkomplizierte Navigationshilfe.
  • Breadcrumbs nehmen nur wenig Platz auf der Website ein und sind relativ leicht zu implementieren.
  • Sie verursachen laut Jakob Nielsen, einem bekannten Usability-Experten, nie Probleme beim User-Testing. Nutzer wissen, was diese sekundäre Navigation ist und wie sie Breadcrumbs verwenden.[7]

Bedeutung für die Suchmaschinenoptimierung

Aufgrund von zahlreichen Usability Tests wird angenommen, dass Breadcrumb Navigation dem Nutzer als eine erhebliche Navigationshilfe zur Verfügung steht. Aus Usability-Sicht sind Breadcrumbs daher nicht mehr wegzudenken. Speziell für SEO und die OnPage Optimierung ist es essentiell, die Breadcrumb korrekt zu implementieren.

Seit einiger Zeit wird die Breadcrumb Navigation teilweise bei Google in den SERPs in der URL-Zeile als Rich Snippets angezeigt. Es ist empfehlenswert die sekundäre Navigation im Quellcode mit Hilfe von Mikrodaten, RDFa oder JSON-LD semantisch auszuzeichnen. Der Google Crawler kann semantisch ausgezeichnete Elemente auslesen und im Index speichern, sodass diese Elemente in den SERPs angezeigt werden können. Mehr Informationen dazu sind beim Google Support erhältlich.[8]

In einem weiteren Sinn helfen Breadcrumbs Suchmaschinen beim Crawlen und Erfassen von Webseiten. Durch die Navigation wird die interne Verlinkung gestärkt und thematisch zueinander passende URLs werden über das Navigationselement miteinander verknüpft. Somit können über die Breadcrumb-Navigation auch in der Seitenhierarchie tiefer liegende Verzeichnisse erreicht und schneller gecrawlt werden.

Einzelnachweise

  1. ↑ So verwendest du die Breadcrumb-Navigation richtig t3n. Abgerufen am 18.08.2020
  2. ↑ Was bedeutet Breadcrumb Navigation? Backlinked. Abgerufen am 18.08.2020
  3. ↑ PHP Breadcrumb erstellen A Coding Project. Abgerufen am 18.08.2020
  4. ↑ JavaScript Technikum: Breadcrumbs Navigation Learn Web Coding. Abgerufen am 18.08.2020
  5. ↑ Anleitung zu Bootstrap Breadcrumb o7planning. Abgerufen am 18.08.2020
  6. ↑ Breadcrumb Navigation erstellen HTML Seminar. Abgerufen am 18.08.2020
  7. ↑ [https://www.nngroup.com/articles/breadcrumb-navigation-useful/ Breadcrumb Navigation Increasingly Useful. NN/g Nielsen Norman Group. Abgerufen am 18.08.2020
  8. ↑ Navigationspfad developers.google.com. Abgerufen am 18.08.2020

Weblinks



Abgerufen von „https://de.ryte.com/wiki/index.php?title=Breadcrumb&oldid=19578“

Kategorie