In diesem Artikel erklären wir Euch, was Breadcrumbs sind, welche Vorteile sie haben und wie Ihr sie im Handumdrehen in Eure Website implementieren könnt.
Schon Hänsel und Gretel haben sich bei der Navigation durch den Wald auf Brotkrümel verlassen. Und das zu Recht. Breadcrumbs erleichtern das Navigieren nicht nur im Wald, sondern auch in der Online-Welt. Doch was genau sind Breadcrumbs eigentlich? Und welche Vorteile haben Sie für Euch als Unternehmer*innen? Wir klären auf!
Was sind Breadcrumbs?
Breadcrumbs – zu Deutsch Brotkrumen oder Brotkrümel – sind interne Links innerhalb einer Website. Sie dienen der sekundären Navigation und helfen Nutzer*innen, zuvor aufgerufene Seiten oder die Einstiegsseite einer Website wiederzufinden.
Der Begriff geht auf das Märchen „Hänsel und Gretel“ zurück, in dem die Geschwister mithilfe von Brotkrümeln den Weg aus dem Wald finden. Ähnlich funktionieren die Breadcrumbs auf einer Website. Um leicht wieder auf zuvor besuchte Seiten zu gelangen, werden Brotkrümel verwendet. Jede Seite entspricht einem Breadcrumb. Dank dieser Breadcrumbs können Website-Besucher*innen schnell und einfach auf Eure Website navigieren. Demnach spricht man oft auch von einer Breadcrumb-Navigation.
Was ist eine Breadcrumb-Navigation?
Insbesondere im E-Commerce sind Breadcrumbs nicht mehr wegzudenken. Sie machen den Online-Shop benutzerfreundlich und den Seiten-Verlauf nachvollziehbar. Dadurch wissen Euren Website-Besucher*innen zu jedem Zeitpunkt, wo auf der Website sie sich befinden.
Wie wird eine Breadcrumb-Navigation grafisch dargestellt?
Eine Breadcrumb-Navigation ist in der Regel als Pfad-Navigation aufgebaut und berücksichtigt die Seiten-Hierarchie. Wichtig ist, dass Website-Besucher*innen die Breadcrumb-Navigation leicht verstehen und sie sich nicht in den Vordergrund der Website drängt. Meistens befindet sich die sekundäre Brotkrümel-Navigation im oberen Seitenbereich und sieht ähnlich wie folgende aus:
Die Trennzeichen für Breadcrumbs sind häufig Pfeile oder andere typografische Zeichen. Auch eine numerische Auflistung ist möglich. Durch einen einfachen Klick gelangen die Website-Besucher*innen wieder zurück zur Startseite oder zu einer zuvor besuchten Seite. Das letzte Element in der Breadcrumb-Navigation ist nicht anklickbar, weil sich die Website-Besucher*innen gerade auf dieser Seite befinden.
Je nach Webdesign könnt Ihr die Breadcrumb-Navigation an Eure Vorlieben (und an die Eurer Nutzer*innen) anpassen. Achtet darauf, dass Ihr das Breadcrumb-Menü auf allen Seiten Eurer Website anbietet und dadurch Einheitlichkeit schafft. Auch die Farbgebung und Schriftart und -größe sollten identisch sein. Grundsätzlich gilt: Die Breadcrumb-Navigation muss den Pfad von der Haupt-Seite bis zur aktuellen Position logisch und übersichtlich darstellen. Vergesst dabei jedoch nicht, dass eine Breadcrumb-Navigation eine sekundäre Navigation ist und das primäre Menü nicht ersetzt. Deswegen sollten sich primäre und sekundäre Navigation auch designtechnisch klar voneinander unterscheiden.
Welche Arten von Breadcrumbs gibt es?
Breadcrumbs unterscheiden sich von Klick-Pfaden durch ihren logischen Aufbau. Klick-Pfade sind mitunter zirkulär angeordnet. Dennoch sind die Klick-Pfade, die Eure Website-Besucher*innen verfolgen, ausschlaggebend für Eure Breadcrumbs. Mithilfe ihrer Daten werden Breadcrumbs erzeugt.
Es werden drei Arten von Breadcrumbs unterschieden, je nachdem auf welche Website-Ebene sie sich beziehen:
- Klick-Pfad (Path): Klick-Pfad-Breadcrumbs zeichnen den exakten Verlauf des Website-Besuches nach. Sie orientieren sich dabei an den Klick-Pfaden. Im Vergleich zu den positionsbezogenen oder eigenschaftsbasierten Breadcrumbs ist diese Art jedoch nur wenig hilfreich. Je nach Nutzerverhalten würden die Breadcrumbs dann Website-Ebenen überspringen. Mit den Vor- und Zurück-Pfeilen im Browser-Menü können die Nutzer*innen auch ohne Breadcrumbs auf der Website problemlos vor- oder zurückspringen.
Beispiel eines Klickpfads für Breadcrumbs.
- Position (Location): Positionsbezogene Breadcrumbs repräsentieren die Struktur einer Website. Sie helfen Nutzer*innen, die Seiten-Hierarchie mit mehreren Ebenen (mehr als zwei) zu verstehen und nachzuvollziehen. Diese Art der Breadcrumbs ist hilfreich für Besucher*innen, die über eine externe Quelle (z. B. ein Suchmaschinen-Ergebnis) auf eine tiefere Ebene Eurer Website gestoßen sind.
- Eigenschaft (Attribute): Eigenschaftsbasierte Breadcrumbs zeigen den Besucher*innen, zu welcher Kategorie die aktuelle Seite gehört bzw. welche Attribute die aktuelle Seite aufweist. In Online-Shops kommen diese Breadcrumbs auf Produktebene zum Einsatz. Sie ermöglichen den Nutzer*innen das Filtern und Suchen nach bestimmten Artikeln. Oft treten kategoriebasierte Breadcrumbs in Kombination mit positionsbasierten Breadcrumbs auf.
Eigenschaftsbasierte Breadcrumbs zeigen, auf welcher Seiten-Variante man sich befindet.
Welche Einsatzmöglichkeiten gibt es für Breadcrumbs?
Eine Breadcrumbs-Navigation kommt vor allem im E-Commerce bzw. bei Online-Shops zum Einsatz. Nutzer*innen können so schnell aus einer Vielzahl an Produkten die für sie relevanten Produkte herausfiltern. Auch auf umfangreichen Websites und bei großen Portalen kann der Einsatz von Breadcrumbs unterstützend wirken. Wichtig ist, dass die Website einen logischen Aufbau hat und die Besucher*innen mithilfe der Breadcrumbs einfach navigieren können.
Ihr seid Euch unsicher, ob eine Breadcrumb-Navigation auf Eurer Website sinnvoll ist? Mithilfe des passenden SEO-Tools könnt Ihr im Handumdrehen eine Sitemap erstellen und den Aufbau Eurer Website visualisieren. Umfasst Eure Website mehrere Ebenen und folgt einem logischen Aufbau, dann ist auch eine Breadcrumb-Navigation hilfreich. Anschließend könnt Ihr die Breadcrumb-Navigation genau wie die erstellte Sitemap aufbauen. Auf OMR Reviews findet Ihr dazu die beliebtesten SEO-Softwares im Vergleich.
Wie könnt Ihr Breadcrumbs auf Eurer Website umsetzen?
Je nach Bedarf können Breadcrumbs auf unterschiedliche Weisen in eine Website eingebunden werden:
- Plug-in: Einige CMS, wie WordPress, bieten unterschiedliche Plug-ins für Breadcrumbs an. Dank des zusätzlichen Programmes könnt Ihr Breadcrumbs in null Komma nichts in Eure Website einbinden. Manche Plug-ins ermöglichen Euch außerdem die Aufnahme Eurer Breadcrumbs in die SERPs. Dadurch tragen sie zur SEO Eurer Website bei.
- PHP und JavaScript: Auch durch einzelne Codeteile aus verschiedenen Programmier-Sprachen ist die Einbindung von Breadcrumbs möglich. In PHP beispielsweise wird zuerst die Funktion definiert. Anschließend kann diese im Dokument aufgerufen werden. Mit JavaScript werden zudem dynamisch generierte Websites unterstützt.
- Content-Management-System: Viele CMS oder auch Online-Shop-Systeme ermöglichen Euch die direkte Einbindung von Breadcrumbs im Backend. Die Umsetzung ist meist sehr einfach und erfolgt durch wenige Klicks.
- HTML: Entscheidet Ihr Euch für die manuelle Umsetzung mittels HTML, so müsst Ihr zuerst die entsprechenden Links in einem Div zusammenfassen. Die relativen Pfade verweisen dann auf die zuvor aufgerufenen Seiten. Mithilfe von CSS könnt Ihr anschließend das Design gestalten.
Was sind die Vorteile einer Breadcrumb-Navigation?
Breadcrumbs helfen nicht nur Euren Nutzer*innen dabei, sich im Website-Wald zurechtzufinden. Sie haben noch viele weitere Vorteile:
- Verbesserte User-Experience durch einfache Website-Benutzung und -Navigation
- Einfaches Zurechtfinden bei Zugang über externe Links (Suchmaschinen-Ergebnisse)
- Leichte und individuell gestaltbare Implementierung
- Geringer Platzverbrauch
- Intuitive und benutzerfreundliche Bedienung
- Weniger Klicks, um zu einer höheren Seite zu gelangen
- Hilfreich bei der Content-Strukturierung und somit Teil der SEO-Strategie
- Geringere Absprungrate durch einfachen Zugriff auf andere Seiten
Welche Bedeutung haben Breadcrumbs für Eure SEO?
Schriftart, Farbwahl und Platzierung der Breadcrumbs können erheblich zum Design einer Website beitragen. Aber beeinflusst etwa die Platzierung der Breadcrumbs auch Eure SEO? Die Antwortet darauf lautet kurz und knapp: nein.
Trotzdem sind Breadcrumbs nicht ganz irrelevant für Eure SEO-Strategie. Als sekundäres Informations-System helfen sie Suchmaschinen bei der Kategorisierung Eurer Inhalte. Essenziell dabei ist, dass Ihr die Breadcrumbs stets gleich benennt. Keywords eignen sich hierbei gut als Namensgeber.
Fazit: Krümelmonster oder nicht – Breadcrumbs verbessern die Benutzerfreundlichkeit Eurer Website
Breadcrumbs unterstützen Nutzer*innen nicht nur bei der Navigation, sondern verbessern auch die allgemeine User-Experience. Vor allem, wenn Besucher*innen über externe Quelle wie Google auf Eure Website stoßen, verringern Breadcrumbs die Absprungrate. Sie verleiten Nutzer*innen dazu, länger auf Eurer Website zu bleiben und sich so in potenzielle Kund*innen zu verwandeln. Zudem haben Breadcrumbs einen positiven Einfluss auf Eure SEO.
Nun fehlt nur noch die Moral von der Geschicht‘: „Breadcrumbs zu verwenden, schadet Eurem Unternehmen sicher nicht.“ Also, worauf wartet Ihr noch? Weckt das Krümelmonster in Euch und implementiert eine Breadcrumb-Navigation in Eure Website.
