Zum Inhalt springen
Zur Hauptnavigation springen
Zum Footer springen
  • 10+ Jahre Erfahrung 

  • 900+ erfolgreiche Projekte

  • 300+ ★★★★★ Bewertungen

  • 20+ Experten, europaweit tätig

  • 3000+ Follower auf Youtube

Breadcrumbs

aktualisiert am: 21. Februar 2024 | Lexikon | von Sebastian Prohaska

Bedeutung:

Die Breadcrumb-Navigation (auch Breadcrumbs, Breadcrumb-Trail, Brotkrümelnavigation oder Brotkrumennavigation, auch Ariadnepfad) ist ein sekundäres Navigationsschema und dient der schnellen Orientierung auf Webseiten, in Programmen oder bei Applikationen. Sie befindet sich häufig im oberen Seitenbereich und ist in der Regel als Design-Element nicht besonders auffällig.

Bild: Breadcrumbs: Alles über die Brotkrumennavigation

Warum sind Breadcrumbs wichtig?

Wenn es um Rankings geht – speziell um die ersten Plätze in Google – sind selbst kleinste Details in der Suchmaschinenoptimierung wichtig. Lässt du diese außen vor, hast du den Kampf um ein Top Ranking bereits verloren. Ein Beispiel dafür ist die Breadcrumb-Navigation (kurz: Breadcrumbs)
Mit Breadcrumbs bzw. einer Breadcrumb-Navigation machst du es den Besuchern deiner Website leicht, sich zu orientieren. Sie bleiben gerne auf deiner Seite, was wiederum ein positives Nutzersignal an Google sendet und dadurch dein Ranking vorteilhaft beeinflussen kann.

Was ist die Breadcrumb-Navigation?

Die Breadcrumb-Navigation bietet die Möglichkeit, den Weg zurück zur Einstiegsseite der Webseite zu finden oder andere Hierarchieebenen schnell zu erreichen und ist in der Regel seitenhierarchisch aufgebaut.

Die grafische Oberfläche besteht aus internen Links, die entweder einen Pfad, Ort oder andere Attribute der jeweiligen Subseite anvisieren. So sieht der User zum Beispiel auf einen Blick, auf welcher Ebene der Webseite er sich befindet.

Die Breadcrumb-Navigation variiert in der Darstellung: oft sind es Pfeilsymbole oder ein Größer-als-Zeichen (>), die zur Zeichentrennung dienen. Breadcumbs bilden zugleich die Hierarchie der Website ab. Auch werden Elemente wie grafische Buttons, zum Beispiel in Pfeilform, verwendet.

Daraus resultierend folgt ein Pfad, der folgende Reihenfolge für den Nutzer bietet:  

Hintergrund und Bedeutung der Breadcrumb-Navigation

Breadcrumbs sind ein grafisches Hilfsmittel zur Orientierung auf der Webseite und machen diese durchschaubar. Der Begriff ist angelehnt an das Märchen der Brüder Grimm, „Hänsel und Gretel“, in dem die beiden Kinder mithilfe ausgestreuter Brotkrümel den Weg aus dem Wald fanden.

Ebenfalls wird der „Ariadnepfad“ als Synonym für diese Navigationszeile verwendet. Der Begriff stammt aus der griechischen Mythologie, in der Ariadne Theseus ein Wollknäuel schenkte. Mithilfe des Knäuels konnte er das Labyrinth des Daidalos wieder verlassen. Die sogenannten „Brotkrumen“ bieten dir Navigation und weisen dir daher immer auch den Weg zurück.

Arten von Breadcrumbs

Es gibt drei unterschiedliche Arten von Breadcrumbs:

 

location breadcrumb 2
 
Location-Breadcrumb (Ort-Breadcrumb): Sie zeigen dir die Position auf der Website an.

 

path breadcrumbs
 
Path-Breadcrumbs (Klickpfad-Breadcrumb): Sie bilden den zurückgelegten Weg (Klickpfad der Nutzer) nach und die Navigationsschritte sind erkennbar. Man erkennt, wohin man gelangt ist (also auch auf welche Hierarchieebene) und wie man dorthin gekommen ist.

 

attribute breadcrumb
 
Kategorie- bzw. Attribute-Breadcrumbs (attributbasiert): Sie weisen auf die ausgewählten Kategorien und Filter-Optionen. Der Nutzer sieht also die Kategorie-Seiten und kann sich von den großen oberen Kategorien zu den kleineren durchklicken, bis er das Produkt findet.

Breadcrumbs müssen logisch sein und sie dürfen nicht verwirren. Folglich unterstützen sie die Hauptnavigation, ersetzten diese aber nicht.

Breadcrumbs Beispiel

Du hast bereits erfahren, dass Breadcrumbs durch Trennzeichen, durch Pfeile, andere typografische Symbole oder Grafiken wie Buttons dargestellt werden. Dennoch halten sie sich in Schriftgröße und Farbgebung dezent zurück, denn die Hauptnavigation soll dadurch nicht abgelenkt oder gar in den Hintergrund gerückt werden. Auch behalten sie durchgehend ihre Konsistenz. Der letzte Punkt der Breadcrumb-Navigation ist nicht anklickbar.

breadcrumbs

Breadcrumb-Navigation SEO und Usability: Bedeutung für die Suchmaschinenoptimierung

Breadcrumbs sind für Suchmaschinen und Suchmaschinenoptimierung (SEO) ebenso wichtig:

  • Es werden in Google-SERPs (in den Suchergebnissen) mittlerweile des Öfteren Breadcrumbs anstatt einer langen URL angezeigt. Das zeigt Benutzern schon vorher, was sie auf der Webseite erwartet und welche Kategorien sie hier finden können.
  • Darüber hinaus bietet die Breadcrumb-Navigation die ideale Möglichkeit, interne Links mit relevanten Keywords anzureichern.
  • Es erleichtert Crawlern der Suchmaschinen, den Aufbau und die Relevanz einer Website zu erfassen, da diese auch den internen Links folgen und gefundene Seiten in den Index der Suchmaschine aufnehmen.
  • Folglich könnte sich auch das Ranking bessern und durch die klare Navigation bleiben deine Besucher idealerweise auch länger auf der Seite (Aufenthaltsdauer und die Absprungrate).

Breadcrumbs und Micro Data

Für SEO und OnPage-Optimierung ist eine korrekte technische Implementierung der Breadcrumbs wichtig. Es ist zu beobachten, dass seit einiger Zeit auch die sekundäre Navigation teilweise bei Google in den SERPs, also in den Suchergebnissen, in der URL-Zeile als Rich Snippet angezeigt wird. Daher ist es empfehlenswert, diese Navigation im Quellcode mithilfe von Mikrodaten auszuzeichnen (wie RDFa oder JSON-LD).

Breadcrumbs und Usability (Nutzerfreundlichkeit)

Usability ist ebenfalls ein wichtiger Aspekt und auch für SEO relevant. Eine gelungene Webseitenstruktur, die zusätzlich benutzerfreundlich ist, kann deshalb sehr sinnvoll sein. Breadcrumbs in den Suchergebnissen erleichtern dem Nutzer die Entscheidung, ob das Ergebnis zu seiner Suchanfrage passt. Eine Breadcrumb-Navigation kann die Usability verbessern (wichtig ist jedoch die richtige Einbindung und Platzierung!) und Mehrwert bieten.

Vorteile einer Breadcrumb-Navigation (Brotkrumennavigation)

Google mag Seiten mit einer guten Struktur und Seitenhierarchie. Die Vorteile liegen auf der Hand: Der Nutzer weiß jederzeit, wo er sich befindet, und kann mit einem Klick andere Ebenen erreichen – sie sind also eine echte Hilfestellung zur Benutzung und Navigation.
Die Bedienung ist selbsterklärend und die Navigation nimmt wenig Platz ein.
In Online-Shops helfen Breadcrumbs zudem, die Übersicht zu behalten und dies kann schließlich auch die Bounce Rate (Absprungrate) der Seite reduzieren.

Ein weiterer Vorteil ist, dass Breadcrumbs nur wenig Platz auf der Website einnehmen und recht leicht zu implementieren sind.

Breadcrumbs richtig einsetzen

Für Online-Shops ist die Brotkrümelnavigation eine sinnvolle Ergänzung, denn bei einer guten sekundären Navigation weiß der Nutzer immer, wo er sich gerade auf der Webseite befindet. Deshalb ist die Einsatzmöglichkeit bei sehr großen Webseiten und Portalen gut geeignet.

Es gibt aber auch Ausnahmen: Bei Webseiten ohne tiefgreifende Struktur mit nur einer oder wenigen Seiten, ohne logische Hierarchie, ist die Brotkrumennavigation abzuraten. Die Navigation findet hier dann über die primäre Menüleiste oder den Header der Seite statt.

Deshalb ist es auch wichtig, zu prüfen, ob die Breadcrumb-Navigation dem User hilft. Dazu könnte man zunächst eine Sitemap erzeugen und diese dann prüfen. Anschließend kann die Brotkrumennavigation wie die Sitemap aufgebaut werden, da sie die Architektur der Seite widerspiegelt.

Umsetzung von Breadcrumbs auf der Webseite

Es gibt unterschiedliche Arten der Umsetzungsmöglichkeiten:

  • Plugin: Je nach CMS (Content Management System) können Breadcrumb-Plugins installiert werden. Das erlaubt eine automatisierte Anzeige zu ermöglichen. Es können dabei Einstellungen dafür gewählt werden, welche Art der Breadcrumb-Navigation erfolgen soll. Hier einige Beispiele an kostenlosen und kostenpflichtigen Erweiterungen:
  • PHP und JavaScript: Durch das Einbinden der Programmier- und Skriptsprachen in den Quellcode kann die Funktion in PHP oder JavaScript definiert werden.
  • CMS: Breadcrumbs können hier mit der Auswahl einer Voreinstellung im Content Management System (Implementierung im Backend) eingebunden werden.
  • HTML: Es werden Hyperlinks gesetzt, die in einem Div umschlossen werden. Das Design wird via CSS gestaltet.

Fazit

Eine Breadcrumb-Navigation verbessert die Usability und kann bei SEO unterstützend sein. Dem User bietet diese eine schnelle Orientierung über die Seitenstruktur. Voraussetzung ist immer eine logische und sinnvolle Navigation mit Mehrwert und zu guter Letzt – eine korrekte Einbindung.

Solltest du noch Fragen zum Thema Breadcrumbs haben oder Unterstützung bei der Umsetzung brauchen, ruf uns unter  +43 1 353 2 353 an oder kontaktiere uns unter Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein..

Wir freuen uns darauf, von dir zu hören.

Quellen:

https://developers.google.com/search/docs/data-types/breadcrumb?hl=de

https://developers.google.com/search/docs/guides/enhance-site?hl=de&rd=1#enable-breadcrumbs

https://de.ryte.com/wiki/Bread_Crumb

https://www.seo-kueche.de/lexikon/breadcrumb-navigation-brotkrumennavigation/

https://de.wikipedia.org/wiki/Brotkr%C3%BCmelnavigation

https://onlinemarketing.de/lexikon/definition-breadcrumb

 

 


Alles klar?

Solltest du noch Fragen zum Thema haben oder dir eine professionelle Unterstützung wünschen, dann melde dich bei uns. Schreibe eine E-Mail an Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein., rufe uns unter +43 1 353 2 353 an oder schicke uns deine Anfrage über unser Kontaktformular.