Sådan struktureres navigationen til SEO og UX
Når man taler om navigationen på et website, kommer man hurtigt til at diskutere med designere og/eller kunder, om det skal være en simpel menu eller en altomfattende og stor menu. Vi rådgiver ofte vores kunder om SEO-potentialet, der findes i deres websites navigation. Mange marketing-folk er ikke klar over den værdi, der ligger i en god navigation.
Hovedprincippet er brugervenlighed og “don’t make your website visitor think”.
Hvorfor betyder navigationen meget for SEO?
Et websites globale navigation indeholder (og skal indeholde) de vigtigste links på websitet. De globale navigations-links fortæller den besøgende hvilke sider, du anser for at være vigtigst på dit website. Det giver dem en nem måde at komme til disse sider og sætter tonen for, hvad de vil finde på dit website.
For SEO fortæller de globale navigations-links søgemaskinernes crawlere, hvilke sider, du anser for at være de vigtigste på dit websted, og giver crawlerne en nem måde at komme til disse sider på. Men der er utallige måder at strukturere et websteds globale navigation på. Så hvilken er den bedste?
Vær beskrivende
Du har muligvis den smukkeste og mest intuitivt designede globale navigation, der nogensinde har prydet internettet, men hvis dine navigations-punkter kun består af “Produkter”, “Løsninger”, “Ressourcer” og “Om os”, kunne du lige så godt bygge din navigation i Macromedia Flash. Ikke godt for UX eller SEO.
Er SEO vigtigt for dit website, skal dine navigationslinks være beskrivende. Hvis dit websted handler om at bygge modeltog, ville det være meget bedre at have “Dele til modeltog” end “Produkter” i den globale navigation. Et andet eksempel: Hvis jeg læste et blogindlæg på et ukendt websted, som jeg havde fundet gennem en søgning, og et af dine globale navigations-emner er “Løsninger”, ville jeg så forstå, hvad dit websted handler om?
Alt dette handler først og fremmest om at hjælpe brugerne med at finde det rigtige indhold, og gøre deres oplevelse på dit websted så positiv og effektiv som muligt. Som en ekstra gevinst: Brug af beskrivende ankertekst i din globale navigation betyder, at hver side på dit websted har søgeordsrige links, der peger på disse sider, hvilket er godt for jeres SEO.
Forskellige typer global navigation
Enkelt-bjælke navigation
Det mest simple, men ikke nødvendigvis mest almindelige, globale navigations-design er den enkle, almindelige bjælke. Denne bjælke har alle navigationslinks i en række og er normalt begrænset til omkring 10 links.
Her kan du se vores enkelte bjælke hos peoplez.dk (vi har også en burgermenu til højre – men det er en anden historie).
Hvis du tænker rent SEO, er dette den ideelle navigation. Links er straks synlige for søgemaskine-crawlere, og der er ingen bekymring for, at de bliver begravet i en dårligt kodet dropdown-struktur.
Fordele
Links er lette at gennemgå for søgemaskiner.
Vigtige sider er tydeligt beskrevet for brugerne.
Ulemper
MEGET begrænset i antallet af links, du kan bruge (realistisk kun levedygtig for små websteder
eller websteder med et lille antal vigtige sider).Brugerne kan overse dine services og produkter, hvis du ikke viser dem mulighederne i menuen. Derfor skal dette kun benyttes ved MEGET små websites, ellers giver den en dårlig brugeroplevelse.
Dobbelt-bjælke navigation
Dette er kun lidt mere kompliceret end den enkelte navigationslinje. I stedet for én bjælke bruger du to. Nogle henviser til dette som den primære og sekundære navigation, men med henblik på dette indlæg vil jeg tælle dem med som en global navigation.
Denne navigation er fra suvo.dk.
Den første navigation er i det sorte felt med fx “Find dit suvo-center”, “Rustmonsteret” m.m. Den anden navigation er ved “Behandlinger”, “Produktkvalitet” m.m.
Foruden at have en dobbelt bjælke navigation, benytter de også en dropdown på fx ”Behandlinger”, ”Garanti”, ”FDM” og ”Information”. Dette er en ret god løsning med det “bedste fra begge verdener”. Brugen af to globale navigationslinjer giver dig dobbelt så meget plads til links eller mere, afhængigt af hvordan du styler den anden bjælke. Og på samme måde som ved enkelt-bjælkeløsninger behøver du ikke bekymre dig om udviklere, der har begået fejl, hvilket kan gør den usynlig for crawlere (ja, du kan ved en fejltagelse gøre din navigation usynlig for søgemaskiner ved at kode en navigation forkert).
Fordele
Links er lette at gennemgå af søgemaskiner.
Vigtige sider er tydeligt beskrevet for brugerne.
Ulemper
Designet kan virke rodet, hvis det udføres forkert.
Manglende dropdowns forhindrer gruppering af emner (hvis der ikke benyttes dropdown).
Dropdown navigation
En rullemenu er designet således, at når en bruger bevæger musen hen over (eller i nogle tilfælde klikker) på et navigations-element, falder en sekundær liste med links ned. Dropdown-menuer er sandsynligvis den mest almindelige måde at strukturere et websteds hovednavigation på.
Hvis du prøver dette på dit websted, skal du sørge for, at de øverste rullelister trækkes ordentligt ind for at komme ud af vejen, hvis du har flere rullelister. For mange større websteder er dette den eneste måde, du muligvis kan linke til alle de vigtige sider uden at overvælde en bruger med valg.
Men som jeg allerede har hentydet, risikerer du at skjule alle disse store, beskrivende links fra søgemaskiner, hvis du vælger denne metode. For eksempel kan nogle webcrawlere (ikke Googlebot!) støde på problemer, når de forsøger at komme til dine dropdown-links, hvis de er kodet i JavaScript.
I andre tilfælde ved brugerne muligvis ikke, at de kan udvide rullemenuen, eller måske er de ikke i stand til det, hvis de bruger en tablet eller en anden touchscreen-enhed med bred skærm.
Fordele
Giver plads til snesevis af links.
Relaterede sider kan grupperes sammen.
Design er mindre rodet, når rullelister trækkes tilbage.
Ulemper
Crawlere kan have problemer med at finde links i dropdowns.
Dårligt udførte dropdowns giver dårlig brugeroplevelse.
Mouse-over-funktionen fungerer ikke for brugere med berøringsskærme.
Link-værdien kan fortyndes med for mange links.
Mega-dropdown navigation
Dette er den mest komplekse menustruktur, og også den nemmeste at ødelægge. Mega-dropdown navigationsmenuer er ligesom dropdown, bortset fra, at et tertiært sæt links flyver ud, når du holder markøren over et af linkene i rullemenuen (eller klikker).
En anden version af denne type menu er en rullemenu, hvor der kan flyve en ekstra menu ud, når musen klikker eller flyver hen over et punkt i rullemenuen.
Klimadan har denne menu:
Når du trykker på burgermenuen øverst til højre hos Klimadan, ser du dette
Mega-menuer har mange af de samme fordele og ulemper som almindelige dropdowns. Det er lige så let for links at blive skjult for crawlere ved JavaScript med en mega- vs. en dropdown-menu.
Fordele
Har du mange vigtige sider under kategorierne, kan du skabe et super overblik over dine produkter eller services, da denne menu giver plads til snesevis eller hundredevis af links.
Relaterede sider kan grupperes sammen.
Designet er mindre rodet, når mega-menuen trækkes tilbage.
Ulemper
Mega-menuer kan skabe en frygtelig brugeroplevelse – virker de fx på en tablet?
For mange links kan overvælde brugere og fortynde autoriteten til linket.
Crawlere kan have problemer med at finde links i dropdown- og mega-menuer.
Husk mouse-over-funktionen fungerer ikke for brugere med berøringsskærme.
En fodnote om sidefodsmenuer
Hvis du har læst dette indlæg og tænker: “Men vent!” (pegefinger i luften) – “Jeg lægger bare de ekstra links i sidefoden.” Nej, du kan ikke bare sætte links til de andre 100 sider, du vil linke til, i sidefoden. Der er masser af beviser for, at Google devaluerer links i sidefoden, og at dine brugere ikke vil kigge der, med mindre de fx kan lide at læse privatlivspolitikker.
En sidefodsmenu (hvis du overhovedet vælger at bruge en) er, hvor du kan linke til mindre vigtige sider eller give links, der er lettere at læse til sider, du har linket til i din hovednavigation. Det bedste globale navigationsdesign er princippet: “Hvad der er godt for UX er godt for SEO” og kan og bør anvendes på de fleste websites. Bottom line: Skab en god brugeroplevelse, der ikke ignorerer de mange tekniske overvejelser, der kan torpedere din SEO. Dine besøgende – både mennesker og maskiner – vil takke dig.
Takeaways ...
Hvis du har en tæt håndfuld vigtige destinationssider, skal du bruge en enkelt-bjælke-navigation.
Har du brug for mere plads til links end en enkelt bjælke og ikke brug for at gruppere sider i flere kategorier, skal du bruge dobbelt-bjælke-navigation.
Hvis du har brug for langt mere plads til links, skal du bruge rullemenuen.
Har brug for plads til snesevis af links med indlejrede kategorier, skal du bruge megamenuer.
Og ja – før du skriver – jeg ved godt, at der er en masse afarter af disse menuer, jeg ikke har afdækket her i artiklen.
Kontakt os på 7070 7886 hvis du vil høre mere om, hvordan du strukturerer navigationen på dit website.
