Breadcrumbs

Was sind Breadcrumbs?

Breadcrumbs sind ein Navigationshilfsmittel, das auf jeder Unterseite zeigt, wo sie in der Hierarchie einer Website liegt. Das englische Wort, auch getrennt bread crumbs geschrieben, bedeutet Brotkrumen. Im Deutschen heißt das Element Brotkrümelnavigation oder Brotkrumennavigation, Google nennt es in seiner deutschen Dokumentation Navigationspfad, gebräuchlich ist auch Breadcrumb-Navigation. Das Usability-Institut Nielsen Norman Group zählt Breadcrumbs zur sekundären Navigation, die das Hauptmenü ergänzt und nicht ersetzt.

Der Name spielt auf das Märchen Hänsel und Gretel an. In der Fassung der Brüder Grimm streut Hänsel Brotkrumen auf den Weg in den Wald, um nach Hause zurückzufinden. Die Vögel picken sie auf, und die Kinder verirren sich. Auf einer Website bleibt die Spur dagegen liegen, denn die Glieder der Breadcrumb sind feste Links.

Außerhalb von Web und Webdesign hat das Wort andere Bedeutungen. In der Küche sind breadcrumbs Paniermehl. Breadcrumbing bezeichnet beim Online-Dating, dass jemand mit gelegentlichen Nachrichten Interesse zeigt, ohne eine Beziehung zu wollen. In GPS-Geräten heißt die aufgezeichnete Wegspur im Englischen ebenfalls Breadcrumb Trail.

Aufbau einer Breadcrumb-Navigation mit Beispielen

Eine Breadcrumb ist eine Zeile, die mit der Startseite beginnt und mit der aktuellen Seite endet. Jedes Glied steht für eine Ebene der Hierarchie, alle Glieder vor der aktuellen Seite sind Links auf übergeordnete Seiten. Zwischen den Gliedern steht ein Trennzeichen, meist ein Winkel wie › oder > oder ein Schrägstrich. Die Nielsen Norman Group empfiehlt >, hält den Schrägstrich aber für gleichwertig.

Drei Regeln bestimmen den Aufbau. Die aktuelle Seite steht als letztes Glied ohne Link, denn ein Link auf die geöffnete Seite führt nirgendwohin, und sie hebt sich optisch von den Links ab. Jedes andere Glied führt zu einer echten Seite, Rubriken aus dem Menü ohne eigene Seite gehören nicht hinein. Außerdem bildet der Pfad die Hierarchie ab, nicht den Weg, den jemand gerade geklickt hat.

Typische Breadcrumb-Beispiele aus der Finanzbranche sehen so aus.

• Versicherer. Startseite › Versicherungen › Kfz-Versicherung › Tarifrechner
• Bank. Startseite › Konten & Karten › Girokonto
• Ratgeber. Startseite › Ratgeber › Baufinanzierung › Zinsbindung

Am fiktiven Versicherer auf example.com lässt sich der Nutzen durchspielen. Wer über eine Suchmaschine direkt im Tarifrechner landet, kommt mit einem Klick zur Produktseite der Kfz-Versicherung und mit zwei Klicks zur Übersicht aller Versicherungen. Laut Nielsen Norman Group helfen Breadcrumbs vor allem solchen Quereinsteigern, die eine Website nicht über die Startseite betreten.

Wo sitzt die Breadcrumb im Aufbau einer Website?

Die Breadcrumb sitzt oben auf der Seite, laut Nielsen Norman Group meist direkt unter der Hauptnavigation und damit über der Hauptüberschrift. Die Figur zeigt die wichtigsten Begriffe zum Aufbau einer Website, sechs Seitenbausteine von oben nach unten.

Hauptnavigation und Breadcrumb teilen sich die Arbeit. Die Hauptnavigation führt in die großen Bereiche einer Website, die Breadcrumb zeigt den Weg von der aktuellen Seite zurück nach oben. Welche Bereiche und Ebenen eine Website braucht und wie Kategorien zugeschnitten werden, klärt die Informationsarchitektur. Die Breadcrumb macht diese Struktur auf jeder Seite sichtbar.

Welche Arten von Breadcrumbs gibt es?

Unterschieden werden hierarchiebasierte, attributbasierte und verlaufsbasierte Breadcrumbs, Standard ist die hierarchiebasierte Form. Die Einteilung stellte der Informationsarchitekt Keith Instone 2002 auf dem IA Summit vor, beschrieben ist sie unter anderem im Smashing Magazine (03/2009).

• Hierarchiebasiert. Auch standortbasiert genannt. Die Breadcrumb zeigt die Position der Seite in der Struktur der Website, etwa Startseite › Versicherungen › Kfz-Versicherung. Der Pfad ist für alle Besucher gleich, egal auf welchem Weg sie kommen.
• Attributbasiert. Die Breadcrumb zeigt die Eigenschaften, nach denen eine Liste gefiltert ist, in einem Vergleichsrechner etwa Kreditkarten › ohne Jahresgebühr › mit Reiseversicherung.
• Verlaufsbasiert. Die Breadcrumb zeigt die zuletzt besuchten Seiten in der Reihenfolge des Besuchs, ähnlich dem Zurück-Button des Browsers. Die Nielsen Norman Group rät davon ab, weil die Zeile schnell lang und unübersichtlich wird und Besuchern, die über einen externen Link direkt auf eine tiefe Seite kommen, nichts zeigt.

Welchen Nutzen haben Breadcrumbs für SEO?

Breadcrumbs nützen der SEO indirekt, als interne Links und als Hinweis auf die Hierarchie, ein direkter Rankingfaktor sind sie nicht. Jede Seite mit Breadcrumb verlinkt auf alle übergeordneten Seiten. Kategorie- und Übersichtsseiten bekommen so Links von jeder Unterseite ihres Bereichs, und Crawler finden über die Breadcrumb-Navigation von tiefen Seiten zurück nach oben. Die Rubriknamen dienen dabei als Ankertexte. Wie solche Links insgesamt geplant werden, beschreibt der Artikel zur internen Verlinkung.

Diese Wirkung haben nur die Links der sichtbaren Breadcrumb. URLs aus strukturierten Daten nutzt Google laut seinem Search Advocate John Mueller nicht wie normale interne Links (Search Engine Journal, 08.03.2022).

Als Hinweis auf die Hierarchie zeigt die Breadcrumb, zu welchem Bereich eine Seite gehört. Google nutzt das Breadcrumb-Markup laut seiner Dokumentation, um die Informationen einer Seite in den Suchergebnissen einzuordnen. Einen Rankingvorteil bringt das Markup nicht. Mueller schrieb 2025 auf Bluesky, strukturierte Daten verbesserten das Ranking einer Website nicht, sie dienten den Funktionen in der Suche (Search Engine Journal, 15.04.2025).

Breadcrumbs in der KI-Suche

Für die KI-Suche gehört die Breadcrumb über die H1, nicht darunter. Der eigene Suchindex von ChatGPT, Labrador, liefert laut Search Engine Land (17.08.2026) neben dem Titel ein Snippet von rund 200 Zeichen um die H1. Was direkt unter der H1 steht, etwa Kategorie-Labels oder Autorenzeilen, wandert ins Snippet und verdrängt den Inhalt. Die KKP-Auswertung zum ChatGPT-Suchindex Labrador empfiehlt deshalb, die Kernaussage direkt hinter die H1 zu setzen. Ob auch eine Breadcrumb über der H1 ins Snippet gerät, ist nicht eigens untersucht.

Wie zeigt Google Breadcrumbs in der Suche an?

Google zeigt im Desktop-Treffer einen Navigationspfad hinter der Domain, auf Mobilgeräten seit dem 23.01.2025 nur noch die Domain. Laut Googles Galerie der visuellen Elemente besteht die sichtbare URL eines Treffers aus zwei Teilen, der Domain und dem Navigationspfad. Den Pfad lernt Google laut SEO-Startleitfaden automatisch aus den Wörtern der URL. Mit BreadcrumbList-Markup lässt er sich beeinflussen, dann können Rubriknamen aus dem Markup statt der Verzeichnisse erscheinen. Google führt den Navigationspfad in seiner Galerie der Funktionen für strukturierte Daten, also bei den Rich Results, die der Artikel zu Rich Snippets beschreibt.

Mobil verzichtet Google laut Search Central Blog seit dem 23.01.2025 in allen Sprachen und Regionen auf den Pfad, weil er auf kleinen Bildschirmen abgeschnitten wurde. Für den Desktop unterstützt Google das Markup weiter, auch der Search-Console-Bericht für Navigationspfade bleibt. Für die SEO gestaltet das Markup also den Desktop-Treffer, nicht das Ranking. Wo der Treffer auf der Ergebnisseite steht und welche Elemente sie sonst enthält, beschreibt der Artikel zur SERP.

Eine KKP-Messung vom 05.10.2026 zeigt das Bild für Finanzthemen. Bei fünf Suchanfragen von „tagesgeld vergleich“ bis „ratenkredit“ zeigten am Desktop 43 von 46 organischen Treffern einen Pfad, 17 davon mit Rubriknamen statt URL-Verzeichnissen. Mobil zeigte keiner der 46 Treffer einen Pfad. In einer KKP-Stichprobe vom 03.10.2026 mit denselben Suchanfragen entsprachen alle 17 damals gefundenen Pfade mit Rubriknamen dem BreadcrumbList-Markup der jeweiligen Seite.

Breadcrumbs auf Mobilgeräten und mobile SEO

Auf dem Smartphone sollte eine Breadcrumb in eine Zeile passen und gut antippbar bleiben, notfalls zeigt sie nur die nächsthöhere Ebene. So empfiehlt es die Nielsen Norman Group. Mehrzeilige Breadcrumbs schieben den Inhalt nach unten, und Tippziele brauchen laut dem Institut mindestens 1 × 1 cm. Die WCAG 2.2 verlangen im Kriterium 2.5.8 mindestens 24 × 24 CSS-Pixel. Im Tarifrechner des Beispiels genügt mobil ein Link „‹ Kfz-Versicherung“ zurück zur Produktseite, am Desktop bleibt der volle Pfad.

Für die mobile SEO sollte die gekürzte Breadcrumb im HTML vollständig bleiben. Google indexiert die mobile Fassung einer Seite und nutzt laut seiner Dokumentation zur Mobile-First-Indexierung nur deren Inhalt. Links und Markup der Breadcrumb gehören deshalb auch in die mobile Seite, die Kürzung übernimmt das CSS. Wer mobil eigenes HTML ausliefert, etwa über getrennte mobile URLs, und dort strukturierte Daten priorisieren muss, beginnt laut Google mit Breadcrumb, Product und VideoObject.

BreadcrumbList-Markup und HTML-Code

Technisch besteht eine Breadcrumb aus zwei Teilen, dem sichtbaren HTML für Besucher und dem BreadcrumbList-Markup für Suchmaschinen. Beide beschreiben denselben Pfad.

HTML-Grundgerüst und Barrierefreiheit

Das HTML-Grundgerüst einer Breadcrumb ist ein nav-Element mit einer Beschriftung und darin eine geordnete Liste. So beschreibt es das Breadcrumb-Muster im ARIA Authoring Practices Guide des W3C. Das nav-Element macht die Breadcrumb zu einer Navigationsregion, die Screenreader direkt ansteuern, das Attribut aria-label gibt ihr einen Namen. Die geordnete Liste hält die Reihenfolge der Ebenen fest. Ist die aktuelle Seite verlinkt, trägt der Link aria-current="page", ohne Link ist das Attribut laut W3C optional. Die Trennzeichen kommen aus dem CSS, damit Screenreader sie nicht mitlesen.

BreadcrumbList nach Schema.org

Für Suchmaschinen wird der Pfad als BreadcrumbList nach Schema.org ausgezeichnet, in JSON-LD, dem von Google empfohlenen Format, oder alternativ in Microdata oder RDFa. Laut Google braucht die Liste mindestens zwei Einträge vom Typ ListItem. Jeder Eintrag nennt seine Stelle im Pfad (position, ab 1), den angezeigten Namen (name) und die URL der Seite (item), beim letzten Eintrag darf item fehlen. Einträge für die Startseite und für die Seite selbst verlangt Google nicht.

Google empfiehlt, einen typischen Nutzerpfad abzubilden, statt die URL-Struktur zu spiegeln. Im Beispiel liegt der Tarifrechner unter example.com/rechner/kfz, die Breadcrumb ordnet ihn trotzdem der Kfz-Versicherung zu. Ist eine Seite über mehrere Wege erreichbar, darf sie laut Google mehrere Pfade im Markup tragen.

<nav aria-label="Navigationspfad">1
  <ol>
    <li>
      <a href="/">Startseite</a>
    </li>
    <li>
      <a href="/versicherungen/">
        Versicherungen
      </a>
    </li>
    <li>
      <a href="/versicherungen/kfz/">
        Kfz-Versicherung
      </a>
    </li>
    <li aria-current="page">2
      Tarifrechner
    </li>
  </ol>
</nav>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",3
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Startseite",
    "item": "https://www.example.com/"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Versicherungen",4
    "item": "https://www.example.com/versicherungen/"5
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "Kfz-Versicherung",
    "item": "https://www.example.com/versicherungen/kfz/"
  },{
    "@type": "ListItem",
    "position": 4,
    "name": "Tarifrechner"6
  }]
}
</script>

Sichtbare Breadcrumb und Markup sollten übereinstimmen, denn strukturierte Daten müssen laut Google eine realitätsgetreue Darstellung der Seiteninhalte sein. Wie strukturierte Daten grundsätzlich funktionieren und wie sich das Markup testen lässt, erklärt der Artikel zu strukturierten Daten.

Breadcrumbs in WordPress hinzufügen

In WordPress kommen Breadcrumbs meist aus einem SEO-Plugin wie Yoast SEO oder Rank Math oder direkt aus dem Theme. Pro Seite sollte nur eine dieser Quellen die Breadcrumb und ihr Markup ausgeben.

• Yoast SEO. Die Breadcrumbs werden in den Plugin-Einstellungen unter Erweitert › Breadcrumbs aktiviert. Ins Theme kommen sie per PHP-Funktion yoast_breadcrumb(), in einzelne Seiten und Beiträge als Block „Yoast Breadcrumbs“ oder per Shortcode [wpseo_breadcrumb]. Das BreadcrumbList-Markup legt Yoast laut Entwicklerdokumentation auf allen öffentlichen Seiten im eigenen Schema-Graphen an.
• Rank Math. Die Breadcrumbs liegen in den allgemeinen Einstellungen des Plugins und sind im erweiterten Modus sichtbar. Eingebunden werden sie per Funktion rank_math_the_breadcrumbs() oder Shortcode [rank_math_breadcrumb]. Das Markup gibt Rank Math aus, wenn die Breadcrumbs aktiv sind und das Schema-Modul eingeschaltet ist.

<?php
if ( function_exists( 'yoast_breadcrumb' ) ) {
  yoast_breadcrumb( '<p id="breadcrumbs">', '</p>' );
}
?>

Viele Themes bringen eigene Breadcrumbs mit. Laufen Theme- und Plugin-Breadcrumbs gleichzeitig, stehen oft zwei Pfade auf der Seite und zwei BreadcrumbList-Blöcke im Quelltext, manchmal mit unterschiedlichen Namen. Google erlaubt zwar mehrere Pfade, gemeint sind aber verschiedene Wege zur Seite, keine doppelte Ausgabe desselben Pfads. Eine Suche nach „BreadcrumbList“ im Quelltext zeigt, wie viele Quellen aktiv sind.

Best Practices und typische Fehler

Eine gute Breadcrumb folgt der Hierarchie, beginnt bei der Startseite und endet bei der aktuellen Seite. Fehler entstehen meist, wenn Pfad, Navigation und Markup auseinanderlaufen.

• Hierarchie statt URL. Der Pfad zeigt, wohin eine Seite inhaltlich gehört, nicht zwingend die Verzeichnisse der URL.
• Startseite als erstes Glied. Die Nielsen Norman Group empfiehlt einen Link zur Startseite am Anfang, sofern die Hauptnavigation keinen enthält. Im Markup ist dieser Eintrag laut Google optional.
• Ein fester Pfad pro Seite. Gehört eine Seite zu mehreren Bereichen, zeigt die sichtbare Breadcrumb einen festgelegten Hauptpfad. Personalisierte Pfade senden laut Nielsen Norman Group gemischte Signale an Suchmaschinen.
• Dieselben Namen überall. Rubriknamen in Breadcrumb, Hauptmenü und Markup stimmen überein, damit Besucher und Suchmaschinen dieselbe Struktur sehen.
• Nur erreichbare Seiten verlinken. Jedes Glied außer dem letzten führt ohne Weiterleitung zu einer echten Seite.
• Nicht überall nötig. Bei flachen Websites mit ein oder zwei Ebenen und bei linear aufgebauten Strecken, etwa einem mehrstufigen Antrag, bringt eine Breadcrumb laut Nielsen Norman Group keinen Nutzen.

Gratis Download

AI Search Guide: Sichtbar in ChatGPT & Co.

Der Praxis-Guide zeigt auf 164 Seiten, wie eine Brand in ChatGPT, Google AI Overviews, Gemini und Perplexity sichtbar wird, von den Grundlagen über Messung und KPIs bis zu konkreten Maßnahmen.

Kostenlos herunterladen →