Shopify: Breadcrumbs und ItemList Markup für Collections nachrüsten.

Passt für dich, wenn: du einen Shopify-Shop betreibst, Zugriff auf den Theme-Code hast (Onlineshop, Themes, Code bearbeiten) und deine Collections mehr als eine Handvoll Produkte listen.

Das Problem: Shopify versteckt deine Struktur

Shopify-Themes zeigen auf Produkt- und Collection-Seiten oft keinen Pfad an. Der Besucher weiß nicht, wo er sich im Sortiment befindet, und Google fehlt ein wichtiges Signal für die Seitenhierarchie. Dazu kommt: Collection-Seiten sind Listen, aber kaum ein Theme sagt das auch maschinenlesbar. Eine Kategorieseite ohne ItemList-Markup ist für Google erstmal nur eine Seite mit vielen Links.

Beides zusammen kostet dich Sichtbarkeit an zwei Stellen: In den Suchergebnissen fehlen Breadcrumb-Pfade und strukturierte Signale für Sitelinks. Und KI-Systeme, die deinen Shop als Quelle bewerten, können die Beziehung zwischen Kategorie und Produkten schlechter erfassen.

Schritt 1: Breadcrumbs als Snippet anlegen

Lege im Theme-Editor unter Snippets eine neue Datei breadcrumbs.liquid an und füge diesen Code ein. Er rendert die sichtbaren Breadcrumbs und das passende BreadcrumbList-Markup in einem Rutsch, damit sichtbarer Pfad und strukturierte Daten nie auseinanderlaufen:

{% unless template == 'index' %}
    <nav class="breadcrumbs" aria-label="Breadcrumb">
      <a href="{{ routes.root_url }}">Start</a>
      {% if template contains 'product' %}
        {% assign crumb_collection = collection | default: product.collections.first %}
        {% if crumb_collection %}
          <span aria-hidden="true">›</span>
          <a href="{{ crumb_collection.url }}">{{ crumb_collection.title }}</a>
        {% endif %}
        <span aria-hidden="true">›</span>
        <span aria-current="page">{{ product.title }}</span>
      {% elsif template contains 'collection' and collection %}
        <span aria-hidden="true">›</span>
        <span aria-current="page">{{ collection.title }}</span>
      {% endif %}
    </nav>

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [
        { "@type": "ListItem", "position": 1, "name": "Start", "item": "{{ shop.url }}" }
        {%- if template contains 'product' -%}
          {%- assign crumb_collection = collection | default: product.collections.first -%}
          {%- if crumb_collection -%}
            ,{ "@type": "ListItem", "position": 2, "name": {{ crumb_collection.title | json }}, "item": "{{ shop.url }}{{ crumb_collection.url }}" }
            ,{ "@type": "ListItem", "position": 3, "name": {{ product.title | json }}, "item": "{{ shop.url }}{{ product.url }}" }
          {%- else -%}
            ,{ "@type": "ListItem", "position": 2, "name": {{ product.title | json }}, "item": "{{ shop.url }}{{ product.url }}" }
          {%- endif -%}
        {%- elsif template contains 'collection' and collection -%}
          ,{ "@type": "ListItem", "position": 2, "name": {{ collection.title | json }}, "item": "{{ shop.url }}{{ collection.url }}" }
        {%- endif %}
      ]
    }
    </script>
    {% endunless %}
    

Wichtig: Für Produkte nutzt das Snippet die kanonische Produkt-URL ({{ product.url }}) statt der Collection-Pfade mit /collections/ in der URL. So zeigst du Google immer die eine, kanonische Version und vermeidest Duplicate-Content-Pfade.

Schritt 2: ItemList Markup für Collections

Zweite Datei, gleiche Stelle: collection-itemlist.liquid. Das Snippet sagt Google, dass deine Collection eine geordnete Liste von Produkten ist, wie viele es insgesamt sind und in welcher Reihenfolge sie stehen:

{% if template contains 'collection' and collection %}
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "ItemList",
      "name": {{ collection.title | json }},
      "numberOfItems": {{ collection.products_count }},
      "itemListElement": [
        {%- for product in collection.products -%}
        {
          "@type": "ListItem",
          "position": {{ forloop.index }},
          "url": "{{ shop.url }}{{ product.url }}"
        }{%- unless forloop.last -%},{%- endunless -%}
        {%- endfor %}
      ]
    }
    </script>
    {% endif %}
    

Zwei Hinweise aus der Praxis: Erstens listet das Snippet die Produkte der aktuellen Seite. Wenn deine Collection paginiert ist, bekommt jede Seite ihre eigene, korrekte Liste, und numberOfItems nennt trotzdem die Gesamtzahl. Zweitens reicht die schlanke Variante mit url und position völlig. Vollständige Product-Objekte gehören auf die Produktseite, nicht in die Liste.

Schritt 3: Einbauen

Beide Snippets werden per render-Tag eingebunden. Die Breadcrumbs gehören in dein Layout oder Template an die Stelle über dem Seiteninhalt, das ItemList-Markup in dein Collection-Template:

{% comment %} Ueber dem Hauptinhalt, z. B. in theme.liquid nach dem Header: {% endcomment %}
    {% render 'breadcrumbs' %}

    {% comment %} Im Collection-Template (z. B. main-collection-product-grid.liquid): {% endcomment %}
    {% render 'collection-itemlist' %}
    

Das Styling der sichtbaren Breadcrumbs hängt von deinem Theme ab. Ein Startpunkt: kleine Schrift, dezente Farbe, 16 bis 24 Pixel Abstand nach oben und unten. Die Breadcrumbs sollen orientieren, nicht dominieren.

Validieren

• Öffne eine Collection- und eine Produktseite im Google Rich Results Test. Erwartung: BreadcrumbList wird erkannt, ohne Fehler.
• Prüfe das ItemList-Markup im Schema.org Validator.
• Klicke die Breadcrumbs einmal durch: Jeder Link muss auf eine kanonische URL führen, keine /collections/-Produktpfade.
• Beobachte in der Search Console unter Verbesserungen, ob die Breadcrumb-Berichte nach einigen Tagen Seiten aufnehmen.