Szerző:A breadcrumb sávok a webhelynavigáció fontos elemei, hiszen segítségükkel a felhasználók egyetlen kattintással eljuthatnak az aktuális oldalhoz kapcsolódó, magasabb szintű tartalmakhoz. Ez különösen akkor hasznos és fontos, ha egy látogató nem a főoldalra, hanem a webhely egyik mélyebben elhelyezkedő landing oldalára érkezik meg.
A breadcrumb navigáció azonban több, mint a webhelyhasználhatóság egyik fontos eleme, és több ízben is szerepet játszik a keresőoptimalizálásban:
1. Segít a feltérképezésben
A breadcrumb navigáció által létrehozott belső hivatkozások a webhely hierarchiájának több szintjét is bemutatják a keresőmotorok robotjainak. Ez különösen az alacsonyabb szinteken fontos, amiket a feltérképező robotok nem mindig érnek el a feltérképezési keret miatt.
A megfelelő breadcrumb navigáció implementálásával csökkenni fog a Feltérképezve – jelenleg nincs indexelve” jelölésű URL-ek száma a Google Search Console jelentésében.
2. Segít az indexelésben
A hierarchikus hivatkozások segítenek a Google-nak kontextusba helyezni az oldalakat, illetve összekapcsolni őket egymással a webhely szerkezetén belül. Ha a Google csak a webhelytérkép részeként találkozik egy-egy URL-el, akkor nem fogja tudni, hogy hogyan viszonyulnak azok a többi tartalomhoz.
Ezért olyan fontos a belső hivatkozások – például a hierarchiaalapú breadcrumb navigáció – használata. A breadcrumb navigáció a témacsoportok megkülönböztetését is támogatja, ami az entitásalapú indexelésben egyre fontosabbá válik.
Ennek az előnyei az érvényes oldalak számának növekedése lesz, amiket a Google Search Console jelentéseiben ellenőrizhetsz.
3. Magasabb rangsorolás, több kattintás és organikus forgalom
A breadcrumb navigáció kétféleképpen is elősegíti az előkelő rangsorolást:
• Belső hivatkozásokat hoz létre, amelyeken keresztül a témájukban kapcsolódó tartalmak linkértéket adhatnak át egymásnak.
• Kulcsszavakat helyezhetsz el vele a hajtás felett. Ez az általánosabb kifejezésekre való rangsorolásban nem segít majd sokat, de hasznos lehet, ha ezek long tail kulcsszavak.
Mindez fokozott láthatóságot, több átkattintást és nagyobb forgalmat eredményez majd webhelyeden.
On-site és schema jelölésű breadcrumb navigáció – melyik a jobb?
A weboldalakon megjelenő és a Schema jelölésű breadcrumb navigáció két külön dolog. Ha egy webhely breadcrumb navigációt használ, az nem jelenti rögtön azt, hogy ez strukturált adatnak is számít.
A legegyszerűbben úgy ellenőrizheted, hogy van-e webhelyeden érvényes schema breadcrumb jelölés, hogy megnyitod az ezekről szóló Google Search Console jelentést a „Bővítések” menüben.
A legjobb teljesítmény érdekében mind az on-site, mind pedig a strukturált breadcrumb navigáció azonos kell legyen egymással. Ez is segít meggyőződni a Google-nek a tartalmak kontextusáról, ami szintén jót tesz az indexelésnek.
A strukturált jelöléssel elhelyezett breadcrumb adatok továbbá úgy segíthetnek a SEO-ban, hogy megváltoztatják a megjelenő találatok URL felépítését, ami így olvashatóbbá válik a felhasználók számára.
A schema strukturált jelölések nem garantálnak jobb helyezéseket a keresőtalálatok között, de a legtöbb webhelyen érdemes alkalmazni őket.
A breadcrumb navigáció helyes implementálása mobil-első webhelyeken
A breadcrumb navigációs sávok ránézésre meglehetősen egyszerű elemek. Lényegében csak néhány egymás után felsorolt, hierarchikus kapcsolatú hivatkozásról van szó, amiket valamilyen szimbólum választ el egymástól.
Azonban amikor az internet elkezdett „átköltözni” a mobileszközökre, a dolgok lényegesen bonyolultabbakká váltak.
Ahhoz, hogy egy breadcrumb navigáció megfelelően működjön és jelenjen meg a mobilhasználó látogatók számára, az alábbi fontos szempontokat kell figyelembe venned a kialakításkor:
Mindig elérhető
A breadcrumb navigációnak minden releváns oldalon jelen kell lennie. A releváns itt azt jelenti, hogy navigációs szempontból van értelme helyet elfoglalnia az oldalon.
Logikus elhelyezésű
A breadcrumb navigációt az elsődleges navigációs menü alatt helyezd el, a H1 címsor felett. A legtöbb felhasználó itt számít rá. Ha máshová helyezed, akkor kevésbé lesz hasznos a felhasználók számára, és a linkértéke is gyengébb lehet.
Egyértelmű eleje és vége van
A breadcrumb sávnak a főoldaltól egészen az aktuális oldalig meg kell jelenítenie az útvonalat. A főoldal a webhely központja, ami eligazítja a felhasználókat. Érdemes továbbá a sáv utolsó elemét nem kattinthatóként feltüntetni, hogy a felhasználó ez alapján is lássa, hogy épp ezen az oldalon jár.
Egyértelmű elválasztó szimbólumokat használ
A legjobb szimbólum a breadcrumb linkek elválasztására a „nagyobb, mint” (>) szimbólum. Ez egyértelműen jelöli az egymás alá rendelt oldalak hierarchiáját. A / vagy | karakterek nem ennyire logikusak, míg a >> vagy -> karakterek felesleges helyet foglalnak az oldalon.
Megfelelő méretű
A breadcrumb sáv legyen egyszerű és használjon kisméretű, kompakt betűtípust. Mindemellett legyen elég nagy ahhoz, hogy ujjal is könnyedén rá lehessen kattintani. Persze fontos az is, hogy stílusa passzoljon a webhely vizuális összképéhez is.
A breadcrumb navigáció bevált taktikái a mobil-első indexeléshez
A koncepció rendkívül egyszerű, mégis rengetegen hagyják figyelmen kívül: webhelyed mobilos verzióján is láthatóvá kell tenned a breadcrumb navigációt, épp úgy, mint az asztalin. Ezt az elemet a szerver oldalán kell leképezni, nem pedig JavaScripttel megjeleníteni.
Tüntesd fel a teljes hierarchikus útvonalat a főoldaltól kezdve az aktuális oldalig. Minden oldal legyen kattintható link, kivéve az aktuális.
A lépéseket ne rövidítsd le, és ne rejtsd el az útvonal bizonyos részeit egy „…” jelöléssel. Ezek mind gyengítik a navigációs sáv SEO értékét.
De mi a helyzet akkor, ha a sáv túl hosszú? Ez elég könnyedén előfordul, hiszen egy mobileszköz képernyője túl keskeny ahhoz, hogy 2-3 lépésnél több jelenhessen meg rajta egyszerre. Az semmiképpen nem megoldás, hogy a sáv több sorrá törjön szét, hiszen így kevésbé lenne átlátható és rengeteg függőleges helyet foglalna az oldalról.
A megoldás: egy egyetlen sorban megjelenő breadcrumb navigációs sáv, ami túlcsordul a képernyő szélén, ujjvonással csúsztatható jobbra-balra az áttekintéshez. Így a felhasználók gyorsan megtekinthetik, hogy hol járnak éppen, mégsem kell elrejteni hozzá egyetlen lépést sem. Ahhoz, hogy ez a megoldás SEO barát legyen, mindenképpen css használatával kell kialakítani.
Na persze, csak azért, mert az egysoros sáv ujjal navigálható jobbra-balra, ez még nem jelenti azt, hogy hosszadalmas görgetésre kellene kényszeríteni a látogatókat. Ügyelj rá, hogy a sávban megjelenő kulcsszavak rövidek de beszédesek legyenek.
