Als bedrijfseigenaar ben je altijd op zoek naar manieren om de gebruikerstevredenheid op je WordPress website te verbeteren. De volgende metriek in je vizier: Je bouncepercentage.
Een hoog bouncepercentage is misschien geen reden tot paniek. Het gemiddelde bouncepercentage ligt rond de 50,9%, afhankelijk van je branche. Voor e-commerce websites is het 54,54%.
Misschien is je website bijvoorbeeld zo goed ontworpen dat gebruikers snel de informatie krijgen die ze nodig hebben en weer weggaan. Dit telt nog steeds als een bounce.
Maar te veel bounces kunnen ook wijzen op een slecht ingerichte website, dus het is een goed idee om deze metriek zoveel mogelijk te verbeteren.
Het verbeteren van de gebruikerservaring (UX) is een trefzekere manier om je bouncepercentage omlaag te brengen, en het toevoegen van ankerlinks is een verrassend effectieve manier om dit te doen.
Wat is een hyperlink?
Voordat we meer vertellen over ankerlinks, moeten we eerst bekijken wat een hyperlink is.
Je kent deze links waarschijnlijk al: gekleurde of onderstreepte tekst die je, als je erop klikt, naar een andere webpagina brengt. Er wordt onderscheid gemaakt tussen interne links, die naar dezelfde website verwijzen, en externe links, die naar een andere website verwijzen.
De anatomie van een hyperlink omvat de zichtbare tekst, bekend als de ankertekst, en de Uniform Resource Locator (URL) waarnaar de link verwijst. Bijvoorbeeld, in de zin “bezoek Bluehost voor snelle webhosting,” is de onderstreepte zin “bezoek Bluehost” de ankertekst.
In HyperText Markup Language (HTML) zou die hyperlink er als volgt uitzien:
<a href=“https://www.bluehost.com/”>bezoek Bluehost</a>
Wat is een ankerlink?
Ankerlinks, vaak page jumps of jump links genoemd, kunnen gebruikers helpen snel door een pagina te navigeren. In tegenstelling tot interne en externe links, houden ankerlinks je op dezelfde pagina terwijl ze je naar een specifieke sectie brengen.
De anatomie van een ankerlink lijkt erg op die van een typische hyperlink. Hoewel we later dieper zullen ingaan op hoe je handmatig een ankerlink maakt, zie je hier een voorbeeld van ankerlinks in actie uit ons artikel over hoe je een website structureert:
Zodra u op een koppeling in de inhoudsopgave klikt, springt u direct naar die sectie op de pagina en ziet u de URL in de adresbalk veranderen. In dit voorbeeld verandert het klikken op de ankerlink “What Website Structure Is” de URL van https://www.bluehost.com/blog/website-structuring naar https://www.bluehost.com/blog/website-structuring/#What-Website-Structure-Is.
Waarom je ankerlinks moet gebruiken
Het opnemen van ankerlinks in je artikelen en pagina’s is een kleine verandering, maar het kan een aanzienlijke impact hebben. Hier zijn een paar van de voordelen:
- Verbeterde UX: Ankerlinks stroomlijnen de navigatiemenu’s en de organisatie van de website, zodat gebruikers snel vinden wat ze zoeken. Goede UX stelt bezoekers tevreden en vergroot de kans dat ze op uw website blijven.
- Verhoogde betrokkenheid: Gefrustreerde gebruikers die moeite hebben om uw website te vinden, hebben de neiging om af te haken. Zelfs als het een seconde te lang duurt om te vinden wat ze zoeken, kunnen ze vertrekken. Met ankerlinks kunnen ze snel en gemakkelijk vinden wat ze zoeken zonder een enorme pagina te hoeven scrollen, en ze zullen langer op uw website blijven terwijl ze lezen en bladeren.
- Betere zoekmachineoptimalisatie (SEO): Ankerlinks zijn van vitaal belang voor het organiseren van uw pagina op een manier die zoekmachine-indexeerders kunnen begrijpen. Beschrijvende anchor-tekst kan SEO verbeteren door Google te vertellen waar uw pagina over gaat. Bovendien kunnen uw ankerlinks onder aan uw Google-zoekresultaat worden weergegeven, waardoor u meer kansen hebt om klikken te krijgen.
- Toegankelijkheid en reactiesnelheid: Navigatiehulpmiddelen kunnen mensen die ze nodig hebben enorm helpen. Mensen die schermlezers en andere hulpmiddelen gebruiken, vinden je website toegankelijker als je ankerlinks gebruikt. Ze helpen bezoekers op kleinere mobiele schermen zelfs om met gemak door een lange pagina te navigeren.
Kortom, ankerlinks verhogen de betrokkenheid en tevredenheid van gebruikers, wat kan leiden tot meer tijd die je besteedt aan het browsen op je website en een lager bouncepercentage.
Wanneer je ankerlinks moet gebruiken
Hulp nodig om te bepalen waar ankerlinks op je website moeten worden geplaatst? Hier zijn een paar ideeën:
- Inhoudsopgave (ToC): Op lange pagina’s die zijn opgedeeld in verschillende rubrieken, zoals artikelen, is het een goed idee om een ToC te hebben die direct naar elke sectie kan springen.
- Lijsten en indexen: Wanneer je een document hebt met veel individuele secties, zoals een index of een FAQ-pagina, wil je misschien ankerlinks hebben die naar elk item of elke groep items verwijzen.
- Terug naar boven/onder: Een snelle link die gebruikers naar de bovenkant of onderkant van de pagina brengt wordt vaak gewaardeerd, vooral als je geen menu of sticky header hebt, die op zijn plaats blijft als ze scrollen.
- Spring naar de oproep tot actie (CTA): Leid gebruikers naar essentiële CTA’s. Laat gebruikers bijvoorbeeld direct naar je contactformulier springen.
- Landingspagina “s: Vereenvoudig de navigatie op landingspagina” s of websites met één pagina met ankerlinks.
Uitdagingen van het gebruik van ankerlinks
Hoewel ankerlinks handig zijn, moet je ze wel op de juiste manier implementeren, anders loop je het risico dat ze UX, SEO en toegankelijkheid beïnvloeden. Kijk uit voor deze potentiële problemen:
- Beschadigde SEO: Links zijn essentieel voor SEO en ankerlinks zijn geen uitzondering. Links moeten echter op een bepaalde manier worden gebruikt om je zoekmachine ranking te helpen. Slecht georganiseerde jump links, slecht geschreven of lege ankertekst of onbewerkbare HTML-code kunnen je SEO schaden.
- Onoverzichtelijke URL: Slecht opgezette en georganiseerde ankerlinks kunnen de URL onoverzichtelijk maken. Schone URL’s zijn veel gebruiksvriendelijker.
- Toegankelijkheidsproblemen: Hoewel snelkoppelingen kunnen helpen bij de toegankelijkheid, kunnen ze een belemmering vormen als je ze niet implementeert in overeenstemming met de Web Content Accessibility Guidelines (WCAG). Je kunt bijvoorbeeld een link “navigatie overslaan” toevoegen waarmee gebruikers met schermlezers direct naar de hoofdinhoud van de pagina kunnen springen.
- Slechte reactiesnelheid: Jump-links kunnen op verschillende apparaten anders werken. Als je er niet voor zorgt dat deze links op meerdere apparaten werken, kunnen sommige gebruikers een slechte ervaring hebben.
- Gebroken links: Het bijwerken van verspringende links bij het toevoegen of verwijderen van secties aan je inhoud is belangrijk om gebroken links en slechte UX te voorkomen.
- Technische problemen: Jump links kunnen problemen introduceren zoals conflicterend scrollgedrag dat leidt tot visuele glitches of pagina-elementen zoals sticky headers die een deel van de inhoud bedekken.
- Overmatig gebruik van ankerlinks: Hoewel ankerlinks nuttig kunnen zijn, kan het gebruik ervan op korte pagina’s die ze niet nodig hebben of het toevoegen van te veel op één pagina overweldigend worden.
Gelukkig zijn veel van deze problemen eenvoudig op te lossen. Houd ze in gedachten als je ankerlinks aan je website toevoegt.
Hoe ankerlinks maken in WordPress
Er zijn verschillende manieren om ankerlinks toe te voegen in WordPress, van het handmatig maken met HTML tot het eenvoudigweg gebruiken van de ingebouwde editors. Hier zijn verschillende tutorials om je er doorheen te leiden.
Ankerlinks maken in de Gutenberg blok-editor
Laten we eerst stap voor stap een ankerlink maken met de Gutenberg Block Editor.
Stap 1: Voeg het blok toe waar je naartoe wilt springen
Dit kan een kop, paragraafblok, afbeelding of iets anders zijn.
Stap 2: Open het tabblad Instellingen en klik op de vervolgkeuzelijst Geavanceerd
Je vindt het tabblad Instellingen in de rechterbovenhoek en de vervolgkeuzelijst Geavanceerd in het geopende paneel.
Stap 3: Zoek het HTML-ankerinvoervak
Dit staat op het tabblad Geavanceerd. Als je het niet ziet, probeer dan een ander bloktype, zoals een kop.
Typ een naam in het vak HTML-anker en zorg ervoor dat de naam uniek is voor alle andere ankers op de pagina. Je kunt ook symbolen gebruiken, zoals koppeltekens en punten. Onthoud dat dit in de URL wordt weergegeven wanneer op de ankerlink wordt geklikt.
Stap 4: Link naar je anker
Om dit te doen voegt u de tekst, afbeelding of knop toe die uw klikbare jump link wordt.
Markeer het, selecteer de linkknop en typ het HTML-anker in dat je eerder hebt ingesteld, met een hashtag ervoor. Als je anchor-tag “voorbeeld” was, typ dan “#voorbeeld”.
Test het in een voorbeeld en je zou onmiddellijk naar het ankerpunt moeten springen dat je hebt ingesteld.
Ankerlinks toevoegen in de klassieke editor
Als je de voorkeur geeft aan de klassieke editor, dan kun je hier ook ankerlinks maken in WordPress. Het proces is iets ingewikkelder, maar nog steeds relatief eenvoudig.
Stap 1: Overschakelen naar de teksteditor
In de rechterbovenhoek van het bewerkingsgebied zie je twee tabbladen, Visueel en Tekst. Klik op Tekst om over te schakelen.
Stap 2: De anker-ID toevoegen
Zoek het element waar je naartoe wilt springen. In dit voorbeeld gebruiken we een kop die er zo uitziet:
<h2>Anchor Link 2</h2> Voeg een “id” tag toe met de gewenste naam voor het anker. Zo zou het eruit moeten zien:
<h2 id="anchor-link-two">Anchor Link 2</h2> 
Je kunt deze ID-tag op dezelfde manier gebruiken in de meeste HTML-attributen. Dit is hoe het eruit zou zien in een typische paragraaf.
<p id="anchor-link-two">Anchor Link 2</p> Stap 3: Link naar je anker
Schakel terug naar de Visuele editor en voeg het element toe waarop gebruikers zullen klikken om naar de gewenste sectie te springen.
Markeer het, selecteer de linkknop en typ dan de anchor-ID die je eerder hebt ingesteld, plus een hashtag. In dit voorbeeld typen we “#anchor-link-two”.
Net als bij de Gutenberg-editor gebruikt u het voorbeeldscherm om het uit te testen en te controleren of het werkt.
Handmatig ankerlinks maken met HTML
Net als in het bovenstaande voorbeeld kun je HTML gebruiken om direct een ankerlink te maken. Zo doe je dat.
Stap 1: Maak een anchor-tag
Geef het anker eerst een naam. Je kunt dit doen met de HTML-tag “id”, die je bijna overal kunt plaatsen. Hier zijn een paar voorbeelden:
• <a id="anchor-example"></a>
• <h1 id="anchor-example">Heading example</h1>
• <p id="anchor-example">Example text.</p>
• <span id="anchor-example"></span>Stap 2: Link naar de anchor-tag
Maak een link die naar het opgegeven anker springt als erop wordt geklikt. Zorg ervoor dat je een hashtag-symbool voor de ID gebruikt. Een voorbeeld:
<a href="#anchor-example">Example link.</a> Stap 2: Link naar de anchor-tag
Maak een link die naar het opgegeven anker springt als erop wordt geklikt. Zorg ervoor dat je een hashtag-symbool voor de ID gebruikt. Een voorbeeld:
<a href="#anchor-example">Example link.</a>Stap 3. De HTML-code invoegen
Met WordPress kun je HTML bewerken in verschillende gebieden van je website, en WordPress plugins bieden mogelijk nog meer opties. We hebben al besproken hoe je HTML in de klassieke editor kunt openen. Er zijn nog een paar manieren.
Je kunt HTML bewerken in de blok-editor door een blok toe te voegen, het te selecteren, op de drie verticale punten te klikken en Bewerk als HTML te selecteren.
Je kunt de Code Editor ook openen door te klikken op de drie verticale punten in de rechterbovenhoek van het scherm en de editor te kiezen uit het vervolgkeuzemenu.
Tot slot kun je de HTML van het thema bewerken door te navigeren naar Tools > Theme file editor, hoewel het niet aan te raden is om dit direct te bewerken. In plaats daarvan kun je een child theme instellen.
Ankerlinks toevoegen aan een WordPress menu-item
Het is ook mogelijk om ankerlinks toe te voegen aan een WordPress menu. Deze werken net als elke andere spronglink. Het gebruik hiervan is enigszins beperkt, maar je kunt het nuttig vinden op websites met één pagina.
Door dit te combineren met de Conditional Menus plugin kun je menu’s maken met ankerlinks op specifieke pagina’s, zoals je startpagina of landingspagina’s. Zo stel je het als volgt in:
Stap 1. Een anker-ID maken
Zie de bovenstaande instructies voor het handmatig maken van een ankerlink. Zoek de koptekst, tekst of afbeelding waar je naartoe wilt springen en voeg het anker-ID attribuut toe met HTML.
Stap 2. Ankerlink toevoegen aan menu
Navigeer in het WordPress dashboard naar Uiterlijk > Menu’s. Maak een menu en klik vervolgens op de vervolgkeuzelijst Aangepaste koppelingen. Voeg de anker-ID in die je hebt gemaakt, met een hashtag ervoor, en klik vervolgens op Toevoegen aan menu.
Onthoud dat dit niet goed werkt op pagina “s zonder anker-ID, dus het maken van een globaal menu zoals dit op een website met meerdere pagina” s is geen goed idee.
Stap 3. Voorwaarden instellen
Nadat je je menu hebt gemaakt, klik je op het tabblad Locaties beheren . Klik onder een van de opgegeven menulocaties op + Voorwaardelijk menu en vervolgens op + Voorwaarden. Je kunt de voorwaarden zo instellen dat het menu alleen op bepaalde pagina’s verschijnt.
Gebruik een WordPress plugin om ankerlinks toe te voegen
Tot slot kun je een plugin installeren als alle bovenstaande methoden te tijdrovend zijn.
Er zijn veel plugins die je kunnen helpen bij het maken van ankerlinks, waaronder return-to-top-links, maar laten we een van de beste plugins eens uitlichten: Eenvoudige inhoudsopgave.
Deze plugin werkt met Gutenberg, de Classic Editor en zelfs page builders. Je kunt ToC’s handmatig invoegen of zo instellen dat ze automatisch in elke blogpost en pagina worden ingevoegd.
Beste praktijken voor ankerlinks
Nu je weet hoe je ankerlinks kunt maken in WordPress, kun je deze tips volgen om ze goed te implementeren.
Plaats ankerlinks strategisch
Plaats ankerlinks op de juiste pagina “s. Of het nu gaat om een ToC of een manier om snel FAQ” s door te nemen, stel UX voorop.
Plaats ankerlinks op de juiste pagina “s. Of het nu gaat om een ToC of een manier om snel FAQ” s door te nemen, stel UX voorop.
Houd ook rekening met de UX op verschillende apparaten en waar ankerlinks mobiele gebruikers ten goede kunnen komen. Iets dat goed past op een computermonitor kan veel overweldigender aanvoelen op een telefoon.
Gebruik de juiste ankertekst
Ankertekst is hier net zo belangrijk als voor elke interne of externe link. Goede ankertekst verbetert SEO door zoekmachines te helpen de structuur van je pagina te categoriseren en het intuïtief te houden voor bezoekers.
Gebruik duidelijke en directe bewoordingen zodat gebruikers precies weten waar een spronglink hen naartoe brengt. Als je bijvoorbeeld een ToC gebruikt, gebruik dan identieke bewoordingen voor de koppen waar elke link je naartoe brengt. Vermijd algemene bewoordingen zoals “klik hier”.
Vermijd rommel
Zorg voor een gestructureerde lay-out door ankerlinks te gebruiken om je inhoud te organiseren. Weersta de drang om te veel ankerlinks te gebruiken op pagina’s die ze niet nodig hebben of om te veel ankerlinks op één pagina te gebruiken. Een enkele ToC en een back-to-top link zijn meestal voldoende.
Zorg er bovendien voor dat je ankerlinks niet in een nieuw tabblad openen, want dat werkt averechts.
Test je ankerlinks
Test regelmatig je ankerlinks, vooral na het bijwerken van inhoud of het wijzigen van koppen. Probeer de ankerlinks op meerdere apparaten en browsers, inclusief schermlezers.
Houd hier rekening met de algehele UX. Voelt het scherm krap of onoverzichtelijk aan na het scrollen? Heb je meer witruimte nodig? Is er tekst verborgen onder je sticky header bovenaan?
Geef je ankerlinks stijl
Onderscheid ankerlinks van interne of externe links door middel van labeling of styling. Overweeg om “sticky” ankerlinks in te stellen die gebruikers volgen terwijl ze scrollen in plaats van ankerlinks in de inhoud zelf, of om accordeons te maken die je ToC netjes verbergen onder een aanklikbaar element.
Maak in het algemeen duidelijk dat deze springlinks de gebruiker helpen bij het navigeren op de pagina.
Laatste gedachten: Hoe ankerlinks maken in WordPress
UX verbeteren is altijd een goed doel. Tevreden gebruikers blijven langer, bekijken meer pagina’s en zullen uiteindelijk eerder loyale klanten worden.
Ankerlinks, hoewel een kleine functie, kunnen een aanzienlijke impact hebben. Dit is slechts één kleine maar effectieve manier om de UX van je WordPress website te verbeteren.
Een andere manier om de UX te verbeteren is door een snellere hostingprovider te gebruiken, zodat traag ladende pagina’s je bezoekers niet weg laten klikken.
Bluehost biedt betaalbare WordPress hosting met een Cloudflare content delivery network (CDN) voor topprestaties en snelheden. We bieden ook een snelle en eenvoudige installatie plus 24/7 ondersteuning, zodat je altijd toegang hebt tot hulp wanneer je die nodig hebt.
