{"id":31252,"date":"2024-11-12T12:39:33","date_gmt":"2024-11-12T12:39:33","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31252"},"modified":"2025-03-18T13:52:19","modified_gmt":"2025-03-18T13:52:19","slug":"Bread_Crumbs","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/de\/wiki\/Bread_Crumbs","title":{"rendered":"Bread Crumbs"},"content":{"rendered":"

Definition<\/span><\/h2>\n
\n
\"Bread<\/a> <\/p>\n
Abbildung:<\/b> Bread Crumbs – Autor: Seobility – Lizenz: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n

Breadcrumbs, auf Deutsch Brotkr\u00fcmel, sind ein sekund\u00e4res Navigationsschema, das den Standort des Benutzers auf einer Website oder in einer Webanwendung anzeigt. Der Begriff stammt aus dem M\u00e4rchen von H\u00e4nsel und Gretel, in dem die beiden Kinder Brotkr\u00fcmel als Wegmarkierung ausstreuten, um den Weg zur\u00fcck zu ihrem Zuhause zu finden. Genau wie im M\u00e4rchen bieten Breadcrumbs in realen Anwendungen den Benutzern eine M\u00f6glichkeit, den Weg zur\u00fcck zu ihrem Ausgangspunkt zu verfolgen.\n<\/p>\n

Arten der Breadcrumb-Navigation<\/span><\/h2>\n

Obwohl alle Brotkr\u00fcmel im Webdesign dem gleichen Zweck dienen, die Auffindbarkeit innerhalb der Website zu verbessern, gibt es drei unterschiedliche Arten der Breadcrumb-Navigation, die derzeit verwendet werden.\n<\/p>\n

Ortsbasierte Breadcrumbs<\/span><\/h3>\n

Ortsbasierte Breadcrumbs zeigen dem Benutzer, wo er sich in der Hierarchie der Website befindet. Sie werden \u00fcblicherweise f\u00fcr Navigationsschemata mit mehr als 2 Ebenen verwendet. Im folgenden Beispiel steht jedes Element f\u00fcr eine Seite, die sich eine Ebene h\u00f6her befindet als die Seite rechts davon.\n<\/p>\n

Home > Seite1 > Unterseite > Aktuelle Position\n<\/p>\n

Attributbasierte Breadcrumbs<\/span><\/h3>\n

Attributbasierte Breadcrumb-Trails zeigen die Attribute einer bestimmten Seite an. Sie weisen somit nicht nur auf den aktuellen Standort auf der Website hin, sondern liefern auch Meta-Informationen zu jeder Seite. Der Zugriff auf diese Art von Breadcrumb-Navigation f\u00fchrt nicht notwendigerweise auf den Pfad zur\u00fcck, \u00fcber den ein Besucher in der Navigation der Webseite gekommen ist. Diese Art von Breadcrumb-Navigation wird h\u00e4ufig f\u00fcr E-Commerce-Websites verwendet, bei denen eine einzelne Produktseite \u00fcber verschiedene Pfade zug\u00e4nglich ist. Ein Beispiel f\u00fcr attributbasierte Breadcrumbs:\n<\/p>\n

Home > Fahrr\u00e4der > Mountainbikes > Herren > 29 Zoll > Orange\n<\/p>\n

Diese Art von Breadcrumbs wird beispielsweise bei Zalando genutzt:\n<\/p>\n

\"Bread\n<\/p>\n

Screenshot mit Breadcrumb-Navigation von zalando.de<\/a>\n<\/p>\n

Pfadbasierte Breadcrumbs<\/span><\/h3>\n

Pfadbasierte Breadcrumb-Trails zeigen Benutzern die Schritte an, die sie unternommen haben, um zu einer bestimmten Seite zu gelangen. Pfadbasierte Breadcrumbs sind insofern dynamisch, als dass sie die Seiten anzeigen, die der Benutzer besucht hat, bevor er auf der aktuellen Seite angekommen ist.\n<\/p>\n

Home > Seite 1 > Seite 2 > Home > Seite 3 > Warenkorb\n<\/p>\n

F\u00fcr die Umsetzung und Implementierung der Brotkr\u00fcmel in eine Webseite werden bei Content Management Systemen wie WordPress oder Joomla Plug-ins<\/a> verwendet. Bei anderen Webseiten k\u00f6nnen Breadcrumbs mit Hilfe von Skriptsprachen wie PHP oder JavaScript eingef\u00fcgt werden. Alternativ lassen sich Breadcrumbs auch manuell in den HTML Code einbauen.\n<\/p>\n

Vorteile der Breadcrumb Navigation<\/span><\/h2>\n

Die Breadcrumb-Navigation bietet neben ihrer einfachen Implementation viele weitere Vorteile. Die Verbesserung der Usability<\/a> oder Benutzerfreundlichkeit einer Webseite ist einer davon, denn auf Websites mit vielen Unterseiten k\u00f6nnen Breadcrumbs Benutzern bei der Orientierung helfen. Breadcrumbs stellen hierbei eine effektive visuelle Hilfe dar, die den Standort des Benutzers innerhalb der Hierarchie der Website anzeigt. Im Hinblick auf die Benutzerfreundlichkeit reduzieren Breadcrumbs zudem die Anzahl der Aktionen, die ein Website-Besucher durchf\u00fchren muss, um auf eine h\u00f6here Seite zu gelangen. Somit bieten Breadcrumbs Benutzern die M\u00f6glichkeit, mit nur einem Klick zu \u00fcbergeordneten Seiten zu navigieren, statt mehrere Male auf die Schaltfl\u00e4che „Zur\u00fcck“ des Browsers klicken zu m\u00fcssen, um zur urspr\u00fcnglichen Seite zu gelangen.\n<\/p>\n

Breadcrumbs erweisen sich aber nicht nur f\u00fcr die Usability, sondern auch f\u00fcr die Suchmaschinenoptimierung (SEO) als n\u00fctzlich. Suchmaschinen wie Google helfen die sekund\u00e4ren Navigationselemente dabei, die Struktur<\/a> der Website besser zu verstehen und dadurch relevantere und genauere Informationen in ihren Suchergebnissen anzuzeigen. Durch die internen Links<\/a> erhalten Suchmaschinen zudem mehr Informationen \u00fcber eine bestimmte Seite und die Seiten, mit denen sie verbunden ist. Dar\u00fcber hinaus zeigt Google in den Suchergebnissen Breadcrumbs an, wie in der nachfolgenden Abbildung zu sehen ist. Das Suchergebnis wird dadurch f\u00fcr Suchmaschinennutzer interessanter, mit positiven Auswirkungen auf die CTR (Click-Through-Rate)<\/a> und den Traffic<\/a> einer Webseite.\n<\/p>\n

\"Breadcrumbs\n<\/p>\n

Screenshot mit Breadcrumbs in den SERPs von google.de<\/a>\n<\/p>\n

Breadcrumbs erh\u00f6hen die Verweildauer und verringern die Bounce Rate<\/span><\/h3>\n

\u00dcber die SERPs von Google und anderen Suchmaschinen gelangen User oft direkt auf Unterseiten einer Webseite, wenn sie nach spezifischen Informationen oder Produkten suchen. Breadcrumbs zeigen diesen Besuchern, dass es sich um eine Unterseite handelt und erleichtern ihnen beispielsweise die Navigation zu einer \u00fcbergeordneten Kategorie mit einem \u00dcberblick \u00fcber das gesamte Angebot. Der Blick auf \u00e4hnliche Artikel, Hintergrundwissen oder andere, zum Thema passende Inhalte, macht die Website f\u00fcr User interessanter und sie werden wahrscheinlich l\u00e4nger auf ihr verweilen und sie weiter erkunden. Die somit erzeugte l\u00e4ngere Verweildauer<\/a> und verringerte Bounce Rate<\/a> sind f\u00fcr Google wichtige Faktoren bei der Bewertung der Relevanz einer Webseite f\u00fcr bestimmte Suchanfragen.\n<\/p>\n

Was sollte bei der Implementierung beachtet werden?<\/span><\/h2>\n

Die Breadcrumb Navigation sollte nicht als Ersatz, sondern als Erg\u00e4nzung zur allgemeinen Navigation einer Website genutzt werden.\n<\/p>\n

Zudem wird in einem Breadcrumb-Pfad das letzte Element, das hei\u00dft die aktuelle Seite, auf der sich der User befindet, nicht mit sich selbst verkn\u00fcpft und somit nicht als Link dargestellt.\n<\/p>\n

Die einzelnen Breadcrumbs sollten f\u00fcr eine bessere \u00dcbersichtlichkeit durch Zeichen oder Symbole voneinander getrennt werden. Das herk\u00f6mmliche Zeichen, das zum Trennen zweier Breadcrumb-Navigationselemente verwendet wird, ist das Gr\u00f6\u00dfer-als-Zeichen “ > „. Andere gebr\u00e4uchliche Zeichen sind ein Schr\u00e4gstrich “ \/ “ oder ein senkrechter Strich “ | „, der sogenannte „Pipe“. Die Schriftgr\u00f6\u00dfe sollte angemessen und nicht zu gro\u00df sowie wie die Abst\u00e4nde zwischen den Elementen nicht zu klein gew\u00e4hlt werden.\n<\/p>\n

Bei mobilen Webseiten sollte auf Breadcrumbs verzichtet werden, denn je nach Tiefe der Webseitenstruktur nimmt die sekund\u00e4re Navigation zu viel Platz auf den kleinen Displays ein. F\u00fcr eine bessere User Experience<\/a> auf mobilen Ger\u00e4ten sollte der Benutzer stattdessen in der Lage sein, in der App selbst zu navigieren.\n<\/p>\n

Keyword Consistency ist ein wichtiger Aspekt im Hinblick auf die SEO. Da Breadcrumbs hierbei eine wichtige Rolle spielen k\u00f6nnen, sollte sichergestellt werden, dass dieselben Keywords in den Breadcrumb-Ankertexten verwendet werden, wie sie im Seitentitel<\/a> und in der Seiten-URL<\/a> vorhanden sind.\n<\/p>\n

Weiterf\u00fchrende Links<\/span><\/h2>\n