Breadcrumbs: Was sie sind und wie du sie implementierst

Was sind Breadcrumbs?

Breadcrumbs sind eine Funktion, deren Zweck es ist, die Nutzernavigation zu verbessern und sowohl Suchmaschinen als auch Nutzern die Hierarchie der Seiten klar anzuzeigen. So kann der Nutzer schnell sowohl die finale Seite als auch die Kategorien aufrufen, zu denen diese Seite gehört.

Möglichkeiten, Breadcrumbs zu implementieren

Bei der Implementierung haben wir aktuell zwei Optionen: die für Nutzer sichtbare Option und die Code-Option. Tatsächlich sollten beide immer gemeinsam und nicht getrennt implementiert werden.

Sichtbar

Bei der sichtbaren Variante implementiert die Website die Breadcrumbs am oberen Rand jeder Seite, sodass der Nutzer, der die Seite besucht, genau weiß, wo er sich befindet. Wenn wir uns zum Beispiel die Produktseite eines Online-Shops ansehen (einen HP Envy Computer), würden wir auf den Breadcrumbs Folgendes sehen:

Startseite > Computer > HP > Envy So sagen wir dem Nutzer, dass das Produkt, das er sich ansieht, in die Kategorie Computer fällt und außerdem zur Familie der HP-Computer gehört. Im Hinblick auf die Navigation ist diese Funktion sehr wichtig, denn wenn der Nutzer mehr HP-Modelle sehen oder weiter durch die Computer stöbern möchte, ist das nur einen Klick entfernt.

Ohne diese Funktion wird die Navigation viel schwieriger und die Wahrscheinlichkeit, dass der Nutzer die Website verlässt, ist deutlich höher.

Code

Während uns die vorherige Option erlaubte, Breadcrumbs für den Nutzer hinzuzufügen, sagt diese Option den Suchmaschinen, wie unser Inhalt kategorisiert ist. Es ist sehr wichtig, dass diese Implementierung korrekt erfolgt, denn Google versteht keine Breadcrumbs, die nur sichtbar sind.

Im Folgenden siehst du ein Beispiel für eine Breadcrumbs-Implementierung mit einem JSON-LD-Skript-Fragment.

<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Books", "item": "https://example.com/books" },{ "@type": "ListItem", "position": 2, "name": "Authors", "item": "https://example.com/books/authors" },{ "@type": "ListItem", "position": 3, "name": "Ann Leckie", "item": "https://example.com/books/authors/annleckie" },{ "@type": "ListItem", "position": 4, "name": "Ancillary Justice", "item": "https://example.com/books/authors/ancillaryjustice" }] } </script> Der obige Code sagt uns, dass das Buch „Ancillary Justice" von der Autorin Ann Leckie geschrieben wurde und ein Buch ist.

Books > Authors > Ann Leckie > Ancillary Justice

Wenn wir unsere Website mit einer eigenen Entwicklung oder einer der wichtigsten Sprachen aufgebaut haben, müssen wir die Implementierung manuell durchführen. Wenn wir jedoch WordPress verwenden, stehen uns mehrere Plugins zur Verfügung, die uns bei dieser Implementierung helfen:

• ›Rank Math
• ›Yoast SEO

Die Implementierung validieren

Sobald die Implementierung abgeschlossen ist, ist das Wichtigste, zu prüfen, ob sie korrekt erfolgt ist. Während die Überprüfung der „sichtbaren" Implementierung sehr einfach ist, da wir nur prüfen müssen, dass alle Elemente korrekt verlinkt sind und gut funktionieren, brauchen wir für die Überprüfung der Code-Implementierung etwas mehr Aufwand.

Trotzdem stehen uns ein Google-Tool und eine Chrome-Erweiterung zur Verfügung, die uns das Leben deutlich erleichtern.

Google Tool für strukturierte Daten:

Mit dem Google-Tool können wir unsere strukturierten Daten entweder per URL oder auf Code-Ebene validieren, indem wir das Fragment direkt einfügen.

Google Tool für strukturierte Daten

Wenn wir eine URL eingeben, gibt Google die Analyse mit allen erkannten strukturierten Daten zurück.

Beispiel einer URL-Analyse im Google-Tool für strukturierte Daten.

Wenn wir hingegen den Breadcrumb-JSON-LD-Code zuerst testen wollen, bevor wir ihn implementieren, können wir das Tool „Code-Fragment" verwenden, das uns folgendes Ergebnis liefert:

Validierungstool für Code-Fragmente strukturierter Daten.

Structured Data Testing Tool (Google-Chrome-Erweiterung)

Wenn wir, anstatt das Google-Tool zu besuchen, die strukturierten Daten der Breadcrumbs (und andere) direkt im Browser validieren wollen, können wir die Erweiterung „Structured Data Testing Tool" verwenden, die uns alle erkannten strukturierten Daten und auch eventuelle Fehler anzeigt.

Chrome-Erweiterung zur Validierung strukturierter Daten mit einem Beispiel eines SEO-Alive-Artikels.

Breadcrumbs in der Google Search Console überwachen

Sobald wir die Implementierung und Validierung abgeschlossen haben, bleibt nur noch, die Aktivität in der Google Search Console zu überwachen, mit der wir sie täglich verfolgen und Anomalien erkennen können.

Visualisierung des Breadcrumbs-Berichts in der Search Console (eingeführt im September 2019).

Zum Abschluss möchten wir dich fragen: Was waren die häufigsten Fehler, auf die du bei der Implementierung gestoßen bist?

Wir würden gerne eine Sammlung erstellen und sie in diesem Artikel veröffentlichen, um anderen SEO-Profis zu helfen.

Vielen Dank und vergiss nicht, deine Kommentare zu teilen!

Quellen

• ›Google-Dokumentation zu Breadcrumbs