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