Breadcrumbs-Navigation🍞

Artikel aktualisiert am 25.05.2023

Brotkrümel wie im Märchen

Breadcrumbs wird mit Brotkrümel ins deutsche übersetzt. Was hat es mit dem Thema auf sich und was hat es mit Webdesign zu tun? Der Beitrag passt sehr gut in die nordhessische Region. Wie wahrscheinlich viele wissen, sind hier die Brüder Grimm groß geworden und haben ihre vielen weltweit bekannten Märchen hier geschrieben und erfunden. Dieser Beitrag soll kein Märchen werden, aber viele kennen das Märchen von Hänsel und Gretel mit dem Verirren im Wald. Sie haben sich zur Orientierung Brotkrümel als Weg-Markierung gestreut und daher kommt der Name für Breadcrumbs-Navigation.

Wie funktionieren Breadcrumbs einer Website?

Was genau sind Breadcrumbs? Es handelt sich um einen Pfad auf der Website. Damit ist es auf einen Blick möglich zu sehen, wo Nutzerinnen und Nutzer sich derzeit auf der Website befinden. Außerdem sind die angegebenen Seiten verlinkt, damit fokussierbar und dienen zur direkten Bewegung von der aktuellen zu einer anderen Seite auf der Website. Das hat viele Vorteile und einen großen Nutzen für Personen, die mit einem Screenreader auf Websites unterwegs sind. Eine genaue Angabe von Eigenschaften finden Sie auf der Website schema.org unter dem Link Breadcrumbs-Liste!

Dieses Element ist aus der Mode gekommen. An dieser Stelle der Aufruf an alle Designerinnen und Designer die das beeinflussen können. Lasst die Breadcrumbs nicht weg, sondern baut sie ein. Es hat verschiedene positive Funktionen wie gerade schon gesagt. Die Möglichkeit zur Orientierung ist eine Funktion die sich positiv auf die Usability also auf die Bedienungs-Freundlichkeit und auch auf die Accessibility also die Barrierefreiheit der Website auswirkt.

Die Auswirkungen auf SEO (Search Engine Optimization)

Das Zweite ist das Thema Suchmaschinen-Optimierung. Viele Elemente und Funktionen zur Verbesserung der Barrierefreiheit und leichten Zugänglichkeit beim Webdesign und bei der Programmierung , haben nebenbei auch noch einen positiven Effekt im Bereich der Suchmaschinen-Optimierung.

Der Google Bot oder ein Bot einer anderen Suchmaschine, der zu verschiedenen Zeiten und Algorithmen eine Website „durchcrawlt“, orientiert sich auch bei dem Bewegen auf einer Website an verschiedenen Navigations-Elementen und auch an der Breadcrumbs-Navigation. Damit funktioniert es besser für den Bot, die Sinnhaftigkeit der Website und die Struktur (Semantik) zu verstehen. Die Pfade wo genau ich mich befinde hilft auch diesem System eine Website zu verstehen und gut durchcrawlen zu können und alle Punkte im Untermenü zu finden.

Die richtige Stelle auf der Website

Im Idealfall sollte der Navigations-Pfad im Bereich des Headers, also im oberen Bereich der Webseite zu finden sein. Das ist auch der Weg, den ich bei dem „Betreten“ der Website als zweiten Punkt nach dem Hauptmenü erreiche, wenn ich von oben nach unten durch die Seite hindurch navigiere. Das bedeutet das ist auch schnell für Personen erreichbar, die sich an diesen Orientierungs-Punkten entlang bewegen möchten. Damit kann ein schnellerer Weg auf die gewünschte Seite oder den gewünschten Beitrag in einem Blog gefunden werden.

Worauf ist bei der Erstellung zu achten?

Worauf sollte bei der Erstellung geachtet werden? Grundsätzlich wieder auf den Kontrast also auf die Schriftfarbe und den Hintergrund, um dort eine möglichst gute Lesbarkeit zu ermöglichen. Außerdem spielt auch eine barrierearme oder barrierefreie Schriftart eine wichtige Rolle, die eine gute Lesbarkeit ermöglicht und das ist eigentlich schon alles.

Man kann natürlich verschiedene Strukturen umsetzen und es muss eine Logik dahinter stecken. Wenn es um sehr versteckte Untermenü-Punkte geht, ist es nicht in fünf Minuten fertig. Es sind schon einige Gedanken notwendig, aber auch das ist ein Element, was bei einem Website-Projekt einen Mehrwert bietet und für mehrere Dinge absolut positiv ist. Dieser Beitrag ist in Form eines Videos auch auf unserem YouTube Kanal erschienen.

Breadcrumbs WordPress Plugin NavXT
Google Developers Structured Data
Brotkrümel-Navigation auf Wikipedia

Kommentare von Beiträgen

Das Kommentieren in diesem Blog ist gewünscht und möglich!
Bitte senden Sie das Kontakt-Formular ein. Schreiben Sie eine Nachricht, dass Sie ein Benutzerkonto haben möchten. Dann erhalten Sie schnellstmöglich eine Antwort. Vielen Dank für das Verständnis!

Schreibe einen Kommentar