Was ist eine Breadcrumb-Navigation?

Kurz und knapp: Was ist eine Breadcrumb Navigation?

Eine Breadcrumb Navigation (auch Brotkrümelnavigation oder Brotkrumennavigation) dient als eine zweite Navigation auf Deiner Website. Sie befindet sich oft im oberen Bereich der Webseite und stellt den Link-Pfad dar, der dem User zur Orientierung auf der Website dient. So erkennt er jederzeit, auf welcher Ebene auf der Website er sich aktuell befindet.

Inhalt

• Was ist eine Breadcrumb Navigation?
  • Bedeutung
  • Warum eine Breadcrumb Navigation?
• Darstellung der Breadcrumbs
• Breadcrumbs richtig einbinden
• Breadcrumbs und SEO
• Fazit

Was ist eine Breadcrumb Navigation?

Bedeutung der Breadcrumb Navigation

Der Name Breadcrumb-Navigation führt zurück auf das Märchen von Hänsel und Gretel. Durch das Verteilen von Brotkrümeln (Breadcrumbs) fanden die Kinder zurück aus dem Wald. Was im Märchen der Wald ist, sind heute verschachtelte Webseiten und solche mit mehreren Hierarchien.

Warum eine Breadcrumb Navigation?

Um Nutzer das Zurückfinden auf vorherige Ebenen zu ermöglichen, werden Breadcrumbs verwendet. So verfolgen sie den Weg innerhalb Deiner Webseite und kennen jederzeit die aktuelle Position. Durch die Möglichkeit eines Klicks auf die anderen Hierarchien steigt die Usability (Nutzerfreundlichkeit) Deiner Seite – und vor allem in größeren Onlineshops mit vielen Kategorien bietet das eine gute Übersicht.

Darstellung von Breadcrumbs

Zur Auswahl stehen mehrere Varianten. In der Regel werden die verschiedenen Hierarchien mit Größer-als-Zeichen > voneinander getrennt. Möglich sind auch weitere Symbole wie Trennstriche oder Pfeile.

Der letzte Breadcrumb-Pfad, also die aktuelle Position des Users auf der Webseite, ist nicht anklickbar. Mit einem Klick auf eine der oberen Ebenen (der anderen Breadcrumbs) gelangt der Nutzer dank Verlinkung einfach wieder zurück auf die entsprechende Seite. 

Achte jedoch darauf, dass Deine Breadcrumb-Navigation nicht Deine Hauptnavigation in den Schatten stellt. Diese Art der Navigation dient lediglich als Hilfestellung für Deine Nutzer und erhöht die Usability Deiner Webseite. Deine eigentliche Navigation sollte stets präsent und intuitiv bedienbar sein.

Breadcrumbs richtig einbinden

Basiert Deine Website auf WordPress oder anderen Content-Management-Systemen, gibt es entsprechende Plugins, mit denen Du eine Breadcrumb-Navigation ganz einfach implementieren kannst. Für Websites abseits von CM-Systemen, liefern wir Dir jetzt Code-Beispiele. Dafür greifen wir das Beispiel der Navigation oben noch einmal auf, was die Anzahl der Navigationstiefe betrifft.

Um Deine Navigation suchmaschinenfreundlich einzubinden, empfehlen sich Mikrodaten oder die Verwendung von JSON-LD.

Mit Mikrodaten strukturierst Du Deine Breadcrumb-Navigation direkt im zugehörigen HTML-Code.

<ol itemscope itemtype="https://schema.org/BreadcrumbList" class="breadcrumb-nav">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://www.beispielseite.de/">
    <span itemprop="name">Startseite</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://www.beispielseite.de/kategorie/">
    <span itemprop="name">Kategorie</span></a>
    <meta itemprop="position" content="2" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://www.beispielseite.de/kategorie/subkategorie/">
    <span itemprop="name">Subkategorie</span></a>
    <meta itemprop="position" content="3" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://www.beispielseite.de/kategorie/subkategorie/produkt.php">
    <span itemprop="name">Produkt</span></a>
    <meta itemprop="position" content="4" />
  </li>
</ol>

Bei der Verwendung von JSON-LD hingegen fügst Du an eine geeignete Stelle (zum Beispiel im head) Deiner Seite das Script ein. Die Platzierung erfolgt also unabhängig von dem HTML-Code Deiner Breadcrumb-Navigation. Dein Code in JSON-LD wird Usern nicht angezeigt.

<ol class="breadcrumb-nav">
  <li><a href="https://www.beispielseite.de/">Startseite</a></li>
  <li><a href="https://www.beispielseite.de/kategorie/">Kategorie</a></li>
  <li><a href="https://www.beispielseite.de/kategorie/subkategorie/">Subkategorie</a></li>
  <li><a href="https://www.beispielseite.de/kategorie/subkategorie/produkt.php">Produkt</a></li>
</ol>

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "BreadcrumbList",
 "itemListElement":
 [
  {
   "@type": "ListItem",
   "position": 1,
   "item":
   {
    "@id": "https://www.beispielseite.de/",
    "name": "Startseite"
    }
  },
  {
   "@type": "ListItem",
  "position": 2,
  "item":
   {
     "@id": "https://www.beispielseite.de/kategorie/",
     "name": "Kategorie"
   }
  },
  {
   "@type": "ListItem",
   "position": 3,
   "item":
   {
    "@id": "https://www.beispielseite.de/kategorie/subkategorie/",
    "name": "Subkategorie"
    }
  },
  {
   "@type": "ListItem",
   "position": 4,
   "item":
   {
    "@id": 
    "https://www.beispielseite.de/kategorie/subkategorie/produkt.php",
    "name": "Produkt"
    }
  }
 ]
}
</script>

Breadcrumbs und SEO

Eine Breadcrumb-Navigation hat zwar keinen direkten Einfluss auf Dein Google Ranking, verbessert jedoch die Usability Deiner Website. Nutzer verbringen mehr Zeit auf Deiner Seite, was Google als positives Signal wahrnimmt und Deine Chancen auf ein gutes Ranking steigen lässt. Natürlich spielen noch sehr viele wichtigere Faktoren eine Rolle in Deiner Suchmaschinenoptimierung, die Art der Darstellung von Navigationen auf Deiner Webseite sollte jedoch nie außer Acht gelassen werden.

Fazit

Breadcrumbs dienen auf Deiner Website für mehr Übersichtlichkeit und einer verbesserten Usability, was Dich bei Google besser positionieren lassen kann. Vor allem Websites mit tierfergehender Struktur und Onlineshops mit großer Produktauswahl in mehreren Kategorien sollten auf eine Breadcrumb-Navigation setzen. Kleines Extra, große Wirkung – achte jedoch darauf, dass Deine Hauptnavigation präsenter und intuitiv bedienbar ist.

Mehr Tipps für Websites oder zur Suchmaschinenoptimierung? Melde Dich bei uns!