Ankerkoblinger (eller anchor links) er ikke et tema som diskuteres for ofte, men er et viktig verktøy for å gjøre det enklere å navigere innholdet på nettsiden din.
Ankerkoblinger bidrar dermed til en bedre brukeropplevelse for leserne dine, og kan gi deg en fordel hos Google.
Hva er en ankerkobling
En ankerkobling er en kobling (eller lenke) som umiddelbart tar deg til en bestemt del av siden (eller en ekstern side). Et typisk eksempel hvor man bruker ankerkoblinger er en innholdsfortegnelse.
Destinasjonen for en ankerkobling er vanligvis angitt ved å bruke et navn- eller id-attributt.
Eksempler på ankerkobling
Hvordan man lager koblinger er noe av det første man lærer når man skal lære seg HTML. La oss først se på hva som skiller koden til en standard kobling og en ankerkobling.
HTML-kode for en standard kobling
<a href="https://eksempel.com/kjente-bilmerker">Kjente bilmerker</a>HTML-kode for en ankerkobling
<a href="https://eksempel.com/kjente-bilmerker#mercedes">Mercedes</a>I de to eksempelene ovenfor har vi laget en kobling til innlegget https://eksempel.com/kjente-bilmerker. Det eneste som skiller de er at ankerkoblingen er koblet til et spesifikt sted i selve innlegget (#mercedes).
Hvis du fortsatt er usikker på hva en ankerkobling er, skal vi prøve å vise deg med noen eksempler.
I dette eksempelet har vi laget en standard punktliste med koblinger til bestemte deler av innholdet.
Her på våre nettsider bruker vi ofte innholdslister med ankerkoblinger for å gi leserne våre en enkel metode for navigere i lengre tekster.
Leseren kan klikke på ankerkoblingen i innholdslisten for å gå direkte til overskriften hvor innholdet starter, i stedet for å måtte bla seg nedover i teksten.
Hvis du kan litt CSS kan du bli kreativ og få koblingene til å se litt mer stilige ut, slik som vi har gjort med våre innholdslister.
Ankerkoblinger kan brukes på alt av tekst, bilder og overskrifter (H1-H6).
Fordeler og ulemper
Bare fordi vi gjør noe betyr ikke alltid at du skal eller bør gjøre det samme. Det er nemlig noen fordeler og ulemper å vurdere når og om du skal bruke ankerkoblinger på nettsiden din.
Fordeler
- En av de største fordelene med ankerkoblinger er å skape en bedre brukeropplevelse for leserne dine. I lange tekster lar du brukerne finne det de trenger raskere.
- Med ankerkoblinger kan du dele koblinger direkte til et bestemt sted i en artikkel.
- Ankerkoblinger blir ofte fremhevet i søkeresultater hos Google. Dette kan bidra til å øke sjansen for at noen klikker på akkurat din nettside i søkeresultatene.
Ulemper
- Ankerkoblinger eller en innholdsfortegnelse kan redusere tiden en leser bruker på nettsiden din. Dette fordi leseren kan hoppe rett til innholdet de vil se, i stedet for å lese hele artikkelen din.
- Hvis du bestemmer deg for å endre domene eller omadressere et innlegg, er det viktig å merke seg at navn- eller id-attributt (til eks. #mercedes) ikke sendes til serveren. Dette kan komplisere ting og ødelegge ankerkoblinger.
Slik lager du ankerkoblinger manuelt
En måte å lage ankerkoblinger i WordPress er å bare gjøre det manuelt med HTML-kode.
Merk teksten hvor du vil lage en ankerkobling og sett inn en kobling på samme måte som alltid.
I stedet for å skrive inn adressen til en URL, post eller side, skriver du inn et ankernavn. Dette gjør du ved å skrive tegnet # etterfulgt av ankernavnet, til eksempel #mercedes.
I selve koden (koderedigering) ser det slik ut:
<a href="#mercedes">Mercedes</a>Deretter må du lege til ID-attributt på overskriften du vil at ankerkoblingen din skal hoppe til.
I dette eksempelet legger du til ID-en i koden for overskriften (H2).
<h2 id="mercedes">Mercedes</h2>Ankernavnet i koblingen og ID-attributtet for overskriften må være nøyaktig den samme for at det skal virke.
Slik lager du ankerkoblinger med Gutenberg
Vi går bare ut ifra at de fleste har begynt å bruke den nye editoren Gutenberg nå. Les mer om Gutenberg og hvordan bruke den.
Gutenberg blir stadig bedre, og har bla. innebygd støtte for å legge til ankernavn på overskrifter.
For å lage en ankerkobling med Gutenberg velger du først blokken som inneholder overskriften. Klikk på «Avansert» fra menyen på høyre side. Du vil da se et alternativ for å legge til et HTML-anker.
Merk teksten hvor du vil lage en ankerkobling og sett inn en kobling på samme måte som alltid.
I stedet for å skrive inn adressen til en URL, post eller side, skriver du inn ankernavnet. I dette eksempelet gjør du dette ved å skrive tegnet # etterfulgt av ankernavnet, mercedes.
Konklusjon
Hvis du publiserer lengre tekster og innhold på nettsiden din vil ankerkoblinger hjelpe leserne å navigere lettere.
I tillegg til å skape en bedre brukeropplevelse vil ofte ankerkoblinger dukke opp i søkeresultatene, noe som kan øke sjansen for at noen besøker akkurat din nettside.
Ulempen som er verdt å nevne er at du risikerer at leserne bruker mindre tid på nettsiden din.
Bruker du ankerkoblinger på nettsiden din? Fortell oss gjerne dine erfaringer i kommentarfeltet under.