Breadcrumb

Sich nicht auf einer Website verirren


Bei der Breadcrumb-Navigation (deutsch: Brotkrumennavigation) handelt es sich um eine sekundäre Navigation innerhalb einer Website. Diese Art von Navigation bietet dem Nutzer die Möglichkeit, schnell zur Einstiegsseite oder vorher besuchten Seiten zurückzufinden. Der Name „Breadcrumb-Navigation“ leitet sich von dem Märchen Hänsel und Gretel der Gebrüder Grimm ab. Hier verteilen Hänsel und Gretel Brotkrumen, um später wieder den Weg zurück nach Hause zu finden. Und eben diese Funktion haben Breadcrumbs innerhalb einer Website. Diese führen zwar nicht Hänsel und Gretel nach Hause, lassen aber dafür den Nutzer seinen bisherigen Pfad auf der Website erkennen und ggf. zurückwandern.

Welche Arten von Breadcrumbs gibt es?

Im Allgemeinen werden Breadcrumbs in drei verschiedene Arten unterteilt:

Klickpfad (Path)

Bei dieser Navigation wird dem Nutzer sein tatsächlicher Klickpfad nachgezeichnet sowie seine aktuelle Position angezeigt. Ein Klickpfad könnte beispiels wie folgt aussehen:

Startseite > Kategorie 1 > Unterkategorie 1.1 > Startseite > Kategorie 3 > Unterkategorie 3.5

Eine solche Navigation ist nicht besonders übersichtlich und eignet sich daher nicht wirklich für große und umfangreiche Seiten. Diese Art von Navigation ist lediglich dafür gedacht, dass der Nutzer sieht, welche Seiten er zuvor besucht hat.

Ort (Location)

Diese Art ist wohl die häufigste Form der Breadcrumbs. Hierbei wird, wie der Name bereits verrät, die aktuelle Position des Nutzers innerhalb der Hierarchie der Website angezeigt. Das heißt, es wird nicht zwingend der Klickpfad angezeigt, sondern in welcher Kategorie bzw. Ebene der Nutzer sich befindet.

Beispielbild eines Ort-Breadcrumbs

Beispiel für ein Ort (Location) – Breadcrumb

Bei diesen Location-Breadcrumbs eines Onlineshops für Tischplatten sieht der Nutzer beispielsweise, dass sich die Seite, auf welcher er sich gerade befindet („Tischplatten mit Baumkante“), in der Kategorie „Tischplatte Eiche“ befindet, welche wiederum eine Kategorie der Startseite ist.

Attribute

Hierbei handelt es sich um eine eher seltene Form der Breadcrumb-Navigation. Sie ist besonders beliebt bei Shops oder Blogs. Hier wird dem Nutzer angezeigt, welche weiteren Attribute, Kategorien oder Schlüsselbegriffe für die aktuelle Seite relevant sind.

Beispielbild für Atrribute-Breadcrumbs

Beispiel für Atrribute-Breadcrumbs

Bei diesem Foodblog bekommt der Nutzer bei einem Rezept durch die Attribute-Breadcrumbs ähnliche Seiten bzw. Schlüsselbegriffe vorgeschlagen, die zu neuen Inspirationen führen können.

Umsetzungsmöglichkeiten von Breadcrumbs

Auch bei der Frage danach, wie sich Breadcrumbs auf eine Website einbinden lassen, wird generell zwischen drei unterschiedlichen Wegen unterschieden:

  • CMS: Einige Content Management Systeme wie beispielsweise WordPress oder Typo3 bieten eine mögliche Einbindung von Breadcrumbs im Backend an. Falls diese Möglichkeit bei einem CMS nicht vorhanden ist, können bestimme Plugins Abhilfe schaffen.
  • PHP/Javascript: Erfahrenere Websitenbetreiber mit einem gewissen technischen Know-how können die Breadcrumbs auch via Coding einbinden. Hierbei kann eine bestimmte Funktion in PHP oder Javascript definiert werden, um die Breadcrumbs auf einer Website zu realisieren.
  • HTML: Bei dieser manuellen Variante basiert die Einbindung der Breadcrumbs auf Links, die in einem Div zusammengefasst werden. Diese werden dann durch relative Pfade bestimmt und anschließend wird das Design der Breadcrumbs mittels CSS definiert.

Bedeutung von Breadcrumbs für SEO

Eine Breadcrumb-Navigation hilft dem Nutzer sich auf einer Website zurechtzufinden und ist daher gut für die Usability. Und was gut für die Usability des Nutzers ist, ist auch gut für die Suchmaschinen. Denn nicht nur dem Nutzer, sondern auch den Crawlern wird es durch Breadcrumbs einfacher gemacht, den Aufbau und die Hierarchie einer Website zu verstehen. Im besten Fall sorgt dies für ein höheres Ranking der Website. Zudem wird mittlerweile die Breadcrumb-Navigation teilweise bei Google in den SERPs als Rich-Snippets angezeigt.

Vorteile einer Breadcrumb-Navigation

  • Der Nutzer weiß stets, wo er sich befindet, und kann durch nur einen Klick eine andere Ebene erreichen. Das verbessert die Usability enorm.
  • Die Bedienung von Breadcrumbs ist für den Nutzer kinderleicht und selbsterklärend.
  • Die Brotkrummennavigation nimmt sehr wenig Platz auf der Website ein und ist leicht zu implementieren.