Breadcrumb weboldal

A sok oldallal rendelkező weboldalakon a morzsalékos navigáció nagyban javíthatja a felhasználók tájékozódását. A használhatóság szempontjából a morzsák csökkentik a weboldal látogatójának a magasabb szintű oldalra való eljutáshoz szükséges műveletek számát, és javítják a weboldal szakaszainak és oldalainak megtalálhatóságát. Emellett hatékony vizuális segédeszközként jelzik a felhasználó helyét a weboldal hierarchiáján belül, így a céloldalak számára nagyszerű kontextuális információforrásként szolgálnak.

Mik azok a morzsák?

A breadcrumb egy kis szöveges útvonal, amely gyakran az oldal tetején található, és jelzi, hogy a felhasználó éppen hol van az oldalon. A yoast.com oldalon például a Yoast SEO bővítményünk oldalára vezető útvonal a következő: Kezdőlap > WordPress bővítmények > Yoast SEO for WordPress. Ez a kenyérmorzsás ösvény azonnal megmutatja, hogy hol tartózkodik. Az útvonal minden lépése kattintható, egészen a kezdőlapig.

De miért hívják ezt a navigációs segítséget kenyérmorzsának? Amikor Jancsi és Juliska az erdőbe ment, Jancsi kenyérdarabokat dobott a földre, hogy ha eltévednek, hazataláljanak. Ezek a kenyérmorzsák váltak végül a manapság a weboldalakon látható morzsák mintájává.

A Google keresési eredményeiben is megjelennek, és ezt kihasználhatja, ha a Yoast SEO-t használja, vagy a strukturált adatok megfelelő formáját adja hozzá webhelyedhez. A keresési eredményekben megjelenő morzsák a felhasználók számára könnyen érthető áttekintést nyújtanak arról, hogy az oldal hol helyezkedik el az Ön webhelyeden.

A Yoast SEO automatikusan hozzáadja a szükséges strukturált adatokat - egy BreadcrumbList - JSON-LD formátumban számodra. Csak fordítsd meg a kapcsolót a beállításokban, és máris láthatod, hogy a megfelelő sorok megjelennek a forráskódodban - bár a témádtól függően előfordulhat, hogy egy kis kódrészletet is hozzá kell adnod a témádhoz. Tudj meg többet a kenyérmorzsa strukturált adatairól a dokumentációnkban. Opcionálisan használhatod a Yoast SEO breadcrumb blokkot, hogy gyorsan kenyérmorzsákat adj hozzá az egyes bejegyzésekhez.

Talán már észrevetted, hogy a morzsáknak különböző típusai vannak. Ez a három leggyakoribb:

Hierarchia-alapú morzsák

Ezek a legelterjedtebbek, és mi is így használjuk a morzsákat az oldalunkon. Megmondják, hogy hol vagy a webhely struktúrájában, és hány lépésből juthatsz vissza a kezdőlapra. Valami olyasmi, mint Főoldal > Blog > Kategória > Bejegyzés neve.

Attribútum-alapú morzsák

Az attribútum-alapú morzsákat leggyakrabban akkor látjuk, amikor a felhasználó egy e-kereskedelmi webhelyen keresett, és a morzsaútvonal termékattribútumokból áll - például: Főoldal > Termékkategória > Nem > Méret > Szín.

Az Office Depot minden választást megjelenít a morzsákban.

Előzményeken alapuló morzsák

Az előzményeken alapuló morzsák pontosan azt teszik, amit a címükön írnak: aszerint rendeződnek, hogy mit csináltál a webhelyen. Gondoljon ezekre úgy, mint az internetes előzménysor alternatívájára, tehát valami ilyesmit kap: Kezdőlap > Előző oldal > Előző oldal > Előző oldal > Jelenlegi oldal. Lehetőség van arra is, hogy ezeket kombináld, ahogy a Macy's teszi az alábbi képernyőképen.

Mikor érdemes morzsákat használni?

Használj morzsamegoldó navigációt nagyméretű webhelyek és hierarchikusan elrendezett oldalakkal rendelkező webhelyek esetében. Kiváló forgatókönyv az e-kereskedelmi webhelyek, amelyeken a termékek nagy választéka logikus kategóriákba van csoportosítva. Nem szabad morzsákat használni az egyszintű, logikus hierarchiával vagy csoportosítással nem rendelkező weboldalakon.

Remek módja annak meghatározására, hogy egy webhelyen hasznos lenne-e a morzsás navigáció, ha elkészítesz egy webhelytérképet vagy egy, a webhely navigációs felépítését ábrázoló ábrát, majd elemzed, hogy a morzsák javítanák-e a felhasználó képességed a kategóriákon belüli és a kategóriák közötti navigációra.

A morzsás navigációt extra funkciónak kell tekinteni, és nem helyettesítheti a hatékony elsődleges navigációs menüket. Ez egy kényelmi funkció; egy másodlagos navigációs séma, amely lehetővé teszi a felhasználók számára, hogy megállapítsák, hol vannak; és egy alternatív módja a webhelyen való navigációnak.

A kenyérmorzsáknak 3 típusa van

1. Helyalapú morzsák

A helyalapú morzsák megmutatják a felhasználónak, hogy hol van a webhely hierarchiájában. Ezeket jellemzően olyan navigációs sémáknál használják, amelyeknek több szintje van (általában kettőnél több szint). Az alábbi példában (a SitePoint-tól) minden egyes szöveges hivatkozás egy olyan oldalhoz tartozik, amely egy szinttel magasabb, mint a tőle jobbra lévő oldal.

2. Attribútum-alapú

Attribútum-alapú kenyérmorzsa-útvonalak egy adott oldal attribútumait jelenítik meg. Például a Newegg-ben a morzsák nyomvonalai az adott oldalon megjelenített elemek attribútumait mutatják: Példa az attribútumalapú morzsák használatára.

Ez az oldal megjeleníti az összes olyan számítógépházat, amelynek attribútumai között szerepel, hogy a Lian Li gyártja, és MicroATX Mini Tower formájú.

3. Útvonal-alapú

Útvonal-alapú morzsaútvonalak megmutatják a felhasználóknak, hogy milyen lépéseken keresztül jutottak el egy adott oldalra. Az útvonal-alapú morzsák dinamikusak, mivel megjelenítik azokat az oldalakat, amelyeket a felhasználó meglátogatott, mielőtt az aktuális oldalra érkezett.

A morzsák használatának előnyei

Számos előnye van annak, ha ezeket a hasznos kis mutatókat használja webhelyén. Vessünk egy gyors pillantást rájuk:

1. A Google szereti őket

A látogatóid szeretik a morzsákat, de a Google is. A Google számára egy másik módot adnak arra, hogy kitalálja, hogyan van felépítve a webhelye, de - ahogyan azt korábban már tárgyaltuk - a Google a tényleges keresési eredményekben is használhatja őket, ami sokkal csábítóbbá teszi a felhasználók számára az Ön találatát. Ahhoz, hogy növelje az esélyét annak, hogy a Google-ban megjelenjenek a morzsák, strukturált adatokat kell hozzáadnia, ahogyan azt a Yoast SEO teszi.

2. Javítják a felhasználói élményt

Az emberek utálják, ha elvesznek. Amikor egy új helyszínnel szembesülnek, az emberek gyakran felismerhető tárgyakat vagy tereptárgyakat keresve néznek körül - és ugyanez igaz a webhelyekre is. A látogatókat boldoggá kell tennie, és a lehető legnagyobb mértékben csökkentenie kell a súrlódásokat. A morzsák segíthetnek a felhasználói élményben, mivel olyan gyakori felületelemet jelentenek, amely azonnal megmutatja az embereknek a kiutat. Nem kell a vissza gombra kattintani!

3. Csökkentik a visszafordulási arányt

Aligha lép be valaki egy webhelyre a kezdőlapon keresztül - Minden az organikus keresésről szól. Ez azt jelenti, hogy az oldalad bármelyik része belépési pont lehet. Ki kell találnod valamilyen módot arra, hogy ezeket a látogatókat webhelyed más részeire irányítsd, ha a kiválasztott oldal nem felel meg az igényeiknek. A morzsák csökkenthetik a visszafordulási arányt, mivel alternatív módot kínál a látogatóknak az oldal böngészésére. Nem gondolja, hogy jobb, ha a látogatót a kezdőlapjára küldi vissza, mintha a Google-ba?

Hogyan adjunk morzsákat

Többféleképpen is hozzáadhatsz morzsákat a webhelyedhez. Először is, ha WordPress-t használsz, használhatod a számos plugin egyikét, vagy - természetesen - a Yoast SEO-t. Ha más CMS-t használsz, a folyamat más lesz. Az is lehetséges, hogy kézzel add őket a kódodhoz. Ha azt szeretnéd, hogy a Google találatokban is megjelenjenek, akkor strukturált adatokat kell használnod olyan módon, amit a Google megért. Erről bővebb információt a Google fejlesztői dokumentációjában talál a breadcrumbsról.

A Yoast SEO beépített breadcrumb-támogatással rendelkezik.

A Yoast SEO egyszerű módot kínál arra, hogy morzsákat adjon a WordPress webhelyéhez. Mindent hozzáad, ami ahhoz szükséges, hogy ne csak hozzáadja őket az oldaladhoz, hanem a Google számára is elkészítse őket. Néhány téma már beépített támogatással rendelkezik a Yoast SEO kenyérmorzsákhoz. Ebben az esetben csak be kell kapcsolnod a breadcrumbokat, és a neked tetsző módon kell beállítanod őket. Abban az esetben, ha a témád még nem támogatja a mi breadcrumbs-unkat, akkor a következő kódrészletet kell hozzáadnod a témádhoz, ahol szeretnéd, hogy megjelenjenek:

Kényelmes a felhasználók számára A kenyérmorzsákat elsősorban arra használják, hogy a felhasználóknak egy másodlagos eszközt adjanak a webhelyen való navigáláshoz. Azzal, hogy egy nagy, többszintű weboldalon minden oldalra felkínál egy morzsaösvényt, a felhasználók könnyebben navigálhatnak a magasabb szintű kategóriákhoz.

Csökkenti a magasabb szintű oldalakra való visszatéréshez szükséges kattintásokat vagy műveleteket Ahelyett, hogy a böngésző "Vissza" gombját vagy a webhely elsődleges navigációját használnák a magasabb szintű oldalra való visszatéréshez, a felhasználók mostantól kevesebb kattintással használhatják a morzsákat.

Általában nem foglalja el a képernyőterületet Mivel jellemzően vízszintesen tájoltak és egyszerű stílusúak, a kenyérmorzsák nyomvonalai nem foglalnak sok helyet az oldalon. Előnyük, hogy alig van negatív hatásuk a tartalom túlterhelése szempontjából, és megfelelő használat esetén felülmúlják a negatívumokat. Csökkenti a visszafordulási arányt A kenyérmorzsás ösvények nagyszerű módja lehetnek annak, hogy az első látogatókat a céloldal megtekintése után arra csábítsák, hogy átnézzék a webhelyet.

Például, ha egy felhasználó egy Google-keresésen keresztül érkezik egy oldalra, a morzsalékos nyomvonal láttán a felhasználó arra csábulhat, hogy magasabb szintű oldalakra kattintson, hogy megnézze a kapcsolódó, érdeklődési körébe tartozó témákat. Ez pedig csökkenti a weboldal általános visszalépési arányát.