Shopify Breadcrumbs: Collection-Pfade, Produkte, Schema

Shopify-Breadcrumbs gehen auf vorhersehbare Weise schief. Der Pfad auf der Seite und die BreadcrumbList im JSON-LD werden von zwei verschiedenen Snippets geschrieben, niemand hält sie synchron, und auf Produktseiten wird die Kategorie in der Mitte nach einer Regel gewählt, die niemand bewusst festgelegt hat.

So gehe ich auf Shopify-Shops vor, einschließlich des Teils, den die meisten Anleitungen auslassen: zu entscheiden, was der Breadcrumb einer Produktseite überhaupt sein soll.

Was Breadcrumbs bringen

Seien Sie realistisch, bevor Sie dafür einen Sprint einplanen. Google behandelt BreadcrumbList als Hilfe, um die Seitenstruktur zu verstehen und darzustellen, nicht als Ranking-Hebel, und zeigt seit Januar 2025 in mobilen Snippets keine Breadcrumb-Pfade mehr an (am Desktop weiterhin schon). Ein korrekter Pfad bringt eine sauberere interne Verlinkung nach oben, einen Schema-Block, der die Seite beschreibt, die der Nutzer wirklich sieht, und eine Orientierungshilfe.

Ein falscher Pfad ist schlechter als gar keiner: eine irreführende Kategorie auf der Seite und im Schema. Das Ziel ist also korrekt, nicht aufwendig.

1. Shopify hat keine Collection-Hierarchie - bauen Sie eine

Eine Shopify-Collection hat keine übergeordnete Collection. Collections sind flach, was fürs Merchandising genügt, aber für einen Breadcrumb, der Schuhe > Fußball > Stollenschuhe sagen soll, nutzlos ist.

Die zuverlässige Lösung sind zwei Collection-Metafelder (Einstellungen → Benutzerdefinierte Daten → Collections):

custom.parent_category   Collection reference (single value)
custom.breadcrumb_label  Single line text, optional

Lassen Sie das Elternfeld bei einer Collection der obersten Ebene leer. Das Label ist optional und fällt auf den Collection-Titel zurück. Es lohnt sich, wenn der Titel für die Seite geschrieben ist ("Fußball-Stollenschuhe für Herren") und der Crumb kurz sein soll ("Stollenschuhe").

Legen Sie die Metafeld-Definitionen von Hand im Admin an. Eine Definition ist ein bewusstes, typisiertes Feld, das ein Händler sehen kann, kein Freitext, den irgendwann jemand einmal getippt hat.

2. Die Kette in Liquid durchlaufen, mit Schutz

Liquid kennt keine Rekursion. Laufen Sie daher mit einer begrenzten Schleife von der aktuellen Collection nach oben und sammeln Sie zwei parallele Listen:

{% assign crumb_labels = '' %}
{% assign crumb_urls = '' %}
{% assign seen_handles = '|' %}
{% assign current = collection %}

{% for i in (1..10) %}
  {% if current == blank %}{% break %}{% endif %}

  {% assign needle = current.handle | prepend: '|' | append: '|' %}
  {% if seen_handles contains needle %}{% break %}{% endif %}
  {% assign seen_handles = seen_handles | append: current.handle | append: '|' %}

  {% assign label = current.metafields.custom.breadcrumb_label %}
  {% if label == blank %}{% assign label = current.title %}{% endif %}

  {% assign crumb_labels = label | append: '||' | append: crumb_labels %}
  {% assign crumb_urls = current.url | append: '||' | append: crumb_urls %}

  {% assign current = current.metafields.custom.parent_category.value %}
{% endfor %}

{% assign crumb_labels = crumb_labels | split: '||' %}
{% assign crumb_urls = crumb_urls | split: '||' %}

Zwei Details zählen. Die Schleife ist auf zehn Ebenen begrenzt, das ist zugleich Ihre Tiefenbegrenzung ohne zusätzlichen Code. Und die Prüfung auf seen_handles verhindert, dass ein Zirkelbezug - eine Collection, die ihre eigene Großmutter ist - das Rendering aufhängt. Die Handles stehen auf beiden Seiten zwischen Pipes, damit cleats nicht fälschlich in einem bereits gesehenen long-cleats trifft.

Dieser Schutz ist ein Sicherheitsnetz, keine Validierung. Shopify lässt den fehlerhaften Verweis im Admin zu, deshalb lohnt bei Shops mit vielen Collections eine regelmäßige Prüfung.

3. Pfad und Schema aus denselben Daten erzeugen

Rendern Sie den sichtbaren Pfad und das JSON-LD aus denselben zwei Listen, damit sie nicht auseinanderlaufen. Zwei Regeln für den Pfad:

• Der letzte Crumb ist die aktuelle Seite und kein Link. Eine Seite, die auf sich selbst verlinkt, ist ein bekanntes Barrierefreiheits-Antimuster. Geben Sie ihm eine andere Klasse als den verlinkten Crumbs, nicht dieselbe Klasse ohne href, sonst lassen Hover-Regeln des Themes ihn weiter anklickbar aussehen.
• Der Root-Crumb nutzt shop.name und routes.root_url, nicht ein fest eingetragenes "Home". Steht im Schema "Acme Tackle" und auf der Seite "Home", liest Google das Schema und der Besucher die Seite, und beide beschreiben Verschiedenes.

Und für das Schema:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1,
      "name": {{ shop.name | json }}, "item": {{ shop.url | json }} }
    {% for label in crumb_labels %}
    ,{ "@type": "ListItem", "position": {{ forloop.index | plus: 1 }},
       "name": {{ label | json }}
       {% unless forloop.last %}, "item": {{ crumb_urls[forloop.index0] | prepend: shop.url | json }}{% endunless %} }
    {% endfor %}
  ]
}
</script>

Schicken Sie Namen immer durch | json, setzen Sie sie nie von Hand in Anführungszeichen: Eine Collection namens Men's "Pro" Cleats oder alles mit Ampersand zerstört von Hand gequotetes JSON. collection.url ist relativ, stellen Sie deshalb für das Schema-item shop.url voran. Das letzte Element darf item weglassen, passend zum Klartext-Crumb auf der Seite.

Eine shopweite Prüfung gleich mit: Schauen Sie in Einstellungen → Shop-Details. Wurde der Shopname mit einem wörtlichen & eingetippt, geben Seite und Schema ihn beide aus - einheitlich und falsch.

4. Die Produktseite ist der schwierige Teil

Auf einer Collection-Seite ist die Hierarchie der tatsächliche Platz der Seite im Shop. Ein Produkt ist anders: Es gehört zu vielen Collections, und Shopify kennt keine primäre.

Shopify sagt zwar, über welche Collection ein Besucher kam - das Objekt collection existiert unter /collections/x/products/y. Es ist aber leer auf der kanonischen Produkt-URL, die genau der Googlebot abruft, sowie bei direkten Links und interner Suche. Der übliche Fallback ist product.collections.first, und in den Shops, in denen ich gearbeitet habe, kommt diese Liste nicht in einer Reihenfolge zurück, die ausdrückt, was das Produkt ist. Heraus kommt die Collection, die zufällig zuerst sortiert, etwa Accessories, oder ein nacktes /collections/all.

Auf den Seiten, auf denen das Schema am meisten zählt, ist der mittlere Crumb also beliebig. Es gibt drei ehrliche Optionen:

1. Eine primäre Collection einführen. Ein Produkt-Metafeld custom.primary_collection, bewusst gesetzt, dann die Kette wie oben durchlaufen. Richtig, wenn Produkte verlässlich ein echtes Zuhause haben und Sie das Feld pflegen wollen.
2. Abflachen. Der Produkt-Breadcrumb ist Shopname > Produktname. Kein Kategorie-Crumb, also kein falscher. So habe ich es in einem Shop gelöst, in dem der Kategorie-Crumb oft falsch war, und ich würde es wieder tun.
3. Die Kette behalten und nur die Labels korrigieren. Liegen Produkte verlässlich in einer sinnvollen Collection, behalten Sie die Hierarchie und gleichen nur das Root-Label mit dem Schema ab.

Standardmäßig flache ich ab, wenn es keine primäre Collection gibt, denn ein korrekter zweistufiger Pfad schlägt einen dreistufigen mit einem Münzwurf in der Mitte. Abflachen löscht außerdem die gesamte Ketten-Logik aus dem Produkt-Template, also weniger Code, den Sie pflegen müssen.

Wenn Sie abflachen, ist der Produktpfad nur:

<nav class="product-breadcrumbs">
  <a href="{{ routes.root_url }}">{{ shop.name }}</a> ›
  <span class="breadcrumb-current" aria-current="page">{{ product.title }}</span>
</nav>
<h1 class="product-title">{{ product.title }}</h1>

5. Prüfen, wo das H1 sitzt

Manche Themes rendern das Produkt-<h1> als Kind des Breadcrumb-<nav> und trennen beide optisch mit Flex-Tricks. Ein Breadcrumb-Landmark sollte den Pfad enthalten und sonst nichts, und eine Überschrift in einer Navigationsregion verwischt, wie Crawler und Screenreader die Seite lesen.

Verschieben Sie das <h1> als Geschwisterelement neben das <nav>. Korrigieren Sie dann das CSS richtig: Selektoren, die an die alte Verschachtelung gebunden sind (flex-basis: 100% auf einem Nachfahren der Nav oder mobile order-Werte, die davon ausgingen, dass die Überschrift mit der Nav wandert), müssen für zwei unabhängige Flex-Kinder neu geschrieben werden. Das Markup zu verschieben und das CSS unberührt zu lassen ist die verbreitete Halblösung und zeigt sich als kaputtes Mobile-Layout.

Reihenfolge der Arbeit

1. parent_category (und optional breadcrumb_label) anlegen und die obersten Ebenen der Collections befüllen.
2. Ein Snippet löst die Kette auf; Pfad und JSON-LD lesen beide daraus.
3. Die Produktseite entscheiden: primäre Collection oder abflachen.
4. Das Produkt-H1 aus der Nav holen und das CSS reparieren.
5. Eine Handvoll echter URLs im Rich-Results-Test prüfen und den Schema-Text Zeichen für Zeichen mit dem sichtbaren Pfad vergleichen.

Wo die Breadcrumbs eines Shops ihrem Schema widersprechen, gehört zu jedem Shopify-SEO-Review. Die übrige Checkliste steht im Shopify-SEO-Leitfaden.