Die vollständige Anatomie der Breadcrumb-Navigation
Vielleicht stellst auch du dir die Frage: Was sind Breadcrumbs? Breadcrumbs (Brotkrumen) sind eines der Elemente der Website-Navigation. Der Begriff stammt aus dem klassischen Märchen der Gebrüder Grimm, in dem Kinder Brotkrumen im Wald verstreuten, um den Weg nach Hause zu finden. Auf einer Website dienen Breadcrumbs demselben Zweck – die Brotkrumennavigation hilft Nutzern, zu verstehen wo sie sich befinden und, falls nötig, zum vorherigen Website-Abschnitt zurückzukehren.
In diesem Beitrag erfährst du, welche Breadcrumb-Typen es gibt, ob deine Website sie braucht und wie du sie richtig einrichtest.
Arten und Struktur von Breadcrumbs
Normalerweise findest du eine Breadcrumb-Navigationspfad oben auf der Seite direkt unter dem Header-Menü. Sie besteht aus mehreren Elementen, von denen jedes zu einer Website-Kategorie oder zur Startseite führt. Je nach den im Pfad enthaltenen Elementen unterscheiden wir mehrere Arten von Breadcrumbs.
Hierarchische Breadcrumbs sind am weitesten verbreitet. Sie zeigen Nutzern den Weg bis zur Startseite und ermöglichen es ihnen, mühelos zu Kategorieseiten eine oder mehrere Ebenen höher in der Website-Hierarchie zu navigieren. Der Breadcrumb-Pfad sieht also in der Regel so aus: Startseite > Kategorie > Unterkategorie > Seite.
Ziemlich oft haben Breadcrumbs auf E-Commerce-Websites jedoch kein Homepage-Element und beginnen daher mit der Kategorie, die der Nutzer gerade durchsucht. Solche Breadcrumbs sehen zwar übersichtlicher aus, aber Nutzer sind gezwungen, die Hauptnavigation zu verwenden, um andere Website-Kategorien aufzurufen.
Bei beiden Beispielen handelt es sich um Variationen hierarchiebasierter Breadcrumbs, da der Pfad immer mit der obersten Kategorie beginnt und den Nutzer durch die Website-Struktur nach unten führt. Sie sind statisch, d. h. die Breadcrumbs sehen für jeden Nutzer gleich aus, egal wie er zu einer bestimmten Seite gelangt. Dies ist jedoch nicht die einzige mögliche Option.
Dynamische oder attributbasierte Breadcrumbs werden dynamisch auf der Grundlage des Klickpfads des Nutzers erstellt. Sie können die Position der Seite innerhalb der Website-Struktur anzeigen oder stattdessen die Attribute des Produkts enthalten.
Im folgenden Beispiel sehen Nutzer, die über die Kategorie “Staubsauger” auf die Produktseite gelangen, diese Art von Breadcrumbs.
Würden die Nutzer die Suche hingegen in der Kategorie der Marke iRobot starten, sähe der Breadcrumb-Pfad ganz anders aus.
Genau wie hierarchiebasierte Breadcrumbs können auch dynamische Breadcrumbs verschiedene Variationen aufweisen. Der Pfad kann auf der Startseite oder der Kategorieseite beginnen, es können zusätzliche Elemente zum Pfad hinzugefügt werden oder einige offensichtliche Elemente sogar weggelassen werden. Dies hängt von dem Pfad ab, den ein Nutzer nimmt, um zu einer bestimmten Seite zu gelangen.
Breadcrumb-Menü mit Dropdown-Navigation. Wenn die Website wirklich groß ist und du dem Pfad mehr als nur ein paar zusätzliche Elemente hinzufügen möchtest, ist das Dropdown-Navigationsmenü die richtige Option für dich. Es funktioniert sowohl für hierarchiebasierte als auch für dynamische Breadcrumbs. Betrachten wir beispielhaft die dynamischen Breadcrumbs:
Auf der TripAdvisor-Website können Nutzer dank der Dropdown-Navigation die vollständige Liste der Punkte sehen, die zur Kategorie “Playa del Carmen” gehören, ebenso wie alle dazugehörigen Seiten.
Wählst du die Kategorie “Playa del Carmen Vacation Rentals” aus der Dropdown-Liste aus, wird der Breadcrumb-Pfad umgestaltet und beginnt mit der Kategorie “Vacation Rentals“, während das Element “Playa del Carmen” verschwindet.
Die letzte Art von Breadcrumbs schließlich ist verlaufsbasiert. In diesem Fall besteht der Pfad aus den tatsächlich durch den Nutzer besuchten Seiten, so dass der Pfad etwa so aussieht: Startseite > Vorherige Seite > Vorherige Seite > Aktuelle Seite. Solche Breadcrumbs werden nur selten verwendet, da die “Zurück”-Schaltfläche des Browsers dieselbe Aufgabe problemlos erfüllt. Außerdem sind sie für Besucher, die von Google oder anderen externen Quellen kommen, nicht von Nutzen.
Gleichzeitig werden Verlaufs-Breadcrumbs oft mit anderen Breadcrumb-Typen kombiniert, damit die Nutzer leicht zur vorherigen Seite zurückkehren können.
Wie du also siehst, gibt es Breadcrumbs in allen Formen und Größen, um den Anforderungen jeder Website gerecht zu werden. Die Frage ist, ob du sie überhaupt auf deiner Website benötigst.
Welche Websites kommen nicht ohne Breadcrumbs aus?
Angesichts der obigen Beispiele könnte man meinen, dass nur große Online-Shops mit komplizierten Website-Strukturen und vielen Kategorien Breadcrumbs benötigen. Das ist jedoch nicht der Fall. Wir können Breadcrumbs auf Medien-Websites, Foren, Geschäftskatalogen, Blogs usw. gut gebrauchen. Es kommt nicht auf die Art der Website an, sondern darauf, wie kompliziert deren Struktur ist.
Wenn deine Website eine lineare Struktur mit nicht mehr als zwei Seitenebenen hat, kannst du komplett auf Breadcrumbs verzichten. Websites, die separate, nicht zusammenhängende Landingpages enthalten, benötigen ebenfalls keine Breadcrumbs.
In allen anderen Fällen solltest du ernsthaft in Erwägung ziehen, deiner Website eine Breadcrumb-Navigation hinzuzufügen. Dafür gibt es mehrere Gründe, denn die Vorteile, die Breadcrumbs deiner Website bringen können, gehen über eine bessere Benutzerfreundlichkeit hinaus.
Drei Gründe, um Breadcrumb Fan zu werden
Es wird dir nicht schwerfallen, Breadcrumbs auf deinen Websites zu implementieren. Sobald du dies tust, hast du drei Dinge verbessert: die Benutzerfreundlichkeit der Website, die interne Linkstruktur und die CTR.
Verbessertes Nutzererlebnis
Breadcrumbs erleichtern es Nutzern, sich auf deiner Website zu bewegen. Die Nutzer wissen immer, wo sie sich befinden, und können ohne zusätzlichen Aufwand zur vorherigen Seite oder zu einer anderen Kategorie zurückkehren. Breadcrumbs sind besonders hilfreich für Nutzer, die von den SERPs kommen und keine Ahnung von der Struktur deiner Website haben.
Ich möchte dir ein Beispiel geben. Nehmen wir an, du bist auf der Suche nach einem Sofa. Du hast auf ein Google-Snippet geklickt und möchtest sehen, welche anderen Optionen das Geschäft anbietet. Dank der Breadcrumbs kannst du mit nur einem Klick den gesamten Sofakatalog aufrufen oder andere Produkte der gleichen Marke durchsehen.
Breadcrumbs sind auch hilfreich, wenn du deine Produktsuche zunächst auf der Kategorieseite der Website beginnst und Filter wie Farbe oder Größe setzt. Wenn du dann über die Breadcrumbs von der Produktseite zur Kategorieseite zurückkehrst, werden deine Filter nicht gelöscht und du kannst genau dort weitermachen, wo du aufgehört hast. Wenn du stattdessen die “Zurück”-Schaltfläche des Browsers verwendest, könntest du deine Filtereinstellungen verlieren.
Bessere interne Link-Struktur
Zusammen mit dem Header-Menü und der Fußzeile helfen dir Breadcrumbs dabei, Link-Equity über deine Website zu verteilen. Je höher eine Seite in deiner Website-Hierarchie platziert ist, desto mehr Seiten sollten auf sie verweisen, um ihre Bedeutung zu unterstreichen. Das bedeutet, dass Kategorien auf die Hauptseite verweisen sollten, Unterkategorien auf Kategorien und Produktseiten auf Unterkategorien.
Das Website-Audit-Tool von SE Ranking kann dir dabei helfen, die Linkstruktur deiner Website so anzupassen, dass der Link-Saft an die richtige Seite weitergeleitet wird.
Überzeugende Search Snippets
Die korrekte Breadcrumb-Auszeichnung ermöglicht es dir, deinen Breadcrumb-Pfad in dein Google SERP Snippet aufzunehmen.
Tatsächlich enthält jetzt jedes SERP-Ergebnis einen Breadcrumb-Pfad, da Google bei der Desktop-Suche URLs durch Breadcrumbs ersetzt. Wenn du jedoch keine echten Breadcrumbs verwendest oder diese nicht in einer Sprache angibst, die Google versteht, wird Google seine eigene Version der Breadcrumbs auf Grundlage deiner URL erstellen. So sehen Breadcrumbs aus, wenn du die Kategorie der Website nicht in der URL angibst:
Verwende das Schema-Markup, damit Google deine Breadcrumbs im Snippet anzeigt und nicht die geänderte URL. Interessant dabei ist, dass Google selbst entscheidet, welche Kategorien deiner Website in den Pfad aufgenommen werden, je nach Relevanz für die Suchanfrage.
Um zu prüfen, wie die SERP Snippets deiner Seiten aussehen, kannst du alle für dich interessanten Seiten einzeln googeln. Du kannst auch SE Ranking verwenden und alles in einer einzigen Registerkarte überprüfen. Nachdem du ein Projekt erstellt hast, kannst du die Snippets für jedes Keyword, das du trackst, im Bereich “Analytics und Traffic” überprüfen.
Das Tool speichert Daten für 30 Tage. Du kannst also ein beliebiges Datum oder einen beliebigen Zeitraum innerhalb dieser Spanne wählen und überprüfen, wie deine SERP-Snippets aussahen.
Mithilfe von Breadcrumbs in den Google-Snippets können Nutzer auf einen Blick erkennen, zu welcher Kategorie die Seite gehört und welche verwandten Produkte / Informationen sie auf der Website finden können. Daher sind korrekte Breadcrumbs ein weiterer Faktor, der Nutzer dazu bringt, deine Website in den SERPs anderen vorzuziehen.
Zusammenfassend lässt sich sagen, dass Breadcrumbs dir dabei helfen, bessere Verhaltenssignale an Google zu senden und den Link-Saft angemessen über deine Website zu verteilen. Beides sind positive Ranking-Signale, was bedeutet, dass die Implementierung von Breadcrumbs auch deiner Website zu einem höheren Ranking verhelfen kann. Hier sind einige Tipps, wie du Breadcrumbs mit den gängigsten CMSen zu deiner Website hinzufügen kannst.
So fügst du Breadcrumbs richtig in deine Website ein
Bevor du Breadcrumbs hinzufügst, musst du einige Dinge beachten. Hier eine kurze Aufzählung:
- Verlinke in den Breadcrumbs nicht auf die aktuelle Seite. Eine Seite, die auf sich selbst verlinkt, ist schlecht für die Suchmaschinenoptimierung. Du kannst die aktuelle Seite immer noch in den Breadcrumb-Pfad einbinden, nur solltest du nicht auf sie verlinken. Aus demselben Grund ist es nicht empfehlenswert, Breadcrumbs zur Homepage hinzuzufügen, da in diesem Fall der Pfad aus einem einzigen Element besteht, das auf sich selbst verweist.
- Bringe Breadcrumbs am oberen Rand der Seite direkt unter der Hauptnavigation an. Dies ist gängige Praxis und die Nutzer erwarten intuitiv, dass sie dort Breadcrumbs finden. Einige Websites platzieren Breadcrumbs jedoch am unteren Rand der Seite – so handhabt es Apple auf seiner Website.
Der Grund dafür ist, dass Apples Produktseiten ziemlich lange Beschreibungen enthalten, so dass es den Nutzern schwerfallen würde, die Seite ganz nach oben zu scrollen. Aus demselben Grund können Websites, die endloses Scrollen anbieten, auch davon profitieren, dass sich der Breadcrumb-Pfad am unteren Ende der Seite befindet. Eine andere Möglichkeit wäre, zwei Breadcrumb-Pfade zu verwenden – einen am oberen Rand der Seite und einen weiteren am unteren Ende.
- Stelle sicher, dass du Schema-Markup zu deinem Website-Code hinzufügst, bevor du Breadcrumbs aktivierst. Schema-Markup ist ein semantisches Vokabular von Tags, die dem HTML-Code hinzugefügt werden. Es hilft Google, deine Inhalte zu verstehen und teilt der Suchmaschine insbesondere mit, dass die Liste der Links oben auf deiner Seite für Breadcrumbs steht.
Wie implementiert man Breadcrumb-Schema-Markup für Rich Snippets?
Indem du das Schema.org-Vokabular zu deinen HTML-Mikrodaten hinzufügst, veranlasst du Google, deine tatsächlichen Breadcrumbs und nicht die angepasste Version der Seiten-URL im Rich Snippet anzuzeigen.
So sieht der Breadcrumb-Code ohne das Schema-Markup aus:
Quelle: Schema.org
Und hier ist der Breadcrumbs-Trail-Code mit dem Schema-Markup.
Quelle: Schema.org
Es wird empfohlen, zwei Arten von Schema-Markups zu verwenden, nämlich Mikrodaten und RDFa. Detaillierte Anweisungen zur ordnungsgemäßen Implementierung des Schemas auf deiner Website findest du in Googles Richtlinien.
Wenn du fertig bist, überprüfe mit Hilfe des Google-Tools zum Testen strukturierter Daten, ob du alles richtig gemacht hast. Es sollten keine Fehler vorhanden sein.
Jetzt, da du weißt, warum Schema-Markup wichtig ist und welche Best Practices du beim Hinzufügen von Breadcrumbs befolgen solltest, sollten wir endlich über Plugins für die beliebtesten CMSe sprechen, die dir bei der Implementierung von Breadcrumbs helfen.
Hinzufügen von Breadcrumbs in WordPress
Wenn deine Website mit WordPress läuft, kannst du entweder eines der speziellen Plugins zum Hinzufügen von Breadcrumbs verwenden (Breadcrumb NavXT, SEO by Yoast) ) oder alles selbst codieren.
Verwendung eines speziellen Plugins
Schauen wir uns das BreadcrumbNavXT-Plugin beispielhaft genauer an, denn es ist eine der beliebtesten Lösungen auf dem Markt.
Das Plugin ist kostenlos erhältlich. Es ist kompatibel mit WordPress Version 4.9. und höher und dein Host sollte PHP Version 7.0 oder höher unterstützen.
Sobald du das Plugin installiert und aktiviert hast, gehe zu Einstellungen > Breadcrumb NavXT, um es zu konfigurieren. Die Standardeinstellungen sollten für die meisten Websites ausreichen, aber du kannst auch alles nach deinen Bedürfnissen anpassen.
Quelle: wordpress.org
Auf der Registerkarte Allgemeine Einstellungen kannst du den Typ des Breadcrumb-Trennzeichens festlegen, wählen, ob die Homepage in den Breadcrumb-Pfad aufgenommen werden soll, usw.
Auf der Registerkarte Beitragstypen kannst du Breadcrumb-Links für verschiedene Seitentypen wie Beiträge, Seiten oder benutzerdefinierte Beitragstypen einrichten.
Wenn du mit den Einstellungen fertig bist, werden die Breadcrumbs nicht sofort auf deiner Website angezeigt. Um sie aufzurufen, musst du ein paar Codezeilen in die Datei header.php deines Themes oder Child-Themes einfügen.
div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
<? php if(function_exists('bcn_display'))
{
bcn_display();
}?>
</div>
Das war’s. Die Breadcrumb-Navigation sollte jetzt auf deiner Website sichtbar sein.
Breadcrumbs selbst kodieren
Der WordPress-Code ist einfach und sauber, so dass es dir nicht schwer fallen dürfte, deine eigene Breadcrumb-Lösung zu programmieren. Hier ist ein Beispiel für den Breadcrumb-Code, aber natürlich kannst du selbst entscheiden, welche Variablen du in den Code einfügen möchtest, je nach deiner individuellen WordPress-Einrichtung.
function the_breadcrumb() {
echo '<div id="breadcrumb">< ul><li><a href="/">Home</a></li><li>></li>';
if ( is_category() || is_single() ) {
$cats = get_the_category();
$cat = $cats[0];
echo '<li><a href="'.get_category_link($cat->term_id).'">'.$cat->name.'</a></li><li>></li>';
}
if(is_single()){
echo '<li>';
the_title();
echo '</li>';
}
if(is_page()){
echo '<li>';
the_title();
echo '</li>';
}
echo '</ul><div class="clear"></div></div>';
}
Der Code sollte in die Datei functions.php eingefügt werden. Die wichtigste Regel dabei ist, diese Funktion nicht innerhalb einer anderen Funktion zu platzieren, damit sie nicht in Konflikt miteinander geraten.
Damit deine Website die Breadcrumbs anzeigt, rufst du die Funktion auf, indem du die folgende Codezeile dort einfügst, wo die Breadcrumbs erscheinen sollen:
<? php the_breadcrumb(); ?>
Das war’s im Grunde schon. Um deine Breadcrumbs schöner aussehen zu lassen, kannst du mit ihrem Design herumspielen, indem du die Datei style.css im Teil id=”breadcrumbs” bearbeitest.
Wenn du dich dafür entscheidest, deine Breadcrumbs per HTML selbst zu programmieren, hast du viel Spielraum für individuelle Anpassungen. Außerdem wird deine Website schneller laden, da Plugins die Ladezeit verlangsamen.
Hinzufügen von Breadcrumbs in Joomla
Joomla verfügt von Anfang an über ein Breadcrumbs-Modul, das du hinzufügen kannst, indem du in deinem Administrationsbereich auf Erweiterungen > Module gehst. Hier kannst du einfach auswählen, welche Breadcrumb-Elemente in den Pfad aufgenommen werden sollen (Home, aktuelle Seite, entferne das “Du bist hier”-Element, das Joomla standardmäßig anbietet), wähle einen benutzerdefinierten Breadcrumb-Trenner, wähle, wo du die Brotkrumen platzieren möchtest. Unter der Registerkarte Erweitert kannst du eine benutzerdefinierte CSS-Klasse für die Breadcrumbs definieren.
Quelle: docs.joomla.org
Die gängigsten CMSe verfügen über spezielle Plugins / Module, die dir bei der Implementierung von Breadcrumbs auf deiner Website helfen können, was ein weiterer Beweis dafür ist, dass dieses Navigationselement wirklich einen Unterschied macht.
Wenn keine der angebotenen Lösungen für WordPress und Joomla für dich funktionieren, kannst du Breadcrumbs manuell mit normalen HTML-Tags hinzufügen:
< ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Kategorie</a></li>
<li><a href="#">Unterkategorie</a></li>
<li>Seite</li>
</ul>
Der Nachteil dieses Ansatzes ist, dass du die Breadcrumbs manuell zu jeder einzelnen Website-Seite hinzufügen musst, auf der sie erscheinen sollen.
Zögere nicht
Breadcrumbs sind eines der wichtigsten Navigationselemente, und dank der vielen Plugins und Module sind sie auch leicht zu implementieren. Wenn deine Website also mehr als zwanzig Seiten und eine mehrstufige Struktur hat, gibt es keine Entschuldigung dafür, keine Breadcrumbs zu haben. Dieser Navigationspfad wird deinen Nutzern sowohl auf deiner Website als auch in den SERPs eine große Hilfe sein.
Hast du Breadcrumbs auf deiner Website? Welche Art der Breadcrumb-Navigation passt am besten zu dir? Teile deine Erfahrungen in den Kommentaren.
