Website Breadcrumb

Die Website Breadcrumb Navigation oder auch der Breadcrumb Trail, was auf Deutsch Ariadnepfad oder Brotkrümel/Brotkrumen genannt wird, ist ein sekundäres Navigationsschema.

Es gibt drei unterschiedliche Varianten der Breadcrumbs Navigation, welche nach Funktionen unterteilt sind. Die Bezeichnung entspringt dem Märchen „Hänsel und Gretel“. Die beiden Kinder fanden durch Brotkrumen wieder nach Hause.

Definition Breadcrumb

Die Breadcrumbs ermöglichen dem Nutzer auf einer Webseite eine schnelle Orientierung bei der Navigation. Oft handelt es sich dabei um eine grafische Oberfläche wie beispielsweise eine Textzeile, die dem Nutzer anzeigt, wo er sich gerade befindet.

Wie im Märchen der Brüder Grimm bezeichnet man die grafische Oberfläche zur Orientierung bei den digitalen Darstellungen als Breadcrumb. Die grafische Oberfläche beinhaltet meist interne Links, welche den Ort, den Pfad sowie weitere Attribute der entsprechenden Unterseite angeben. Auf diese Weise sieht der Nutzer beispielsweise auf einen Blick, wo er sich auf der Webseite befindet.

Verwendungsarten der Breadcrumb Navigation

Breadcrumbs werden nicht nur auf Webseiten verwendet, sondern auch in Programmen und Applikationen, weil so die Navigation übersichtlicher sowie das Wechseln zwischen den Ebenen erleichtert wird.

In der Regel werden drei unterschiedliche Arten der Breadcrumb Navigation unterschieden:

1. Path: Dem Nutzer ist der eigene Klickpfad ersichtlich
2. Location-bades-Breadcrumb: Die aktuelle Position wird in der Hierarchie der Webseite angezeigt.
3. Attribute: Der User sieht die Kategorie-Seiten – Dies wird häufig in Onlineshops verwendet.

Tipp

Oftmals ist eine Breadcrumb Navigation schon in dem WordPress Theme enthalten. Wenn nicht kannst du es einfach nachrüsten, indem du dies in Yoast SEO aktivierst.

Was bedeutet Navigation?

In der EDV versteht man unter Navigation die Bedienung innerhalb eines Produkts. Das kann eine Website aber auch eine App oder andere Software sein. Ein Negativbeispiel für die Navigation ist, dass die Bedienung auf einer Webseite so unübersichtlich ist, dass das Produkt am Markt schlecht ankommt.

Navigation Website Beispiele

Zur besseren Übersicht bei der Website Navigation dienen Breadcrumbs. Mit dieser Brotkrumen Navigation kannst du den Pfad vom Hauptmenü zur Unterseite mit Stichworten darstellen. Auf diese Weise kann der User mit einem Klick auf die Schlagworte flexibel und einfach auf die vorherige Ebene zurückspringen.

Tipp: Die Website Breadcrumb sollten auf den jeweiligen Unterseiten wiederzufinden sein.

Du kannst sie mit dem Regalsortiment in einem gut geordneten Supermarkt vergleichen. Du findest hier deine Lieblingsnudeln bei den Lebensmitteln unter Teigwarten und der Ziel-Rubrik „Maccaroni“. Du kannst mit einer Suchmaske, um gezielt Begriffe einzugeben, und einer Tag-Cloud mit wichtigen, intern verlinkten Schlüsselbegriffen deiner Webseite den Usern die Navigation zusätzlich erleichtern.

Umsetzungsmöglichkeiten

• CMS: Breadcrumbs können in bestimmten Themes des Content Management Systems eingebunden werden, indem sie in einer Voreistellung ausgewählt werden.
• Plugin: Entsprechend des CMS-Systems kannst du ein Website-Breadcrumb -Plugin installieren, um eine automatisierte Anzeige möglich zu machen. Meistens kannst du dabei individuelle Einstellungen wählen, wie du navigieren möchtest.
• JavaScript/HTML/PHP: Mit dem Einbinden eines Codes kann in JavaScript oder PHP eine Funktion definiert werden.

Vorteile der Breadcrumb-Navigation

Gute Gründe für eine Brotkrümelnavigation

Wenn die Breadcrumb Navigation auf der Webseite eingesetzt wird, wird dem Kunden folgendes ermöglicht:

• Orientierung auf einem Blick
• Schnelles Wechseln zwischen den Ebenen
• Nachvollziehbare/r Klickpfad und Linksetzung

Dies hilft aus Sicht der OnPage-Optimierung:

• Bei der Verbesserung der vertikalen Verlinkung
• Google den Kontext der Webseite zu erklären

Tipp

Versehe die Breadcrumbs zusätzlich mit dem entsprechenden Schema-Markup, um die Suchmaschinen zur Struktur deiner Seite zu kommunizieren.

SEO Info – So wirken sich Breadcrumbs auf SEO aus

Die Breadcrumbs haben für SEO einen hohen Wert, da sie eine gute Linkarchitektur unterstützen, was Google befürwortet. Zudem entsteht auf natürliche Weise Platz für Keywords.

Die für den Nutzer praktischen Navigationshilfen sind aus Gründen der Benutzerfreundlichkeit nicht mehr wegzudenken. Für die SEO sowie die OnPage Optimierung ist es entscheidend, die Breadcrumbs richtig zu implementieren. Inzwischen wird die Breadcrumb-Navigation zum Teil in den SERPs bei Google in der URL-Zeile optisch hervorgehoben, weil sie als Rich Snippets angezeigt wird. Das hat auch für den Suchenden einen Vorteil, weil er den Kontext einer Webseite bereits beim flüchtigen Scannen erfassen kann und so schneller erkennt, ob das Suchergebnis für ihn wichtig ist.

SEO Breadcrumb Grundlagen:

• Mit der Startseite beginnen und der aktuellen Seite beenden
• Keine Abkürzungen, immer alle Ebenen nennen
• Mit der höchsten Ebene anfangen und fortlaufend nach rechts bis zur niedrigsten Ebene
• Keine Breadcrumbs in der Startseite
• Breadcrumb-Navigation, wo sie schnell sichtbar ist
• Keine irreführenden Hierarchien. So kann es die Suchmaschine und der Nutzer verstehen
• Breadcrumbs auszeichnen, so hilfst du Google
• Das wichtigste Keyword oder den vollen Seitentitel in die einzelnen Breadcrumb-Elemente
• Auf allen Seiten Breadcrumb-Navigation
• Breadcrumbs sollten stets mit den Bezeichnungen im Menü übereinstimmen

Breadcrumb HTML

HTML sieht für die Auszeichnung einer Brotkrumennavigation kein Element vor. Bei einer Website Breadcrumb Navigation handelts es sich meist um eine Folge von Links, die zu übergeordneten Webseiten gehören. Du solltest die Links daher als Navigationsregion auszeichnen.

Die meisten Quellen empfehlen die Brotkrumennavigation entweder als eine Aufzeichnung mit UL, eine Nummerierung mit OL oder als einen Absatz mit P ohne Listenelemente aufzubereiten. Die Listen haben leichte Vorteile, weil Screenreader vorher ankündigen, wie viele Listeneinträge in der Breadcrumb Navigation stehen.