Ankarlänkar: så skapar du hoppalänkar i HTML och i ditt CMS, och vad de gör för SEO

Snabbquiz

Hur ska du få länkar från andra webbplatser?

Fråga 1 av 425%

Har din webbplats redan användbart innehåll?

Mycket liteNågra bra sidorMånga artiklar och guider

En ankarlänk, även kallad hoppalänk eller länkankare, är en av HTML:s äldsta funktioner och en av de mest användbara i långt innehåll. Den låter läsaren hoppa direkt till svaret hen vill ha i stället för att scrolla. Google behandlar länkar som en central signal om hur sidor hänger ihop, och deras riktlinjer för länkar betonar att länkar måste vara riktiga a-element med en href. Den här guiden visar hur du skapar ankarlänkar i ren HTML och i de vanligaste CMS:en, vad de gör för SEO och för AI-svar, och hur de förhåller sig till ankartext.

Vad är en ankarlänk?

En ankarlänk är en hyperlänk vars mål är en plats inne på en sida. URL:en slutar med ett nummertecken följt av en identifierare, kallad fragment: example.com/guide#step-3. När någon klickar på den laddar webbläsaren sidan (eller stannar kvar på den) och scrollar till elementet vars id är step-3.

Det finns tre vanliga användningar:

• Navigering på samma sida: en innehållsförteckning överst i en artikel, eller en länk ”tillbaka till toppen”.
• Djuplänkar från en annan sida: länka från en artikel till ett exakt avsnitt i en annan, till exempel en definition i en ordlista.
• Dela ett exakt stycke: skicka en kollega direkt till stycket som svarar på hens fråga.

Sökmotorer behandlar example.com/guide och example.com/guide#step-3 som samma sida. Fragmentet skapar aldrig en ny URL att indexera, så ankarlänkar kan inte orsaka duplicerat innehåll.

Hur skapar du en ankarlänk i HTML?

Två kodbitar räcker: ett id på målet och en länk som pekar dit.

1. Lägg till ett id på målet: <h2 id="pricing">Priser</h2>. Använd gemener, siffror och bindestreck, inga mellanslag, och håll varje id unikt på sidan.
2. Länka till det på samma sida: <a href="#pricing">Se priserna</a>.
3. Länka till det från en annan sida: <a href="/guide#pricing">Prisavsnittet i guiden</a>.
4. Testa: klicka på länken och kontrollera att rubriken syns överst på skärmen och inte göms under en fast header (CSS-egenskapen scroll-margin-top löser detta).

Den gamla metoden, <a name="pricing"></a>, fungerar fortfarande i webbläsare men är föråldrad i HTML5. Använd id direkt på rubriken. En närliggande funktion, textfragment, låter en länk markera ett stycke utan något id, med syntaxen #:~:text=, enligt MDN. Google använder den här mekanismen när den scrollar besökare till det citerade stycket i vissa utvalda utdrag.

Hur lägger du till ankarlänkar i WordPress, Shopify, Webflow eller Wix?

Alla större CMS låter dig sätta ett id utan att röra mallen. Namnet på fältet varierar mellan verktygen.

Om ditt CMS skapar id automatiskt, kontrollera dem: vissa skapar id från hela rubriktexten, vilket ger långa, instabila fragment som går sönder när du ändrar titeln.

Hjälper ankarlänkar SEO?

Ankarlänkar är först och främst en användbarhetsfunktion. Deras SEO-värde är indirekt, men det är verkligt i långt innehåll:

• ”Hoppa till”-länkar i resultaten: på långa, väl strukturerade sidor visar Google ibland länkar till avsnitt under resultatet, vilket kan öka synligheten och klickfrekvensen. Google avgör när de visas.
• Bättre matchning av stycken: tydliga rubriker med id hjälper sökmotorer och AI-assistenter att hitta ett exakt svar inuti en lång sida, samma logik som vinner utvalda utdrag.
• Engagemang: en innehållsförteckning låter läsare nå den del de behöver, i stället för att lämna sidan för att leta annanstans.
• Tillgänglighet: hoppalänkar och navigering på sidan hjälper användare som navigerar med tangentbord eller skärmläsare, en princip som W3C:s riktlinjer för tillgänglighet beskriver.
• Exakta interna länkar: att peka på #definition i en annan artikel skickar läsare till exakt rätt stycke, vilket stärker din interna länkning.

Det ankarlänkar inte gör: de ger inte extra auktoritet till en sida, eftersom en länk till sida#avsnitt räknas som en länk till sidan, och de ersätter inte bra innehåll. En teknisk varning kommer direkt från Googles grunder för JavaScript-SEO: använd inte fragment för att ladda olika sidinnehåll, eftersom Googlebot inte på ett tillförlitligt sätt kan tolka dessa URL:er. Använd fragment bara för att scrolla inom innehåll som redan finns på sidan.

Vad är skillnaden mellan en ankarlänk och ankartext?

De två begreppen liknar varandra och blandas ofta ihop. En ankarlänk handlar om vart en länk leder (ett avsnitt). Ankartext handlar om vad länken säger (de klickbara orden). Vårt ordlisteavsnitt om ankartext går djupare in på det andra ämnet.

Vilka är de bästa metoderna för ankarlänkar och deras text?

Varje ankarlänk har också ankartext, så de två uppsättningarna regler gäller samtidigt.

• Korta, läsbara id: #pricing, #how-to-install, i stället för #section-1 eller ett fragment på 12 ord.
• Beskrivande länktext: Google rekommenderar text som är beskrivande, rimligt kort och relevant, och avråder från allmänna formuleringar som ”klicka här”.
• En innehållsförteckning på långa sidor: över ungefär 1500 ord listar du H2-avsnitten överst, var och en länkad till sitt id.
• Frågerubriker: rubriker formulerade som de frågor människor ställer gör hoppalänkarna mer användbara och lättare att citera.
• Stabila id: ändra inte ett id efter publicering om andra sidor eller webbplatser länkar till det.
• Kontrollera strukturen: en analysator för rubrikstruktur visar om dina H2- och H3-nivåer är rena innan du lägger till ankare.

Vilka misstag bör du undvika?

• Dubbla id: två element med samma id gör att länken bara hoppar till det första.
• Gömda mål: en rubrik i en stängd flik eller ett dragspel kanske inte går att nå med länken.
• Fasta headers som täcker rubriken: lägg till scroll-margin-top i CSS.
• Fragmentbaserad routing: ensidesappar som byter innehåll med #/sida-URL:er är svåra för Google att crawla.
• Överoptimerad ankartext: att upprepa exakt samma sökord i varje länk ser ut som manipulation.

Slutsats

En ankarlänk skickar läsare till ett exakt avsnitt på en sida genom ett fragment med #id. Skapa den genom att ge rubriken ett id och länka dit, i HTML eller via inställningarna i ditt CMS. Fördelarna för SEO är indirekta men konkreta i långt innehåll: innehållsförteckningar, eventuella hoppalänkar i Google, tydligare stycken för AI-svar och bättre interna länkar, så länge ankartexten förblir beskrivande. Om du hellre slipper strukturera varje artikel för hand kan Sorank, vår SEO- och GEO-programvara i autopilot, skriva strukturerade artiklar med frågerubriker och interna länkar och publicera dem i ditt CMS: se AI-generatorn för bloggartiklar och testa den med en gratis provperiod på 3 dagar.