Breadcrumbs und Navigation: Strukturierte Daten für Suchmaschinen

Breadcrumbs sind eines jener Oberflächenelemente, die unbedeutend wirken, bis man versteht, wie sehr Google sie schätzt. Sie erscheinen oben auf Produkt- und Kategorieseiten (Startseite → Damenbekleidung → Kleider → Sommerkleider) und helfen Benutzern zu verstehen, wo sie in der Website-Hierarchie sind. Das ist der Benutzerfreundlichkeitsvorteil. Der SEO-Vorteil ist größer: Breadcrumbs schaffen interne Links, die Autorität durch Ihre Website fließen lassen, und wenn sie mit strukturierten Daten ausgezeichnet sind, erscheinen sie direkt in den Google-Suchergebnissen als Rich Snippets.

Ein Suchergebnis mit Breadcrumbs fällt auf. Statt eine einfache URL anzuzeigen (example.com/products/12345), zeigt Google den vollständigen Breadcrumb-Pfad (Beispiel Store → Damenbekleidung → Kleider). Benutzer sehen den Kontext, bevor sie klicken. Das Ergebnis wirkt glaubwürdiger, erhält mehr Klicks und signalisiert Google, dass Ihre Website eine klare, hervorzuhebende Hierarchie hat.

Aber Breadcrumbs erschließen diese Vorteile nur, wenn sie richtig implementiert sind: echte HTML-Links (nicht nur visuelle Gestaltung), Strukturdaten-Markup (JSON-LD) und Ausrichtung mit Ihrer Haupt-Navigationsstruktur. Viele Shops fügen Breadcrumbs als Designelement hinzu, ohne das Markup hinzuzufügen, und verpassen den SEO-Wert vollständig.

Warum Breadcrumbs für SEO wichtig sind

Breadcrumbs erfüllen drei SEO-Funktionen:

1. Interne Linking-Architektur

Jedes Breadcrumb ist eine Reihe interner Links. Eine Produktseite mit dem Breadcrumb „Startseite → Damenbekleidung → Kleider → Produkt” enthält drei interne Links: einen zur Startseite, einen zu Damenbekleidung und einen zu Kleider.

Diese Links leiten Linkautorität von der Produktseite zurück auf die Kategorieseiten. Wenn die Produktseite externe Backlinks erhält (ein Blog bespricht das Produkt und verlinkt direkt darauf), fließt ein Teil dieser Autorität über die Breadcrumb-Links zurück auf die Kategorieseiten. Dies ist das Gegenteil des normalen Navigationsflusses (Startseite → Kategorie → Produkt). Breadcrumbs schaffen einen bidirektionalen Fluss.

Breadcrumbs geben Google auch mehrere Wege, um Seiten zu entdecken. Google kann Breadcrumbs nach oben folgen (vom Produkt zur Kategorie zur Startseite) und nach unten (von der Startseite zur Kategorie zum Produkt), was die Crawl-Effizienz verbessert und die Chance verringert, dass Seiten verwaist werden.

2. Site-Hierarchie-Signale

Breadcrumbs teilen Google ausdrücklich mit, wie Ihre Website organisiert ist. Der Pfad „Startseite → Damenbekleidung → Kleider → Sommerkleider” teilt Google mit, dass Sommerkleider eine Unterkategorie von Kleider ist, die eine Unterkategorie von Damenbekleidung ist, die eine Top-Level-Kategorie ist.

Google nutzt diese Hierarchie, um zu verstehen, welche Seiten Hubs (Kategorien, auf die viele Breadcrumbs verlinken) sind und welche Seiten Blätter (einzelne Produkte) sind. Hub-Seiten werden als wichtiger angesehen und werden häufiger gecrawlt.

Ohne Breadcrumbs muss Google die Hierarchie aus URL-Struktur, internen Verlinkungsmustern und Navigationsmenüs ableiten. Breadcrumbs machen die Hierarchie explizit und reduzieren Mehrdeutigkeit.

3. Rich Results in der Suche

Wenn Sie Strukturdaten-Markup zu Breadcrumbs hinzufügen, kann Google sie direkt in Suchergebnissen anzeigen. Statt einer einfachen URL sehen Benutzer den vollständigen Breadcrumb-Pfad.

Beispiel-Suchergebnis ohne Breadcrumbs:

example.com › products › 12345-summer-dress

Beispiel-Suchergebnis mit Breadcrumbs:

Beispiel Store › Damenbekleidung › Kleider › Sommerkleider

Das zweite Ergebnis ist informativer und anklickbarer. Benutzer sehen den Kategoriekontext, bevor sie die Seite besuchen. Dies verbessert die Click-Through-Rate (CTR), und eine höhere CTR ist ein positives Ranking-Signal für Google.

So implementieren Sie Breadcrumbs: HTML-Struktur

Breadcrumbs müssen echte HTML-Links sein, nicht nur formatierter Text. Jede Ebene des Breadcrumb-Pfads sollte ein Anker-Tag sein, das auf die entsprechende Kategorieseite verweist.

Grundlegende HTML-Struktur

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Startseite</a></li>
    <li><a href="/collections/women">Damenbekleidung</a></li>
    <li><a href="/collections/dresses">Kleider</a></li>
    <li><a href="/collections/summer-dresses">Sommerkleider</a></li>
  </ol>
</nav>

Wichtige Elemente:

• <nav aria-label="Breadcrumb">: Der Wrapper ist ein nav-Element mit ARIA-Label, damit Screenreader es als Breadcrumb-Pfad ankündigen (nicht nur als generische Navigation).
• <ol>: Eine geordnete Liste, weil Breadcrumbs eine Sequenz sind (die Reihenfolge ist wichtig).
• <a href="...">: Echte Anker-Tags mit echten URLs. Jede Breadcrumb-Ebene ist anklickbar und crawlbar.

Das letzte Element (die aktuelle Seite) kann entweder ein Link oder einfacher Text sein. Google akzeptiert beides. Einige UX-Richtlinien empfehlen, es als einfachen Text zu belassen (da das Anklicken nichts bewirkt — Sie sind bereits auf dieser Seite), während andere empfehlen, es als Link zu behalten, um Konsistenz zu gewährleisten. Beide funktionieren für SEO.

CSS-Gestaltung

Breadcrumbs werden normalerweise als horizontale inline Liste mit Trennzeichen (/ oder › oder >) zwischen den Elementen formatiert. Die Trennzeichen können mit CSS-Pseudoelementen hinzugefügt werden:

nav[aria-label="Breadcrumb"] ol {
  list-style: none;
  display: flex;
  gap: 8px;
  font-size: 14px;
  color: #666;
}

nav[aria-label="Breadcrumb"] li:not(:last-child)::after {
  content: "›";
  margin-left: 8px;
  color: #999;
}

Die Trennzeichen sind nur visuell — sie sind nicht Teil der HTML-Struktur. Google ignoriert sie.

So fügen Sie Strukturdaten-Markup hinzu

HTML-Breadcrumbs schaffen interne Links und verbessern die Benutzerfreundlichkeit. Strukturdaten-Markup teilt Google mit, dass diese Links einen Breadcrumb-Pfad darstellen und als Rich Results angezeigt werden sollten.

Google unterstützt BreadcrumbList-Schema-Markup im JSON-LD-Format. Dies ist ein Script-Tag mit JSON-Daten, die die Breadcrumb-Struktur beschreiben.

JSON-LD BreadcrumbList-Beispiel

Fügen Sie dieses Script in den <head> oder das Ende des <body> auf jeder Seite ein, die Breadcrumbs hat (Produktseiten, Kategorieseiten, Artikel-Seiten):

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Startseite",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Damenbekleidung",
      "item": "https://example.com/collections/women"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Kleider",
      "item": "https://example.com/collections/dresses"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Sommerkleider",
      "item": "https://example.com/collections/summer-dresses"
    }
  ]
}
</script>

Wichtige Felder

• @context und @type: Standard schema.org-Deklarationen. Diese teilen Google mit, dass dies eine BreadcrumbList ist.
• itemListElement: Ein Array von Breadcrumb-Elementen, in Reihenfolge von der Startseite zur aktuellen Seite.
• position: Die Reihenfolge jedes Elements (1 für Startseite, 2 für erste Kategorie, 3 für Unterkategorie usw.).
• name: Der sichtbare Text des Breadcrumb (was Benutzer sehen).
• item: Die vollständige URL der Seite (muss absolut sein, beginnend mit https://).

Das letzte Element (die aktuelle Seite) muss das item-Feld enthalten. Ältere Google-Dokumentation schlug vor, es wegzulassen, aber die aktuelle Best Practice ist, es für alle Elemente zu berücksichtigen.

Häufige Breadcrumb-Schema-Fehler

Fehler 1: Relative URLs statt absoluter URLs

Google benötigt absolute URLs in Strukturdaten. Dies schlägt die Validierung fehl:

"item": "/collections/women"

Dies besteht:

"item": "https://example.com/collections/women"

Wenn Ihr Shopify-Theme Liquid zum Generieren von Breadcrumb-Markup verwendet, stellen Sie sicher, dass Sie den url-Filter mit absolute_url verwenden:

"item": ""

Fehler 2: Nicht übereinstimmende HTML und JSON-LD

Die HTML-Breadcrumbs und das JSON-LD-Markup sollten denselben Pfad beschreiben. Wenn die HTML „Startseite → Damenbekleidung → Kleider” anzeigt, aber die JSON-LD „Startseite → Kleidung → Kleider” anzeigt, könnte Google das Markup ignorieren oder als Fehler kennzeichnen.

Dies geschieht, wenn Themes Breadcrumbs dynamisch basierend auf der URL-Struktur generieren, aber das JSON-LD-Markup hardcodieren. Generieren Sie beide immer aus derselben Datenquelle.

Fehler 3: Einbeziehen von Nicht-Breadcrumb-Links

Einige Themes beziehen den aktuellen Seitentitel in den Breadcrumb-Pfad ein, auch wenn es kein navigierbarer Link ist:

<li>Produkt: Sommerkleid aus Baumwolle</li>

Dies ist in Ordnung für HTML (es bietet Kontext für Benutzer), aber das entsprechende JSON-LD-Element sollte immer noch eine Kategorie- oder Bereichsseite darstellen, nicht das Produkt selbst. Das letzte Element sollte die übergeordnete Kategorie sein:

{
  "position": 3,
  "name": "Kleider",
  "item": "https://example.com/collections/dresses"
}

Wenn Sie das Produkt als letztes Breadcrumb-Element einbeziehen, stellen Sie sicher, dass es eine echte URL hat:

{
  "position": 4,
  "name": "Sommerkleid aus Baumwolle",
  "item": "https://example.com/products/summer-cotton-dress"
}

Fehler 4: Breadcrumbs, die nicht mit Navigation übereinstimmen

Wenn Ihre Haupt-Navigation eine Kategorie namens „Damenbekleidung” hat, aber Ihre Breadcrumbs „Damenbekleidung” anzeigen, könnte Google verwirrt sein, ob diese dieselbe Kategorie sind.

Verwenden Sie konsistente Benennungen über Navigation, Breadcrumbs und URLs. Wenn die Navigation „Damenbekleidung” sagt, sollten die Breadcrumbs das auch tun. Wenn die URL /collections/womens-clothing ist, sollte der Kategoriename in den Strukturdaten übereinstimmen.

Wie Sie Breadcrumb-Markup testen

Google Rich Results Test

Google bietet ein kostenloses Tool zur Validierung strukturierter Daten an: den Rich Results Test (suchen Sie nach „Google Rich Results Test” und geben Sie Ihre URL ein).

Das Tool crawlt Ihre Seite, extrahiert Strukturdaten und zeigt an, ob sie gültig sind. Für Breadcrumbs sollte es anzeigen:

• „BreadcrumbList” erkannt
• Anzahl der Elemente
• Namen und URL jedes Elements

Wenn das Tool Fehler anzeigt („Erforderliches Feld fehlt: item” oder „Ungültige URL”), beheben Sie diese vor der Bereitstellung.

Manuelle View Source-Überprüfung

Öffnen Sie Ihre Produkt- oder Kategorieseite in einem Browser, wählen Sie View Source (Ctrl+U / Cmd+Option+U) und suchen Sie nach BreadcrumbList. Sie sollten das JSON-LD-Script mit allen Breadcrumb-Elementen sehen.

Überprüfen Sie:

• Alle URLs sind absolut (beginnen mit https://).
• Der Breadcrumb-Pfad entspricht den auf der Seite sichtbaren HTML-Breadcrumbs.
• Die position-Werte sind sequenziell (1, 2, 3, …).

Google Search Console

Nach der Bereitstellung von Breadcrumb-Markup überprüfen Sie Google Search Console → Verbesserungen → Breadcrumb. Dieser Bericht zeigt:

• Wie viele Seiten gültiges Breadcrumb-Markup haben
• Wie viele Seiten Fehler oder Warnungen haben
• Welche spezifischen Fehler Google gefunden hat

Google kann einige Tage brauchen, um Ihre Seiten zu crawlen und diesen Bericht zu füllen. Wenn Fehler erscheinen, klicken Sie in die Fehlerdetails, um zu sehen, welche Seiten betroffen sind und was die Fehlermeldung ist.

Breadcrumbs und URL-Struktur

Breadcrumbs funktionieren am besten, wenn sie mit Ihrer URL-Struktur übereinstimmen. Wenn die URL eines Produkts lautet:

https://example.com/collections/women/products/summer-dress

Das Breadcrumb sollte diesen Pfad widerspiegeln:

Startseite → Damenbekleidung → Sommerkleid

Wenn die URL nicht mit dem Breadcrumb-Pfad übereinstimmt (die URL sagt /collections/women, aber das Breadcrumb zeigt „Kleidung → Damenbekleidung”), erhalten Benutzer und Suchmaschinen widersprüchliche Signale über die Website-Hierarchie.

Für Shopify-Shops kann dies knifflig sein. Shopify-Produkt-URLs sind standardmäßig flach:

https://example.com/products/summer-dress

Es gibt keine Kategorie in der URL. Das Produkt könnte in mehreren Kollektionen (Damenbekleidung, Kleider, Sommerschlussverkauf) angezeigt werden, daher gibt es keinen einzelnen kanonischen Breadcrumb-Pfad.

Lösungen:

1. Wählen Sie eine primäre Kollektion. Wenn ein Produkt zu mehreren Kollektionen gehört, bestimmen Sie eine als primär. Verwenden Sie diese Kollektion für Breadcrumbs. Shopify-Themes tun dies oft, indem sie überprüfen, welche Kollektion der Benutzer besuchte (über den HTTP-Referrer), aber dies funktioniert nicht für Benutzer, die direkt vom Suchergebnis auf die Produktseite landen.

2. Verwenden Sie URL-Parameter. Einige Themes fügen einen Kollektion-Parameter an Produkt-URLs an: /products/summer-dress?collection=women. Das Breadcrumb kann dann aus diesem Parameter generiert werden.

3. Verwenden Sie Shopifys collectionbasierte Produkt-URLs. Im Shopify-Admin können Sie collectionbasierte URLs für Produkte aktivieren: Einstellungen → Allgemein → Produkt-URL-Format. Dies ändert Produkt-URLs in /collections/women/products/summer-dress. Die Kollektion ist jetzt Teil der URL, was die Breadcrumb-Generierung unkompliziert macht.

Breadcrumbs für facettierte Navigation

Facettierte Navigation (Filterung von Kategorieseiten nach Attributen wie Größe, Farbe, Marke) erstellt dynamische Breadcrumbs, die den aktuellen Filterzustand widerspiegeln:

Startseite → Damenbekleidung → Kleider → Größe: Mittel → Farbe: Blau

Sollten diese Filterauswahlen in Breadcrumb-Strukturdaten angezeigt werden?

Googles Leitfaden: Breadcrumbs sollten die Website-Hierarchie darstellen, nicht einen vorübergehenden Filterzustand. Die Strukturdaten sollten anzeigen:

Startseite → Damenbekleidung → Kleider

Die HTML-Breadcrumbs können den vollständigen Pfad einschließlich Filter anzeigen (für die Benutzerfreundlichkeit), aber die JSON-LD sollte die Filter weglassen. Filter sind keine stabilen URLs (sie ändern sich bei jeder Benutzerinteraktion) und stellen keine navigierbare Hierarchie dar.

Ausnahme: Wenn Filterkombinationen als eigenständige Kategorieseiten gefördert werden (z. B. eine Kollektion „Damenblaue Kleider” mit eigener URL und eigenem Inhalt), ist das eine echte Kategorie und sollte in Breadcrumbs angezeigt werden.

Wie Breadcrumbs mit der Haupt-Navigation interagieren

Breadcrumbs ersetzen die Haupt-Navigation nicht — sie ergänzen sie. Die Haupt-Navigation (Header-Menü) bietet Top-Level-Kategorien und schnellen Zugriff auf Schlüsselbereiche. Breadcrumbs bieten hierarchischen Kontext und Aufwärtsnavigation von tiefen Seiten.

Die beiden sollten aufeinander abgestimmt sein:

• Wenn Ihre Haupt-Navigation eine Kategorie „Damenbekleidung” hat, sollten Breadcrumbs auf Produktseiten unter dieser Kategorie „Damenbekleidung” enthalten.
• Wenn Ihre Haupt-Navigation „Damenbekleidung” als Label verwendet, sollten Breadcrumbs „Damenbekleidung” verwenden, nicht nur „Damen”.

Inkonsistente Benennung verwirrt Benutzer („Ist ‚Damenbekleidung’ dasselbe wie ‚Damen’?”) und schwächt SEO-Signale (Google sieht zwei verschiedene Label für dieselbe Kategorie und muss ableiten, dass sie gleich sind).

Schnelle ImplementierungsprüfungÖffnen Sie eine Produktseite in Ihrem Shop. Öffnen Sie View Source und suchen Sie nach „BreadcrumbList." Wenn nichts angezeigt wird, haben Sie kein Breadcrumb-Strukturdaten-Markup. Fügen Sie es hinzu — das Markup dauert 10 Minuten zum Implementieren und kann die Click-Through-Rates innerhalb von Tagen verbessern.

Breadcrumbs als Crawl-Effizienz-Tool

Über Rich Results und interne Verlinkung hinaus helfen Breadcrumbs Google, Ihre Website effizienter zu crawlen. Wenn Google eine Produktseite crawlt, extrahiert es alle Links, einschließlich Breadcrumb-Links. Wenn das Breadcrumb drei Links enthält (Startseite, Damenbekleidung, Kleider), hat Google jetzt drei zusätzliche URLs zum Crawlen.

Für große Shops ist das wichtig. Google ordnet ein begrenztes Crawl-Budget zu — es wird nicht jeden Tag jede Seite crawlen. Seiten, die häufiger verlinkt sind (von mehr Seiten), werden öfter gecrawlt. Kategorien, die in Breadcrumbs auf Hunderten von Produktseiten angezeigt werden, werden viel häufiger gecrawlt als Kategorien, die nur in der Haupt-Navigation verlinkt sind.

Dies ist besonders wichtig für Produkte mit geringem Bestand oder Saisonprodukte. Wenn ein Produkt ausverkauft ist, möchten Sie, dass Google die Kategorieseite schnell neu crawlt, um die Suchergebnisse zu aktualisieren. Breadcrumb-Links von Produktseiten zu Kategorieseiten erhöhen die Wahrscheinlichkeit, dass Google die Kategorieseite innerhalb von Stunden oder Tagen, nicht Wochen, neu crawlt.

Implementieren von Breadcrumbs in Shopify

Die meisten modernen Shopify-Themes unterstützen Breadcrumbs, aber nicht alle beinhalten Strukturdaten-Markup. Überprüfen Sie Ihre Theme-Dokumentation oder überprüfen Sie den Breadcrumb-Code in den Liquid-Dateien Ihres Themes.

Wenn Ihr Theme kein JSON-LD-Markup enthält, können Sie es manuell hinzufügen. In der theme.liquid-Datei Ihres Themes (oder in einem Snippet, das auf Produkt- und Kollektionsseiten eingebunden ist), fügen Sie ein Script wie dieses hinzu:

{% if template contains 'product' %}
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Startseite",
        "item": "{{ shop.url }}"
      }
      {% if collection %}
      ,{
        "@type": "ListItem",
        "position": 2,
        "name": "{{ collection.title | escape }}",
        "item": "{{ collection.url | absolute_url }}"
      }
      {% endif %}
      ,{
        "@type": "ListItem",
        "position": {% if collection %}3{% else %}2{% endif %},
        "name": "{{ product.title | escape }}",
        "item": "{{ product.url | absolute_url }}"
      }
    ]
  }
  </script>
{% endif %}

Dies generiert Breadcrumb-Markup für Produktseiten. Passen Sie es für Kollektionsseiten an, indem Sie product durch collection ersetzen und den Breadcrumb-Pfad entsprechend anpassen.

Für Shops, die Apps wie Navi+ AI Menu Builder verwenden, wird das Breadcrumb-Markup oft automatisch als Teil des Navigationspakets verwaltet — überprüfen Sie die Einstellungen oder Dokumentation Ihrer App.

Breadcrumbs sind eine der höchsten ROI-Strukturdaten-Implementierungen, die Sie durchführen können. Das Markup ist einfach, die Validierungstools sind kostenlos, und die Auswirkungen (Rich Results, interne Verlinkung, Crawl-Effizienz) sind unmittelbar. Wenn Ihr Shop noch keine Breadcrumbs hat, fügen Sie diese hinzu. Wenn er Breadcrumbs hat, aber kein Strukturdaten-Markup, fügen Sie die JSON-LD hinzu. Der zusätzliche Aufwand ist gering, und der SEO-Nutzen wächst im Laufe der Zeit.

Dieser Artikel ist Teil des größeren Leitfadens zu Navigation SEO: Sicherstellen, dass Google Ihre Menüstruktur crawlen kann.