Hvad er Breadcrumb? Tips og bedste praksis for nem navigation

Har du nogensinde tænkt over, hvad Breadcrumb er i forbindelse med hjemmesidenavigation? Breadcrumbs er navigationshjælpemidler til hjemmesider, der viser brugerens rute fra hjemmesiden til deres aktuelle placering og spiller en afgørende rolle i hjemmesidedesign .

Disse navigationshjælpemidler på hjemmesiden hjælper os med nemt at navigere tilbage til tidligere sider. I denne artikel forklarer vi, hvad breadcrumbs er, hvorfor de er vigtige for brugervenlighed og SEO , og hvordan man bruger dem effektivt.

Hvad er brødkrummer?

Breadcrumb – et udtryk, der måske får dig til at forestille dig en sti efterladt i skoven, men som alligevel spiller en lige så afgørende rolle i forbindelse med en hjemmeside. Disse navigationshjælpemidler tilbyder komfort ved at afsløre den valgte rute og styrker brugerne ved at vise vejen frem.

Breadcrumb-navigation har udviklet sig fra et eventyrligt koncept til et essentielt element i webdesign. Det sikrer, at besøgende ikke føler sig fortabte blandt et websteds lag.

Betydningen af ​​breadcrumbs rækker ud over komfort; for websteder med store sider er de den tråd, der hjælper brugerne med at navigere i labyrinten. Komplekse websteder, især e-handelswebsteder med mange produkter og kategorier, er afhængige af breadcrumb-navigation for at forenkle brugerrejser.

De forkorter klikstier og forbedrer brugerengagementet ved at give en klar og ensartet navigationsstruktur.

Læs: Responsivt WordPress webdesign: Nøglen til at konvertere mobile besøgende

Forståelse af brødkrummenavigation

Breadcrumb-navigation, der ofte findes øverst på en webside, er en fremragende støtte til brugeroplevelsen . Det er et sekundært navigationsskema, der viser brugerens placering inden for et websteds hierarki og visuelt repræsenterer den valgte navigationssti.

Dette værktøj er især uvurderligt på websteder, hvor et enkelt breadcrumb-spor viser en klar rute tilbage gennem labyrinten af ​​sider. Breadcrumb-navigationens anvendelighed går ud over blot bekvemmelighed; det er et vigtigt element for webstedets brugervenlighed og søgemaskineoptimering (SEO).

Ved at reducere antallet af klik, der kræves for at navigere på et websted, strømliner breadcrumbs rejsen fra en bestemt side til forskellige overordnede sider og forfiner dermed brugeroplevelsen. Derudover fungerer de som en diskret guide, der hjælper brugerne med at forstå forholdet mellem sider og webstedets overordnede struktur.

I søgemaskinernes øjne kan en velimplementeret breadcrumb-sti forbedre et websteds synlighed betydeligt ved at give klare spor om webstedets hierarki, hvilket er afgørende for indeksering og forståelse af indholdets kontekst.

Lær: Sådan konverterer du PSD til WordPress (med videovejledning)

Typer af brødkrummer

Selvom alle breadcrumbs tjener det ene hovedformål, navigation, er ikke alle skabt lige. Der er primært tre typer breadcrumb-navigation: lokationsbaseret, stibaseret og attributbaseret, som hver især imødekommer forskellige navigationsbehov.

• Placeringsbaseret: Denne breadcrumb-navigation er den mest almindelige; den viser brugerens position inden for webstedets hierarki, ligesom et kort, der skitserer webstedets forskellige 'etager' og 'rum'. Ved at vise forholdet mellem sider og deres overordnede kategorier hjælper disse breadcrumbs brugerne med nemt at navigere både opad til bredere kategorier og nedad til underkategorier.

• Stibaserede brødkrummer: På den anden side dokumenterer disse den unikke rejse, en bruger har taget for at nå frem til den aktuelle side. De er dynamiske og ændrer sig i henhold til brugerens rute. Selvom de kan være nyttige, er de mindre almindelige end lokationsbaserede brødkrummer, fordi de kan være overflødige med browserhistorikfunktioner.

• Attributbaserede breadcrumbs: Disse ses oftest på e-handelssider, hvor de tjener til at vise de attributter og filtre, som en bruger har anvendt, såsom mærke, størrelse eller farve. Denne type breadcrumb tilbyder en brugervenlig måde at spore og ændre valg uden at starte søgeprocessen forfra.

Læs mere: Vigtigheden af ​​brugerkontekst: Hvorfor det er vigtigt for webperformance og UX

Fordele ved at bruge Breadcrumb Navigation

Inden for webdesign er breadcrumb-navigation et værktøj, der forbedrer et websteds æstetik og funktionalitet.

Uanset om en besøgende på et websted befinder sig dybt inde på en e-handelsside eller gennemsøger en indholdsrig uddannelsesplatform, giver breadcrumbs en følelse af orientering og kontrol. Lad os lære mere om fordelene nedenfor:

Forbedring af brugeroplevelsen

Brødkrummer reducerer angst og giver en klar idé om processen og trinene involveret i navigation ved at give besøgende mulighed for at forstå deres placering inden for et websteds store vidder.

Denne forståelse er især vigtig på store, komplekse hjemmesider, hvor vejen til information kan være indviklet.

Med breadcrumbs kan brugerne hurtigt og effektivt finde de ønskede oplysninger, hvilket fører til hurtigere opgaveudførelse og en mere tilfredsstillende brugeroplevelse .

Ved at bruge en breadcrumb-menu kan du forbedre den samlede brugeroplevelse på dit websted.

Relateret: Hvor meget koster et webdesign

Forbedring af SEO

Breadcrumbs fungerer som en guide for søgemaskiner, der fører dem gennem et websteds sider og forbedrer gennemsøgningsevnen. Dette er afgørende for, at websteder vises i søgeresultaterne, da det giver søgemaskiner mulighed for at få adgang til og indeksere indhold mere effektivt.

Derudover anvendelsen af ​​skemamarkup på breadcrumbs det muligt for disse nyttige stier at blive vist i søgeresultaterne. Inkludering af breadcrumbs i søgeresultaterne kan føre til en højere klikrate. Brugere kan derefter se webstedets struktur og indholdets relevans i forhold til deres søgeforespørgsler, før de overhovedet besøger webstedet.

Denne visuelle hjælp i Googles søgeresultater beriger brugerinteraktionen og forbedrer et websteds opfattede troværdighed.

Læs: Komplet SEO-tjekliste for 2024 (infografisk guide)

Reduktion af afvisningsprocenter

Breadcrumbs kan være det hemmelige våben til at reducere høje afvisningsprocenter ved at opfordre brugerne til at udforske hjemmesiden yderligere. I stedet for at forlade siden eller hjemmesiden helt, kan brugerne bruge breadcrumb-stier til at starte forfra og navigere til andre sektioner eller sider af interesse. Dette kan føre til højere annonce- eller salgsindtægter, da brugerne forbliver engagerede i indholdet i længere perioder.

Relateret: Hvad er hastighedsindeks

Ved at give et visuelt hint om deres nuværende placering og den sti, de har taget, opfordrer breadcrumbs brugerne til at starte forfra i stedet for at forlade webstedet. Dette hjælper med at finde information inden for et komplekst webstedshierarki og bidrager til en mere intuitiv og brugervenlig oplevelse.

Bedste praksis for implementering af brødkrummer

Kunsten at navigere i breadcrumbs handler ikke kun om placering, men også om gennemtænkt implementering. Det er vigtigt at holde sig til visse bedste praksisser for at sikre, at breadcrumbs opfylder deres formål og guider brugerne effektivt.

Med omhyggelig planlægning og udførelse kan breadcrumbs-navigation være et effektivt hjælpemiddel, der forbedrer både brugeroplevelsen og webstedets arkitektur.

Brug hierarkisk struktur

Et websteds hierarki, eller webstedshierarki, er dets rygrad og definerer forholdet mellem forskellige sider og kategorier. Breadcrumbs afspejler denne struktur og giver en klar og præcis køreplan for webstedsarkitekturen.

De bør repræsentere de forskellige niveauer på et websted, fra den bredeste kategori ned til den specifikke side, som brugeren ser. Dette sikrer, at brugerne altid har en klar fornemmelse af, hvor de er i webstedets hierarki, og hvordan de kan nå andre relaterede områder.

Ved hjælp af en hierarkisk struktur hjælper breadcrumbs brugerne med at forstå et websteds logiske opbygning. De fungerer også som et visuelt hjælpemiddel, der forenkler navigationen og gør det nemmere for brugerne at finde relateret eller interessant indhold.

Hold designet enkelt og konsekvent

Enkelt design er kendetegnende for effektiv breadcrumb-navigation. Målet er at understøtte navigationen uden at tiltrække unødig opmærksomhed.

Breadcrumbs skal visuelt være i overensstemmelse med resten af ​​hjemmesiden, og der skal være typografi og farveskemaer, der passer problemfrit til sidens design. Tydelige separatorer, såsom symbolet '>', er afgørende for at skelne mellem de forskellige niveauer af breadcrumb-sporet, hvilket fremmer læsbarheden og forståelsen.

Breadcrumb-designet skal skabe balance mellem synlighed og diskrethed. De skal fremstå mindre end hovednavigationen for at undgå at konkurrere om brugerens opmærksomhed.

Ved at holde breadcrumb-designet enkelt og ensartet kan webmastere sikre, at det komplementerer den primære navigation og forbedrer webstedets overordnede æstetik.

Læs også: WordPress-websitedesign: 15 grunde til at hyre et professionelt bureau

Undgå at linke til den aktuelle side

Navigering på en hjemmeside bør være en øvelse i klarhed, ikke forvirring. Derfor bør den aktuelle side i breadcrumb-verdenen stå som en endestation, et tydeligt markeret sidste punkt og ikke et link.

I stedet bør det sidste element i brødkrummestien have en anden stil – f.eks. fed skrift – for at signalere brugerne deres aktuelle position på webstedet.

Manglende linkning af den aktuelle side i brødkrummestien fungerer som et subtilt, men kraftfuldt tegn.

Det signalerer til brugeren, at de er ankommet til deres destination, hvilket giver en følelse af færdiggørelse og orientering. Denne afgrænsning mellem linkede breadcrumb-elementer og den aktuelle side hjælper med at forhindre potentiel forvirring, der kan opstå ved at klikke på et link, der ikke fører nogen steder hen.

Denne klarhed er afgørende for at opretholde brugernes tillid, når de navigerer gennem webstedet. Ved at undgå at linke til den aktuelle side, tjener breadcrumbs deres primære funktion som et navigationshjælpemiddel, der vejleder brugerne uden at lede dem på afveje.

Test links regelmæssigt

I den digitale verden er forandring konstant. Websider opdateres, flyttes eller nogle gange fjernes, hvilket betyder, at de stier, der er udskåret af brødkrummestier, hurtigt kan blive forældede.

Regelmæssig testning er afgørende for at sikre, at links i breadcrumbs forbliver nøjagtige og funktionelle. Denne proces involverer at verificere, at hvert breadcrumb-link fører til den tilsigtede side, og dermed opretholde integriteten af ​​webstedets navigationsstruktur.

Test af breadcrumb-links kan integreres i rutinemæssig vedligeholdelse af et website. Værktøjer som Semrushs Site Audit kan forenkle processen og give indsigt i websitets interne links.

Ved at sikre, at breadcrumb-stier altid er opdaterede og nøjagtige, kan webadministratorer fremme en følelse af tillid og brugervenlighed, der opfordrer brugerne til at udforske webstedet med selvtillid.

Lær: Hvad er intern linkbuilding, og hvordan hjælper det din SEO?

Almindelige fejl at undgå

Som med ethvert værktøj kan effektiviteten af ​​breadcrumb-navigation blive kompromitteret, hvis den ikke bruges korrekt. Der er flere almindelige fejl, som webmastere og designere kan begå, når de implementerer breadcrumb-stier. Lad os forstå det nedenfor:

Overkomplicering af brødkrummespor

Vejen til enkelhed er ofte fyldt med fristelsen til at tilføje mere, men mindre er ofte mere, når det kommer til brødkrummeruter. At komplicere disse ruter med for mange niveauer af unødvendig information kan føre til en besværlig og forvirrende navigationsoplevelse.

Sigt i stedet efter en afbalanceret brødkrummesti, der giver lige præcis nok dybde til at afspejle webstedets struktur uden at overvælde brugeren. Fokuser på de væsentlige niveauer, der bidrager til en klar forståelse af webstedets hierarki.

Når en brødkrummesti bliver for lang, bliver den ikke kun vanskelig at navigere i, men kan også optage værdifuld skærmplads, især på mobile enheder.

Dette kan forringe brugeroplevelsen, da brugerne muligvis skal scrolle vandret for at se hele brødkrummesporet, hvilket kan være særligt frustrerende, hvis sporet ombrydes til flere linjer.

For at undgå dette bør webmastere identificere og vise en enkelt kanonisk sti i brødkrummestien for polyhierarkiske websteder, hvilket sikrer klarhed og enkelhed.

Læs mere: Grundlæggende principper for webdesign, der driver salg

Brug af brødkrummer som primær navigation

Breadcrumbs er et navigationshjælpemiddel, der er designet som et sekundært navigationsskema, der supplerer den primære navigationsmenu. At forveksle dem med en erstatning for hovednavigationen kan føre til en underlødig brugeroplevelse.

Breadcrumbs mangler den bredde og dybde, der kræves for at fungere som det eneste navigationsmiddel på et websted. De er ikke designet til at håndtere komplekse navigationsbehov og bør ikke forventes at guide brugerne gennem alle niveauer i et websteds hierarki.

I stedet bør breadcrumbs bruges sammen med andre navigationskomponenter, såsom globale navigationslinjer, lokal navigation og søgefunktioner. De er bedst egnede til at give brugerne en måde at spore deres trin tilbage gennem webstedets hierarki eller hurtigt hoppe til højere niveauer i hierarkiet.

Når de bruges korrekt, kan breadcrumbs forbedre den primære navigation og gøre det nemmere for brugerne at forstå og navigere i webstedets struktur.

Lær: Hvordan optimerer man billeder og forbedrer hjemmesidens hastighed?

Inkonsekvente brødkrummetitler

Konsistens er nøglen i mange aspekter af livet, og breadcrumb-navigation er ingen undtagelse. Når breadcrumb-titler ikke matcher de tilsvarende sidetitler, kan det skabe forvirring og desorientere brugerne.

Det er vigtigt at opretholde et klart og ensartet budskab på tværs af alle elementer på et websted, og breadcrumbs bør præcist afspejle titlen på den side, de linker til. Denne justering sikrer, at brugerne har en klar forståelse af, hvor de er, og hvor de kan gå hen næste gang.

Inkonsistente breadcrumb-titler kan også underminere SEO-indsatsen, da søgemaskiner værdsætter klarhed og konsistens i webstedsstruktur og indhold. Ved at afstemme breadcrumb-titler med sidetitler kan webmastere give yderligere kontekst til søgemaskiner, hvilket kan forbedre webstedets søgerangeringer. Derudover tilbyder konsistente breadcrumb-titler en anden mulighed for målrettede søgeord, hvilket forstærker indholdets relevans for både brugere og søgemaskiner.

Lær om: 40+ almindelige WooCommerce vedligeholdelsesfejl, du skal undgå for enhver pris

Eksempler på effektiv brødkrummenavigation

Når det gøres rigtigt, kan breadcrumbs være et diskret, men effektivt værktøj til at forbedre brugernavigation og brugervenlighed på websteder. Fra e-handelsgiganter til indholdsrige platforme demonstrerer disse websteder værdien af ​​velimplementerede breadcrumb-stier.

Ved at undersøge disse eksempler kan vi få indsigt i effektive breadcrumb-strategier og hente inspiration til vores egne hjemmesider.

I dette afsnit vil vi undersøge, hvordan forskellige typer websteder bruger breadcrumb-navigation til at forbedre brugeroplevelsen og webstedets ydeevne.

E-handelssider

E-handelswebsteder er naturlige levesteder for breadcrumbs på grund af deres komplekse hierarkier og omfattende produktsortimenter. På sådanne websteder er attributbaserede breadcrumbs særligt nyttige, da de giver brugerne mulighed for at se og navigere gennem de filtre og attributter, de har anvendt under deres produktsøgning.

Overstock bruger for eksempel attributbaserede breadcrumb-stier, der hjælper brugerne med at holde styr på deres valgte produktkriterier såsom kategori, mærke eller farve. Denne type breadcrumb-navigation forbedrer shoppingoplevelsen ved at gøre det nemt for brugerne at ændre deres søgning uden at starte forfra.

Stibaserede brødkrummer er en anden facet af de bedste e-handelssider , som set på Bloomingdale's, hvor de giver brugerne mulighed for at navigere tilbage til deres tidligere søgeresultater.

Dette er især nyttigt, når brugerne ønsker at sammenligne produkter eller vende tilbage til et bredere udvalg efter at have set en bestemt vare. Stibaserede brødkrummer hjælper brugerne med at bevare deres orientering på webstedet og fortsætte deres shoppingrejse med lethed ved at give en klar vej tilbage til tidligere viste sider.

Indholdsrige hjemmesider

For indholdsrige websteder er breadcrumbs afgørende for at hjælpe brugerne med at navigere i det store udvalg af tilgængelige oplysninger. Websteder som Flickr bruger breadcrumb-stier til at guide brugerne gennem forskellige sektioner, hvilket gør processen med at finde specifikt indhold eller vende tilbage til en side på et højere niveau ligetil.

Ved tydeligt at skitsere webstedets sektioner og undersektioner fungerer breadcrumbs på indholdsrige websteder som en køreplan, der hjælper brugerne i deres søgen efter viden eller underholdning.

Ved at inkorporere breadcrumbs kan indholdsrige websteder strømline brugernavigationen og gøre det nemmere for besøgende at finde de oplysninger, de søger.

Læs om: De bedste virksomheder inden for udvikling af brugerdefinerede webportaler i 2024

Hvordan tilføjer man brødkrummer til sin hjemmeside?

Som vi har set, er breadcrumbs et værdifuldt værktøj til at forbedre navigation og brugeroplevelse på et websted. Men hvordan tilføjer du dem til dit eget websted? Heldigvis er der flere metoder til at implementere breadcrumbs. Lad os se på hvordan:

Tilføjelse af brødkrummer med HTML og CSS

For dem med lidt kodningskendskab er det en ligetil proces HTML og CSS

• Start med at strukturere din brødkrummesti med en ordnet liste (<ol> ) eller uordnet liste (<ul> ), med hvert listeelement (<li> ) der repræsenterer et niveau i hierarkiet.
• Når HTML-strukturen er på plads, træder CSS i kraft for at style brødkrummesporet. Du kan justere elementerne vandret, tilføje afstand for visuel adskillelse og vælge passende separatorer for at angive progressionen gennem hierarkiet.

Før du implementerer breadcrumbs, er det vigtigt at kortlægge din hjemmesides struktur. Ved at organisere dine links hierarkisk kan du give en logisk og intuitiv oversigt

navigationssti for dine brugere.

Lær: Hvordan konverterer man HTML til WordPress-tema?

Implementering af Breadcrumbs i WordPress

WordPress- brugere at tilføje breadcrumb-navigation takket være det store udvalg af tilgængelige plugins. Populære muligheder som 'Breadcrumb NavXT' og 'Yoast SEO' tilbyder en nem måde at integrere breadcrumbs på dit websted.

Disse plugins tilbyder en række tilpasningsmuligheder, så du kan skræddersy udseendet og opførslen af ​​dine breadcrumbs, så de matcher dit websteds design og struktur.

Når du har installeret et breadcrumb-plugin, skal du konfigurere dets indstillinger i henhold til dine præferencer og strukturen på dit websted. Dette kan omfatte:

• Valg af den type breadcrumb-navigation, der bedst passer til dine behov
• Tilpasning af separatorerne
• Beslutning om placeringen af ​​brødkrummesporet på dine sider

Nogle WordPress-temaer leveres også med indbygget understøttelse af breadcrumbs, som kan aktiveres via temaets indstillingspanel, hvilket eliminerer behovet for yderligere plugins.

Bemærk : Ikke alle WordPress-temaer understøtter breadcrumbs native. Et plugin som Yoast SEO kan udfylde hullet, hvis dit tema ikke tilbyder denne funktion. Når det er installeret, kræver det typisk et par enkle justeringer at vise breadcrumbs på dine sider.

Brug af skemamarkup

At inkludere schema markup til breadcrumbs er en fremragende måde at forbedre deres funktionalitet og forbedre dit websteds SEO. Schema markup er en type struktureret data, der hjælper søgemaskiner med at forstå indholdet og strukturen på dit websted.

Ved at implementere et breadcrumb-skema kan du gøre det muligt for søgemaskiner som Google at vise dit breadcrumb-spor i søgeresultaterne, hvilket giver brugerne yderligere kontekst og potentielt forbedrer klikraterne.

Der findes flere formater til breadcrumb-skemamarkup, herunder:

• JSON-LD
• RDF
• Mikrodata
• HTML

Med Breadcrumb schema markup kan du fuldt ud udnytte SEO-fordelene ved Breadcrumbs.

Oversigt

Når vi nærmer os enden af ​​forståelsen af ​​breadcrumb-navigation, bliver det tydeligt, at deres værdi rækker langt ud over blot dekoration. Breadcrumbs fungerer som et navigationshjælpemiddel, et værktøj til SEO og et middel til at reducere afvisningsprocenter.

De er et bevis på vigtigheden af ​​brugeroplevelsen i webdesign, da de tilbyder brugerne en klar og effektiv måde at forstå og navigere i et websteds struktur. Ved at følge de bedste fremgangsmåder, der er beskrevet i denne vejledning, kan webmastere implementere effektive brødkrummespor, der guider brugerne med den subtilitet og præcision, der kendetegner et veltegnet kort.

Med de tips og bedste fremgangsmåder, der er delt i dette indlæg, er du nu rustet til at implementere breadcrumbs på din egen hjemmeside og sikre, at dine brugere aldrig føler sig fortabte i den digitale skov.

Ofte stillede spørgsmål – Hvad er brødkrummer?