Wat is een ankerlink? (Met tips om er een te maken)

Bijgewerkt: 6 september 2023

Wat gebeurt er als je een anker in het water laat vallen? De boot blijft op zijn plaats liggen. Hij kan zich een beetje verplaatsen, maar alleen in een beperkte straal.

Een ankerlink op een webpagina heeft een vergelijkbare functie. Bezoekers gaan naar verschillende locaties op de webpagina, zonder deze te verlaten.

Ankerlinks, of ankertags, verbeteren de gebruikerservaring. Ze zijn ideaal om de aandacht op bepaalde elementen te vestigen. In deze blog laat ik zien wat een ankerlink precies is en hoe je ze zelf maakt.

Uitleg over de ankertag

Je merkt dat ik de woorden ankerlink en ankertag door elkaar gebruik. Het zijn synoniemen, verwijzend naar hetzelfde.

• Ankerlink, ankertag
• Anchor link, anchor tag
• Springlink, jumplink

Een ankerlink verschijnt vaak bovenaan of midden in de inhoud van een webpagina. Het leidt precies de bezoeker naar een ander element van de pagina. Oftewel: je linkt naar inhoud op dezelfde pagina.

Een ankerlink is een unieke ID die aan een specifiek element of inhoudsblok is gekoppeld.

Waarom ze belangrijk zijn

Met ankerlinks springen gebruikers van het ene gedeelte van een pagina, naar een relevant ander gedeelte. De ankertag wordt hierbij aan een specifieke kop, een trefwoord of een woordgroep gekoppeld.

Het is niet zo dat ankerlinks invloed hebben op je positie in de organische zoekresultaten. Maar ze zorgen wel voor een betere gebruikerservaring. Wanneer gebruikers tevreden zijn over de werking van je website, komen ze graag terug. Bovendien kun je met ankerlinks naar relevante tekst verwijzen en zo bezoekers aanzetten tot actie.

Op interne links, ankerteksten en ankerlinks

Binnen SEO kunnen veel termen verwarrend zijn. Vooral wanneer het op hyperlinks aankomt. Laten we even kijken wat alle termen betekenen:

• Backlink: een website die middels een linkje naar jouw webpagina verwijst
• Externe link: met een linkje op je eigen webpagina, verwijzen naar een webpagina van een andere website
• Interne link: middels een linkje verwijzen naar een webpagina binnen je eigen website
• Ankerlink: een linkje dat verwijst naar een specifiek element
• Ankertekst: de aanklikbare tekst, waarachter het linkje hangt

Het gebruik van interne links en ankerteksten verbetert je SEO. Van ankerlinks is dit niet bewezen, maar het vergroot wel de gebruikservaring en daar gaat het tenslotte om.

Het verschil tussen een ankerlink en een knop

Knoppen gebruik je om bezoekers een actie uit te laten voeren. Bijvoorbeeld naar een nieuwe pagina navigeren. Maar je kunt een knop ook als ankerlink inzetten.

Een ankerlink verwijst bijna altijd naar een ander element of inhoudsblok op dezelfde pagina. Een knop is een ankerlink, een interne link of een externe link. Dat is het verschil tussen deze twee.

Meestal vallen knoppen direct op. Ze zijn hoekig of afgerond, en hebben vaak een opvallende kleur. Hierdoor weten bezoekers dat ze erop kunnen klikken. Een ankerlink moet extra opvallen, zodat bezoekers weten dat het om een klikbaar stukje tekst gaat. Daarom is het belangrijk om een ankerlink te onderstrepen en/of een andere kleur te geven.

Moet je ankerlinks gebruiken?

Nee, het is niet verplicht om ankerlinks in webpagina’s op te nemen. Maar bij lange pagina’s kan dit wel een aanrader zijn. Je helpt bezoekers om over de pagina te navigeren. Zo vinden ze sneller de inhoud waar ze naar op zoek zijn.

Bedenk dat een ankerlink de algehele gebruikerservaring verbetert, wat weer voor een betere conversie zorgt. Dus wil je meer verkopen of omzet realiseren? Dan is het zeker verstandig om eens over het gebruik van anchor links na te denken.

Zelf een ankerlink maken

Met een CMS zoals WordPress of Joomla is het makkelijk om een hyperlink te maken. Je hoeft alleen maar een stukje tekst te selecteren en vervolgens in het werkblok op het link-icoontje te klikken. Vervolgens voer je de hyperlink in.

Het maken van ankerlinks is een beetje moeilijker. Je moet namelijk eerst een ankerpunt maken, en vervolgens een ankerlink. Hieronder 3 handleidingen om een ankerlink in WordPress, Joomla! Of middels HTML te maken.

Ankerlinks met WordPress maken

• Ga naar de pagina of het bericht waar je de ankerlink wilt toevoegen.
• Plaats de cursor op de locatie waar je het ankerpunt wilt maken (bijvoorbeeld bij een kop of een specifieke sectie).
• Voeg een aangepast HTML-ankelelement toe met de naam die je wilt gebruiken voor het ankerpunt. Bijvoorbeeld:

<a name="mijnanker"></a>

• Sla de pagina op.
• Selecteer de tekst waaraan je de ankerlink wilt toevoegen.
• Klik in de werkbalk boven het tekstbewerkingsblok op de knop ‘Link invoegen’.
• Voer het pad naar het ankerpunt in het URL-veld in, voorafgegaan door een hekje (#). In mijn voorbeeld zou het pad “#mijnanker” zijn.
• Klik op de knop om de wijzigingen op te slaan.

Wil je meerdere ankerlinks maken, dan herhaal je bovenstaande stappen. Controleer altijd of de linkjes werken.

Anchor link met Joomla! maken

Net als in WordPress, moet je vooraf bepalen waar je het ankerpunt wilt plaatsen. Volg onderstaande stappen.

• Ga naar de pagina waarop je het ankerpunt wilt maken.
• Klik op Bewerken.
• Plaats de cursor op de locatie waar je het ankerpunt wilt maken.
• Klik op de “HTML” knop boven het tekstbewerkingsgebied om naar de HTML-modus te schakelen.
• Voeg een aangepast HTML-ankelelement toe met de naam die je voor het ankerpunt wilt gebruiken. Bijvoorbeeld:

<a name="mijnanker"></a>

• Sla de pagina op.
• Selecteer de tekst waaraan je de ankerlink wilt toevoegen.
• Klik op de knop “Link invoegen”.
• Voer het pad naar het ankerpunt in het URL-veld in, beginnend met een hekje (#).
• Sla de wijzigingen op.

Ankerpunt en ankerlink met HTML maken

Afhankelijk van het systeem en de instellingen, lukt het niet altijd om een ankerpunt en een ankerlink te maken. Wanneer je problemen ervaart kun je het beste gebruik maken van HTML.

• Plaats de cursor op de locatie waar je het ankerpunt wilt maken.
• Voeg een aangepast HTML-ankelelement toe met de naam die je wilt gebruiken. Hier heb ik een voorbeeld van een ankerpunt:

<a name="mijnanker"></a>

• In dit voorbeeld is “mijnanker” de naam van het ankerpunt. Wijzig de naam naar iets dat betekenisvol is.
• Sla het HTML-bestand op.
• Ga naar de tekst waaraan je de ankerlink wilt toevoegen.
• Voeg de volgende HTML-code in op de plaats waar je de ankerlink wilt toevoegen:

<a href="#mijnanker">Tekst die als link wordt weergegeven</a>

• In dit voorbeeld vervang je “mijnanker” door de naam van het ankerpunt dat je eerder hebt gemaakt, en “Tekst die als link wordt weergegeven” door de tekst die je als linktekst wil tonen.
• Sla het HTML-bestand op om de wijzigingen op te slaan.

Naar een anker op een andere pagina linken

Meestal worden ankerlinks gebruikt om naar een ankerpunt op dezelfde pagina te linken. Maar het is ook mogelijk om naar een anker op een andere pagina te linken. Hierbij verwijs je naar een specifiek element op een andere pagina. Dit in tegenstelling tot een interne link, die naar een andere pagina verwijst, zonder de focus op een element of blok te leggen.

Om naar een anker op een andere pagina te linken, moet je de link iets aanpassen. Je verwijst bijvoorbeeld niet naar #mijnanker maar naar pagina1.html#mijnanker. Je moet dus duidelijk opgeven naar welke pagina je verwijst, en vervolgens naar welk ankerpunt.

Een inhoudsopgave maken

Ankerlinks zijn perfect voor het maken van een inhoudsopgave. Dit maakt het voor bezoekers makkelijker om door het artikel te navigeren. Met elk systeem kun je handmatig een inhoudsopgave maken. Maar hier zijn ook handige plug-ins voor, die automatisch een inhoudsopgave genereren. Hiermee bespaar je een hoop tijd. Onderstaande drie plug-ins zijn hier zeer geschikt voor:

1. Table of Contents Plus:
   Deze plug-in voegt automatisch een inhoudsopgave op basis van de koppen in je bericht of pagina. Je past de stijl aan en stelt de positie van de inhoudsopgave op.

Table of Contents Plus

2. Easy Table of Contents:
   Deze plug-in maakt snel en gemakkelijk een inhoudsopgave voor je berichten en pagina’s. Het ondersteunt meerdere stijlen en instellingen voor aanpassing.

Easy Table of Contents

3. Nestor – Table of Contents:
   Nestor is een krachtige inhoudsopgave-plug-in waarmee je aangepaste stijlen toepast, meerdere inhoudsopgaven per pagina maakt en het uiterlijk volledig aanpast.

Nestor – Table of Contents

Lukt het niet om ankerlinks te maken, of heb je ergens anders hulp bij nodig? Neem gerust contact met mij op.

---