Oletko koskaan eksynyt verkkosivustolla? Klikkaat linkkiä, sitten toista, ja yhtäkkiä et enää muista, miten päädyit nykyiselle sivulle. Takaisin-nappia painat kolme kertaa ja lopulta palaat etusivulle aloittamaan alusta. Tämä on turhauttava kokemus, jonka lähes jokainen verkon käyttäjä tunnistaa – ja juuri tähän ongelmaan breadcrumb-navigaatio tarjoaa yksinkertaisen ratkaisun.
Breadcrumb-navigaatio eli murupolku on pieni navigaatioelementti, joka näyttää käyttäjälle, missä kohtaa sivuston rakennetta hän kulloinkin on. Se näkyy tyypillisesti sivun yläosassa ketjuna, esimerkiksi: Etusivu > Tuotteet > Ulkoiluvarusteet > Retkeilyreput. Jokainen ketjun osa on klikattava linkki, joten käyttäjä pääsee yhdellä klikkauksella mihin tahansa ylemmälle tasolle.
Jos pidät kotisivuja yrityksellesi tai suunnittelet uutta sivustoa, breadcrumb-navigaation lisääminen on yksi helpoimmista tavoista parantaa käyttäjäkokemusta. Käydään läpi, miksi näin on ja miten sen voi toteuttaa käytännössä.
Käyttäjä tietää aina, missä on
Murupolun tärkein tehtävä on antaa käyttäjälle sijaintitieto. Kun ihminen saapuu sivustolle vaikkapa Google-haun kautta suoraan johonkin alasivuun, hänellä ei ole mitään käsitystä sivuston rakenteesta. Breadcrumb kertoo heti, mihin kategoriaan sivu kuuluu ja minkälainen hierarkia sivustolla on.
Tämä on erityisen tärkeää verkkokaupoissa ja sisältösivustoilla, joilla on kymmeniä tai satoja sivuja. Ilman murupolkua käyttäjä joutuu arvailemaan, löytyisikö samankaltaista sisältöä jostain muualta sivustolta. Murupolun ansiosta hän näkee yhdellä silmäyksellä, että retkeilyreppu kuuluu ulkoiluvarusteiden alle, ja voi halutessaan katsoa myös muita tuotteita samasta kategoriasta.
Vähemmän klikkauksia, vähemmän turhautumista
Yksi käytettävyyden perusperiaatteista on, että käyttäjän pitäisi päästä haluamaansa paikkaan mahdollisimman vähillä klikkauksilla. Breadcrumb-navigaatio toteuttaa tämän periaatteen erinomaisesti. Sen sijaan, että käyttäjä navigoisi takaisin päävalikkoon ja etsisi sieltä oikean kategorian, hän klikkaa murupolusta suoraan haluamaansa tasoa.
Käytännössä olen huomannut tämän eron omissa projekteissani. Eräälle asiakkaalle rakensin sisältörikkaan palvelusivuston, jossa oli neljä tasoa syviä sivurakenteita. Alkuvaiheessa murupolkua ei ollut, ja analytiikasta näkyi selvästi, että käyttäjät pomppivat edestakaisin etusivun ja alasivujen välillä. Kun lisäsin breadcrumbin, sivuston bounce rate laski huomattavasti ja käyttäjät löysivät paremmin myös muita saman kategorian sisältöjä. Pieni muutos, iso vaikutus.
Hakukoneet rakastavat murupolkuja
Breadcrumb-navigaatio ei hyödytä pelkästään käyttäjiä vaan myös hakukoneita. Google tunnistaa rakenteelliset murupolut ja voi näyttää ne suoraan hakutuloksissa sivun URL-osoitteen sijaan. Tämä tarkoittaa, että hakutuloksessa näkyy siisti ja selkeä polku, esimerkiksi verkkokauppa.fi > Vaatteet > Naisten takit, mikä tekee hakutuloksesta houkuttelevamman.
Jotta Google tunnistaisi murupolun, sivustolle kannattaa lisätä rakenteellinen data eli structured data JSON-LD-muodossa. WordPressissä tämä hoituu kätevästi esimerkiksi Yoast SEO- tai Rank Math -lisäosalla, jotka generoivat breadcrumb-merkinnät automaattisesti. Teknistä osaamista ei siis välttämättä tarvita lainkaan.
Miten breadcrumb toteutetaan käytännössä?
Murupolun lisääminen sivustolle ei ole monimutkaista. Tässä perusaskeleet:
Ensimmäiseksi selvitä sivustosi rakenne. Breadcrumb toimii parhaiten, kun sivustolla on selkeä hierarkia. Jos sivusto on täysin tasainen eikä sivuilla ole loogisia ylä- ja alakategorioita, murupolusta ei ole juurikaan hyötyä.
Toiseksi valitse toteutustapa. WordPress-sivustoilla helpoin ratkaisu on käyttää teemaa, joka tukee breadcrumbeja suoraan, tai asentaa lisäosa kuten Yoast SEO, joka tarjoaa valmiin breadcrumb-toiminnon. Lisäosan asetuksista voit määrittää murupolun ulkoasun ja sijainnin.
Kolmanneksi sijoita breadcrumb oikeaan paikkaan. Vakiintunut käytäntö on asettaa murupolku sivun yläosaan, pääsisällön yläpuolelle mutta päänavigaation alapuolelle. Tähän käyttäjät ovat tottuneet, joten älä keksi pyörää uudelleen.
Neljänneksi lisää structured data. Kuten mainittiin, rakenteellinen data auttaa hakukoneita ymmärtämään murupolun merkityksen. Useimmat SEO-lisäosat hoitavat tämän puolestasi, mutta asian voi tarkistaa Googlen Rich Results Test -työkalulla.
Yleisiä väärinkäsityksiä breadcrumbeista
Törmään aika ajoin siihen ajatukseen, että murupolku olisi tarpeeton, koska sivustolla on jo päänavigaatio. Tämä on kuitenkin väärinkäsitys. Päävalikko ja breadcrumb palvelevat eri tarkoituksia. Valikko kertoo, mitä sivustolta löytyy. Murupolku kertoo, missä käyttäjä on juuri nyt ja miten hän sinne päätyi.
Toinen yleinen harhaluulo on, että breadcrumb sotkee sivuston ulkoasua. Todellisuudessa murupolku on visuaalisesti hyvin hillitty elementti – yleensä pienellä fontilla kirjoitettu rivi, joka ei vie juurikaan tilaa eikä häiritse sivun muuta sisältöä. Hyvin toteutettuna käyttäjä tuskin edes huomaa sitä, ennen kuin hän sitä tarvitsee. Ja juuri siinä piilee sen voima.
Kolmas väärinkäsitys liittyy pieniin sivustoihin. Moni ajattelee, ettei viiden sivun yrityssivusto tarvitse murupolkua. Ja se pitää usein paikkansa. Mutta jos sivustolla on blogi, palvelukategorioita tai minkäänlaista sisältöhierarkiaa, breadcrumbista on hyötyä jo melko pienelläkin sivustolla.
Usein kysytyt kysymykset
Toimiiko breadcrumb mobiilissa? Kyllä, ja sen pitääkin toimia. Mobiilissa murupolku on jopa tärkeämpi kuin työpöydällä, koska näyttötila on rajallinen ja navigointi hankalampaa. Hyvä toteutus mukautuu näytön leveyteen esimerkiksi lyhentämällä pitkiä polkuja.
Voiko breadcrumbeja olla useammanlaisia? Kyllä. Yleisin tyyppi on hierarkiapohjainen murupolku, joka perustuu sivuston rakenteeseen. Lisäksi on olemassa attribuuttipohjaisia breadcrumbeja, joita käytetään verkkokaupoissa suodattimien perusteella, sekä historiapohjaisia, jotka näyttävät käyttäjän kulkeman polun.
Pitääkö etusivu näkyä breadcrumbissa? Kyllä, se on hyvä käytäntö. Etusivu on yleensä murupolun ensimmäinen lenkki, ja se antaa käyttäjälle aina mahdollisuuden palata alkuun yhdellä klikkauksella.
Miten breadcrumb eroaa sivukartasta? Sivukartta on erillinen sivu, joka listaa kaikki sivuston sivut. Breadcrumb puolestaan on navigaatioelementti, joka näkyy jokaisella sivulla ja kertoo käyttäjän senhetkisen sijainnin. Ne täydentävät toisiaan, mutta palvelevat eri tarpeita.
Lopuksi
Breadcrumb-navigaatio on yksi niistä pienistä yksityiskohdista, jotka erottavat hyvin suunnitellun sivuston keskinkertaisesta. Sen toteuttaminen vie muutaman minuutin, mutta vaikutus käyttäjäkokemukseen ja hakukonenäkyvyyteen voi olla merkittävä. Jos sivustollasi on minkäänlaista hierarkiaa, murupolku kannattaa ehdottomasti ottaa käyttöön.
Käyttäjäsi kiittävät sinua – vaikkei sitä ääneen sanokaan. He vain löytävät etsimänsä nopeammin ja palaavat sivustollesi uudelleen. Ja sitähän hyvä käytettävyys lopulta tarkoittaa.