Morzsamenü (breadcrumb)

Keresőknek

A morzsa-lánc szülő kategóriák felé mutató belső linkeket hoz létre minden aloldalon. Ez segít a kategóriaoldalak megerősítésében. A találati oldalon pedig olvasható útvonal jelenik meg a hosszú URL helyett, ami mérhetően javíthatja az átkattintást.

AI-nak

Egy modell az aloldalt gyakran önmagában dolgozza fel. Morzsamenü nélkül egy terméklap csak egy névből és néhány adatból áll. Morzsamenüvel a modell látja a besorolást is.

Üzletileg

A morzsamenü a leggyakoribb visszalépési útvonal keresőből érkező látogatóknál. Aki mély terméklapra érkezik, ott lép tovább a kategóriába. A riportokban rendszeresen látjuk, hogy a magyar KKV-webshopok egy részén a morzsa vizuálisan ott van, de a séma-jelölés hiányzik.

Vonatkozik rá:

• Webshopok, ahol kategória és alkategória is van
• Többszintű szolgáltatás-struktúrák (szolgáltatás > alszolgáltatás)
• Blogok és tudásbázisok, ahol rovat vagy kategória rendezi a tartalmat
• Minden oldal, ahol az URL-struktúra három vagy több szintű

Nem vonatkozik rá:

• Egyoldalas (one page) weboldalak
• Lapos szerkezetű, 5-8 aloldalas bemutatkozó oldalak
• Főoldal, ahol nincs mit ábrázolni
• Staging és fejlesztői környezetek, ahol a noindex amúgy is tiltja az indexelést

Ahol egy oldal több kategóriában is szerepel, ott a morzsamenüt a kanonikus címhez igazítsd, ne a belépési útvonalhoz.

1. Nyiss meg egy mély aloldalt, például a legalsó szintű terméklapot.
2. Nézd meg, látszik-e a morzsa-lánc a tartalom fölött.
3. Kattints a lánc középső elemére. Valódi kategóriaoldalra kell vinnie.
4. Nyisd meg a böngésző devtools Elements fülét, és keress rá: nav, breadcrumb.
5. Futtasd le az oldalt a Rich Results teszttel. A BreadcrumbList blokknak hibamentesen meg kell jelennie. Részletek: Rich Results teszt.
6. Kapcsold ki a JavaScriptet, vagy futtass curl parancsot. A morzsának a nyers HTML-ben is benne kell lennie.
7. A Search Console Kinézet menüjében nézd meg a morzsamenü-riportot, ha elérhető.

Jó jel:

• A lánc a főoldaltól indul, és az aktuális oldalnál ér véget
• Az utolsó elem nem link
• A nyers HTML tartalmazza a láncot
• A séma-jelölés neve és sorrendje egyezik a látható szöveggel

Rossz jel:

• A morzsa csak JavaScriptből épül fel
• A lánc az előző oldalt mutatja, nem a hierarchiát
• Csak séma van, látható morzsa nincs
• A lánc elemei 404-re vagy átirányításra futnak

Mit néz ebből a riport

Az audit azt vizsgálja, hogy a mély aloldalak nyers HTML-jében van-e felismerhető morzsa-szerkezet. Nézi azt is, hogy tartozik-e hozzá BreadcrumbList séma, és hogy a kettő ugyanazt mondja-e. Ha csak az egyik van meg, az részleges találatként jelenik meg a riportban.

WordPress

1. Yoast SEO esetén kapcsold be a morzsamenüt a bővítmény beállításai között.
2. Illeszd be a yoast_breadcrumb() hívást a sablon megfelelő pontjára, vagy használd a blokk-változatot.
3. Rank Math esetén ugyanez a rank_math_the_breadcrumbs() függvénnyel megy.
4. WooCommerce-nél a woocommerce_breadcrumb() hívás adja a termék-láncot.
5. Ellenőrizd, hogy a bővítmény kiadja-e a BreadcrumbList sémát. Ha igen, ne tegyél mellé másodikat.

Shopify

1. A legtöbb alapsablonban nincs morzsamenü, külön snippetet kell készíteni.
2. A snippetben a collection és a product objektumból építsd fel a láncot.
3. Rendereld be a terméksablon és a kategóriasablon tetejére.
4. Figyelj a kettős URL-re: a /collections/.../products/... és a /products/... cím ugyanaz a termék. A morzsának a kanonikus változathoz kell igazodnia.

Unas

1. A rendszer alapból kiad morzsamenüt a kategória- és terméklapokon.
2. Egyedi sablonnál ellenőrizd, hogy a morzsa-blokk nem esett-e ki a szerkesztés során.
3. Ha a séma hiányzik, a sablon fejlécébe tehetsz saját JSON-LD blokkot.

Shoprenter

1. A sablonszerkesztőben nézd meg, hogy a morzsamenü komponens aktív-e a termék- és kategóriasablonon.
2. Ha CSS-sel el van rejtve, inkább a megjelenést állítsd át, ne a kódot vedd ki.
3. A séma-kiegészítést a fejléc-kód mezőbe illesztheted.

Egyedi fejlesztés

1. A láncot szerveroldalon állítsd elő, a kategória-fából, ne a böngésző előzményéből.
2. Rendereld nav elembe, aria-label="Breadcrumb" attribútummal, rendezett listával.
3. Az utolsó elem szöveg legyen, aria-current="page" jelöléssel.
4. Tedd mellé a BreadcrumbList JSON-LD-t, ugyanazokkal a nevekkel.
5. Az item mezőbe abszolút URL kerüljön, a beszédes URL szerkezettel egyezően.

• Csak JavaScriptből épül fel a morzsa - a nyers HTML-t olvasó botok semmit nem látnak belőle.
• Az előzményt mutatja, nem a hierarchiát - ugyanaz az oldal minden látogatónál mást mond, ez zajt visz a struktúrába.
• Séma van, látható morzsa nincs - a Google csak a felhasználó számára is látható tartalomra épülő jelölést fogadja el.
• Az utolsó elem önmagára linkel - felesleges belső link, és megzavarja a hierarchia olvasatát.
• Eltér a séma és a látható szöveg - a nevek vagy a sorrend nem egyezik, így a jelölés megbízhatatlan.
• Több kategóriás termék, változó morzsa - ugyanaz a terméklap több útvonalon jelenik meg, duplikált olvasatot okozva.
• Törött láncszemek - a köztes kategória időközben megszűnt, a link 404-re fut.

Minimális, akadálymentes morzsamenü HTML-ben:

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="https://pelda.hu/">Főoldal</a></li>
    <li><a href="https://pelda.hu/kerti-butor/">Kerti bútor</a></li>
    <li><a href="https://pelda.hu/kerti-butor/padok/">Padok</a></li>
    <li><span aria-current="page">Tölgyfa pad 180 cm</span></li>
  </ol>
</nav>

Ugyanez gépi olvasatra, JSON-LD formában. A nevek és a sorrend egyezzen a látható lánccal:

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Főoldal", "item": "https://pelda.hu/" },
    { "@type": "ListItem", "position": 2, "name": "Kerti bútor", "item": "https://pelda.hu/kerti-butor/" },
    { "@type": "ListItem", "position": 3, "name": "Padok", "item": "https://pelda.hu/kerti-butor/padok/" },
    { "@type": "ListItem", "position": 4, "name": "Tölgyfa pad 180 cm" }
  ]
}

Az utolsó elemnél az item mező elhagyható, mert az aktuális oldalról van szó.