Was ist eine Breadcrumb auf einer Website? Markup- und Schema-Builder | We.Inc
Was eine Breadcrumb-Navigation ist, das barrierefreie HTML-Muster mit aria-current, Googles Regeln für BreadcrumbList und ein Builder, der beides für dich schreibt.
Eine Breadcrumb ist die kurze Linkspur oben auf einer Seite, etwa Startseite > Schuhe > Laufschuhe, die zeigt, wo die Seite innerhalb der Website liegt. Besucher nutzen sie, um eine Ebene zurückzugehen. Mit strukturierten Daten vom Typ BreadcrumbList ausgezeichnet, hilft sie Google außerdem, die Hierarchie deiner Website zu verstehen.
Die drei Arten von Breadcrumbs
Typ
Beispiel
Am besten für
Ort (Hierarchie)
Startseite > Schuhe > Laufschuhe
Shops, Blogs und die meisten Websites
Attribut
Schuhe > Größe 9 > Blau
Gewählte Filter in einer Produktliste anzeigen
Pfad (Verlauf)
Die Seiten, durch die dieser Besucher geklickt hat
Selten nützlich, der Zurück-Button des Browsers erledigt das schon
Der Name stammt aus dem Märchen mit der Spur aus Brotkrumen. Auf einer Website ist sie ein sekundäres Menü und ersetzt nie die Hauptnavigation. Unten findest du das barrierefreie HTML-Muster des W3C, die strukturierten Daten, die Google liest, und einen Builder, der beides aus deiner eigenen Spur schreibt.
Tippe deine Spur in den Builder, eine Ebene pro Zeile, von der Startseite bis zur aktuellen Seite.
Füge nach jedem Namen die vollständige Adresse hinzu, getrennt durch einen senkrechten Strich. Die letzte Zeile kann sie weglassen.
Kopiere das HTML in deine Seitenvorlage und das JSON-LD in den Seiten-Head.
Teste die Seite mit Googles Test für Rich-Suchergebnisse, bevor du es auf der ganzen Website ausrollst.
Zeig die Spur zum Platz der Seite innerhalb der Website, nicht den Weg, den ein Besucher genommen hat.
Mach jede Breadcrumb zum Link außer der aktuellen Seite, die aria-current="page" trägt.
Halte sichtbare Breadcrumb und strukturierte Daten identisch, damit das Markup beschreibt, was Menschen tatsächlich sehen.
Zeichne die Trennzeichen mit CSS, wie es das W3C-Beispiel tut, damit Screenreader keine Reihe von Pfeilen vorlesen.
Lass die Spur auf kleinen Bildschirmen in zwei Zeilen umbrechen, statt seitwärts zu scrollen.
Häufige Fragen
Helfen Breadcrumbs bei SEO?
Laut Googles Breadcrumb-Dokumentation nutzt Google Breadcrumb-Markup im Body einer Seite, um die Informationen darauf zu kategorisieren. Sie geben Crawlern außerdem mehr interne Links nach oben in der Hierarchie. Für sich allein sind sie keine Abkürzung zu besseren Rankings.
Was verlangt Google in einer BreadcrumbList?
Ein Array itemListElement mit mindestens zwei ListItem-Einträgen. Jeder braucht einen name, eine position ab 1 und ein item mit der Seiten-URL. Die letzte Breadcrumb darf item weglassen, dann nutzt Google die URL der Seite, auf der sie steht.
Sollte die Breadcrumb die aktuelle Seite enthalten?
Das W3C-Muster enthält sie als letzten Link, ausgezeichnet mit aria-current auf page. Viele Websites zeigen sie stattdessen als einfachen Text. Beides ist in Ordnung, solange Screenreader-Nutzer erkennen, welches Element aktuell ist.
Welches Element sollte eine Breadcrumb umschließen?
Ein nav-Element mit einem Label wie aria-label="Breadcrumb" und darin eine geordnete Liste. Das W3C-Beispiel nutzt genau das, weil die Reihenfolge der Links Bedeutung trägt.
Kann eine Seite mehr als eine Breadcrumb-Spur haben?
Ja. Googles Seite zeigt ein Beispiel mit zwei BreadcrumbList-Einträgen für eine Seite, die über zwei Kategorien erreichbar ist. Zeig beide Spuren auch den Besuchern, damit das Markup zur Seite passt.
Barrierefreies Breadcrumb-Markup
Das Muster der WAI-ARIA Authoring Practices hat drei Anforderungen: die Spur in eine Navigations-Landmark setzen, diese Landmark mit aria-label oder aria-labelledby beschriften und aria-current auf dem Link zur aktuellen Seite auf page setzen. MDN beschreibt den Wert page von aria-current als den Link zum aktuellen Dokument in einer Breadcrumb.
Das W3C-Beispiel strukturiert die Links als geordnete Liste und zeichnet die Trennzeichen mit CSS-Rahmen, sodass assistive Technologien nur die Seitennamen ansagen.
Passende strukturierte Daten
Schema.org erklärt, dass die Eigenschaft position dazu dient, die Reihenfolge der Elemente zu rekonstruieren, mit kleineren Zahlen zuerst. Beginne mit 1 für den Anfang der Spur, meist deine Startseite oder eine Hauptkategorie.
JSON-LD, ein Block strukturierter Daten in einem script-Tag, ist das am einfachsten einzufügende Format, weil es getrennt von deinem sichtbaren HTML liegt. Der Builder unten schreibt es aus derselben Liste, die auch die sichtbare Spur erzeugt.
Gestaltung der Trennzeichen
Dieses CSS zeichnet vor jeder Breadcrumb außer der ersten einen kleinen Winkelpfeil, sodass die Trennzeichen nie im Text erscheinen, den ein Screenreader ansagt.
Breadcrumb mit CSS-Trennzeichen
Bearbeite die Namen, um es auszuprobieren. Die Winkelpfeile stammen aus der ::before-Regel, nicht aus Zeichen im HTML.
Breadcrumb-Builder
Deine Spur, eine Ebene pro Zeile: Name | vollständige Adresse
Vorschau
HTML
Strukturierte Daten als JSON-LD
Kopieren
Kopiert
Google verlangt mindestens zwei Einträge in einer BreadcrumbList. Füge eine weitere Ebene hinzu.
Zeile {n} hat keine Adresse. Nur der letzte Eintrag darf sie weglassen.
In deinem Browser aus deiner Eingabe erstellt. Nichts wird hochgeladen.