Brotkrumen zeigen Menschen, wo sie sich im Shop befinden. Gerade in umfangreichen Katalogen mit vielen Produkt- und Kategorieseiten hilft eine Brotkrumennavigation bei der Orientierung. Außerdem lässt sich der tatsächliche Navigationspfad als BreadcrumbList in JSON-LD beschreiben.
Dieses Snippet setzt beides um: sichtbare, semantische HTML-Links und strukturierte Daten. Dabei gilt: Eine Produktseite hat in Shopify nicht immer eine eindeutige Kategorie als übergeordnete Seite.
Bevor du das Snippet einbaust
Prüfe zuerst, ob dein Theme bereits eine Breadcrumb-Navigation oder BreadcrumbList-Ausgabe besitzt. Doppelte Breadcrumb-Markups sind unnötig und können widersprüchliche Pfade erzeugen.
Das Beispiel berücksichtigt:
- eine Kategorieseite mit Startseite → Kategorie;
- eine Produktseite mit bekanntem Kategoriekontext mit Startseite → Kategorie → Produkt;
- eine direkt aufgerufene Produktseite ohne Kategorie-Kontext mit Startseite → Produkt.
Wichtig: Wir raten keine vermeintliche Hauptkategorie aus product.collections. Dass ein Produkt mehreren Kategorien zugeordnet sein kann, muss der Shop bewusst entscheiden.
Liquid-Snippet: Navigation plus BreadcrumbList
Lege unter snippets die Datei simple-breadcrumbs.liquid an:
{%- comment -%}
snippets/simple-breadcrumbs.liquid
Unterstützt Collection- und Produktseiten.
Keine willkürliche Kollektion für Produkte erfinden.
{%- endcomment -%}
{%- assign is_collection = false -%}
{%- assign is_product = false -%}
{%- assign show_collection = false -%}
{%- if request.page_type == 'collection' and collection -%}
{%- assign is_collection = true -%}
{%- elsif request.page_type == 'product' and product -%}
{%- assign is_product = true -%}
{%- if collection and collection.handle != 'all' -%}
{%- assign show_collection = true -%}
{%- endif -%}
{%- endif -%}
{%- if is_collection or is_product -%}
{%- assign homepage_url = request.origin | append: routes.root_url -%}
<nav class="simple-breadcrumbs" aria-label="Brotkrumennavigation">
<ol>
<li><a href="{{ routes.root_url }}">Startseite</a></li>
{%- if is_collection -%}
<li aria-current="page">{{ collection.title | escape }}</li>
{%- elsif is_product -%}
{%- if show_collection -%}
<li><a href="{{ collection.url }}">
{{ collection.title | escape }}
</a></li>
{%- endif -%}
<li aria-current="page">{{ product.title | escape }}</li>
{%- endif -%}
</ol>
</nav>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Startseite",
"item": {{ homepage_url | json }}
}
{%- if is_collection -%}
,{
"@type": "ListItem",
"position": 2,
"name": {{ collection.title | json }},
"item": {{ collection.url | prepend: request.origin | json }}
}
{%- elsif is_product -%}
{%- if show_collection -%}
,{
"@type": "ListItem",
"position": 2,
"name": {{ collection.title | json }},
"item": {{ collection.url | prepend: request.origin | json }}
}
{%- endif -%}
,{
"@type": "ListItem",
"position": {% if show_collection %}3{% else %}2{% endif %},
"name": {{ product.title | json }},
"item": {{ product.url | split: '?' | first | prepend: request.origin | json }}
}
{%- endif -%}
]
}
</script>
{%- endif -%}Die sichtbare Navigation verwendet eine geordnete Liste im nav-Element und markiert den aktuellen Eintrag mit aria-current="page". Beim JSON-LD kommen die Positionen aus der gleichen Logik.
Mit | json werden Titel und URLs als korrekt maskierte JSON-Zeichenketten ausgegeben. Verwende nicht ungefiltert eigene Strings in den JSON-LD-Code. Shopify beschreibt den Filter unter Liquid json.
Optionales CSS
.simple-breadcrumbs ol {
display: flex; flex-wrap: wrap;
gap: .5rem; list-style: none;
margin: 0; padding: 0; font-size: .875rem;
}
.simple-breadcrumbs li:not(:first-child)::before {
content: "/"; color: #6c766f; margin-right: .5rem;
}
.simple-breadcrumbs a {
color: inherit; text-decoration: underline;
text-underline-offset: .2em;
}
.simple-breadcrumbs [aria-current="page"] {
color: #53635b;
}Ein Grid oder CSS-Truncation ist hier oft nicht notwendig. Auf kleinen Displays sollten sich die Breadcrumbs umbrechen können, statt einen horizontalen Overflow zu verursachen.
Wo kommt das Snippet hin?
- Erstelle eine Sicherheitskopie des Themes.
- Lege das Snippet an und ergänze gegebenenfalls CSS.
- Suche die zuständige Produkt- beziehungsweise Kategoriesection.
- Füge an einer passenden Stelle oberhalb des Hauptinhalts ein:
{% render 'simple-breadcrumbs' %}Wichtig für Shopify: Der Kontext von collection kann bei einem Direktaufruf der Produktseite fehlen. Deshalb blendet das Snippet die Kategorie dann bewusst aus. Ob du eine feste, redaktionell definierte Hauptkategorie möchtest, erfordert eine separate Datenregel – beispielsweise ein passendes Produkt-Metafeld.
JSON-LD richtig testen
Prüfe die ausgegebene HTML-Seite, nicht nur den Liquid-Quellcode. Im Browser sollten nur die tatsächlich sichtbaren beziehungsweise logischen Pfade erscheinen.
Teste mindestens:
| Testfall | Erwarteter Pfad |
|---|---|
| Kategorie direkt geöffnet | Startseite → Kategorie |
| Produkt direkt geöffnet | Startseite → Produkt |
| Produkt mit gültigem Kategorie-Kontext | Startseite → Kategorie → Produkt |
| Produkt gehört zu vielen Kollektionen | Keine zufällig gewählte Kategorie |
| Zweite Sprache / Markt | Korrekte sprach- und marktbezogene URLs |
Prüfe außerdem mit einem Schema-Validator, ob BreadcrumbList als gültiges JSON-LD ausgegeben wird. Das Markup garantiert keine besondere Darstellung in der Google-Suche. Für SEO bleiben die Indexierbarkeit, die Seitentitel, die Canonical-URLs und die eigentliche Navigation wichtig.
Mehr Grundlagen zum Thema findest du in unserem Ratgeber JSON-LD prüfen. Ergänzend dokumentiert Shopify SEO-Metadaten im Theme und das request-Objekt.
Fazit
Gute Breadcrumbs sind keine Linkdekoration. Sie machen den Seitenaufbau nachvollziehbar und sollten genau den Weg zeigen, den dein Shop tatsächlich modelliert. Wer das zentral als Snippet löst, kann Darstellung und strukturierte Daten konsistent halten.
Unterstützung bei Navigation, Produktseiten und strukturierten Daten? Hier geht es zur Shopify-Entwicklung.
War dieser Artikel hilfreich?
Dein Feedback hilft uns, unsere Ratgeber zu verbessern.
Mit Digitalhaus Kunze gearbeitet?
Dann freuen wir uns über deine ehrliche Erfahrung auf Google – unabhängig davon, ob sie positiv oder kritisch war.
Auf Google bewerten