Mi az a Breadcrumb navigáció?
A morzsa-navigáció a belső linkek nyomvonalát jelenti, amelyet "kenyérmorzsáknak" neveznek, és amely tájékoztatja a felhasználót arról, hogy a weboldalon éppen hol tartózkodik az oldalak hierarchiáján belül. A "kenyérmorzsa" kifejezést a Grimm testvérek meséjében szereplő Jancsi és Juliska története ihlette, ahol kenyérmorzsák nyomát hagyva találtak haza.
A kenyérmorzsás navigáció típusai
- Hierarchia-alapú kenyérmorzsák: Ezek a morzsák a felhasználó pozícióját mutatják a weboldal hierarchiáján belül.
- Attribútum-alapú kenyérmorzsák: Általában az e-kereskedelmi weboldalakon használt attribútumok vagy címkék alapján szerveződik.
- Történet alapú kenyérmorzsák: A látogató által az aktuális oldalra jutásig megtett konkrét lépések alapján rendezett.
A Breadcrumb navigáció fontossága
A morzsalékos navigáció azért fontos, mert növeli a felhasználói élményt, és megkönnyíti a weboldalakon való navigálást. Másodlagos navigációt biztosít, segít a látogatóknak megtalálni, amit keresnek, és csökkenti a magasabb szintű oldalakra való visszatéréshez szükséges kattintások számát. Emellett javítja a mobilhasználhatóságot, és döntő szerepet játszik a SEO-ban.
SEO előnyök
- Felhasználói élmény: A Google jutalmazza azokat a webhelyeket, amelyek a felhasználói élményt helyezik előtérbe. A morzsák megkönnyítik a navigációt, ami javíthatja a felhasználói elégedettséget.
- Webhely-hierarchia megértése: A morzsák segítenek a Google-nak megérteni a webhely szerkezetét és hatékonyabban elosztani a PageRanket, ami potenciálisan javítja a rangsorolást.
- Alacsonyabb visszafordulási arány: A morzsák a felhasználók számára alternatív navigációs lehetőséget biztosítva csökkenthetik a visszafordulási arányt, mivel a webhely további tartalmának felfedezésére ösztönöznek.
Hogyan kell megvalósítani a Breadcrumb navigációt
A kenyérmorzsás navigáció megvalósítása egyszerű. Ha WordPress webhelye van, az olyan bővítmények, mint a Yoast SEO, leegyszerűsítik a folyamatot. Egyes WordPress-témák alapértelmezés szerint is támogatják a morzsákat. A nem WordPress webhelyek esetében a morzsákat manuálisan is megvalósíthatja HTML és CSS segítségével.
HTML sablon példa
<ul class="breadcrumb"> <li><a href="#">Főoldal</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Kategória</a></li> <li> <li> Aktuális oldal</li> </ul>Ez a sablon a linkek felsorolásos listáját generálja. A stílust CSS segítségével testre szabhatja, hogy megfeleljen a tervezési igényeinek.
Strukturált adatok
Annak érdekében, hogy a morzsák megjelenjenek a SERP-kben, vezessen be releváns strukturált adatokat a weboldalán. Részletes útmutatásért olvassa el a Google Breadcrumb dokumentációját.
A legjobb gyakorlatok a morzsalékos navigációban
- Elsődleges navigáció támogatása: A morzsák kiegészítő navigációs funkciót jelentenek, nem helyettesítik az elsődleges navigációs menüt.
- Használjon elválasztókat: Különítse el a szöveges hivatkozásokat a morzsaútvonalban speciális karakterekkel, például ">", "/" vagy nyilakkal.
- Teljes navigációs útvonal: Mindig tartalmazza a teljes navigációs útvonalat, függetlenül attól, hogy a felhasználó hogyan érkezett az oldalra.
- Balról jobbra olvasás: A morzsaútvonalnak balról jobbra kell haladnia, balra a kezdőlap, jobbra pedig az aktuális oldal.
- Jelenlegi oldal: A morzsaútvonal utolsó elemének az aktuális oldalnak kell lennie, és nem lehet kattintható link.
- Visszafogott dizájn: Biztosítsa, hogy a kenyérmorzsa-navigáció egyszerű és nem feltűnő legyen, az oldal tetején helyezkedjen el, és kis, de jól olvasható betűtípust használjon.
További betekintést és tippeket a webes navigációról és a SEO-ról a Ranktracker Blogon és az átfogó SEO-útmutatónkban talál. Továbbá, nézze meg SEO szójegyzékünket, hogy megismerkedjen a kulcsfontosságú SEO kifejezésekkel és fogalmakkal.
