Optimierung der Navigation - Breadcrumb

Was ist eine Breadcrumb-Navigation?

Eine Breadcrumb (oder "Brotkrumen")-Navigation, die meistens oben horizontal platziert wird, zeigt dem Besucher, auf welcher Ebene der Website-Hierarchie er sich aktuell befindet. Es handelt sich dabei mehr um eine Navigationshilfe und ist somit nicht unbedingt erforderlich. Eine Breadcrumb-Navigation eignet sich bestens für die korrekte Indexierung durch Suchmaschinen.

Setzt man dieses Instrument bereits von Anfang an bei der Website-Erstellung ein, so hält sich der manuelle Programmieraufwand in Grenzen. Aufwändig dagegen ist der nachträgliche Einbau, wobei dies nur dann sinnvoll ist, wenn es zahlreiche Rubriken bzw. Unterverzeichnisse gibt.

Wie lässt sich eine Breadcrumb-Navigation (nachträglich) realisieren ?

Man kann eine Breadcrumb-Navigation manuell, mit JavaScript oder mit PHP realisieren.

Die manuelle Erstellung ist die einfachste Lösung, wenn diese konsequent von Beginn an auf jeder Seite umgesetzt wird. Hierzu geht man immer so vor, dass der Verzeichnispfad mit "Sie sind hier" oder "Sie befinden sich hier" eingeleitet wird. Der Rest ist Handarbeit, die Links auf die einzelnen Rubriken werden zwecks besserer Übersicht mit einem oder auch zwei größer-als-Zeichen ">" bzw. ">>" von einander unter Verwendung einer kleineren Schrift getrennt. Die anzuzeigende Seite wird dabei nicht verlinkt und je nach Layout in Fettschrift dargestellt.

Will man sich die Programmierung von Hand ersparen, so helfen zahlreiche frei verfügbare PHP-Scripte. Zusatznutzen der PHP-Variante: diese Lösung ist barrierearm und suchmaschinenfreundlich. Nachteil der PHP-Variante: Alle vorher als HTML-Dateien vorhandenen Seiten müssen als php-Seiten abgespeichert und somit auch anschließend neu verlinkt werden. Weiteres Problem der PHP-Variante: Da das Script die Verzeichnis- und Dateinamen ausliest, sollten die einzelnen Verzeichnisse eine sinnvolle und verständliche Bezeichnung aufweisen!

Für den nachträglichen Einbau mit möglichst wenig Aufwand kommt also nur eine JavaScript-Variante in Frage.

Hier finden Sie zwei beispielhafte JavaScripts.