Skapa Ankarlänk i WordPress

Hur Du Skapar Ankarlänkar i WordPress

Idag går vi in på ämnet ankarlänkar (anchor links eller jump links på engelska) och hur vi kan skapa dessa i WordPress. Kanske inte supersexigt men de är faktiskt väldigt användbara.

Ankarlänkar bidrar till att förbättra användarupplevelsen, gör det enklare att navigering i långa texter eller blogginlägg. Dessutom är det nog så att de kan ge en liten fördel hos Google. Och vem gillar inte det? 😉

Vad Är Ankarlänkar?

En ankarlänk är en länk som direkt tar dig till en viss del av sidan (eller en extern sida). Ankarlänksdestinationerna anges antingen med hjälp av A-elementet (namngivning med namnattributet) eller av något annat element (namngivning med ID-attributet). Båda metoderna överensstämmer helt med W3C-standarder.

Exempel på en ankarlänk

Skulle du fortfarande inte riktigt förstå vad det handlar om så förstår jag.

Tänk att vi har en innehållsförteckning på en sida, dvs en samling med de rubriker som artikeln i huvudsak handlar om. Dessa länkas sedan till respektive rubrik där ämnet avhandlas. Besökaren kan klicka på länken och hoppar då direkt till det stycke som de var mest intresserad att läsa.

De kan hjälpa dig i Googles serp (sökresultat)

Om din artikel har ankarlänkar så kan Google, ibland, använda dessa för att skapa ytterligare en länk på din listning i deras sökresultat. Denna länk tar besökaren direkt till just det avsnittet som länken går till.

Detta gör att du dels får ytterligare en länk som sökaren kan klicka på, bra med extra utrymme, men det kan också öka din CTR (du får fler klick) genom att sökaren hittar ytterligare tecken på just din sida löser hens fråga bäst.

Ankarlänk i Googles SERP

Olika metoder för att skapa ankarlänkar i WordPress

Eftersom WordPress är så brett och välanvänt så finns det också många olika metoder för att göra mer eller mindre samma sak. Vi ser till att gå genom några av de allra vanligaste här.

Välj vilken som intresserar dig mest:

Hur du skapar ankarlänkar i WordPress med Gutenberg

Med den nya blockredigeraren, Gutenberg, som lanserades i WordPress 5.0 så är det det superenkelt att lägga till ankarlänkar.

Oavsett vad man tycker om Gutenberg i övrigt så är det en klar fördel när det gäller denna typ av länk.

Steg 1

Klicka på blocket (eller markera) där rubriken du vill länka till finns.

Klicka på ”Avancerat” i det högra verktygsfältet. Där ser du att du har möjlighet att lägga till ett HTML-ankare. Ange ett ord som du tycker passar bra i sammanhanget.

Ankarlänk Gutenberg - ange html-ankare

Steg 2

Välj sedan texten som du vill ska länka till rubriken.

Markera den och klicka på att skapa en länk. Istället för att länka till en URL på din sajt eller externt så tilldelar du den ankarnamnet du valde tidigare, ange ett # tecken före ordet.

Ankarlänk Gutenberg - ange ID

Klart! Testa gärna så att det fungerar innan du publicerar.

Hur du skapar ankarlänkar i WordPress med den Klassiska Editorn

Har du kvar den ”gamla” klassiska texteditorn så krävs det ett ytterligare steg för att kunna skapa ankarlänken, med hjälp av html.

Men ta det lugnt, det är inte svårt och vi visar dig exakt hur det går till här.

Steg 1

Skriv texten och markera den precis som du skulle göra vid en vanlig länk.

Steg 2

Men istället för att länka till en sida eller inlägg på din sajt, eller till en extern URL: så ger vi den ett ankarnamn. Vilket innebär att du anger ett ankare genom att använda dig av # tecknet följt av ett namn/ord som du väljer. Vi rekommenderar att du håller det relativt kort och relaterat till det du länkar till.

Ankarlänk i Klassisk WordPress Editor

Om vi tar och tittar på hur det ser i HTML får vi det här:

<a href="#ankarlank-klassik-editor">Hur du skapar ankarlänkar i WordPress med den Klassiska Editorn</a>

Steg 3

Nu ska vi se till att lägga till ett ID på sidan dit vi vill att besökaren ska hoppa när hen klickar på vår ankarlänk.

För att göra det behöver du switcha över till text läget (HTML) i WordPress redigeraren (det gör du överst i editorn, klicka på text tabben).

Leta nu upp texten eller rubriken som du vill länka till. I vårt fall handlar det om en H3 rubrik som heter: Hur du skapar ankarlänkar i WordPress med den Klassiska Editorn

Nu gäller det att lägga till ID tillsammans med med ankarnamnet vi valde i förra steget. Tänk på att ID och ankarnamnet måste vara exakt lika för att detta ska fungera. Så här ser det ut i HTML:

<h3 id="ankarlank-klassisk-editor">Hur du skapar ankarlänkar i WordPress med den Klassiska Editorn</h3>

Klart! Testa gärna så att det fungerar innan du går live 🙂

Hur du skapar ankarlänkar i WordPress med Thrive Architect

Vi använder oss väldigt mycket av Thrive Themes alla olika WordPress produkter och hjälpmedel. Dels här på FreeBiz men också på i stort sett alla andra projekt också.

Därför kommer här en liten genomgång på hur du skapar ankarlänkar i deras utomordentliga pagebuilder – Thrive Architect.

Steg 1

Välj texten eller rubriken (kan även vara en annan typ av block) som du vill länka till.

Gå in i verktygsfältet till vänster och öppna upp HTML-Attribut tabben. Fyll i ett ankarnamn (vilket du vill) i ID fältet.

Ankarlänk i Thrive Architect - ange ID

Steg 2

Dags att skapa själva länken. Markera texten du vill ska länka till ankaret. Fyll i fältet för länken men istället för att ange en URL så anger du ankarnamnet du valde i förra steg med ett hashtag tecken före (#).

Ankarlänk i Thrive Architect - skapa länken

Klart! Kom ihåg att testa innan du klickar på publicera knappen.

Hur du skapa ankarlänkar i WordPress med hjälp av plugins

Det går också att skapa ankarlänkar med hjälp av olika plugins. Men vi kommer inte att gå igenom några av dessa vidare ingående.

Varför? För att vi har som mål att hålla antalet plugins nere till så få som möjligt. Och ankarlänkar är så enkla att skapa ändå, så något tillägg behöver absolut inte.

Men det finns andra plugins som innefattar ankarlänkar som kan vara värda att titta på. Nämligen Table of Content tillägg.

Bra Table of Content (Innehållsförteckning) Plugins

Med en Table of Content eller innehållsföretckning/snabbnavigering så blir din användares upplevelse bättre. I alla fall när du har väldigt långa artiklar eller inlägg, säg över 2000-3000 ord.

Du får då en sammanställning av artikelns alla olika rubriker där användaren snabbt kan välja att hoppa till det stycke som intresserar hen mest. Med hjälp av en ankarlänk.

De två tilläggen som vi använt och kan gå i god för är:

Easy Table of Contents

WordPress Plugin - Easy Table of Contents

och vår favorit:

Shortcode Table of Contents

WordPress tillägg - Shortcode Table of Contents

Skulle du använda Thrive Architect så finns det redan ett Table of Contents element där som fungerar riktigt bra.

Summering

Som du kanske märker så finns det flera sätt att använda sig av och skapa ankarlänkar i WordPress. Några enklare än andra 🙂 .

Om du regelbundet producerar långa artiklar så är ankarlänken ett bra hjälpmedel för dina läsare. Så nästa gång du skriver och märker att det blir långt. Använd dig av ankarlänkar för att bryta upp det.

Har du några frågor eller andra förslag så är du mer än välkommen att höra av dig eller kommentera.

Leave a Reply 0 comments

Leave a Reply: