Shopify breadcrumbs: kolekcije, proizvodi i schema

Shopify breadcrumbs greše na predvidiv način. Putanja na stranici i BreadcrumbList u JSON-LD-u pišu dva različita snippeta, niko ih ne drži usklađenim, a na stranicama proizvoda kategoriju u sredini bira pravilo koje niko nije svesno odabrao.

Ovo je redosled kojim radim na Shopify prodavnicama, uključujući deo koji većina vodiča preskače: odluku šta breadcrumb stranice proizvoda uopšte treba da bude.

Šta breadcrumbs vrede

Budite realni pre nego što za ovo odvojite ceo sprint. Google tretira BreadcrumbList kao pomoć da razume i prikaže strukturu sajta, a ne kao polugu za rangiranje, i od januara 2025. više ne prikazuje breadcrumb putanje u mobilnim snippetima (na desktopu i dalje prikazuje). Ispravna putanja daje čistije interno linkovanje naviše, schema blok koji opisuje stranicu koju korisnik zaista vidi, i pomoć u navigaciji.

Pogrešna putanja je gora od nikakve: zbunjujuća kategorija na stranici i u schemi. Cilj je dakle ispravno, a ne razrađeno.

1. Shopify nema hijerarhiju kolekcija - dodajte je

Shopify kolekcija nema roditelja. Kolekcije su ravne, što je dovoljno za merchandising, a beskorisno za breadcrumb koji treba da kaže Patike > Fudbal > Kopačke.

Pouzdano rešenje su dva metapolja kolekcije (Settings → Custom data → Collections):

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

Roditelja ostavite praznog na kolekciji prvog nivoa. Labela je opciona i vraća se na naslov kolekcije. Vredi je imati kad je naslov pisan za stranicu ("Muške kopačke za fudbal") a crumb treba da bude kratak ("Kopačke").

Definicije metapolja napravite ručno u adminu. Poenta definicije je da je to namerno, tipizirano polje koje trgovac vidi, a ne slobodan tekst koji je neko jednom ukucao.

2. Prođite lanac u Liquidu, sa zaštitom

Liquid nema rekurziju, pa se od trenutne kolekcije penjete naviše ograničenom petljom i skupljate dve paralelne liste:

{% 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: '||' %}

Važna su dva detalja. Petlja je ograničena na deset nivoa, što je ujedno i vaše ograničenje dubine bez dodatnog koda. A provera seen_handles sprečava da kružna referenca - kolekcija koja je sama sebi baba - zaglavi renderovanje. Handle-ovi su sa obe strane okruženi crtama da cleats ne bi pogrešno pogodio unutar već viđenog long-cleats.

Ova zaštita je mreža sigurnosti, ne validacija. Shopify dozvoljava da se pogrešna referenca napravi u adminu, pa na prodavnicama sa mnogo kolekcija vredi povremena provera.

3. Putanja i schema iz istih podataka

Vidljivu putanju i JSON-LD renderujte iz iste dve liste da se ne razilaze. Dva pravila za putanju:

Poslednji crumb je trenutna stranica i nije link. Stranica koja linkuje samu sebe je poznat antiobrazac pristupačnosti. Dajte mu drugu klasu nego linkovanim crumbovima, ne istu klasu bez href, inače hover pravila teme nastavljaju da ga prikazuju kao klikabilan.
Koreni crumb koristi shop.name i routes.root_url, a ne ručno upisano "Home". Ako u schemi piše "Acme Tackle" a na stranici "Home", Google čita schemu, posetilac stranicu, i opisuju različite stvari.

A za schemu:

<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>

Imena uvek propustite kroz | json, nikad ih ručno ne stavljajte pod navodnike: kolekcija Men's "Pro" Cleats ili bilo šta sa ampersandom pokvariće ručno navodnjeni JSON. collection.url je relativan, pa za schema item dodajte ispred shop.url. Poslednja stavka sme da izostavi item, što odgovara običnom tekstu poslednjeg crumba na stranici.

Jedna provera cele prodavnice usput: pogledajte Settings → Store details. Ako je ime prodavnice ukucano sa bukvalnim &, i stranica i schema će ga ispisati, dosledno i pogrešno.

4. Stranica proizvoda je teži deo

Na stranici kolekcije hijerarhija je stvarno mesto stranice na sajtu. Proizvod je drugačiji: pripada mnogim kolekcijama, a Shopify nema primarnu.

Shopify jeste u stanju da kaže kroz koju je kolekciju posetilac došao - objekat collection postoji na /collections/x/products/y. Ali je prazan na kanonskom URL-u proizvoda, koji je upravo ono što Googlebot učitava, kao i na direktnim linkovima i internoj pretrazi. Uobičajeni fallback je product.collections.first, a na prodavnicama na kojima sam radio ta lista ne dolazi redosledom koji izražava šta proizvod jeste. Rezultat je kolekcija koja se slučajno prva sortira, na primer Accessories, ili goli /collections/all.

Na stranicama gde schema najviše znači, srednji crumb je dakle proizvoljan. Postoje tri iskrene opcije:

Dodati primarnu kolekciju. Metapolje proizvoda custom.primary_collection, postavljeno namerno, pa lanac prolazite kao gore. Tačno kad proizvodi pouzdano imaju jedan pravi dom i spremni ste da polje održavate.
Spljoštiti. Breadcrumb proizvoda je Ime prodavnice > Ime proizvoda. Nema kategorije, pa nema ni pogrešne. Tako sam uradio na prodavnici gde je crumb kategorije često bio pogrešan, i uradio bih opet.
Zadržati lanac i samo ispraviti labele. Ako proizvodi pouzdano stoje u jednoj smislenoj kolekciji, zadržite hijerarhiju i samo uskladite korenu labelu sa schemom.

Podrazumevano spljoštavam kad nema primarne kolekcije, jer ispravna dvostepena putanja pobeđuje trostepenu sa bacanjem novčića u sredini. Spljoštavanje usput briše celu logiku lanca iz šablona proizvoda, dakle manje koda za održavanje.

Ako spljoštite, putanja proizvoda je samo:

<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. Proverite gde je H1

Neke teme renderuju <h1> proizvoda kao dete breadcrumb <nav>-a i razdvajaju ih vizuelno flex trikovima. Breadcrumb landmark treba da sadrži putanju i ništa više, a naslov unutar navigacione regije muti način na koji crawleri i čitači ekrana čitaju stranicu.

Pomerite <h1> da bude brat <nav>-a. Zatim ispravite CSS kako treba: selektori vezani za staro ugnežđenje (flex-basis: 100% na potomku nava ili mobilne order vrednosti koje su pretpostavljale da naslov putuje sa navom) moraju se prepisati za dva nezavisna flex deteta. Pomeriti markup a CSS ostaviti je česta polovična popravka i vidi se kao pokvaren mobilni raspored.

Redosled posla

Dodajte parent_category (i opciono breadcrumb_label) i popunite prvih nekoliko nivoa kolekcija.
Jedan snippet rešava lanac; putanja i JSON-LD oba čitaju iz njega.
Odlučite za stranicu proizvoda: primarna kolekcija ili spljoštavanje.
Izvucite H1 proizvoda iz nava i popravite CSS.
Proverite šaku pravih URL-ova u Rich Results Testu i uporedite tekst schema znak po znak sa vidljivom putanjom.

Provera gde se breadcrumbs prodavnice razilaze sa njenom schemom standardni je deo Shopify SEO pregleda. Ostatak kontrolne liste je u Shopify SEO vodiču.