Bread Crumbs: Unterschied zwischen den Versionen
(→Vorteile der Breadcrumb Navigation) |
(→Ähnliche Artikel) |
||
| (11 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| − | <seo title=" | + | <seo title="Breadcrumb Navigation - Was ist das?" metadescription="Breadcrumbs, auf Deutsch Brotkrümel, sind ein sekundäres Navigationsschema, das den Standort des Benutzers auf einer Website anzeigt." /> |
== Definition == | == Definition == | ||
| + | [[File:Breadcrumb-navigation.png|mini|450px|rechts|alt=Bread Crumbs|'''Abbildung:''' Bread Crumbs - Autor: Seobility - Lizenz: [[Creative Commons Lizenz BY-SA 4.0|CC BY-SA 4.0]]|link=https://www.seobility.net/de/wiki/images/5/53/Breadcrumb-navigation.png]] | ||
Breadcrumbs, auf Deutsch Brotkrümel, sind ein sekundäres Navigationsschema, das den Standort des Benutzers auf einer Website oder in einer Webanwendung anzeigt. Der Begriff stammt aus dem Märchen von Hänsel und Gretel, in dem die beiden Kinder Brotkrümel als Wegmarkierung ausstreuten, um den Weg zurück zu ihrem Zuhause zu finden. Genau wie im Märchen bieten Breadcrumbs in realen Anwendungen den Benutzern eine Möglichkeit, den Weg zurück zu ihrem Ausgangspunkt zu verfolgen. | Breadcrumbs, auf Deutsch Brotkrümel, sind ein sekundäres Navigationsschema, das den Standort des Benutzers auf einer Website oder in einer Webanwendung anzeigt. Der Begriff stammt aus dem Märchen von Hänsel und Gretel, in dem die beiden Kinder Brotkrümel als Wegmarkierung ausstreuten, um den Weg zurück zu ihrem Zuhause zu finden. Genau wie im Märchen bieten Breadcrumbs in realen Anwendungen den Benutzern eine Möglichkeit, den Weg zurück zu ihrem Ausgangspunkt zu verfolgen. | ||
| Zeile 23: | Zeile 24: | ||
Diese Art von Breadcrumbs wird beispielsweise bei Zalando genutzt: | Diese Art von Breadcrumbs wird beispielsweise bei Zalando genutzt: | ||
| − | [[Datei:Bread Crumbs Beispiel Zalando.PNG|link=|alt=Bread Crumbs Zalando|Bread Crumbs bei Zalando]] | + | [[Datei:Bread Crumbs Beispiel Zalando.PNG|link=|border|alt=Bread Crumbs Zalando|Bread Crumbs bei Zalando]] |
Screenshot mit Breadcrumb-Navigation von [https://www.zalando.de/damenbekleidung-jeans-skinny-fit/ zalando.de] | Screenshot mit Breadcrumb-Navigation von [https://www.zalando.de/damenbekleidung-jeans-skinny-fit/ zalando.de] | ||
| Zeile 33: | Zeile 34: | ||
Home > Seite 1 > Seite 2 > Home > Seite 3 > Warenkorb | Home > Seite 1 > Seite 2 > Home > Seite 3 > Warenkorb | ||
| − | Für die Umsetzung und Implementierung der Brotkrümel in eine Webseite werden bei Content Management Systemen wie WordPress oder Joomla Plug- | + | Für die Umsetzung und Implementierung der Brotkrümel in eine Webseite werden bei Content Management Systemen wie WordPress oder Joomla [[Plug-in]]s verwendet. Bei anderen Webseiten können Breadcrumbs mit Hilfe von Skriptsprachen wie PHP oder JavaScript eingefügt werden. Alternativ lassen sich Breadcrumbs auch manuell in den HTML Code einbauen. |
== Vorteile der Breadcrumb Navigation == | == Vorteile der Breadcrumb Navigation == | ||
| Zeile 39: | Zeile 40: | ||
Die Breadcrumb-Navigation bietet neben ihrer einfachen Implementation viele weitere Vorteile. Die Verbesserung der [[Usability]] oder Benutzerfreundlichkeit einer Webseite ist einer davon, denn auf Websites mit vielen Unterseiten können 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ühren muss, um auf eine höhere Seite zu gelangen. Somit bieten Breadcrumbs Benutzern die Möglichkeit, mit nur einem Klick zu übergeordneten Seiten zu navigieren, statt mehrere Male auf die Schaltfläche "Zurück" des Browsers klicken zu müssen, um zur ursprünglichen Seite zu gelangen. | Die Breadcrumb-Navigation bietet neben ihrer einfachen Implementation viele weitere Vorteile. Die Verbesserung der [[Usability]] oder Benutzerfreundlichkeit einer Webseite ist einer davon, denn auf Websites mit vielen Unterseiten können 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ühren muss, um auf eine höhere Seite zu gelangen. Somit bieten Breadcrumbs Benutzern die Möglichkeit, mit nur einem Klick zu übergeordneten Seiten zu navigieren, statt mehrere Male auf die Schaltfläche "Zurück" des Browsers klicken zu müssen, um zur ursprünglichen Seite zu gelangen. | ||
| − | Breadcrumbs erweisen sich aber nicht nur für die Usability, sondern auch für die Suchmaschinenoptimierung (SEO) als nützlich. Suchmaschinen wie Google helfen die sekundären Navigationselemente dabei, die Struktur der Website besser zu verstehen und dadurch relevantere und genauere Informationen in ihren Suchergebnissen anzuzeigen. Durch die [[Interne Verlinkung|internen Links]] erhalten Suchmaschinen zudem mehr Informationen über eine bestimmte Seite und die Seiten, mit denen sie verbunden ist. Darüber hinaus zeigt Google in den Suchergebnissen Breadcrumbs an, wie in der nachfolgenden Abbildung zu sehen ist. Das Suchergebnis wird dadurch für Suchmaschinennutzer interessanter, mit positiven Auswirkungen auf die [[CTR (Click-Through-Rate)]] und den [[Traffic]] einer Webseite. | + | Breadcrumbs erweisen sich aber nicht nur für die Usability, sondern auch für die Suchmaschinenoptimierung (SEO) als nützlich. Suchmaschinen wie Google helfen die sekundären Navigationselemente dabei, die [[Website-Struktur|Struktur]] der Website besser zu verstehen und dadurch relevantere und genauere Informationen in ihren Suchergebnissen anzuzeigen. Durch die [[Interne Verlinkung|internen Links]] erhalten Suchmaschinen zudem mehr Informationen über eine bestimmte Seite und die Seiten, mit denen sie verbunden ist. Darüber hinaus zeigt Google in den Suchergebnissen Breadcrumbs an, wie in der nachfolgenden Abbildung zu sehen ist. Das Suchergebnis wird dadurch für Suchmaschinennutzer interessanter, mit positiven Auswirkungen auf die [[CTR (Click-Through-Rate)]] und den [[Traffic]] einer Webseite. |
| − | [[Datei:Bread Crumbs in den SERPs.PNG|link=|alt=Breadcrumbs in den SERPs|Anzeige von Breadcrumbs in den SERPs]] | + | [[Datei:Bread Crumbs in den SERPs.PNG|link=|border|alt=Breadcrumbs in den SERPs|Anzeige von Breadcrumbs in den SERPs]] |
Screenshot mit Breadcrumbs in den SERPs von [https://www.google.de/search?q=damen+jeans+skinny+fit google.de] | Screenshot mit Breadcrumbs in den SERPs von [https://www.google.de/search?q=damen+jeans+skinny+fit google.de] | ||
| Zeile 47: | Zeile 48: | ||
=== Breadcrumbs erhöhen die Verweildauer und verringern die Bounce Rate === | === Breadcrumbs erhöhen die Verweildauer und verringern die Bounce Rate === | ||
| − | Über 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 | + | Über 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 übergeordneten Kategorie mit einem Überblick über das gesamte Angebot. Der Blick auf ähnliche Artikel, Hintergrundwissen oder andere, zum Thema passende Inhalte, macht die Website für User interessanter und sie werden wahrscheinlich länger auf ihr verweilen und sie weiter erkunden. Die somit erzeugte längere [[Verweildauer]] und verringerte [[Bounce Rate (Absprungrate)|Bounce Rate]] sind für Google wichtige Faktoren bei der Bewertung der Relevanz einer Webseite für bestimmte Suchanfragen. |
== Was sollte bei der Implementierung beachtet werden? == | == Was sollte bei der Implementierung beachtet werden? == | ||
| − | Die Breadcrumb Navigation sollte nicht als Ersatz, sondern als Ergänzung zur allgemeinen Navigation einer | + | Die Breadcrumb Navigation sollte nicht als Ersatz, sondern als Ergänzung zur allgemeinen Navigation einer Website genutzt werden. |
Zudem wird in einem Breadcrumb-Pfad das letzte Element, das heißt die aktuelle Seite, auf der sich der User befindet, nicht mit sich selbst verknüpft und somit nicht als Link dargestellt. | Zudem wird in einem Breadcrumb-Pfad das letzte Element, das heißt die aktuelle Seite, auf der sich der User befindet, nicht mit sich selbst verknüpft und somit nicht als Link dargestellt. | ||
| Zeile 57: | Zeile 58: | ||
Die einzelnen Breadcrumbs sollten für eine bessere Übersichtlichkeit durch Zeichen oder Symbole voneinander getrennt werden. Das herkömmliche Zeichen, das zum Trennen zweier Breadcrumb-Navigationselemente verwendet wird, ist das Größer-als-Zeichen " > ". Andere gebräuchliche Zeichen sind ein Schrägstrich " / " oder ein senkrechter Strich " | ", der sogenannte "Pipe". Die Schriftgröße sollte angemessen und nicht zu groß sowie wie die Abstände zwischen den Elementen nicht zu klein gewählt werden. | Die einzelnen Breadcrumbs sollten für eine bessere Übersichtlichkeit durch Zeichen oder Symbole voneinander getrennt werden. Das herkömmliche Zeichen, das zum Trennen zweier Breadcrumb-Navigationselemente verwendet wird, ist das Größer-als-Zeichen " > ". Andere gebräuchliche Zeichen sind ein Schrägstrich " / " oder ein senkrechter Strich " | ", der sogenannte "Pipe". Die Schriftgröße sollte angemessen und nicht zu groß sowie wie die Abstände zwischen den Elementen nicht zu klein gewählt werden. | ||
| − | Bei mobilen Webseiten sollte auf Breadcrumbs verzichtet werden, denn je nach Tiefe der Webseitenstruktur nimmt die sekundäre Navigation zu viel Platz auf den kleinen Displays ein. Für eine bessere User Experience auf mobilen Geräten sollte der Benutzer stattdessen in der Lage sein, in der App selbst zu navigieren. | + | Bei mobilen Webseiten sollte auf Breadcrumbs verzichtet werden, denn je nach Tiefe der Webseitenstruktur nimmt die sekundäre Navigation zu viel Platz auf den kleinen Displays ein. Für eine bessere [[User Experience]] auf mobilen Geräten sollte der Benutzer stattdessen in der Lage sein, in der App selbst zu navigieren. |
Keyword Consistency ist ein wichtiger Aspekt im Hinblick auf die SEO. Da Breadcrumbs hierbei eine wichtige Rolle spielen können, sollte sichergestellt werden, dass dieselben Keywords in den Breadcrumb-Ankertexten verwendet werden, wie sie im [[Meta Title|Seitentitel]] und in der [[SEO-freundliche URLs|Seiten-URL]] vorhanden sind. | Keyword Consistency ist ein wichtiger Aspekt im Hinblick auf die SEO. Da Breadcrumbs hierbei eine wichtige Rolle spielen können, sollte sichergestellt werden, dass dieselben Keywords in den Breadcrumb-Ankertexten verwendet werden, wie sie im [[Meta Title|Seitentitel]] und in der [[SEO-freundliche URLs|Seiten-URL]] vorhanden sind. | ||
| Zeile 73: | Zeile 74: | ||
[[Kategorie:Web Design]] | [[Kategorie:Web Design]] | ||
| + | |||
| + | <html><script type="application/ld+json"> | ||
| + | { | ||
| + | "@context": "https://schema.org/", | ||
| + | "@type": "ImageObject", | ||
| + | "contentUrl": "https://www.seobility.net/de/wiki/images/5/53/Breadcrumb-navigation.png", | ||
| + | "license": "https://creativecommons.org/licenses/by-sa/4.0/deed.de", | ||
| + | "acquireLicensePage": "https://www.seobility.net/de/wiki/Creative_Commons_Lizenz_BY-SA_4.0" | ||
| + | } | ||
| + | </script></html> | ||
| + | |||
| + | {| class="wikitable" style="text-align:left" | ||
| + | |- | ||
| + | |'''Über den Autor''' | ||
| + | |- | ||
| + | | [[File:Seobility S.jpg|link=|100px|left|alt=Seobility S]] Das Seobility Wiki Team besteht aus SEO-, Online-Marketing- und Web-Experten mit praktischer Erfahrung in den Bereichen Suchmaschinenoptimierung, Online-Marketing und Webentwicklung. Alle unsere Artikel durchlaufen einen mehrstufigen Redaktionsprozess, um Dir die bestmögliche Qualität und wirklich hilfreiche Informationen bieten zu können. <html><a href="https://www.seobility.net/de/wiki/Seobility_Wiki_Team" target="_blank">Mehr Informationen über das Seobility Wiki Team</a></html>. | ||
| + | |} | ||
| + | |||
| + | <html><script type="application/ld+json"> | ||
| + | { | ||
| + | "@context": "https://schema.org", | ||
| + | "@type": "Article", | ||
| + | "author": { | ||
| + | "@type": "Organization", | ||
| + | "name": "Seobility", | ||
| + | "url": "https://www.seobility.net/" | ||
| + | } | ||
| + | } | ||
| + | </script></html> | ||
Aktuelle Version vom 23. Januar 2024, 13:07 Uhr
Inhaltsverzeichnis
Definition
Breadcrumbs, auf Deutsch Brotkrümel, sind ein sekundäres Navigationsschema, das den Standort des Benutzers auf einer Website oder in einer Webanwendung anzeigt. Der Begriff stammt aus dem Märchen von Hänsel und Gretel, in dem die beiden Kinder Brotkrümel als Wegmarkierung ausstreuten, um den Weg zurück zu ihrem Zuhause zu finden. Genau wie im Märchen bieten Breadcrumbs in realen Anwendungen den Benutzern eine Möglichkeit, den Weg zurück zu ihrem Ausgangspunkt zu verfolgen.
Obwohl alle Brotkrümel 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.
Ortsbasierte Breadcrumbs
Ortsbasierte Breadcrumbs zeigen dem Benutzer, wo er sich in der Hierarchie der Website befindet. Sie werden üblicherweise für Navigationsschemata mit mehr als 2 Ebenen verwendet. Im folgenden Beispiel steht jedes Element für eine Seite, die sich eine Ebene höher befindet als die Seite rechts davon.
Home > Seite1 > Unterseite > Aktuelle Position
Attributbasierte Breadcrumbs
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ührt nicht notwendigerweise auf den Pfad zurück, über den ein Besucher in der Navigation der Webseite gekommen ist. Diese Art von Breadcrumb-Navigation wird häufig für E-Commerce-Websites verwendet, bei denen eine einzelne Produktseite über verschiedene Pfade zugänglich ist. Ein Beispiel für attributbasierte Breadcrumbs:
Home > Fahrräder > Mountainbikes > Herren > 29 Zoll > Orange
Diese Art von Breadcrumbs wird beispielsweise bei Zalando genutzt:
Screenshot mit Breadcrumb-Navigation von zalando.de
Pfadbasierte Breadcrumbs
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.
Home > Seite 1 > Seite 2 > Home > Seite 3 > Warenkorb
Für die Umsetzung und Implementierung der Brotkrümel in eine Webseite werden bei Content Management Systemen wie WordPress oder Joomla Plug-ins verwendet. Bei anderen Webseiten können Breadcrumbs mit Hilfe von Skriptsprachen wie PHP oder JavaScript eingefügt werden. Alternativ lassen sich Breadcrumbs auch manuell in den HTML Code einbauen.
Die Breadcrumb-Navigation bietet neben ihrer einfachen Implementation viele weitere Vorteile. Die Verbesserung der Usability oder Benutzerfreundlichkeit einer Webseite ist einer davon, denn auf Websites mit vielen Unterseiten können 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ühren muss, um auf eine höhere Seite zu gelangen. Somit bieten Breadcrumbs Benutzern die Möglichkeit, mit nur einem Klick zu übergeordneten Seiten zu navigieren, statt mehrere Male auf die Schaltfläche "Zurück" des Browsers klicken zu müssen, um zur ursprünglichen Seite zu gelangen.
Breadcrumbs erweisen sich aber nicht nur für die Usability, sondern auch für die Suchmaschinenoptimierung (SEO) als nützlich. Suchmaschinen wie Google helfen die sekundären Navigationselemente dabei, die Struktur der Website besser zu verstehen und dadurch relevantere und genauere Informationen in ihren Suchergebnissen anzuzeigen. Durch die internen Links erhalten Suchmaschinen zudem mehr Informationen über eine bestimmte Seite und die Seiten, mit denen sie verbunden ist. Darüber hinaus zeigt Google in den Suchergebnissen Breadcrumbs an, wie in der nachfolgenden Abbildung zu sehen ist. Das Suchergebnis wird dadurch für Suchmaschinennutzer interessanter, mit positiven Auswirkungen auf die CTR (Click-Through-Rate) und den Traffic einer Webseite.
Screenshot mit Breadcrumbs in den SERPs von google.de
Breadcrumbs erhöhen die Verweildauer und verringern die Bounce Rate
Über 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 übergeordneten Kategorie mit einem Überblick über das gesamte Angebot. Der Blick auf ähnliche Artikel, Hintergrundwissen oder andere, zum Thema passende Inhalte, macht die Website für User interessanter und sie werden wahrscheinlich länger auf ihr verweilen und sie weiter erkunden. Die somit erzeugte längere Verweildauer und verringerte Bounce Rate sind für Google wichtige Faktoren bei der Bewertung der Relevanz einer Webseite für bestimmte Suchanfragen.
Was sollte bei der Implementierung beachtet werden?
Die Breadcrumb Navigation sollte nicht als Ersatz, sondern als Ergänzung zur allgemeinen Navigation einer Website genutzt werden.
Zudem wird in einem Breadcrumb-Pfad das letzte Element, das heißt die aktuelle Seite, auf der sich der User befindet, nicht mit sich selbst verknüpft und somit nicht als Link dargestellt.
Die einzelnen Breadcrumbs sollten für eine bessere Übersichtlichkeit durch Zeichen oder Symbole voneinander getrennt werden. Das herkömmliche Zeichen, das zum Trennen zweier Breadcrumb-Navigationselemente verwendet wird, ist das Größer-als-Zeichen " > ". Andere gebräuchliche Zeichen sind ein Schrägstrich " / " oder ein senkrechter Strich " | ", der sogenannte "Pipe". Die Schriftgröße sollte angemessen und nicht zu groß sowie wie die Abstände zwischen den Elementen nicht zu klein gewählt werden.
Bei mobilen Webseiten sollte auf Breadcrumbs verzichtet werden, denn je nach Tiefe der Webseitenstruktur nimmt die sekundäre Navigation zu viel Platz auf den kleinen Displays ein. Für eine bessere User Experience auf mobilen Geräten sollte der Benutzer stattdessen in der Lage sein, in der App selbst zu navigieren.
Keyword Consistency ist ein wichtiger Aspekt im Hinblick auf die SEO. Da Breadcrumbs hierbei eine wichtige Rolle spielen können, sollte sichergestellt werden, dass dieselben Keywords in den Breadcrumb-Ankertexten verwendet werden, wie sie im Seitentitel und in der Seiten-URL vorhanden sind.
Weiterführende Links
- https://www.usability-tipps.de/info/index.php/verbesserte-usability-durch-breadcrumbs/
- https://yoast.com/breadcrumbs-seo/
- https://www.smashingmagazine.com/2009/03/breadcrumbs-in-web-design-examples-and-best-practices/
Ähnliche Artikel
| Über den Autor |
 |