Så här lägger du ”enkelt” till ankarlänkar i WordPress (steg för steg)

Letar du efter ett enkelt sätt att add anchor links till dina blogginlägg och pages?

Anchor links används ofta i table of content sections eftersom de hjälper användare att flytta upp och ner i en längre artikel utan att ladda om sidan. Det kan också hjälpa till med sökmotorsoptimering eftersom Google kan visa ditt content i utvalda snippor.

I den här guiden visar vi dig hur du enkelt kan add to anchor links i WordPress.

Vad är en Anchor Link?

En ankar länk är en typ av länk på sidan som tar dig till en specifik plats på samma page. Det allow användare att hoppa till den section de är mest intresserade av.

Som you kan se kommer användaren genom att clicka på ankarlänken till den specifika sectionen på samma page.

Anchor links används ofta i längre artiklar som innehållsförteckning, vilket gör det möjligt för användare att snabbt hoppa till de sektioner de vill läsa.

En annan användning av ankarlänkar är att skapa bokmärkeslänkar på din WordPress site. This allows you to share the bookmark link on social media or email newsletters so that when the page loads, your users immediately jump to the section you want them to see.

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 WordPress website. Du har bara dessa få sekunder på dig att övertyga användarna om att stanna kvar.

Det bästa sättet att göra det är att hjälpa dem att snabbt hitta den information de söker.

Anchor links gör detta enklare genom att allow användare att hoppa över resten av innehållet och hoppa direkt till den del som intresserar dem. Detta förbättrar användarupplevelsen och hjälper dig att vinna nya customers/läsare.

Ankar länkar är också bra för WordPress sökmotorsoptimering. Google kan visa flera ankarlänkar i sökresultaten som en hopp-till-länk.

Detta har visat sig öka click through rate i sökresultaten. Med andra ord får du mer trafik till din website.

Om du skapar en innehållsförteckning med hjälp av ankarlänkar kan Google också visa headingarna i utvalda snippor.

Med detta sagt, låt oss ta en titt på hur du enkelt kan add to anchor links i WordPress. Under finns en lista över alla ämnen som vi kommer att täcka i den här guiden.

Gå vidare och klicka på någon av dessa ankar länkar under, och du kommer att tas till den specifika section:

Så här lägger du till ankarlänkar manuellt i WordPress

Om du bara vill add to några ankar- eller bokmärkeslänkar i din artikel kan du enkelt göra det manuellt.

I grund och botten måste du add to två saker för att en ankartext ska fungera som avsett:

1. Skapa en ankar länk med ett # tecken före ankartexten.
2. Add the id attribute to the text where you want the user to be taken.

Låt oss börja med ankarlänksdelen.

Steg 1. Skapa en Anchor Link

Först måste du editera eller skapa ett nytt post eller page. Därefter väljer du den text som du vill länka och klickar sedan på knappen insert link i WordPress block editor.

Detta kommer att visa popupen ”insert link” där du vanligtvis lägger till URL eller letar efter ett post eller en page att länka.

Men för en ankar länk använder du helt enkelt # som ett prefix istället för HTTP. Enter bara keywords för den section du vill att användaren ska hoppa till efter det.

Sedan klickar du på knappen enter för att skapa länken. Den kommer dock inte att gå någonstans än. Du måste skapa ID:n i nästa steg.

Några användbara tips om att välja vilken text du ska använda som din anchor # link:

• Använd de keywords som är relaterade till den section du länkar till.
• Gör inte din ankar lä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 ankartexten för att göra den mer läsbar. Till exempel: #Best-Coffee-Shops-New-York.

När du har valt rätt länktext är det dags att förankra den till ett area, section eller text på sidan som du vill visa när användare clickar på ankarlänken.

Step-by-Step 2. Add attributet ID:n till den länkade sectionen

I content editor rullar du ner till den section som du vill att användaren ska navigera till när de klickar på ankarlänken. Vanligtvis är det en heading för en new section.

Därefter väljer du bara blocket. Klicka sedan på tabben ”Advanced” i blockinställningarna på den vänstra panelen för att förstora den.

Efter det måste du lägga till samma text som du addade som ankar länk under ”HTML Anchor” fältet.

Se till att du addar texten utan #-prefixet.

You can now save your post and see your anchor link in action by clicking on the preview tab.

Vad händer om den section du vill visa inte är en heading utan bara ett vanligt stycke eller något annat block?

I så fall måste du klicka på menyn med tre punkter i blockets inställningar och välja alternativet ”Edit as HTML”.

This will allow you to edit the HTML code for that viss block. Du måste selecta HTML tagged för det element du vill peka på. Till exempel <p> om det är ett stycke eller <table> om det är ett block med tabeller, och så vidare.

Nu måste du add to your anchor som ID-attribut till den taggen, gillar följande kod:

<p id="best-coffee-shops-manhattan">

Sedan kan du bara klicka på knappen ”Edit Visually” igen, och din ankar länk kommer att leda användaren till det blocket när du klickar på den.

Hur man manuellt lägger till ankar Link i Classic Editor

Om du fortfarande använder den äldre klassiska Editorn för WordPress, kan du göra så här för att add to ankarlänken/jump-länken.

Step-by-Step 1. Skapa ankarlänken

Först måste du editera eller skapa en new post eller page. Sedan väljer du den text som du vill ändra till en ankar länk och klickar på knappen ”Insert Link”.

Följer du detta måste du add to din ankar länk med ett # prefix följt av den slug du vill använda för länken.

Step-by-Step 2. Add attributet ID:n till den länkade sectionen

Nästa steg är att peka webbläsarna till den section som du vill visa när användarna klickar på din ankar-länk.

För att göra det måste du växla till läget ”Text” i den klassiska editorn. Därefter rullar du ner till den section som du vill länka till.

Nu, location den HTML tagg du vill rikta in dig på. Till exempel <h2>, <h3>, <p> och så vidare.

You need to add the ID attribute to it with your anchor link’s slug without the # prefix, like this:

<h2 id="best-coffee-shops-new-york">

You can now save your changes and click on the preview button to see your anchor link in action.

Så här lägger du till ankarlänkar manuellt i HTML

Om du är van vid att skriva i textredigeraren i den gamla klassiska Editorn i WordPress, kan du göra så här för att manuellt skapa en ankar-länk i HTML.

Först måste du skapa ankarlänken med ett #-prefix med hjälp av den vanliga <a href=""> taggen, gillar detta:

<a href="#best-coffee-shops-manhattan">Best Coffee Shops in Manhattan</a>

Därefter måste du rulla ner till den section som du vill visa när användare klickar på länken.

Vanligtvis är detta section en heading, men det kan vara vilket annat HTML-element som helst eller till och med ett enkelt stycke <p> tagged.

You need to add the ID attribute to the HTML tag and then add the anchor link slug without the # prefix.

<h2 id="best-coffee-shops-manhattan">Best Coffee Shops in Manhattan</h2>

Nu kan du save dina ändringar och previewa din website för att testa ankarlänken.

Så här lägger du automatiskt till headings som ankarlänkar i WordPress (rekommenderas)

Det bästa sättet att automatiskt lägga till ankarlänkar i WordPress är att använda tillägget All in One SEO (AIOSEO). Den här metoden är lämplig för användare som regelbundet publicerar långa artiklar och behöver skapa en innehållsförteckning med ankarlänkar.

AIOSEO är det bästa sökmotorsoptimeringspluginet för WordPress, och det kommer med ett built-in WordPress block för att lägga till en innehållsförteckning.

För denna tutorial använder vi den gratis AIOSEO Lite-versionen eftersom den innehåller blocket med innehållsförteckningen. Det finns också en AIOSEO Pro-version som innehåller fler funktioner som hjälper dig att ranka bättre på search engines.

Det första du behöver göra är att installera och aktivera pluginet AIOSEO. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

När du har aktiverat kommer du att se Setup Wizard. Klicka helt enkelt på knappen ”Kom igång” och följ instruktionerna på skärmen.

För mer detaljer, vänligen 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 post eller page där du gillar att add anchor links. När du är i content editor klickar du helt enkelt på knappen ”+” och add to blocket ”AIOSEO – Table of Contents”.

Pluginet kommer automatiskt att upptäcka olika headings på din page och visa dem i innehållsförteckningen.

Du kan customize varje ankar länk i blocket ytterligare. Instance, the settings panel on the right offers the alternative to change the ”List Style” from bullets to numbers.

Dessutom kan du byta namn på headingarna, ändra ordern i blocket med innehållsförteckningen och dölja specifika headings.

Du kan nu save dina ändringar och previewa din artikel. Plugin kommer automatiskt att visa en lista med ankar links som din innehållsförteckning.

För mer detaljerade instruktioner, se vår artikel om hur du lägger till en innehållsförteckning i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt kan add anchor links i WordPress. You may also want to see our tips on how to properly optimize your blogginlägg for SEO and our pick of the best schema markup plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.