Mi az a Breadcrumb Navigáció?
A breadcrumb navigáció az a belső linkek nyoma – ismertebb nevén „breadcrumbs” – amely tájékoztatja a felhasználót arról, hogy hol tartózkodik egy weboldalon a webhely oldalainak hierarchiájában.
A „breadcrumb” kifejezés az ötletből ered, hogy morzsákat hagyjunk magunk után, hasonlóan a Grimm testvérek meséjében Hansel és Gretel történetéhez.
Ez egy másodlagos navigációs séma, amely jellemzően vízszintesen jelenik meg a jelenlegi oldal tetején, a fő webhely navigáció alatt. Minden oldal szint hiperlinkelt és el van választva.
Breadcrumb navigáció a Stiga weboldalán
Ha a breadcrumb jelölés helyesen van megvalósítva, a breadcrumb nyomvonal a Google SERP-ben is megjelenik.
Breadcrumb a Google SERP-ben
A breadcrumb nyomvonal a látogatott oldalak sorrendje szerint is rendezhető – és ami gyakoribb, a jelenlegi oldal hierarchiájának és a magasabb szintű szülőoldalakhoz való viszonyának megfelelően.
Ebben a tekintetben többféle breadcrumb létezik, a három fő típusa a következő:
- Hierarchia-alapú breadcrumbs: Ismertebb nevén hely-alapú breadcrumbs, ezek a leggyakoribb típusok, amelyek megmutatják a felhasználónak, hol tartózkodik a weboldal hierarchiájában.
- Attribútum-alapú breadcrumbs: Az adott oldal attribútuma vagy a felhasználó által választott címkék vagy szűrők alapján szerveződnek. Ezeket leggyakrabban e-kereskedelmi weboldalakon használják.
- Történeti vagy út-alapú breadcrumbs: Az alapján rendeződnek, hogy a látogató milyen lépéseket tett, amelyek elvezették őt a jelenlegi nézett oldalra.
A breadcrumb nyomvonal célja, hogy lehetővé tegye a látogató számára, hogy könnyen navigáljon vissza a kiindulási ponthoz vagy a korábban látogatott oldalakhoz, és ösztönözze őket, hogy felfedezzék az azonos kategóriába tartozó kapcsolódó oldalakat.
Miért fontos a Breadcrumb Navigáció?
A breadcrumb navigáció fontos, mert javítja a felhasználói élményt és könnyebbé teszi a weboldalak navigálását.
A másodlagos navigáció révén „irányítást” biztosítva segít a látogatóknak megtalálni, amit keresnek, és csökkenti a kattintások számát, amelyek szükségesek a magasabb szintű oldalakra való visszatéréshez. Ezenkívül javítja a weboldal mobilhasználhatóságát.
A breadcrumb navigációnak kulcsszerepe van a SEO-ban is:
Először is, a Google általában jutalmazza azokat a weboldalakat, amelyek a felhasználói élményt helyezik előtérbe. Másodszor, a breadcrumb nyomvonalak implementálásával segít a Google-nak megérteni a weboldal hierarchiáját, és hatékonyabban elosztani a PageRank-et, ami viszont javíthatja a rangsorolását.
A Google irányelvei szerint a breadcrumbs segíthetnek egy oldal tartalmának kategorizálásában a konkrét keresési lekérdezések kontextusában. 2018 óta a keresési eredmények között szerepelnek, hogy segítsenek a felhasználóknak megérteni, hol helyezkedik el a SERP-ben megjelenített oldal a weboldal struktúrájában.
Továbbá, ha helyesen van megvalósítva, a breadcrumb nyomvonalak alacsonyabb bounce rate-hez vezethetnek:
Azáltal, hogy alternatív módot kínál a felhasználóknak a webhely böngészésére a céloldal megtekintése után, ösztönözheti őket arra, hogy több tartalmat fedezzenek fel. A breadcrumb nyomvonalak arra ösztönözhetik őket, hogy kattintsanak a magasabb szintű oldalakra, ahelyett, hogy visszatérnének a SERP-ekhez, ha az eredeti oldal nem felel meg az igényeiknek.
Hogyan valósítsuk meg a Breadcrumb Navigációt?
A breadcrumb navigáció megvalósítása egy egyszerű folyamat.
Ha WordPress weboldala van, az olyan bővítmények, mint a Yoast SEO, még egyszerűbbé teszik a folyamatot, lehetővé téve a breadcrumb navigáció beállítását néhány egyszerű lépésben. Néhány WordPress téma alapértelmezetten támogatja a breadcrumbs-t.
Ha azonban nem használ WordPress-t, manuálisan is megvalósíthatja a breadcrumbs-t némi HTML és CSS kód segítségével. Az alábbi HTML sablon használható:
<ul class="breadcrumb">
<li><a href="#">Főoldal</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Kategória</a></li>
<li>Aktuális oldal</li>
</ul>Tartsuk észben, hogy ez csak egy felsorolásos listát generál. CSS-t kell használnia a breadcrumb navigáció stílusának testreszabásához.
Ha azt szeretné, hogy a breadcrumbs megjelenjen a SERP-ekben, fontos, hogy megfelelő strukturált adatokat implementáljon a weboldalán.
Breadcrumb navigáció legjobb gyakorlatai
A breadcrumb nyomvonalak hasznos navigációs elemek a felhasználók és a keresőmotorok számára egyaránt. Azonban a webhely struktúrájától függően a breadcrumb navigáció nem mindig megfelelő.
Például az egyszintű weboldalak általában nem profitálnak a breadcrumb navigációból. A fő navigáció már mindent lefed, és a felhasználó valószínűleg csak egy kattintásra van a weboldal főoldalától, így a breadcrumbs nem ad sok értéket.
Ha megállapítja, hogy weboldala profitálhat egy másodlagos navigációs elemből, kövesse ezeket a breadcrumb navigáció legjobb gyakorlatait:
- A breadcrumbs egy kiegészítő navigációs funkció, nem pedig a weboldal elsődleges navigációs menüjének helyettesítője. Támogatnia kell azt, és alternatív módot kell biztosítania a felhasználók számára a weboldal navigálásához.
- A breadcrumb nyomvonal szöveges linkjeit különleges karaktereknek kell elválasztaniuk. A leggyakrabban használt elválasztó a „>” szimbólum, de más karakterek, például a perjel (/) vagy egy nyíl is használható a belső linkek elválasztására.
- Mindig tartalmazza a teljes navigációs utat, függetlenül attól, hogy a felhasználó a weboldal főoldaláról navigált az oldalra, vagy a keresési eredményekből fedezte fel.
- A breadcrumb nyomvonalnak balról jobbra kell olvasódnia, a weboldal főoldala bal oldalon, a kisebb szintű oldalak pedig jobbra, egy szöveges linket egyszerre.
- A breadcrumb nyomvonal utolsó eleme a felhasználó aktuális oldala legyen. Mivel valószínűtlen, hogy a felhasználó interakcióba lép az utolsó nyomvonal részecskéjével, nincs szükség arra, hogy linket adjon hozzá.
- Tervezési szempontból ügyeljen arra, hogy a breadcrumb navigáció a lehető legdiszkrétebb és legegyszerűbb legyen. Nem szabad elvonniuk a látogatók figyelmét az aktuális oldal tartalmától. Helyezze el a weboldal jobb felső sarkába, és válasszon egy kis, de olvasható betűtípust.