Die Breadcrumb-Navigation

23. Mai 2016 at 11:13
Breadcrumb-Navigation

Warum und wie eine Breadcrumb-Navigation Sinn ergibt, was man dabei beachten muss und wo vielleicht ungeahnte Potentiale schlummern.

Der Begriff Breadcrumb-Navigation, also „Brotkrumen-Navigation“, ist in der Web-Terminologie eine Metapher für die ​von Hänsel angewandte Wegfindungs-Technik aus dem Märchen Hänsel und Gretel.

Auch wenn die Brotkrumen im Märchen nicht besonders erfolgreich waren – Vögel  haben sie gefressen – hat sich die Breadcrumb-Navigation auf Webseiten als Standard etabliert. Dabei ist die Breadcrumb nicht nur eine wichtige Navigations- und Orientierungshilfe, sie spielt auch im Bereich SEO eine wichtige Rolle.

Der folgende Beitrag soll beleuchten wann, warum und wie eine Breadcrumb-Navigation Sinn ergibt, was man dabei beachten muss und wo vielleicht ungeahnte Potentiale schlummern.

 

Die Breadcrumb und ihre Bedeutung für die Usability

Eine Breadcrumb-Navigation erfüllt drei ganz essentielle Punkte auf einer Website:

  • Sie zeigt die aktuelle Position in der Webseite.
  • Sie bildet den Pfad der aktuellen Seite im Seitenbaum ab. Und zeigt sie damit direkt in der Hierarchie der gesamten Website.
  • Sie ermöglicht dem Nutzer die Navigation zu höheren Ebenen des Seitenbaums mit nur einem Klick.

Dabei ist die Breadcrumb besonders effektiv: Sie wird so gut wie nie als störend oder unverständlich wahrgenommen, erhöht die Bedienungsgeschwindigkeit und verringert die Absprungraten. Mit zunehmender Tiefe einer Website wird sie außerdem als Orientierungs- und Navigationshilfe immer wichtiger.
Breadcrumbs oder ähnliche Bedienschemata werden auch von vielen Programmen verwendet. Dazu zählt die Browserzeile, aber ebenso etwa der „Explorer“ in jedem Windows-System. Wir sind dem Prinzip also sehr vertraut. Das lässt eine intuitive Bedienung zu.

 

Die Breadcrumb und ihre Bedeutung für die Suchmaschinenoptimierung

  • Google misst Breadcrumbs einen hohen Stellenwert bei. De Facto hat Google sogar ein Patent, um Breadcrumbs in den Suchergebnissen anzuzeigen.
  • Breadcrumbs beinhalten Keywords – nämlich die Seitentitel des Seitenpfades. Dies reichert die aktuelle Seite mit entsprechenden Keywords an und verstärkt die grundlegende Sichtbarkeit der Keywords aller höheren Seiten zusätzlich.
  • Breadcrumbs beinhalten interne Links zu relevanten Seiten – sie setzen die Seite in den Kontext des entsprechenden Seitenpfades.

 

Die goldenen Breadcrumb Regeln

  • Breadcrumbs ersetzten keine Hauptnavigation. Die Breadcrumb Navigation ist als Sekundär-Navigation entwickelt worden und sollte als solche genutzt werden. Sie sollte außerdem auch nicht als Seitentitel genutzt werden, dafür gibt es die H1-Überschrift.
  • Nicht jede Seite braucht eine Breadcrumb. One-Pager und Seiten ohne Hierarchie (der Priorität oder Abfolge) brauchen keine Breadcrumb. Denn da, wo keine höheren Ebenen sind, lassen sich auch keine abbilden.
  • Die Breadcrumb zeigt Hierarchie, nicht den Verlauf. Sie sollte nicht die Browser-Funktion „Zurück“ duplizieren, das verwirrt nur.
  • Prominent, aber nicht aufdringlich. Die Breadcrumb-Navigation ist eine Navigationshilfe, d.h. die Hauptnavigation sollte immer im Vordergrund stehen.  Breadcrumbs sollten am besten an einer gewohnten Stelle im oberen Teil der Seite platziert sein. Etwa über der Seite, direkt unter der Hauptnavigation, über dem Seitentitel. Aber niemals so groß, dass sie die Aufmerksamkeit von etwas wichtigem weglenkt.
  • „Above the Fold“ – ohne zu Scrollen sichtbar. Die Breadcrumb-Navigation gehört in den schnell sichtbaren Bereich, damit sich User orientieren können und die Breadcrumb von Webcrawlern beim Indexieren von Webseiten für Suchmaschinen honoriert werden.
  • Eine Breadcrumb muss nicht hässlich sein. Es muss nicht nur blauer, unterstrichener Text sein. Eine Breadcrumb lässt sich Stylen und mit Icons und Effekten versehen.
  • Step by Step. Eine Breadcrumb bildet den Seitenbaum von der Startseite bis zur aktuellen Seite Schritt für Schritt ab. Sie sollte niemals Zwischenschritte auslassen oder mit „…“ oder ähnlichem ersetzen. Dennoch sollte die Breadcrumb nicht zu lang werden. Zu viele Seitenebenen sind nicht gut – weder für den User noch fürs SEO. Es empfehlen sich 4 Ebenen. Viel mehr Ebenen oder auch zu lange Titel erschweren die Orientierung und machen die Breadcrumb ggf. mehrzeilig, was sehr unschön ist. Zwischen den Schritten sollte man ein einfaches Zeichen wählen. „>“ hat sich eingebürgert, aber es geht auch anders.
  • Jede Seitenebene verlinken. Jede Seite der Breadcrumb sollte „einfach“ verlinkt sein. Spezielle Elemente oder Zusatzfunktionen, wie z.B. ein Drop-Down unter einem Breadcrumb-Link, können eingebaut werden, sollten aber entsprechend abgegrenzt sein. Die Links innerhalb der Breadcrums sollten eindeutig erkennbar sein. Die aktuelle Seite darf nicht verlinkt sein.
  • Einfach halten. Ein Hinweis wie „Sie befinden sich hier:“ braucht nicht dargestellt zu werden, die Breadcrumb ist ein Urgestein und bekannt bzw. erschließt sich selbst. Versteckt ergibt dieser Text allerdings Sinn. So ist es auch für User mit einer Sehbehinderung möglich sich in der Seite per Screenreader zurecht zu finden.
  • Schema nutzen. Eine Breadcrumb lässt sich im Quelltext entsprechend als solche auszeichnen. Dies sollte immer geschehen um die SEO-Qualität zu erhöhen und Screenreader zu unterstützen.
  • Es gibt Ausnahmefälle. In besonderen Umgebungen kann es – wie überall – Ausnahmen geben. Drei kurze Beispiele dazu im folgenden Abschnitt:

 

Breadcrumbs können mehr

Auch wenn sie nicht die Hauptnavigation ersetzen sollte: Die Breadcrumb kann mehr, als „nur“ die Position anzeigen und eine Navigation nach „oben“ erlauben.

  • Seiten ohne „echten“ Seitenbaum abbilden: Eine Breadcrumb kann in einem Shop anstelle einer Hierarchie durchaus auch die Filterung abbilden, ja diese sogar direkt mit bedienbar machen, indem Filter abgewählt werden können.
  • Die Breadcrumb zur weiteren Navigation nutzen: Der Guardian zeigt neben der aktuellen Seite auch die anderen Punkte der aktuellen Ebene an – so sehen die Nutzer, was noch geboten wird und können schnell hin und her wechseln.
    Der Guardian zeigt neben der aktuellen Seite auch die anderen Punkte der aktuellen Ebene an
    www.theguardian.
  • Noch mehr Navigation: Manche Seiten bauen die Breadcrumb so aus, dass sie auf allen Ebenen wie ein Flyout-Menü funktionieren. Der Nutzer kann so in allen vorhergehenden Ebenen in alle Seiten springen (Beachten sollte man aber dennoch die goldene Regel Nr. 8).
    Der Nutzer kann in der Flyout-Breadcrumb-Navigation in allen vorhergehenden Ebenen in alle Seiten springenhttp://www.som.cranfield.ac.uk