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? 😉
Vad är Ankarlänkar?
Ankarlänkar, även kallade menylänkar eller innehållsförteckning, är länkar som omedelbart tar dig till en viss del av sidan (eller en extern sida). Ankardestinationerna anges vanligtvis med antingen A-elementet (använd namnattributet för att ge det ett namn) eller med något annat element (använd ID-attributet för att ge det ett namn) Båda metoderna är helt kompatibla med W3C-standarder (källa).
Föredrar du att titta på videoversionen?
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.
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.
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
- En av de största fördelarna med ankarlänkar är att skapa en bättre användarupplevelse när besökarna surfar på din webbplats. Detta gäller särskilt för långa artiklar. Vi publicerar mycket djupgående innehåll (4000+ ord) och det kan snabbt bli tröttsamt att skrolla ned. Med hjälp av ankarlänkar kan användaren omedelbart hoppa till den sektion som de är intresserade av. Låt dina användare hitta vad de behöver snabbare.
- Med hjälp av ankarlänkar på rubriker kan du dela direktlänkar till olika avsnitt i en artikel. Detta är fantastiskt för sociala medie-team och till och med supportteam. Till exempel är vårt supportteam på Kinsta starkt beroende av ankarlänkar i våra kunskapsbas-artiklar så att vi kan skicka användaren till exakt det felsökningssteget de behöver följa. Vårt säljteam använder också dessa för att snabbare svara på Kinsta-relaterade frågor.
- När det gäller sökmotorresultatsidor (SERPs) kan resultaten alltid variera beroende på vad som dyker upp. Vi har dock sett gång på gång att ankarlänkarna visas på vår SERP-post eftersom vi har använt dem i våra artiklar. De är fantastiska eftersom de i princip ger dig en till textrad för dina organiska sökresultat. De kan också bidra till att öka klickfrekvensen eftersom användaren kan se något som är relaterat till deras sökfråga men som du inte förmedlade i metabeskrivningen eller titeln.
Ankarlänkar i Google, exempel - Ankarlänkar kan också användas för andra saker som ”Tillbaka till toppen”-länken som Wikipedia använder tillsammans med dess referenser ^ eller fotnoter. [1]
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änkar eller en innehållsförteckning kan minska den genomsnittliga tiden på webbplatsen per besökare. Varför? Eftersom de hoppar direkt till det innehåll de vill ha istället för att läsa hela din artikel. Men om du gör din besökare glad direkt från början kan detta leda till att de registrerar sig för ditt nyhetsbrev eller blir mer intresserade av vad du säljer. Så detta kan ses som både en fördel och en nackdel.
- Direkt relaterat till problemet ovan kan ankarlänkar eventuellt påverka dina annonsintäkter. Besökare som hoppar direkt till ett visst avsnitt kan minska visningar och klick. Webbplatser som är starkt beroende av reklam kanske borde A/B-testa med ankarlänkar och innehållsförteckning.
- Om du ändrar domän eller behöver lägga till 301-omdirigeringar är det viktigt att notera att fragmentidentifieraren (#) aldrig skickas till servern. Detta kan ha konsekvenser om du ändrar om dina ankarlänkar längre fram. Det finns sätt att komma runt detta med JavaScript, men det är inte alls en särskilt lätt uppgift.
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. 😁
- Så här skapar du ankarlänkar manuellt i WordPress
- Så här skapar du ankarlänkar i WordPress med ett Plugin
- Så här skapar du ankarlänkar i WordPress med Guenberg
Så här Skapar du Ankarlänkar Manuellt i WordPress
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.
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>Så här Skapar du Ankarlänkar i WordPress med ett Plugin
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.
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.
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.
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).
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.
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”.
- Alternativet ”Aktivera stöd” låter dig välja vilka inläggstyper du vill använda innehållsförteckningen på. Troligtvis är detta dina faktiska inlägg.
- Du kan sedan välja om du vill att en innehållsförteckning ska infogas automatiskt eller om du vill infoga den manuellt. Vi skulle förmodligen rekommendera manuellt om dina inlägg ändras om en del.
- Med alternativet ”Visa när” kan du definiera hur många rubriker inlägget ska ha innan en innehållsförteckning visas. Till exempel vill du förmodligen inte ha en innehållsförteckning på ett kort blogginlägg, så att sätta denna gräns till minst fyra rubriker eller fler är förmodligen bäst.
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.
Innehållsförteckningen genereras sedan automatiskt för alla rubriker i inlägget. Hur häftigt är inte det?
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.
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.
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.
Så här Skapar du Ankarlänkar i WordPress med Gutenberg
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.
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.
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.
Brian har stor passion för WordPress och har använt det i över ett årtionde, han har till och med utvecklat ett par premium-plugins. Brian gillar att blogga, kolla filmer och hiking. Ta kontakt med Brian via Twitter.
Lämna ett svar