Har du någonsin öppnat ett långt WordPress-inlägg och känt dig lite vilsen när du försökt hitta det du behövde? Vi har alla varit där. Det kan vara frustrerande att scrolla igenom väggar av text bara för att komma till den del som är viktig för dig.
Det är precis därför vi använder ankarlänkar på WPBeginner. De gör det enkelt för läsare att hoppa direkt till den sektion de bryr sig om, oavsett om det är i en guide eller en expertlista.
Enligt vår erfarenhet gör ankarlänkar inte bara läsningen enklare. De hjälper också besökare att stanna kvar på din webbplats längre eftersom de snabbt kan hitta det de behöver. Och som en bonus ser ditt innehåll mer organiserat och professionellt ut.
I den här guiden går vi igenom hur du lägger till ankarlänkar till dina WordPress-inlägg och sidor. Det är en liten ändring som kan göra stor skillnad för dina läsare.
Vad är en ankarlänk?
En ankarlänk är en speciell typ av länk som leder användare till ett specifikt avsnitt på samma sida snarare än till en annan sida eller WordPress-webbplats.
Dessa länkar fungerar som genvägar och hjälper läsare att hoppa direkt till den del av innehållet de är mest intresserade av utan att behöva skrolla igenom hela sidan.
Till exempel kan du se ankarlänkar som används i en innehållsförteckning för en lång artikel eller guide. När de klickas på flyttar de omedelbart användaren till relevant avsnitt.
Ett annat sätt du kan använda ankarlänkar är att skapa bokmärkeslänkar på din WordPress-webbplats.
Detta gör att du kan dela bokmärkeslänken på sociala medier eller i e-postutskick. På så sätt, när sidan laddas, hoppar dina användare omedelbart till den sektion du vill att de ska se.
Varför och när ska du använda ankarlänkar?
En genomsnittlig användare spenderar mindre än några sekunder innan de bestämmer sig för om de vill stanna eller lämna din webbplats. Du har bara dessa få sekunder på dig att övertyga användare att stanna.
Det bästa sättet att göra det är att hjälpa dem att snabbt se den information de letar efter.
Ankarlänkar gör detta enklare genom att låta användare hoppa över resten av innehållet och gå direkt till den del som intresserar dem. Detta förbättrar användarupplevelsen och hjälper dig att vinna nya kunder/läsare.
Ankarlänkar är också bra för WordPress SEO. Google kan visa flera ankarlänkar i sökresultaten som en hopp-till-länk.
Detta har visat sig öka klickfrekvensen i sökresultaten, vilket i sin tur ger mer trafik till din webbplats.
Om du skapar en innehållsförteckning med hjälp av ankarlänkar, kan Google visa rubrikerna i utvalda utdrag.
Med det i åtanke ska vi titta på hur man enkelt lägger till ankarlänkar i WordPress.
Nedan finns en lista över alla ämnen vi kommer att täcka i den här guiden. Klicka på någon av dessa ankarlänkar nedan, så kommer du att tas till det specifika avsnittet:
- Hur du manuellt lägger till ankarlänkar i WordPress
- Hur man manuellt lägger till en ankarlänk i klassisk redigerare
- Hur man manuellt lägger till ankarlänkar i HTML
- Hur man automatiskt lägger till rubriker som ankarlänkar i WordPress (rekommenderas)
- Bonustips: Kombinera ankarlänkar med interna länkar för bättre SEO
- Vanliga frågor: Hur man lägger till ankarlänkar i WordPress
- Ytterligare resurser: Förbättra din WordPress SEO
Hur du manuellt lägger till ankarlänkar i WordPress
Om du bara vill lägga till några ankarlänkar eller bokmärkeslänkar i din artikel, kan du enkelt göra det manuellt.
I grund och botten behöver du lägga till två saker för att en ankaranpassning ska fungera som avsett:
- Skapa en ankarlänk med ett # tecken före ankaranpassningen.
- Lägg till attributet
idtill texten där du vill att användaren ska tas.
Vi börjar med ankarlänksdelen.
Steg 1. Skapa en ankarlänk
Först måste du redigera eller skapa ett nytt inlägg eller en ny sida. Välj sedan texten du vill länka till och klicka sedan på knappen infoga länk i WordPress blockredigerare.
Detta kommer att öppna popup-fönstret 'infoga länk' där du vanligtvis lägger till URL:en eller letar efter ett inlägg eller en sida att länka till.
För en ankarlänk använder du dock helt enkelt # som prefix istället för HTTP. Därefter anger du bara nyckelorden för den sektion du vill att användaren ska hoppa till.
Klicka sedan på Enter-knappen för att skapa länken. Den kommer dock inte att gå någonstans än. Du måste skapa ID:t i nästa steg.
Några hjälpsamma tips för att välja vilken text som ska användas som din ankare # länk:
- Använd nyckelord relaterade till den sektion du länkar till.
- Gör inte din ankarlänk onödigt lång eller komplex.
- Använd bindestreck för att separera ord och göra dem mer läsbara.
- Du kan använda versaler i ankatext för att göra den mer läsbar. Till exempel:
#Bästa-kaffebarerna-i-New-York.
När du har valt rätt länktext är det dags att förankra den till ett område, en sektion eller text på sidan som du vill visa när användare klickar på ankarlänken.
Steg 2. Lägg till ID-attributet till den länkade sektionen
I innehållsredigeraren, skrolla ner till avsnittet som du vill att användaren ska navigera till när de klickar på ankarlänken. Vanligtvis är det en rubrik för ett nytt avsnitt.
Välj sedan helt enkelt blocket. Klicka sedan i blockinställningarna i den vänstra panelen på fliken 'Avancerat' för att expandera den.
Därefter måste du lägga till samma text som du lade till som ankarlänk under fältet 'HTML-ankare'.
Se till att du lägger till texten utan #-prefixet.
Du kan nu spara ditt inlägg och se din ankarlänk i aktion genom att klicka på förhandsgranskningsfliken.
Vad händer om sektionen du vill visa inte är en rubrik utan bara ett vanligt stycke eller något annat block?
I så fall måste du klicka på menyn med tre punkter i blockinställningarna och välja alternativet 'Redigera som HTML'.
Detta gör att du kan redigera HTML-koden för det specifika blocket. Du måste välja HTML-taggen för det element du vill peka på. Till exempel <p> om det är ett stycke eller <table> om det är ett tabellblock, och så vidare.
Nu behöver du lägga till ditt ankare som ID-attributet till den taggen, som i följande kod:
<p id="best-coffee-shops-manhattan">
Sedan kan du bara klicka på knappen ‘Redigera visuellt’ igen, och din ankarlänk kommer att dirigera användaren till det blocket när den klickas på.
Hur man manuellt lägger till en ankarlänk i klassisk redigerare
Om du fortfarande använder den äldre klassiska redigeraren för WordPress, så här kan du lägga till ankarlänken/hopplänken.
Steg 1. Skapa ankarlänken
Först måste du redigera eller skapa ett nytt inlägg eller en ny sida. Markera sedan den text du vill ändra till en ankarlänk och klicka på knappen ‘Infoga länk’.
Därefter behöver du lägga till din ankarlänk med ett #-prefix följt av den slug du vill använda för länken.
Steg 2. Lägg till ID-attributet till den länkade sektionen
Nästa steg är att peka webbläsarna till den sektion du vill visa när användare klickar på din ankarlänk.
För att göra det behöver du växla till 'Text'-läge i den klassiska redigeraren. Skrolla sedan ner till sektionen du vill länka till.
Leta nu reda på HTML-taggen du vill rikta in dig på. Till exempel <h2>, <h3>, <p> och så vidare.
Du måste lägga till ID-attributet till den med din ankarlänks slug utan #-prefixet, så här:
<h2 id="best-coffee-shops-new-york">
Du kan nu spara dina ändringar och klicka på förhandsgranskningsknappen för att se din ankarlänk i praktiken.
Hur man manuellt lägger till ankarlänkar i HTML
Om du är van vid att skriva i textläget i den gamla klassiska redigeraren i WordPress, så här skapar du manuellt en ankarlänk i HTML.
Först måste du skapa ankarlänken med ett # prefix med den vanliga ``-taggen, så här:
<a href="#best-coffee-shops-manhattan">Best Coffee Shops in Manhattan</a>
Bläddra sedan ner till den sektion du vill visa när användare klickar på länken.
Vanligtvis är denna sektion en rubrik, men det kan vara vilket annat HTML-element som helst eller till och med en enkel paragraf <p>-tagg.
Du måste lägga till ID-attributet till HTML-taggen och sedan lägga till ankarlänkens slug utan #-prefixet.
<h2 id="best-coffee-shops-manhattan">Best Coffee Shops in Manhattan</h2>
Du kan nu spara dina ändringar och förhandsgranska din webbplats för att testa ankarlänken.
Hur man automatiskt lägger till rubriker som ankarlänkar i WordPress (rekommenderas)
Det bästa sättet att automatiskt lägga till ankarlänkar i WordPress är att använda All in One SEO (AIOSEO), den bästa SEO-plugin för WordPress.
Denna metod är lämplig för användare som regelbundet publicerar långa artiklar och behöver skapa en innehållsförteckning med ankarlänkar. Dessutom kommer AIOSEO med ett inbyggt WordPress-block för att lägga till en innehållsförteckning.
Vi är stora fans själva och har förlitat oss på AIOSEO för olika SEO-uppgifter, inklusive hantering av XML-webbkartor, OpenGraph-inställningar för Facebook och X, metabeskrivningar och titeltaggar. Se vår detaljerade AIOSEO-recension för mer information.
För den här handledningen kommer vi att använda den kostnadsfria AIOSEO Lite-versionen eftersom den inkluderar blocket för innehållsförteckning. Det finns också en AIOSEO Pro-version som inkluderar fler funktioner för att hjälpa dig att ranka bättre på sökmotorer.
Det första du behöver göra är att installera och aktivera pluginet AIOSEO Lite. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
Vid aktivering ser du installationsguiden. Klicka bara på knappen 'Kom igång' och följ instruktionerna på skärmen.
För mer information, se vår guide om hur du ställer in All in One SEO för WordPress.
Därefter kan du skapa eller redigera ett nytt inlägg eller en ny sida där du vill lägga till ankarlänkar. När du är i innehållsredigeraren klickar du helt enkelt på '+' -knappen och lägger till blocket 'AIOSEO – Innehållsförteckning'.
Pluginet kommer automatiskt att upptäcka olika rubriker på din sida och visa dem i innehållsförteckningen.
Du kan anpassa varje ankarlänk i blocket ytterligare. Till exempel erbjuder inställningspanelen till höger möjligheten att ändra 'Liststil' från punktlistor till siffror.
Dessutom kan du byta namn på rubrikerna, ordna om deras ordning i blocket för innehållsförteckning och dölja specifika rubriker.
Du kan nu spara dina ändringar och förhandsgranska din artikel. Pluginet kommer automatiskt att visa en lista med ankarlänkar som din innehållsförteckning.
För mer detaljerade instruktioner, se vår artikel om hur man lägger till en innehållsförteckning i WordPress.
Bonustips: Kombinera ankarlänkar med interna länkar för bättre SEO
Medan ankarlänkar hjälper användare att navigera inom en enda sida, tar interna länkar dem till andra relaterade inlägg eller sidor på din webbplats. Tillsammans kan dessa strategier skapa en sömlös surfupplevelse och förbättra din WordPress SEO.
Interna länkar hjälper sökmotorer som Google att genomsöka din webbplats, upptäcka nytt innehåll och rangordna dina sidor. Sidor med fler länkar som pekar på dem rankas ofta högre i sökresultaten.
Genom att strategiskt använda interna länkar kan du guida besökare till dina viktigaste sidor och driva mer trafik.
Nu gör ankarlänkar ditt innehåll mer användarvänligt, medan interna länkar uppmuntrar läsare att utforska vidare. Tillsammans håller de besökare engagerade, ökar sidvisningar och minskar din avvisningsfrekvens – allt bidrar till en bättre användarupplevelse och starkare SEO.
För att lära dig mer, kolla in vår ultimata guide om interna länkar för SEO.
Vanliga frågor: Hur man lägger till ankarlänkar i WordPress
Har du fortfarande frågor om att använda ankarlänkar i WordPress? Här är några vanliga frågor vi får från läsare, tillsammans med snabba svar som hjälper dig.
Vad är ankarlänkar och varför ska jag använda dem?
Ankarlänkar är länkar som tar användare till ett specifikt avsnitt på samma sida.
De är utmärkta för att förbättra navigeringen, göra långa inlägg lättare att bläddra igenom och skapa en bättre helhetsupplevelse för dina läsare. De kan till och med hjälpa till med SEO genom att göra ditt innehåll mer tillgängligt för sökmotorer.
Kan jag lägga till ankarlänkar om jag inte är bekant med kodning?
Absolut! Medan du kan lägga till dem manuellt med lite HTML, gör SEO-plugins som All in One SEO (AIOSEO) det superenkelt, även om du inte har någon kodningserfarenhet.
Påverkar ankarlänkar min webbplats SEO?
Ja, på ett bra sätt! Ankarlänkar hjälper användare att hitta det de letar efter snabbare, vilket kan leda till längre tid på sidan och lägre avvisningsfrekvens. Detta är alla positiva signaler för SEO.
Finns det några plugins som kan hjälpa till att lägga till ankarlänkar automatiskt?
Ja! Plugins som All in One SEO (AIOSEO) inkluderar funktioner för att automatiskt generera en innehållsförteckning med ankarlänkar. Det sparar tid och minskar risken för misstag.
Kan jag använda ankarlänkar för att förbättra min webbplats navigering?
Absolut! Ankarlänkar är ett utmärkt sätt att dela upp långt innehåll och hjälpa läsare att hoppa direkt till de sektioner som är viktigast för dem.
Ytterligare resurser: Förbättra din WordPress SEO
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt lägger till ankarlänkar i WordPress. Därefter kanske du också vill se våra guider om:
- Hur man lägger till FAQ-schema i WordPress
- Hur man tar bort siffror från WordPress-URL:er
- Hur du optimerar dina blogginlägg korrekt för SEO
- Hur man gör en fullständig webbplatsomdirigering i WordPress
- Hur man återställer en WordPress-webbplats från en Google-sökstraff
- Bästa Schema Markup Plugins för WordPress
- Den ultimata WordPress SEO-guiden
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Mrteesurez
Det här är jättebra. Det här inlägget har fått mig att förstå mer om ankarlänkar och hur man lägger till dem i redigeraren. Jag använde dem bara när jag redigerade pagebuilders eftersom jag inte visste hur jag skulle använda dem i blockredigeraren.
Tack också för tipsen om att välja ankarlänktexter för SEO-fördelar. Jag visste inte att ankarlänkar hade dessa SEO-fördelar för att få innehåll att visas i Googles utvalda utdrag.
WPBeginner Support
You’re welcome
Admin
Dennis Muthomi
Jag såg nyligen en micro SaaS-webbplats som hade ankarlänkar i sin navigeringsmeny. När jag klickade på menyalternativen, istället för att gå till en ny sida, rullade den helt enkelt den aktuella sidan till en specifik sektion.
Jag tycker att det är ett smart sätt att använda ankarlänkar på navigeringsfält för att behålla en användare på samma sida.
Mrteesurez
Ja, jag ser det som ett smart sätt att länka till den andra delen av webbplatsen från menyalternativ. Vissa webbplatser som personliga portföljer använde en sidbaserad webbplats som inkluderar olika sektioner för om, tjänster, färdigheter och mer, och implementerar sedan ankare för att länka ihop dessa delar på den enda sidan.
Dayo Olobayo
Tack för detta. Jag tror också att korrekt användning av ankarlänkar kan hjälpa till i den interna länkningsstrategin för vår webbplats. Genom att länka till olika sektioner inom samma sida eller till relaterat innehåll på andra sidor kan vi behålla besökare engagerade längre och hjälpa till att distribuera länkkraften över hela webbplatsen.
Jiří Vaněk
Kan jag fråga, jag har flera objekt i menyn där en länk med # i slutet är inställd. Det är avsiktligt. Jag ger ett exempel. I menyn finns ett objekt prislista med # som inte leder någonstans. Först efter att musen har hovrat över expanderar menyn, vilket leder till individuella prislistor. Google Search Console störs av detta förfarande, eftersom länken inte leder någonstans. Kan det lösas på något sätt?
WPBeginner Support
För det kan du titta på att skapa en prissida som länkar till undersidorna i din meny.
Admin
Jiří Vaněk
Det vill säga, istället för #, som inte leder någonstans, skapa åtminstone en informativ sida med lite text. Ok, det låter som en mycket bra men ändå enkel och snabb lösning. Tack. Jag förväntade mig inte att min lösning skulle störa Google som en inaktiv länk.
Mrteesurez
Jag stötte på ett liknande problem med platshållarlänkar i min webbplats meny. Jag hade använt `#` i vissa menyalternativ för rullgardinsmenyer, men detta tillvägagångssätt flaggades också som dålig praxis för sökmotorer. För att lösa det justerade jag menystrukturen genom att se till att varje toppnivåalternativ var länkat till en giltig URL, även om det var en icke-klickbar ankare eller en specifik sektion på samma sida. På så sätt såg Google varje länk som att den ledde någonstans, samtidigt som funktionaliteten hos rullgardinsmenyerna bevarades. Denna ändring hjälpte till att rensa upp varningarna och förbättrade den övergripande användarupplevelsen på min webbplats.
Pavlína Radochová
Hej, tack för inlägget.
Jag skulle vilja be dig om hjälp: hur kan jag skapa en HTML-ankare till sidtiteln?
WPBeginner Support
De flesta sidtitlar bör vara högst upp på sidan, så om inte ditt tema placerar den någon annanstans bör du kunna länka direkt till en sida för att uppnå det du vill utan att behöva en ankarlänk.
Admin
Ahmed Abo Rwash
Hej, kära vänner
Jag behöver er hjälp eftersom jag gjorde ett objekt i min navigeringsmeny som en ankarlänk, och det fungerar bara för mig på min hemsida, men om jag bläddrar till någon annan sida och försöker klicka på detta objekt i navigeringsmenyn för att föra mig till samma område på hemsidan fungerar det inte, så hur kan jag fixa det
WPBeginner Support
Om du vill att ankarlänken ska fungera på andra sidor, vill du se till att din meny-länk har hela URL:en från https till slutet, och det bör lösa detta problem.
Admin
Bushra Muzaffar
Hjälpsamt... den nya blockredigeraren i WordPress har en 'avancerad' flik i sidofältet till höger
WPBeginner Support
Glad att du fann vår artikel hjälpsam!
Admin
Jennifer
Thank you!! Worked perfectly
WPBeginner Support
Kul att vår guide var till hjälp!
Admin
Jo
Fungerar inte för mig – försöker länka till en sidofältswidget från en annan sida och detta driver mig till vansinne
WPBeginner Support
För det problemet, när länken är på en annan sida, behöver du ange hela URL:en för den andra sidan inklusive #ankaret i slutet för att det ska fungera.
Admin
Chalvonia Bock
Tack. efter en lång kamp och sökande efter hjälp fick jag det rätt efter att ha följt dessa instruktioner.
WPBeginner Support
Glack our guide was helpful
Admin
Stephen Muiruri
Mycket användbar artikel. Jag tänker inkludera längre innehåll på min blogg och ankarlänkar kommer att göra navigering och användbarhet mer effektiv. Tack så mycket.
WPBeginner Support
Glad our guide was helpful
Admin
Nico
Vilken fantastisk, heltäckande artikel, tack!
WPBeginner Support
Glad you found our guide helpful
Admin
Megan
Hur lägger jag till en ankarlänk från en knapp till en rubrik på samma sida, tack?
WPBeginner Support
Du kan behöva använda den manuella metoden från den här guiden för det.
Admin
Rohit Mehta
Jättestort tack!
WPBeginner Support
Glad our guide was helpful
Admin
Robert
Bra presentation. Jag rekommenderar dock att föreslå en HEM-knapp i slutet av varje internt länkad paragraf.
WPBeginner Support
That is a personal preference but thank you for sharing your recommendation
Admin
maddy schafer
Mycket hjälpsamt, tack. Gjorde det enkelt för mig att koda ankarlänkar.
WPBeginner Support
Glad our guide was helpful
Admin
Francesco
HEJ. Inlägget är mycket bra. Hur kan jag skapa länken från en sida till en annan sida med ankare? Jag skulle vilja skapa länken till en annan specifik del av sidan.
WPBeginner Support
Du skulle länka till sidan med ankarlänkarna på och lägga till # med id till slutet av URL:en
Admin
Sameer
Hej, tack för den här handledningen.
Jag har en fråga, snälla. På min startsida har jag några ankare som "om mig" och "kontakta mig". Dessa ankare finns i min sidhuvudsmeny (med hjälp av WordPress sidhuvud).
Problemet jag har är på mobilwebbplatsen, på startsidan öppnar användaren menyn och väljer ett ankare som i princip skrollar ner på samma sida, men menyraden förblir öppen.
Hur får jag menyraden att kollapsa när man klickar på ett ankare?
Tack.
WPBeginner Support
Du bör kontakta supporten för ditt nuvarande tema för att säkerställa att menyn stängs ordentligt.
Admin
Don Johnson
Var står det någonstans hur man kommer till innehållsredigeraren?
WPBeginner Support
Du kommer att kunna redigera ditt innehåll när du skapar eller redigerar ett inlägg eller en sida
Admin
NanPad
Jag har tre ankarlänkar högst upp på min sida. När tittaren har klickat på ankarlänk #1 – och tagits till den plats på sidan där länken pekar – hur kommer tittaren tillbaka till toppen för att kunna klicka på ankarlänkarna #2 och #3?
WPBeginner Support
Det skulle kräva anpassad JavaScript eller ett plugin för att lägga till det på din webbplats.
Admin
Gopal
Mycket hjälpsamt inlägg
WPBeginner Support
Thank you
Admin
Diane
Detta verkar INTE adressera möjligheten att länka från en sida till ett ankare på en annan sida. Är det möjligt i WordPress?
WPBeginner Support
Du kan använda den här guiden och sedan använda ankarlänken för en specifik sektion på en sida var som helst på webben.
Admin
John
Ganska bra artikel men du utelämnade steget som behövs för att placera ankare på en ANNAN sida! Mycket viktigt.
WPBeginner Support
Du kan följa dessa steg och även om länken finns på en annan sida bör den fortfarande fungera.
Admin
Okila Jaames
Tack så mycket för det här inlägget. Jag lär mig varje dag sedan jag hittade den här plattformen.
WPBeginner Support
You’re welcome, glad you found our content helpful
Admin
Sheila
Vad är det för block du pratar om? Kunde inte följa den här handledningen.
WPBeginner Support
För den här handledningen använder vi Gutenberg/blockredigeraren. Baserat på din fråga använder du troligen den klassiska redigeraren.
Admin
Amos Struck
Mycket användbar information. Det vore bra om du också kunde förklara med en video
WPBeginner Support
We will look into creating a video as we are able
Admin