Breadcrumbs werden im Deutschen gerne auch als Brotkrumen oder Brotkrümel bezeichnet, aber in der Regel verwendet man im Kontext der Website immer den englischen Namen. Es geht dabei um eine sekundäre Navigation einer Website, die deswegen auch als Breadcrumb-Navigation bezeichnet wird.
Die besagten Breadcrumbs machen die Navigation innerhalb einer Seite sehr einfach, denn sie bieten ihrem Nutzer interne Links, über welche sie auf verschiedene Seiten innerhalb einer Website gelangen können. So kommt er zurück auf die Anfangsseite oder andere Ebenen innerhalb der Webseite!
Praktischerweise sind die Breadcrumbs so aufgebaut, dass der User immer nachvollziehen kann, auf welchen Seiten er zuvor war. Außerdem wird in der Regel der Pfad von der Anfangsseite bis zur aktuellen Seite beschrieben.
Du findest solch eine Breadcrumb Navigation im oberen Teil der Website, wobei sie in der Regel sehr unauffällig gestaltet wird.
Wieso “Breadcrumbs”? Wieso heißt das so?
Die Hintergrundgeschichte der Breadcrumbs ist eigentlich ganz niedlich, denn sie basiert auf dem Märchen Hänsel und Gretel, das von den Gebrüdern Grimm verfasst wurde. Damals verwendeten die beiden Kinder eben Brotkrumen, als sie in den Wald wanderten, um wieder heim zu finden.
Auch das sollen die Breadcrumbs bewirken, denn sie sollen dem Nutzer immer zeigen, wo er sich befindet und wo er zuvor war. So kann er einfach hin und herspringen und, vor allem, wieder Ebenen zurückgelangen, die er zuvor benutzt hat.
Woran kannst Du Breadcrumbs erkennen?
Breadcrumbs sind, wie bereits erwähnt, immer ziemlich subtil gestaltet. Du musst also kurz suchen, bis Du sie findest. In der Regel werden sie durch Pfeile oder andere Symbole, teils auch Grafiken oder Buttons dargestellt. Du musst sie nur anklicken, um zu einer vorherigen Seite oder Ebene zu gelangen. Da der letzte Punkt der Breadcrumbs die Seite ist, auf welcher Du Dich befindest, kannst Du dort nichts anklicken.
Angezeigt werden die Breadcrumbs stets über dem Lesebereich der Website, aber deshalb sind sie dennoch sehr schlicht und subtil gehalten. Die Hauptnavigation soll weiterhin im Vordergrund bleiben und nicht von den Breadcrumbs überdeckt werden.
Verschiedene Arten von Breadcrumbs
Breadcrumbs und Klickpfade mögen auf den ersten Blick recht ähnlich erscheinen, aber das sind sie nicht. Klickpfade beschreiben ebenfalls Sprünge durch die verschiedenen Hierarchieebenen, aber die müssen nicht unbedingt logisch sein, wie das bei den Breadcrumbs der Fall ist.
Dennoch: Die Daten, die verwendet werden, um die Breadcrumbs zu erzeugen, stammen ganz oft aus den Klickpfaden der Nutzer. Es kann also durchaus sein, dass die Navigationen denen der Klickpfade identisch oder ähnlich aussieht. Es hängt aber auch von der Art der Breadcrumbs ab.
Klickpfade: Wenn sich die Breadcrumbs hierauf beziehen, kommt es zu einer Navigation, die auf Pfaden basiert ist. Entsprechend wird der Klickpfad nachverfolgt und auch die aktuelle Position angezeigt. Gerade, wenn es eine tiefgehende Struktur und große Websites gibt, ist das aber nicht praktisch. Außerdem entspricht dies auch der Funktion der Browsernavigation, über welche man einfach vor und zurückgelangen kann. Auch die Daten, die hieraus bezogen werden, können sehr lang werden. Diese Option ist also nicht immer praktisch.
Orte: In diesem Fall geht es um eine “location-based” Breadcrumb Variante, bei welcher wieder auf die Position des Nutzers verwiesen wird. Allerdings geht es um die Hierarchie der Website. Diese Variante wird sehr gerne eingesetzt, wenn eine Website mehr als zwei Unterebenen hat. So kann man die Vaterelemente der Website sehr schnell und unkompliziert erreichen!
Kategorien oder Attribute: Es gibt auch noch attributbasierte Breadcrumbs. In dieser Variante sieht der Nutzer, welchen Kategorien die Seite angehört, die er gerade besucht. So sieht er auch, welche Attribute der entsprechenden Seite zugeschrieben werden. Verwendet wird diese Art der Navigationshilfe unter anderem bei E-Commerce-Webseiten. Doch auch Onlineshops verwenden dies auf Produktebenen, wobei das dann meist zusammen angeboten wird, mit Suchfunktionen oder Personalisierungsoptionen. Dies ist also eine recht komplexe Variante. Hier müssen die Breadcrumbs an die Website, deren Funktionen und eine eventuelle Datenbank angepasst werden.
Wann werden Breadcrumbs eingesetzt?
Solche Navigationen verwendet man in erster Linie, wenn man auf sehr großen Webseiten oder gar Portalen unterwegs ist. Meist tut man das auch nur bei einer komplizierten hierarchischen Struktur. Doch auch bei Onlineshops trifft man sehr oft auf Breadcrumbs, da man sich so leicht zwischen all den Kategorien und Produkten zu Recht finden kann.
Übrigens raten wir von der Verwendung von Breadcrumbs ab, wenn die Seite keine logische Hierarchie besitzt. In diesem Fall können Breadcrumbs die Navigation nämlich erschweren.
Um dies herauszufinden, werden gerne Sitemaps generiert. So kann man testen, ob Breadcrumbs helfen würden. Wenn die Seite mehrere Ebenen besitzt, wird dies in der Sitemap angezeigt. Die Breadcrumbs können dann entsprechend aufgebaut werden, weil sie der Seitenarchitektur entsprechen.
In keinem Fall sollten die Breadcrumbs aber die primäre Navigation ersetzen!
Breadcrumbs auf der Website umsetzen
Es gibt viele Optionen, die Breadcrumbs einzubinden!
– Plug-ins: Wenn bei der Website zum Beispiel mit WordPress gearbeitet wird, gibt es gleich mehrere Plug-ins, um Breadcrumbs einzuarbeiten. So kann man Einstellungen vornehmen und eben die sekundäre Navigation einrichten. Strukturierte Daten und Mikrodaten können wahlweise ebenfalls unterstützt werden, sodass sie auf den SERPs angezeigt werden.
– PHP und Javascript: So können Codeteile verschiedener Programmiersprachen im Quellcode eingebunden werden. So würde man beispielsweise eine Funktion in PHP definieren, damit man sie später im Dokument problemlos aufrufen kann! Bei JavaScript läuft das alles recht ähnlich ab, aber selbst dynamisch erzeugte Websites können hier mit Breadcrumbs ausgestattet werden.
– HTML: Hierbei geht es um die manuelle Variante, die wiederum auf Links basiert, welche dann in einem Div zusammengenommen werden können. Ein Design kann man dann hier per CSS gestalten, wobei man wichtigerweise beachten sollte, dass alles konsistent gehalten wird. Die relativen Pfade deuten dann eben auf die vorher besuchten Seiten.
– Content-Management-System: Es gibt einige Shopsysteme oder CMS, die Breadcrumbs als Option im entsprechenden Backend anbieten. Wählt man dies, ist alles recht einfach: Implementieren kann man die Breadcrumbs dann mit nur wenigen Klicks!
Wieso sind Breadcrumbs von Vorteil?
Hier geht es vor allem um die Usability einer Website. Folgende Vorteile sind besonders relevant:
– Nutzer sehen immer ihre aktuelle Position, vor allem auch in Relation zu den anderen Ebenen einer Website. Das erleichtert die Nutzung und die Navigation innerhalb der Website ungemein.
– Nutzer können durch nur einen einzigen Klick durch die Hierarchie der Seite navigieren. Gerade bei der Google Suche oder Verwendung von Deep Links kann das von Vorteil sein und eine unkomplizierte Hilfe bei der Navigation bieten.
– Obwohl die Breadcrumbs sehr powerful sind, nehmen sie auf der Website nur wenig Platz ein. Außerdem ist die Implementierung ebenfalls nicht so schwer!
Was sind SEO Breadcrumbs? Breadcrumbs für die Suchmaschinenoptimierung
Es gab zum Thema Breadcrumbs zahlreiche Tests zur Usability, die allesamt positiv ausgefallen sind. Daraus kann man schließen, dass Breadcrumbs die Navigation der User erheblich erleichtern. Deshalb sind die Breadcrumbs vor allem in Sachen Usability eigentlich nicht mehr wegzudenken. Im Bereich SEO, vor allem der OnPage Optimierung, wollen die Breadcrumbs aber richtig implementiert werden.
Bei Google werden etwaige Breadcrumb-Navigationen nun sehr gerne in den SERPs in der URL-Zeile angezeigt – als sogenannte Rich Snippets. Es empfiehlt sich also durchaus, wenn man diese sekundäre Navigation im Quellcode semantisch auszeichnet, zum Beispiel, mit der Verwendung von Mikrodaten.
Der Google Crawler kann damit dann was anfangen – er wird diese ausgezeichneten Elemente nicht nur auslesen, sondern auch noch im Index speichern. So werden diese Elemente dann in den SERPs angezeigt.
Breadcrumbs helfen den Suchmaschinen aber auch beim Crawlen und beim Erfassen einer Website. Sie stärken die Navigation der Website und deren interne Verlinkungen.