Breadcrumb: teljes útmutató

A breadcrumb, magyarul morzsamenü, egy rövid navigációs sor, amely megmutatja, hol áll a lap a webhely szerkezetében, például Főoldal > Témakör > Cikk. SEO szempontból két dolgot ad: belső linkeket a szülő lapok felé, és strukturált adattal jelölve a találati listán a nyers URL helyett olvasható útvonalat.

Alapfogalmak

A breadcrumb a lap tetején, a cím fölött vagy alatt megjelenő útvonal, amelynek minden eleme egy kattintható hivatkozás a szerkezet egy magasabb szintjére. A nevét a mesebeli kenyérmorzsákról kapta, amelyekkel a gyerekek visszatalálnak. A funkciója is ez: az olvasó egy kattintással feljebb léphet, anélkül hogy a főmenüt használná.

A fogalmat érdemes elválasztani a főmenütől. A főmenü a webhely egészét mutatja, minden lapon ugyanúgy. A breadcrumb csak az adott lap helyét mutatja, ezért minden lapon más. Ez teszi értékessé: a kereső és az olvasó is pontosan látja belőle, melyik témakörhöz tartozik a lap.

A breadcrumb három típusa

Típus	Mit mutat	Példa	Mikor jó
Hierarchikus (hely szerinti)	A lap helyét a szerkezetben	Főoldal > On-page SEO > Breadcrumb	Szinte mindig ez a helyes választás
Tulajdonság szerinti	A szűrési feltételeket	Cipők > Férfi > 43-as méret	Webáruház szűrt listáinál
Előzmény szerinti	Az olvasó által bejárt utat	Előző lap > Előző lap > Jelenlegi	SEO szempontból kerülendő, mert minden látogatónak más

A kereső szempontjából csak az első kettő értelmezhető, és a strukturált adat is a hierarchikus változatra épül. Az előzmény szerinti morzsamenü egy böngésző vissza gombját utánozza, és a kereső robotja számára nincs jelentése, mert a robot nem követ felhasználói utat.

Kapcsolódó fogalmak

• BreadcrumbList: a schema.org típus, amellyel az útvonalat strukturált adatként jelölöd.
• ListItem: az útvonal egy eleme, sorszámmal (position), névvel és hivatkozással.
• Webhely-hierarchia: a lapok szülő-gyermek viszonya, amelyet a breadcrumb láthatóvá tesz.
• Kattintási mélység: hány kattintásra van egy lap a főoldaltól. A breadcrumb nem csökkenti közvetlenül, de erősíti a szülő lapokat.

Breadcrumb és URL-szerkezet

A morzsamenü és az URL gyakran ugyanazt a hierarchiát tükrözi, de nem kötelező, hogy egyezzenek. Egy lap URL-je lehet lapos, például közvetlenül a domain alatt, miközben a breadcrumb háromszintű útvonalat mutat. Ez teljesen rendben van: a breadcrumb a tartalmi hovatartozást mutatja, az URL pedig egy azonosító, amelyet utólag már nem érdemes megváltoztatni.

Fordítva viszont gyakori a félreértés. Sokan azt gondolják, hogy ha az URL mély, akkor a breadcrumb felesleges, mert a kereső úgyis kiolvassa a szinteket. Az URL egyes szakaszai azonban nem mindig léteznek önálló lapként. Ha a /on-page-seo/ szakasz nem nyitható meg, az URL hiába utal rá, a breadcrumb hivatkozása 404-re vezetne. A szabály egyszerű: a morzsamenü csak létező, indexelhető lapokra mutasson, függetlenül attól, mit mutat az URL.

Hogyan működik?

A breadcrumb két szinten működik egyszerre: a lapon HTML hivatkozásként, a kódban strukturált adatként. A kettő nem helyettesíti egymást. A HTML változat az olvasónak és a robotnak ad linket, a strukturált adat a keresőnek mondja meg egyértelműen, milyen sorrendben következnek a szintek.

A belső linkek szerepe

Minden breadcrumb-elem egy belső hivatkozás a szülő lapra. Ha egy témakörben száz cikk van, és mindegyik tetején ott a témakör lapjára mutató link, akkor a témakör lapja száz belső hivatkozást kap, mindegyiket azonos, beszédes horgonyszöveggel. Ez erősíti a szülő lapot, és egyben világosan jelzi a keresőnek, hogy a száz cikk egy témához tartozik. Ezt a jelzést a legtöbb más eszközzel nehéz ilyen tisztán kiadni.

A strukturált adat szerepe

A BreadcrumbList jelölés egy rendezett lista: minden elemnek van sorszáma, neve és címe. A kereső ebből tudja, hogy az első elem a legfelső szint, az utolsó maga a lap. Ha a jelölés helyes, a találati listán az URL helyén egy olvasható útvonal jelenhet meg. Hogy ténylegesen megjelenik-e, arról mindig a kereső dönt, de jelölés nélkül ennek esélye kisebb, és a kereső a szerkezetet csak az URL-ből tudná kitalálni.

Példa a jelölésre

Egy háromszintes útvonal jelölése JSON-LD formátumban így néz ki leegyszerűsítve:

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type": "ListItem", "position": 1, "name": "Főoldal", "item": "https://example.hu/"},
    {"@type": "ListItem", "position": 2, "name": "On-page SEO", "item": "https://example.hu/on-page-seo/"},
    {"@type": "ListItem", "position": 3, "name": "Breadcrumb"}
  ]
}

Az utolsó elemnél a hivatkozás elhagyható, mert az a jelenlegi lap. A nevek egyezzenek azzal, ami a lapon látható: ha a lapon „On-page SEO" áll, a jelölésben ne legyen „Oldalon belüli optimalizálás".

Mi történik, ha nincs breadcrumb?

A kereső akkor is felépíti a saját képét a webhely szerkezetéről, csak kevesebb és gyengébb jelből. Az URL-ből, a belső linkekből és a menüből következtet. Ha az URL-ek laposak (minden lap közvetlenül a domain alatt van), és a menü csak a főbb lapokat mutatja, akkor egy mély cikkről a kereső alig tudja, melyik témához tartozik. A breadcrumb ezt a hiányt pótolja.

Fő módszerek

A breadcrumb bevezetése vagy javítása öt lépésre bontható. Az első kettő döntés, a többi megvalósítás és ellenőrzés.

1. A hierarchia rögzítése

A morzsamenü csak olyan jó, amilyen a mögötte álló szerkezet. Mielőtt bármit bevezetnél, döntsd el minden laptípusra, mi a szülője. Egy tartalmi webhelyen ez tipikusan Főoldal > Témakör > Cikk. Egy webáruházban Főoldal > Főkategória > Alkategória > Termék. A szabály: minden lapnak pontosan egy elsődleges szülője legyen.

2. Egyetlen útvonal a több kategóriás lapoknak

A legnehezebb eset az, amikor egy lap több helyre is tartozhat. Egy termék lehet a „Férfi cipők" és az „Akciós termékek" alatt is. A breadcrumbnak ilyenkor is egyetlen útvonalat kell mutatnia, mindig ugyanazt. Döntési szabály:

1. Az állandó kategória erősebb, mint az időleges. Az „Akciós" idővel megszűnik, a „Férfi cipők" marad.
2. A szűkebb kategória erősebb, mint a tágabb, ha az is a hierarchia része.
3. Ha a kettő egyenrangú, az nyerjen, amelyik a kanonikus URL-ben is szerepel.
4. A választás legyen rögzített, ne függjön attól, honnan érkezett a látogató.

3. HTML megvalósítás

• A breadcrumb legyen <nav> elemben, aria-label="Breadcrumb" vagy hasonló címkével, hogy a képernyőolvasók is felismerjék.
• Az elemek rendezett listában (<ol>) legyenek, mert a sorrendnek jelentése van.
• Minden elem valódi <a href> hivatkozás legyen, ne JavaScripttel kezelt kattintás.
• Az utolsó elem, a jelenlegi lap, lehet sima szöveg, aria-current="page" jelöléssel.
• Az elválasztó (>, / vagy nyíl) CSS-ből jöjjön, ne a szövegből, hogy a képernyőolvasó ne olvassa fel.

4. Strukturált adat hozzáadása

A BreadcrumbList jelölést a HTML-lel azonos adatokból generáld, ideális esetben ugyanabból a sablonból. Ha a kettő két külön forrásból jön, előbb-utóbb eltérnek: átnevezel egy kategóriát, és a jelölésben a régi név marad. A legtöbb tartalomkezelő és SEO bővítmény elvégzi ezt, de érdemes ellenőrizni, hogy nem generál-e két, egymásnak ellentmondó jelölést.

5. Nevek és hosszak

A breadcrumb elemei rövidek legyenek. A szülő lap teljes címe helyett a témakör rövid neve áll jól: „On-page SEO", nem „On-page SEO: minden, amit az oldalon belüli optimalizálásról tudni kell". Az utolsó elem, a lap maga, lehet rövidített cím is, ha a teljes cím túl hosszú.

6. Mobil megjelenés

Telefonon a hosszú útvonal könnyen több sorba törik, és a lap tetején értékes helyet foglal. Két bevett megoldás van. Az egyik, hogy mobilon csak a közvetlen szülő látszik, egy vissza nyíllal: „< On-page SEO". A másik, hogy a sor vízszintesen görgethető marad, egy sorban. Bármelyiket választod, a teljes útvonal a forráskódban és a strukturált adatban maradjon meg, mert a kereső a mobil változatot nézi elsődlegesen. Ha a mobil sablon egyszerűen elrejti a breadcrumbot, a belső linkek hatása is elveszhet.

Megvalósítási ellenőrzőlista

• Minden laptípusnak van rögzített szülője.
• A több kategóriás lapok egyetlen, állandó útvonalat kapnak.
• A HTML-ben <nav> és <ol> van, valódi hivatkozásokkal.
• A strukturált adat ugyanazokat a neveket és címeket használja, mint a látható sor.
• A hivatkozások a kanonikus URL-ekre mutatnak, nem átirányított vagy paraméteres változatra.
• A főoldal nem kap önmagára mutató morzsamenüt.

Gyakori hibák

A breadcrumb-hibák többsége csendes: a lap működik, a sor látszik, csak éppen rossz jelet ad. Ezért érdemes ezeket célzottan keresni, nem megvárni, hogy valaki észrevegye.

Szerkezeti hibák

• Az útvonal nem egyezik a valós szerkezettel. A morzsamenü „Főoldal > Blog > Cikk", de a cikk tartalmilag egy témakörhöz tartozik, amelynek saját lapja van. Így a témakör lapja nem kap belső linket, a Blog lap viszont ezret, horgonyszövegként egy semmitmondó szóval.
• Váltakozó útvonal. Ugyanaz a lap attól függően mutat más útvonalat, honnan érkezett a látogató. A kereső ilyenkor nem tudja eldönteni, melyik a valódi szülő.
• Árva köztes szint. Az útvonal egyik eleme olyan lapra mutat, amely nem létezik vagy 404-et ad. Ez gyakori, amikor egy kategóriát megszüntetnek, de a sablon még hivatkozik rá.
• Túl mély útvonal. Hat-hét szint egy egyszerű cikk fölött. Ez többnyire azt jelzi, hogy a hierarchia túlszabályozott, nem azt, hogy a breadcrumb rossz.

Technikai hibák

• Eltérő név a lapon és a jelölésben. A látható sorban „Szolgáltatások", a jelölésben „Services". A kereső a láthatót tekinti mérvadónak, az eltérés gyengíti a jelölés hitelét.
• Dupla jelölés. A téma és egy bővítmény is kiad BreadcrumbList jelölést, eltérő tartalommal.
• Nem kanonikus hivatkozások. A morzsamenü elemei paraméteres, követőkódos vagy http változatra mutatnak, és minden kattintás átirányításon megy át.
• JavaScripttel kirajzolt sor. Az útvonal csak a böngészőben jelenik meg, a forráskódban nincs. Így a belső link hatása bizonytalan.

Tévhit: a breadcrumb rangsorolási tényező

Gyakran olvasni, hogy a morzsamenü önmagában jobb helyezést hoz. Ez így félrevezető. A breadcrumb nem egy pontszám, amit a kereső jutalmaz. Amit ad, azt közvetve adja: belső linkeket a szülő lapoknak, világosabb szerkezetet, és a találati listán olvashatóbb sort. Ha a webhely szerkezete már eleve tiszta, és a témakör lapjai máshonnan is erős belső linkeket kapnak, a breadcrumb bevezetése kisebb változást hoz, mint egy kusza szerkezetű webhelyen.

Ellenpélda: amikor nem kell breadcrumb

Egy ötlapos bemutatkozó webhelyen, ahol minden lap közvetlenül a főoldal alatt van, a morzsamenü csak annyit mondana: „Főoldal > Kapcsolat". Ez nem ad hozzá semmit, amit a főmenü ne mondana el. A breadcrumb ott kezd értéket teremteni, ahol legalább két szint van a főoldal alatt, és a lapok száma miatt a főmenü már nem tud mindent megmutatni.

Mérés

A breadcrumb hatását három oldalról lehet mérni: a jelölés érvényességén, a találati lista megjelenésén és a belső linkstruktúra változásán. A rangsorolásra gyakorolt hatást közvetlenül nehéz elkülöníteni, ezért azt nem is érdemes egyedül erre építeni.

Mit mérj és hol

Kérdés	Eszköz	Mit keresel
Érvényes-e a jelölés?	A kereső eredményteszt-eszköze, Search Console bővített találatok jelentése	Hibák és figyelmeztetések a BreadcrumbList típusnál
Hány lapon van érvényes jelölés?	Search Console, a morzsamenü jelentés	Az érvényes elemek száma a lapok számához képest
Megjelenik-e a találati listán?	Kézi keresés a fő kifejezésekre	Az URL helyén olvasható útvonal látszik-e
Kapnak-e linket a szülő lapok?	Webhely-bejáró (crawler)	A témakör lapok bejövő belső linkjeinek száma
Van-e törött elem?	Webhely-bejáró	404-re vagy átirányításra mutató breadcrumb hivatkozás

Ellenőrzési eljárás bevezetés után

1. Válassz ki minden laptípusból egy-egy mintát, és nézd meg a forráskódban, hogy a breadcrumb HTML-ben is ott van.
2. Futtasd le a mintákat az eredményteszt-eszközön, és javítsd a hibákat.
3. Futtass egy teljes bejárást, és szűrd a breadcrumb-hivatkozásokat: nincs-e köztük 404 vagy átirányítás.
4. Hasonlítsd össze a témakör lapok bejövő belső linkjeinek számát a bevezetés előtti állapottal.
5. Néhány hét után nézd meg a Search Console jelentését: az érvényes elemek száma közelít-e a lapok számához.

Kidolgozott példa

Egy tudástár típusú webhelyen a cikkek URL-je lapos volt: minden cikk közvetlenül a domain alatt állt, és a morzsamenü csak annyit mutatott: „Főoldal > Cikk címe". A témakör lapok léteztek, de csak a főmenüből kaptak linket. Egy bejárás szerint egy-egy témakör lap mindössze néhány belső hivatkozást kapott, miközben a témakörhöz több tucat cikk tartozott.

A javítás első lépése nem a breadcrumb volt, hanem a hierarchia rögzítése: minden cikkhez egy elsődleges témakört rendeltek. Ezután a morzsamenü háromszintűvé vált (Főoldal > Témakör > Cikk), a jelölés ugyanabból a sablonból készült, mint a látható sor. A következő bejárás szerint a témakör lapok bejövő belső linkjei a cikkek számával arányosan nőttek, egységes horgonyszöveggel. A tanulság: a breadcrumb értéke abban volt, hogy a szerkezet, ami addig csak a fejekben létezett, a kódban is megjelent.

Kapcsolódó részletes útmutatók

• On-page SEO: a teljes témakör
• Title tag
• Meta description
• H1
• Heading struktúra
• Snippet-optimalizálás