Shopify 2.0 Breadcrumbs zur Produktseite hinzufügen | +Codebeispiel

Im heutigen, stark umkämpften E-Commerce-Umfeld zählt jedes Detail, das Käufer:innen hilft,
sich zurechtzufinden – und auf Ihrer Website zu bleiben. Die Breadcrumb-Navigation bietet
eine kompakte, intuitive „Karte“, die zeigt, wo sich ein Produkt befindet: von der Startseite
über eine Kollektion bis hin zum konkreten Produkt.

Diese kleine Navigationshilfe kann die Absprungrate senken, die CTR erhöhen und das
organische SEO-Ranking verbessern. In diesem Artikel erfahren Sie, was Breadcrumbs sind,
warum sie für SEO wichtig sind, wie sie in den Google Rich Results erscheinen können –
und wann es sich lohnt, in eine erweiterte, händlerfreundliche Umsetzung zu investieren.

Das nehmen Sie mit

• Was Breadcrumbs sind und wie sie UX & SEO stärken
• Schritte, um Google Rich Results für Ihren Breadcrumb-Pfad zu aktivieren
• Entscheidungshilfe: Basis- vs. erweiterte, händlerfreundliche Implementierung

Was ist eine Breadcrumb-Navigation?

Eine Breadcrumb-Navigation ist eine horizontale Liste von Links – typischerweise am oberen
Rand einer Seite platziert – die den Pfad des Besuchers oder die Struktur der Website widerspiegelt.
Zum Beispiel:

Es gibt drei gängige Muster:

• Hierarchie-basiert (am häufigsten): zeigt den Kategoriepfad, in dem sich das Produkt befindet.
• Attribut-basiert: spiegelt Produkteigenschaften wider, z. B. „Herren › Jacken › Leder › Moto“
• Verlauf-basiert: zeichnet den tatsächlichen Klickpfad des Besuchers auf (seltener für SEO-Zwecke verwendet).

Durch die Bereitstellung von Kontext („Ich bin hier, weil ich auf ‚Damenschuhe‘ geklickt habe“)
verringern Breadcrumbs die Verwirrung und fördern ein tieferes Stöbern – ein entscheidender Faktor
zur Verbesserung der UX, der Interaktion und letztlich der Conversion-Rate.

Vorteile von Breadcrumbs für SEO

Breadcrumbs helfen nicht nur den Nutzer:innen – sie sind auch ein starkes SEO-Werkzeug:

1. Verbesserte interne Verlinkung
   Jeder Breadcrumb ist ein Link zu einer übergeordneten Seite. Das hilft Suchmaschinen dabei, Ihre Kategorien effizienter zu crawlen und den Linkjuice innerhalb der Website besser zu verteilen.
2. Klare Signale zur Seitenhierarchie
   Google nutzt Breadcrumb-Markup, um Ihre Kategoriestruktur zu verstehen und in den Suchergebnissen darzustellen – was Ihre Chancen verbessert, für relevante Kategoriebegriffe zu ranken.
3. Geringere Absprungraten
   Besucher:innen, die auf einer Produktseite landen, können leicht eine Ebene höher navigieren, anstatt zur Google-Suche zurückzukehren – so bleiben sie länger auf Ihrer Seite.
4. Höhere Nutzerbindung
   Wer sich durch verwandte Kategorien klickt, legt häufiger mehrere Artikel in den Warenkorb – was den durchschnittlichen Bestellwert und die Sitzungsdauer erhöht.
5. Sichtbarkeit als Rich Snippet
   Richtig ausgezeichnete Breadcrumbs können direkt in den SERPs als Rich Snippet angezeigt werden – das macht Ihre Seite auffälliger und steigert die Klickrate.

Fazit: Diese Effekte verbessern die Indexierung, erhöhen die durchschnittliche Sitzungsdauer, stärken Ihre Sichtbarkeit in der Google-Suche – und steigern letztlich Ihre Conversion-Rate.

So fügen Sie eine einfache Breadcrumb zu Ihrer Shopify-Produktseite hinzu 🧭

Die Breadcrumb-Navigation hilft Nutzer:innen, jederzeit zu verstehen, wo sie sich in Ihrem Shopify-Shop befinden. Gleichzeitig verbessert sie die SEO, indem sie die Seitenstruktur verdeutlicht. In dieser Anleitung zeigen wir Ihnen Schritt für Schritt, wie Sie einen einfachen Breadcrumb-Abschnitt erstellen und diesen zu Ihrer Produktseite hinzufügen – ganz ohne fortgeschrittene Programmierkenntnisse.

🛠️ Schritt-für-Schritt-Anleitung

Schritt 1: Öffnen Sie im Shopify-Adminbereich Online-Shop. Unter Themes klicken Sie auf die drei Punkte Ihres aktuellen Themes und wählen Code bearbeiten.

Schritt 2: Öffnen Sie im Code-Editor den Ordner Sections und klicken Sie auf Neue Section hinzufügen. Benennen Sie die Datei breadcrumb.liquid.

Schritt 3: Fügen Sie folgenden Breadcrumb-Code in die Datei breadcrumb.liquid ein. Ergänzen Sie am Ende das notwendige schema und die presets. Der Name im preset wird im Theme-Editor angezeigt. Speichern Sie die Datei.

<nav class="page-width breadcrumb" aria-label="Breadcrumb">
  <a href="{{ routes.root_url }}">Home</a>
  {% if collection %}
    <span aria-hidden="true">›</span>
    <a href="{{ collection.url }}">{{ collection.title }}</a>
    {% if product %}
      <span aria-hidden="true">›</span>
      <span aria-current="page">{{ product.title }}</span>
    {% endif %}
  {% elsif product %}
    {% assign first_collection = product.collections.first %}
    {% if first_collection %}
      <span aria-hidden="true">›</span>
      <a href="{{ first_collection.url }}">{{ first_collection.title }}</a>
    {% endif %}
    <span aria-hidden="true">›</span>
    <span aria-current="page">{{ product.title }}</span>
  {% elsif blog %}
    <span aria-hidden="true">›</span>
    <a href="{{ blog.url }}">{{ blog.title }}</a>
    {% if article %}
      <span aria-hidden="true">›</span>
      <span aria-current="page">{{ article.title }}</span>
    {% endif %}
  {% elsif page %}
    <span aria-hidden="true">›</span>
    <span aria-current="page">{{ page.title }}</span>
  {% endif %}
</nav>

<style>
  #shopify-section-{{ section.id }} {
    padding: 20px 0;
  }
  .breadcrumb {
    font-size: 1.6rem;
    color: #888;
    display: flex;
    gap: 0.5em;
    align-items: center;
  }
  .breadcrumb a {
    color: #41ae45;
    text-decoration: none;
  }
  .breadcrumb a:hover {
    text-decoration: underline;
  }
  .breadcrumb span[aria-current="page"] {
    color: #222;
    font-weight: 500;
  }
</style>

{% schema %}
{
  "name": "Pahlowmedia Breadcrumb",
  "settings": [],
  "presets": [
    {
      "name": "Pahlowmedia Breadcrumb"
    }
  ]
}
{% endschema %}

💡 Hinweis: Die Klasse page-width im <nav>-Element sorgt dafür, dass das Breadcrumb-Element innerhalb des Containers zentriert wird. Wenn Sie eine individuelle Anpassung benötigen, wenden Sie sich an Pahlowmedia SEO.

Schritt 4: Speichern Sie die Datei, kehren Sie zur linken Seitenleiste zurück, klicken Sie auf das Shopify-Logo und wählen Theme anpassen.

Schritt 5: Gehen Sie auf die Produktseite, wählen Sie Abschnitt hinzufügen, suchen Sie den im preset vergebenen Namen und fügen Sie den Abschnitt hinzu. Platzieren Sie ihn oberhalb des Haupt-Produktbereichs.

Google-Schema für Breadcrumbs

Um Rich Snippets für Breadcrumbs in der Google-Suche anzuzeigen, fügen Sie ein JSON-LD-Markup im <head>-Bereich Ihrer Seite ein. Dadurch kann Google die Navigationsstruktur korrekt interpretieren und in den SERPs darstellen.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Women's Shoes",
      "item": "https://www.example.com/collections/womens-shoes"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Black Suede Stiletto",
      "item": "https://www.example.com/products/black-suede-stiletto"
    }
  ]
}
</script>

💡 Tipp: Ersetzen Sie die name– und item-Werte mit den tatsächlichen Kategorien, Sammlungen und Produkt-URLs Ihres Shopify-Shops. Nutzen Sie, wenn möglich, die Liquid-Variablen {{ collection.url }}, {{ product.url }} und {{ page.url }}, um das Markup dynamisch zu generieren.

Wie dieses Markup funktioniert – und wie Google es liest 🔍

• @context und @type
  • @context verweist auf schema.org, damit Google weiß, welches Vokabular verwendet wird.
  • @type: "BreadcrumbList" teilt den Crawlern mit, dass das Array innerhalb von itemListElement eine geordnete Reihe von Breadcrumb-Schritten ist – und nicht etwa eine Produktsammlung.

itemListElement (Array von ListItems)
Google benötigt für jeden Schritt drei Dinge:

position

Zweck: Gibt die Reihenfolge an (1 = Startseite, 2 = Kategorie, etc.)
Beispielwert im Code: 2

name

Zweck: Die Bezeichnung, die Nutzer:innen sehen (z. B. „Damenschuhe“)
Beispielwert im Code: "Women's Shoes"

item

Zweck: Canonical-URL für diesen Breadcrumb-Knoten. Verwende absolute URLs mit HTTPS.
Beispielwert im Code: "https://www.example.com/collections/womens-shoes"

3. Anzeige ≠ Schema, aber sie müssen übereinstimmen

Googles Spam-Richtlinien verlangen, dass die sichtbare Breadcrumb-Navigation, die Nutzer:innen auf der Seite sehen, mit den Angaben in den strukturierten Daten übereinstimmt. Wird eine JSON-LD–Breadcrumb-Struktur ausgegeben, die nicht sichtbar ist, kann Google sie ignorieren oder eine manuelle Maßnahme ergreifen.

Wo man es in ein Shopify-Theme einfügt

• Globale Platzierung: Fügen Sie die Liquid-Version des Markups in die theme.liquid-Datei direkt vor </head> ein, damit jede Seite es erbt.
• Dynamische Werte: Ersetzen Sie fest codierte Namen/URLs durch Liquid-Objekte, z. B.:

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "{{ shop.url }}"
    },
    {% if collection %}
    {
      "@type": "ListItem",
      "position": 2,
      "name": "{{ collection.title | escape }}",
      "item": "{{ collection.url | prepend: shop.url }}"
    },
    {% endif %}
    {
      "@type": "ListItem",
      "position": 3,
      "name": "{{ product.title | escape }}",
      "item": "{{ canonical_url }}"
    }
  ]
}

Checkliste zur Prüfung & Validierung

1. Rich Results Test ausführen

Tool: Google Rich Results Test
Worauf achten: Prüfen, ob Breadcrumb angezeigt wird – ohne kritische Fehler.

2. URL in der Google Search Console prüfen

Tool: Search Console → Abdeckung → Breadcrumb-Bereich
Worauf achten: Sicherstellen, dass Google das Schema nach dem nächsten Crawl verarbeitet hat.

3. Auf doppelte Breadcrumb-Warnungen achten

Tool: Search Console → Verbesserungen → Breadcrumbs
Worauf achten:

• Shopify fügt manchmal eigenes Markup über Apps oder Themes ein.
• Sicherstellen, dass nur eine Version aktiv bleibt.

Profi-Tipps für bessere SEO-Wirkung

• Linktiefe: Höchstens drei Ebenen (Startseite › Kategorie › Produkt). Längere Pfade erscheinen selten in Rich Snippets und verwässern Linkkraft.
• Kanonische URLs: Immer die Canonical URL angeben, keine gefilterten Links.
• Klickrate steigern: Ein klarer Breadcrumb-Pfad ersetzt die vollständige Seiten-URL in den mobilen SERPs und erhöht Vertrauen & Struktur.

Erweiterte Breadcrumb-Lösungen (Unser Service)

Ein einfaches Breadcrumb erfüllt die Mindestanforderungen, aber wachsende Händler stoßen schnell an Grenzen. Unsere Advanced Breadcrumb Suite bietet:

• Dynamische mehrstufige Pfade: Verwaltung tiefer Kategoriebäume (z. B. „Startseite › Herren › Oberbekleidung › Wasserdichte Jacken › Gefüttert“).
• Attribut- & Filter-Erkennung: Kombination hierarchischer Breadcrumbs mit Filtern (z. B. „Hemden › Slim Fit › Blau › Größe M“).
• Mobile-First-Optimierung: Einklappbare, touch-freundliche Breadcrumbs für kleine Screens.
• A/B-Tests & Analysen: Messung des Einflusses verschiedener Breadcrumb-Strukturen auf Engagement & Conversions.
• Automatische Schema-Generierung: Fehlerfreies JSON-LD bei jedem Seitenaufruf.

Bereit für ein Upgrade? Lassen Sie uns eine maßgeschneiderte Breadcrumb-Lösung für Ihre Katalogstruktur erstellen – damit Kunden jederzeit wissen, wo sie sind und was als Nächstes kommt. Kontaktieren Sie uns für eine kostenlose Prüfung Ihrer Breadcrumb-Einrichtung.