A breadcrumb navigáció egy olyan navigációs elem a weboldalon, amely megmutatja, hogy az aktuális oldal hol helyezkedik el az oldal hierarchiájában. Magyarul leginkább „morzsanavigációként” szokták emlegetni. Tipikus formája például ez: Főoldal > Blog > SEO > Breadcrumb navigáció. A célja egyszerű: azonnal láthatóvá tenni a felhasználó számára, hogy hol jár, és egy kattintással visszaléphessen magasabb szintekre.
Első ránézésre apró részletnek tűnik, pedig valójában három területen is fontos szerepe van. Javítja a felhasználói élményt, támogatja a belső linkstruktúrát, és segíthet a keresőmotoroknak jobban megérteni az oldal szerkezetét. A Google hivatalos dokumentációja szerint a breadcrumb markup segít kategorizálni az oldal tartalmát a keresési találatokban, vagyis nem csak a látogatóknak hasznos, hanem a kereső felé is jelzést ad az oldal helyéről a struktúrában.
SEO szempontból azért különösen érdekes a breadcrumb, mert a jól tagolt, logikus szerkezetű, könnyen áttekinthető tartalom és belső linkelés növeli az értelmezhetőséget. A rendezett szerkezet, a könnyű olvashatóság és a belső hivatkozások használata segíti a tartalom feldolgozását és relevanciáját.
Mit jelent pontosan a breadcrumb navigáció?
A breadcrumb navigáció (vagy morzsamenü) egy olyan hierarchikus weboldal-navigációs eszköz, amely a kezdőlaptól a jelenlegi aloldalig vezető utat mutatja meg (pl.: Főoldal > Kategória > Termék). Segíti a felhasználókat az eligazodásban és a gyors visszanavigálásban, miközben javítja a webhely keresőoptimalizálását (SEO) is a struktúra egyértelműsítésével.
A „breadcrumb” elnevezés a Jancsi és Juliska meséből ismert morzsákra utal. Ahogy a mese szereplői morzsákkal próbálták megjelölni a visszautat, úgy a weboldalon a breadcrumb is megmutatja, honnan jutottunk el az adott oldalra. Nem a böngészési előzményeket mutatja, hanem a webhely logikai felépítését.
Ez nagyon fontos különbség. Ha valaki egy Google-találatból közvetlenül érkezik egy aloldalra, attól még a breadcrumb meg tudja mutatni neki, hogy az az oldal melyik kategória, alkategória vagy témakör része. Vagyis nem azt mondja meg, hogyan érkezett oda, hanem azt, hogy az oldal hova tartozik a webhelyen belül.
Ettől válik igazán hasznossá nagyobb tartalmi oldalaknál, webáruházaknál, szolgáltatói weboldalaknál vagy blogoknál. Minél több kategória, aloldal és alhierarchia van egy webhelyen, annál nagyobb az esélye annak, hogy a felhasználó elveszik. A breadcrumb ennek az elveszésnek az egyik legegyszerűbb ellenszere.
Miért fontos a felhasználói élmény szempontjából?
A jó weboldal nem csak információt ad, hanem irányt is mutat. Ha egy látogató egy mélyebb aloldalra érkezik, gyakran szeretné gyorsan átlátni, milyen témakörben jár, és van-e lehetőség egy tágabb kategóriába visszalépni. A breadcrumb pontosan ezt teszi lehetővé.
Különösen mobilon hasznos, ahol a fő navigáció sokszor hamburger menü mögé van rejtve. Ilyenkor a breadcrumb egy gyors, látható kapaszkodó. Nem kell újra megnyitni a menüt, nem kell a vissza gombot nyomogatni, és nem kell találgatni, hogy melyik kategóriaoldalon volt a kapcsolódó tartalom.
A Google minőségértékelési irányelvei szerint a jó oldalélmény része az is, hogy a felhasználó könnyen megértse az oldal célját, a fő tartalmat és a navigációs elemeket. A könnyű eligazodás tehát nem dizájnkérdés, hanem minőségi szempont is.
Miért fontos SEO szempontból?
A breadcrumb önmagában nem varázspálca, nem ettől kerül egy oldal az első helyre. Mégis fontos, mert része annak a belső linkarchitektúrának, amely alapján a Google feltérképezi és értelmezi a webhelyedet. A Google Search Central szerint a linkarchitektúra kulcsszerepet játszik abban, hogy a Googlebot megtalálja az oldalakat, és a felhasználók is könnyen tudjanak navigálni a webhelyen.
A breadcrumb minden eleme egy belső link. Ez azt jelenti, hogy a felsőbb szintű kategóriaoldalak további releváns belső hivatkozásokat kapnak. Ez segít abban, hogy a Google összefüggéseiben lássa a tartalmakat, ne csak különálló URL-ek halmazaként. A Google e-kereskedelmi struktúráról szóló útmutatója is kiemeli, hogy a kereső a linkkapcsolatok alapján igyekszik megérteni a webhely szerkezetét, nem pusztán az URL-ekből indul ki.
A belső linkek összekapcsolják az összetartozó tartalmakat, ezzel segítik a rendszer értelmezését, a relevanciát és a fellelhetőséget. A jól strukturált tartalom, az alcímek, a rövid bekezdések és a logikus szerkezet szintén hozzájárulnak a jobb értelmezhetőséghez.
Hogyan jelenhet meg a breadcrumb a Google találatokban?
A Google képes a hagyományos URL helyett breadcrumb-szerű útvonalat megjeleníteni a találatokban, ha jól érti az oldal struktúráját és a strukturált adatokat. A hivatalos breadcrumb dokumentáció szerint a Google a weboldalon elhelyezett breadcrumb markup alapján kategorizálhatja az oldalt a keresési találatokban. Ez azt jelenti, hogy a találat tisztább, érthetőbb lehet a felhasználó számára.
Ez nem jelent garanciát arra, hogy mindig így fog megjelenni. A Google több helyen is jelzi, hogy a strukturált adatok használata nem garantálja a rich result vagy speciális megjelenés megjelenítését. A strukturált adatoknak technikailag helyesnek kell lenniük, és meg kell felelniük az általános irányelveknek is.
Mégis érdemes használni, mert egyértelműbb kontextust ad. A felhasználó már a találati oldalon látja, hogy egy termékoldal, kategóriaoldal vagy blogcikk melyik fő témakör alá tartozik. Ez javíthatja az átkattintási hajlandóságot is, főleg akkor, ha az URL önmagában kevésbé beszédes.
Milyen típusú breadcrumbok léteznek?
- A leggyakoribb a hierarchia alapú breadcrumb. Ez mutatja a webhely logikai szerkezetét, például: Főoldal > Szolgáltatások > SEO > Technikai SEO. Ez a legtöbb üzleti weboldalon és blogon a legjobb választás.
- Létezik attribútum alapú breadcrumb is, főleg webáruházaknál. Például: Főoldal > Férfi ruházat > Kabátok > Téli kabátok. Ez akkor hasznos, ha a termékek több szűrőn és tulajdonságon keresztül is rendezhetők, és a felhasználók így könnyebben visszaléphetnek egy tágabb listára.
- A harmadik típus az előzmény alapú breadcrumb, ami a tényleges böngészési útvonalat követi. Ez ritkábban ajánlott, mert könnyen kaotikus lehet, és nem feltétlenül tükrözi a webhely logikai struktúráját.
SEO szempontból általában a hierarchikus megközelítés a legerősebb, mert a keresőmotor is ezt tudja a legjobban értelmezni.
Hol érdemes elhelyezni a weboldalon?
A legjobb helye általában a főcím fölött, a hero rész alatt vagy a tartalom tetején van. Itt természetes módon szem elé kerül, mégsem zavarja a fő tartalom fogyasztását. Fontos, hogy vizuálisan visszafogott legyen, de jól olvasható maradjon.
Sokan túl kicsire veszik, túl halvány színnel jelenítik meg, vagy mobilon teljesen elrejtik. Ezzel pont a lényegét veszik el. A breadcrumbnak nem kell dominálnia, de észrevehetőnek kell lennie. Ha a felhasználó csak keresgéléssel találja meg, akkor már nem segít eléggé.
A Google mobilos ajánlásai között is szerepel, hogy ha a mobil és asztali oldal között választani kell a strukturált adatok prioritásában, akkor a Breadcrumb a kiemelten fontos típusok közé tartozik. Ez is mutatja, hogy nem mellékes elemről van szó.
Hogyan néz ki jól a gyakorlatban?
Egy jó breadcrumb rövid, tiszta és konzisztens. Nem kell benne kulcsszóhalmozás, nem kell túlmagyarázni, és nem kell mindenáron a teljes URL-struktúrát visszamondani. Emberi nyelven megfogalmazott kategória- és oldalnevek működnek a legjobban.
Például egy blogcikknél ez teljesen jó: Főoldal > Blog > SEO > Breadcrumb navigáció jelentése. Egy szolgáltatói oldalon lehet ez: Főoldal > Szolgáltatások > Weboldal SEO audit. Egy webshopnál pedig: Főoldal > Kerítésrendszerek > 3D táblás kerítések.
A lényeg az, hogy a felhasználó első pillantásra megértse. Ha a breadcrumbban technikai kategóriakódok, túl hosszú címek vagy duplikált elemek vannak, az inkább rontja a használhatóságot, mint javítja.
Hogyan érdemes strukturált adatként megjelölni?
A Google a breadcrumbhoz a BreadcrumbList strukturált adatot támogatja. A hivatalos dokumentáció alapján a JSON-LD a javasolt formátum, és a breadcrumb elemeket ListItem típusokkal, pozícióval, névvel és URL-lel kell megadni.
Technikailag ez azért jó megoldás, mert nem csak a vizuális navigációt mutatod meg, hanem a kereső felé is explicit módon jelzed az oldal helyét a hierarchiában. Vagyis nem a Google-nak kell kitalálnia, te magad mondod meg neki.
A strukturált adat azonban csak akkor működik jól, ha összhangban van a tényleges oldaltartalommal. Nem szabad olyan breadcrumbot megjelölni, ami nincs jelen a felületen, vagy ami félrevezető. A Google általános strukturált adat irányelvei ezt kifejezetten hangsúlyozzák.
Milyen hibákat követnek el a legtöbben?
Az egyik leggyakoribb hiba, hogy a breadcrumb csak dizájnelemként van jelen, de nem kattintható. Ilyenkor elveszíti egyik legfontosabb funkcióját: a gyors visszalépést. A másik tipikus hiba, hogy minden oldalon ugyanaz a sor jelenik meg, függetlenül a valós hierarchiától.
Sok weboldalon az is probléma, hogy a breadcrumb és a menüstruktúra nincs összhangban. Például a menü szerint az oldal a „Szolgáltatások” alatt van, a breadcrumb szerint viszont a „Blog” alatt. Ez összezavarhatja a felhasználót és a keresőt is.
További gyakori hibák:
- túl hosszú, kulcsszóhalmozott elemek
- duplikált kategóriák
- mobilon eltűnő breadcrumb
- hibás vagy hiányzó structured data
- olyan oldalaknál is erőltetett breadcrumb, ahol nincs valódi hierarchia
Milyen oldaltípusokon a leghasznosabb?
A breadcrumb szinte minden több szintből álló weboldalon hasznos, de különösen erős az alábbi esetekben. Webáruházaknál segíti a kategóriák közti visszalépést. Blogoknál összeköti a cikket a témakörrel. Szolgáltatói oldalakon világosabbá teszi az ajánlatok szerkezetét. Tudástáraknál, súgóoldalakon és dokumentációkban pedig szinte alapelvárás.
Kisebb, néhány oldalas bemutatkozó weboldalnál nem mindig szükséges. Ha nincs valódi mélysége a struktúrának, a breadcrumb csak dísz lesz. Ott érdemesebb inkább az egyszerű, tiszta főmenüre és a jól megírt belső linkekre koncentrálni.
A döntésnél azt kell megkérdezni: van-e olyan hierarchia az oldalon, amit érdemes megmutatni? Ha igen, a breadcrumb jó eséllyel segíteni fog. Ha nincs, ne erőltesd.
Összefoglalás
A breadcrumb navigáció nem látványos funkció, mégis az egyik leghasznosabb navigációs eszköz egy jól felépített weboldalon. Segít a látogatóknak megérteni, hol járnak, és gyors visszalépési lehetőséget ad a magasabb szintekhez. Emellett belső linkként is működik, így a webhely szerkezetének értelmezésében a keresőmotoroknak is segít.
Ha a weboldalad több kategóriából, aloldalból vagy tartalmi szintből áll, a breadcrumbot érdemes komolyan venni. Nem önmagában fogja megoldani a SEO-t, de egy rendezett, logikus, felhasználóbarát oldalstruktúra fontos eleme.
GY.I.K. – 10 fontos kérdés és válasz
1. Mi a breadcrumb navigáció röviden?
A breadcrumb navigáció egy hierarchikus útvonal, amely megmutatja, hogy az aktuális oldal hol helyezkedik el a weboldal szerkezetében.
2. Miért hívják morzsanavigációnak?
A név a Jancsi és Juliska mesére utal, ahol a morzsák a visszautat jelölték. A weboldalon ugyanez az elv működik.
3. Minden weboldalra kell breadcrumb?
Nem. Olyan oldalaknál érdemes használni, ahol valódi hierarchia van. Egy néhány oldalas egyszerű bemutatkozó oldalnál nem mindig szükséges.
4. SEO-ra tényleg hat a breadcrumb?
Közvetetten igen. Segíti a belső linkelést, a webhely struktúrájának megértését és a navigációt, ami összességében kedvező.
5. A breadcrumb helyettesíti a menüt?
Nem. Kiegészíti a fő navigációt, de nem váltja ki azt.
6. Hol legyen a breadcrumb az oldalon?
Általában a főcím fölött vagy a tartalom tetején működik a legjobban.
7. Mobilon is érdemes megjeleníteni?
Igen, sőt mobilon különösen hasznos lehet, mert gyors visszalépést ad a menü megnyitása nélkül.
8. Kell hozzá strukturált adat?
Nem kötelező, de erősen ajánlott. A Google a
BreadcrumbListmarkup segítségével könnyebben értelmezheti a hierarchiát.9. Megjelenik tőle biztosan a Google találatokban?
Nem garantált. A strukturált adat segíthet, de a Google nem ígéri, hogy minden esetben speciális megjelenést ad.
10. Melyik a legjobb breadcrumb típus?
A legtöbb weboldalnál a hierarchia alapú breadcrumb a legjobb, mert ez a legátláthatóbb a felhasználóknak és a keresőmotoroknak is.
