Ankarlänkar är inte ett ämne som diskuteras mycket, men vi har sett utmärkta resultat med dem! Idag kommer vi att dyka in i hur man skapar ankarlänkar i WordPress och utforska varför du borde börja använda dem. Vår erfarenhet är att ankarlänkar kan hjälpa till att förbättra användarupplevelsen, och göra det enklare att navigera i längre innehåll och till och med ge dig en liten fördel i Google. Och vem vill inte ha en gratis fördel i Google? 😉

Exempel på en Ankarlänk

Om du fortfarande är lite förvirrad över vad ankarlänkar är för något, oroa dig inte. Se exemplet på bilden nedan. Vi använder ankarlänkar på var och en av dessa punktlistor. När du klickar på en av dem tar det dig direkt ner till H2-rubriken som innehåller det innehållet. Du kan kolla in dessa själv längre ner i inlägget. Ankarlänkar kan användas på vad som helst, såsom text, bilder och H1-H6 rubriker.

Ankarlänkar

Ankarlänkar

På många webbplatser används ankarlänkar bara för att skapa en innehållsförteckning i början av långa inlägg. Om du kan lite CSS kan du bli kreativ och få dem att se lite snyggare ut, som vi har gjort på våra målsidor.

Ankarlänkar på en lång artikel

Ankarlänkar på en lång artikel

På andra webbplatser kanske du inte ser ankarlänken, istället används de på rubriker helt enkelt för att möjliggöra länkdelning direkt till de specifika avsnitten.

Fördelar och Nackdelar med Ankarlänkar

Bara för att vi gör något betyder inte alltid att du borde göra det också. Här är några för- och nackdelar att tänka på när du ska använda ankarlänkar på din WordPress-webbplats.

Fördelar

Nackdelar

Medan vi tror att fördelarna definitivt väger tyngre än nackdelarna, är det här några övervägningar du kan behöva fundera på.

Ankarlänkövergång

Du kanske också borde fundera på att ändra ankarlänkövergången. Som standard hoppar ankarlänkar plötsligt till rätt ID längre ner på sidan. Detta kan vara störande för vissa. Du kan ändra detta så det blir en smidig skrollningsövergång. Detta är faktiskt vad vi gör på Kinsta-bloggen. Du kan använda ett gratisplugin som Page scroll to id eller lägga till CSS till din webbplats, såsom scroll-behavior: smooth; Detta Stack Overflow-inlägg har några ytterligare tips för utvecklare.

Som med de flesta WordPress-tips, finns det flera olika sätt du kan använda för att lägga till ankarlänkar i WordPress. Kolla in dessa fyra olika enkla metoder. Och ja, länkarna nedan använder ankartext. 😁

Det första sättet att skapa ankarlänkar i WordPress är att helt enkelt göra det manuellt med HTML i vart och ett av dina inlägg. Låt oss skapa en så att du kan se hur det fungerar.

Steg 1

Skapa texten för din länk och lägg till en hyperlänk på den som du normalt skulle göra för vilken annan länk som helst.

Skapa en ankarlänk med HTML

Skapa en ankarlänk med HTML

Steg 2

Istället för att länka till en webbadress, sida eller ett inlägg kommer du att tilldela den ett ankarnamn. URI:er som betecknar ankare innehåller ett ”#” – tecken följt av ankarnamnet. Du kan kalla det här vad du vill, även om vi vanligtvis rekommenderar att du håller namnen korta och relaterade till det faktiska namnet på rubriken.

Om du tittar på textredigeraren (HTML) ser det ut så här:

<a href="#manually-create-anchor-links-wordpress">How to Manually Create Anchor Links in WordPress</a>

Här är ett exempel på alla ankarlänkar vi använder i det här inlägget:

<ul>
<li><a href="#manually-create-anchor-links-wordpress">How to Manually Create Anchor Links in WordPress</a></li>
<li><a href="#anchor-links-wordpress-plugin">How to Create Anchor Links in WordPress with a Plugin</a></li>
<li><a href="#anchor-links-wordpress-gutenberg">How to Create Anchor Links in WordPress with Gutenberg</a></li>
</ul>

Steg 3

Därefter måste du lägga till ett ID i rubriken du vill att din ankarlänk ska hoppa till. För att göra detta måste du byta till textredigeraren (HTML) i WordPress-redigeraren. På rubriken, i det här fallet, en H2-rubrik, lägger du till ID-attributet tillsammans med ankarnamnet du valde i steg 2. Ankarnamnet och ID-attributet måste vara exakt likadana för att länken ska fungera.

<h2 id="manually-create-anchor-links-wordpress">How to Manually Create Anchors Link in WordPress</h2>

Vill du inte hålla på med HTML-kod varje gång? Inga bekymmer, det finns några fantastiska gratis WordPress-plugins du kan använda för att enkelt lägga till ankarlänkar och till och med en innehållsförteckning till varje inlägg.

Lägg till Ankarlänk med ett Plugin

Ett av de enklaste sätten att lägga till en ankarlänk är med gratispluginet TinyMCE Advanced. Detta plugin lägger i princip till extra funktionalitet till redigeraren med snabba genvägar. I skrivande stund har pluginet över 2 miljoner aktiva installationer med 4,5 stjärnor av 5 i betyg.

TinyMCE Advanced WordPress-plugin

TinyMCE Advanced WordPress-plugin

Steg 1

När du har installerat och aktiverat pluginet, gå in i ditt inlägg och skapa en hyperlänk på din ankartext. Istället för att länka den till en webbadress, sida eller inlägg kommer du att ge texten ett ankarnamn med ett #-tecken i början.

Lägg till ankarnamn

Lägg till ankarnamn

Steg 2

Markera rubriken du vill länka den till. Klicka sedan på ”Infoga” längst upp och välj ”Ankare”. Den här knappen visas i redigeraren på grund av TinyMCE Advanced-pluginet.

Lägg till ankare

Lägg till ankare

Steg 3

Ange ankarnamnet du gav det i steg 1 och klicka på ”OK”. Detta plugin sparar tid eftersom du aldrig behöver lämna den visuella redigeraren. Om du gör det manuellt med HTML måste du hoppa mellan både den visuella redigeraren och textredigeraren (HTML).

Ankar-ID

Ankar-ID

Lägg till Innehållsförteckning med ett Plugin

Kanske vill du snabba på processen ännu mer. 😄 Om du skriver en hel del djupgående innehåll och alltid vill inkludera en innehållsförteckning (ankarlänklistor) i dina inlägg, så borde du använda dig av ett innehållsförteckningsplugin.

Ett av de bästa gratispluginsen är Easy Table of Contents. Detta plugin genererar automatiskt ankarlänkar för dina rubriker och låter dig infoga din innehållsförteckning var som helst i ditt inlägg med en enkel kortkod. I skrivande stund har pluginet över 30 000 aktiva installationer med ett betyg på 4,5 av 5 stjärnor.

Easy Table of Contents WordPress plugin

Easy Table of Contents WordPress-plugin

Steg 1

När du har installerat och aktiverat pluginet, finns det några inställningar som du förmodligen vill ändra på. Dessa kan hittas under ”Inställningar → Innehållsförteckning”.

Easy Table of Contents inställningar

Easy Table of Contents inställningar

Steg 2

För att infoga innehållsförteckningen manuellt, infoga helt enkelt kortkoden [ez-toc] där du vill att den ska dyka upp i inlägget.

Kortkoden EZ-TOC

Kortkoden EZ-TOC

Innehållsförteckningen genereras sedan automatiskt för alla rubriker i inlägget. Hur häftigt är inte det?

WordPress-innehållsförteckning

WordPress-innehållsförteckning

Du kan också göra fler ändringar i inställningarna över vad som ska visas, uteslutningar, utseende etc. Till exempel kanske du alltid har en ”sammanfattning” i slutet av dina inlägg. Du kan lägga in den rubriken i listan över undantag i inställningarna så att den inte kommer visas i innehållsförteckningen.

Kämpar du med driftstopp och WordPress-problem? Kinsta är hosting-lösningen som är utformad för att spara tid! Kolla in våra funktioner

Ett annat innehållsförteckningsplugin du borde kolla in är Shortcode Table of Contents. Detta är ett nyare plugin på marknaden, men det är utvecklat av James Kemp, som vi har haft nöjet att intervjua.

Lägg till Ankarlänkar på Rubriker Automatiskt med ett Plugin

Vill du helt enkelt lägga till ankarlänkar på alla dina rubriker automatiskt? Då bör du kolla in gratispluginet WP Anchor Header. Detta kommer att lägga till ankarlänkar till alla dina H1-H6-rubriker.

WP Anchor Header-plugin

WP Anchor Header-plugin

Detta är ett mycket grundläggande plugin och det finns inga inställningar. Installera det helt enkelt, aktivera det, och det är redo at användas. Varje rubrik kommer automatiskt att få ett ankarnamn (från rubrikens namn), och de får till och med en cool liten ankarikon som dyker upp när du håller muspekaren över rubriken. Detta gör det möjligt för besökare att enkelt se att det finns en länk där som de skulle kunna kopiera om de ville.

Automatiska ankarlänkar på rubriker

Automatiska ankarlänkar på rubriker

Den nya Gutenberg-redigeraren är precis runt hörnet och beräknas levereras med WordPress 5.0. Med den kommer förbättrat och inbyggt stöd för att lägga till ankar-ID till rubriker.

Steg 1

Markera rubriken i Gutenberg-blocket och klicka på ”Avancerat” på höger sida. Du kommer då att se ett alternativ för att lägga till ett HTML-ankare.

Lägg till HTML-ankare i Gutenberg-redigeraren

Lägg till HTML-ankare i Gutenberg-redigeraren

Steg 2

Om du vill länka till det, kan du helt enkelt skapa en hyperlänk på din ankartext. Istället för att länka till en webbadress, sida eller ett inlägg kommer du att tilldela den ett ankarnamn med # i början.

Lägg till ankarlänk i Gutenberg

Lägg till ankarlänk i Gutenberg

Vill du inte skapa ankarlänkar med HTML eller installera ett plugin? Då bör du kolla in det kostnadsfria Chrome-tillägget Anchor Links. Det är helt kompatibelt med självhostad WordPress, WordPress.com, och Medium.

Steg 1

När du har installerat Chrome-tillägget markerar du bara rubriken du vill lägga till ankarlänken på. Klicka sedan på den lilla Anchor Link-ikonen i webbläsarens verktygsfält.

Chrome-tillägg, lägg till ankarlänk

Chrome-tillägg, lägg till ankarlänk

Bakom kulisserna skapar det ett ankar-ID (hämtat från rubriknamnet). I detta exempel: # Header_1. När du klickar på ikonen kopierar den automatiskt till Urklipp.

Kopierat till Urklipp

Kopierat till Urklipp

Steg 2

Gå sedan till texten där du vill lägga till ankarlänken, skapa en hyperlänk som du gör annars, och tryck på ”Klistra in”.

Lägg till ankarlänk

Lägg till ankarlänk

Och det var allt! Chrome-tillägget gör det snabbt och enkelt utan att förlita sig på något tredjepartplugin.

Sammanfattning

Som du kan se finns det många kreativa sätt att lägga till ankarlänkar i WordPress. Vissa är enklare än andra. Om du ofta publicerar långt innehåll hjälper det dina besökare att komma till det innehåll de vill ha direkt. Vi har också sett ankarlänkar ge en boost i SERPs, vilket bidrar till att öka CTR på dina organiska sökresultat.

Har du börjat använda ankarlänkar på din WordPress-webbplats ännu? I så fall skulle vi gärna höra din erfarenhet eller dina tankar.


Om du tyckte om den här artikeln, då kommer du att älska Kinsta´s hosting-plattform. Effektivisera din hemsida och få support dygnet runt från vårt rutinerade team på WordPress. Vår Google Cloud-drivna infrastruktur fokuserar på auto-skalning, prestanda och säkerhet. Lås oss visa dig skillnaden med Kinsta! Kolla in våra paket