Breadcrumbs

Was sind Breadcrumbs?

Breadcrumbs, auf Deutsch oft als Brotkrumen-Navigation bezeichnet, sind ein Navigationsmittel auf Webseiten, das dir hilft, deinen aktuellen Standort innerhalb der Seitenhierarchie zu verstehen und schnell zu höheren Ebenen zurückzukehren. Sie bestehen aus einer Reihe von Links, die typischerweise horizontal am oberen Rand einer Seite angezeigt werden und die Pfadstruktur der Seite darstellen.

Warum sind Breadcrumbs wichtig?

Verbesserung der Benutzerfreundlichkeit

Breadcrumbs erleichtern es dir als Nutzer, dich auf einer Webseite zurechtzufinden. Wenn du auf einer Unterseite landest, zeigen dir Breadcrumbs genau, wo du dich innerhalb der Seitenstruktur befindest. Sie bieten eine zusätzliche Navigationsebene, die die Hauptnavigation ergänzt und die Benutzererfahrung verbessert.

Suchmaschinenoptimierung (SEO)

Für Suchmaschinen wie Google sind Breadcrumbs hilfreich, um die Struktur einer Webseite besser zu verstehen. Sie können in den Suchergebnissen angezeigt werden und so die Klickrate erhöhen. Zudem verbessern sie die interne Verlinkung, was sich positiv auf das Ranking auswirken kann.

Arten von Breadcrumbs

Pfadbasierte Breadcrumbs

Diese zeigen den Pfad, den du genommen hast, um zu der aktuellen Seite zu gelangen. Sie sind jedoch weniger nützlich, da sie sich je nach Navigationsweg ändern können und nicht unbedingt die Seitenhierarchie widerspiegeln.

Beispiel:

Startseite > Vorherige Seite > Aktuelle Seite

Hierarchie-basierte Breadcrumbs

Diese Art zeigt die Position der aktuellen Seite innerhalb der Seitenhierarchie. Sie sind statisch und helfen dir, zu höheren Ebenen der Website zurückzukehren.

Beispiel:

Startseite > Kategorie > Unterkategorie > Aktuelle Seite

Attributbasierte Breadcrumbs

Vor allem in Online-Shops werden diese verwendet, um Filter und Eigenschaften anzuzeigen, die du ausgewählt hast.

Beispiel:

Startseite > Kleidung > Herren > Größe: M > Farbe: Blau

Vorteile von Breadcrumbs

• Einfachere Navigation: Du kannst schnell zu übergeordneten Seiten zurückkehren.
• Reduzierte Absprungrate: Nutzer bleiben eher auf der Seite, wenn sie sich leicht zurechtfinden.
• Verbesserte SEO: Suchmaschinen verstehen die Seitenstruktur besser, was das Ranking positiv beeinflussen kann.
• Weniger Klicks: Du erreichst gewünschte Seiten mit weniger Klicks.

Best Practices für die Verwendung von Breadcrumbs

Konsistente Platzierung

Breadcrumbs sollten an einer gut sichtbaren Stelle platziert werden, üblicherweise am oberen Rand der Seite unter der Hauptnavigation.

Klare Trennung der Ebenen

Verwende Trennzeichen wie > oder /, um die verschiedenen Ebenen deutlich voneinander zu unterscheiden.

Beispiel:

Startseite > Blog > Kategorie > Artikelname

Sinnvolle Beschriftungen

Die Bezeichnungen in den Breadcrumbs sollten klar und verständlich sein. Vermeide interne Begriffe oder Abkürzungen, die für dich als Nutzer nicht sofort ersichtlich sind.

Mobile Optimierung

Stelle sicher, dass die Breadcrumbs auch auf mobilen Geräten gut lesbar und bedienbar sind. Gegebenenfalls kannst du sie kürzen oder anders darstellen.

Verwendung von strukturierten Daten

Implementiere Schema Markup, um Suchmaschinen zusätzliche Informationen zu geben. Dies kann dazu führen, dass Breadcrumbs in den Suchergebnissen angezeigt werden.

Implementierung von Breadcrumbs

HTML und CSS

Breadcrumbs können einfach mit HTML-Listen und CSS gestaltet werden. Eine ungeordnete Liste (<ul>) eignet sich gut für die Struktur.

Beispiel:

<nav aria-label="Breadcrumb">
  <ul>
    <li><a href="/">Startseite</a></li>
    <li><a href="/kategorie/">Kategorie</a></li>
    <li><a href="/kategorie/unterkategorie/">Unterkategorie</a></li>
    <li>Aktuelle Seite</li>
  </ul>
</nav>

JavaScript

Für dynamische Breadcrumbs, die sich je nach Nutzerinteraktion ändern, kann JavaScript verwendet werden. Achte jedoch darauf, dass die grundlegende Navigation auch ohne JavaScript funktioniert.

CMS und Plugins

Viele Content-Management-Systeme wie WordPress bieten Plugins oder eingebaute Funktionen, um Breadcrumbs einfach zu implementieren.

Beispiele für WordPress-Plugins:

• Yoast SEO
• Breadcrumb NavXT

Häufige Fehler und wie du sie vermeidest

Zu viele Ebenen

Vermeide es, Breadcrumbs mit zu vielen Hierarchieebenen zu überladen. Halte sie übersichtlich und fokussiere dich auf die wichtigsten Stufen.

Fehlende Aktualisierung

Stelle sicher, dass die Breadcrumbs auf jeder Seite korrekt sind und die tatsächliche Position widerspiegeln. Falsche Breadcrumbs verwirren dich als Nutzer nur.

Nicht klickbare Elemente

Alle Elemente in den Breadcrumbs, außer dem letzten, sollten klickbar sein, damit du leicht zu vorherigen Seiten navigieren kannst.

Fazit

Breadcrumbs sind ein effektives Mittel, um die Benutzerfreundlichkeit deiner Webseite zu erhöhen und gleichzeitig positive Effekte auf die SEO zu erzielen. Sie helfen dir, dich besser zurechtzufinden, und ermöglichen es Suchmaschinen, die Struktur deiner Seite besser zu verstehen. Durch die Beachtung der Best Practices und eine sorgfältige Implementierung kannst du das volle Potenzial von Breadcrumbs ausschöpfen.