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. <\/p>\n\n
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.<\/p>\n\n
Het verbeteren van de gebruikerservaring<\/a> (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.<\/p>\n\n Voordat we meer vertellen over ankerlinks, moeten we eerst bekijken wat een hyperlink is.<\/p>\n\n 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<\/a>, die naar dezelfde website verwijzen, en externe links, die naar een andere website verwijzen. <\/p>\n\n De anatomie van een hyperlink omvat de zichtbare tekst, bekend als de ankertekst, en de Uniform Resource Locator<\/a> (URL) waarnaar de link verwijst. Bijvoorbeeld, in de zin \u201cbezoek Bluehost<\/a> voor snelle webhosting,\u201d is de onderstreepte zin \u201cbezoek Bluehost\u201d de ankertekst. <\/p>\n\n In HyperText Markup Language (HTML) zou die hyperlink er als volgt uitzien:<\/p>\n\n <a href=\u201chttps:\/\/www.bluehost.com\/\u201d>bezoek Bluehost<\/a> <\/strong><\/p>\n\n 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. <\/p>\n\n 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<\/a>: <\/p>\n\n 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 \u201cWhat Website Structure Is\u201d de URL van https:\/\/www.bluehost.com\/blog\/website-structuring naar https:\/\/www.bluehost.com\/blog\/website-structuring\/#What-Website-Structure-Is. <\/p>\n\n 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: <\/p>\n\n 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.<\/p><\/blockquote><\/figure>\n\n Hulp nodig om te bepalen waar ankerlinks op je website moeten worden geplaatst? Hier zijn een paar idee\u00ebn: <\/p>\n\n 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\u00efnvloeden. Kijk uit voor deze potenti\u00eble problemen: <\/p>\n\n Gelukkig zijn veel van deze problemen eenvoudig op te lossen. Houd ze in gedachten als je ankerlinks aan je website toevoegt. <\/p>\n\n 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. <\/p>\n\n Laten we eerst stap voor stap een ankerlink maken met de Gutenberg Block Editor.<\/p>\n\n Dit kan een kop, paragraafblok, afbeelding of iets anders zijn.<\/p>\n\n Je vindt het tabblad Instellingen<\/strong> in de rechterbovenhoek en de vervolgkeuzelijst Geavanceerd<\/strong> in het geopende paneel.<\/p>\n\n Dit staat op het tabblad Geavanceerd. Als je het niet ziet, probeer dan een ander bloktype, zoals een kop. <\/p>\n\n 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. <\/p>\n\n Om dit te doen voegt u de tekst, afbeelding of knop toe die uw klikbare jump link wordt.<\/p>\n\n Markeer het, selecteer de linkknop en typ het HTML-anker in dat je eerder hebt ingesteld, met een hashtag ervoor. Als je anchor-tag \u201cvoorbeeld\u201d was, typ dan \u201c#voorbeeld\u201d. <\/p>\n\n Test het in een voorbeeld en je zou onmiddellijk naar het ankerpunt moeten springen dat je hebt ingesteld.<\/p>\n\n 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. <\/p>\n\n In de rechterbovenhoek van het bewerkingsgebied zie je twee tabbladen, Visueel<\/strong> en Tekst<\/strong>. Klik op Tekst<\/strong> om over te schakelen. <\/p>\n\n Zoek het element waar je naartoe wilt springen. In dit voorbeeld gebruiken we een kop die er zo uitziet: <\/p>\n\n Voeg een \u201cid\u201d tag toe met de gewenste naam voor het anker. Zo zou het eruit moeten zien: <\/p>\n\n 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>\n\n Schakel terug naar de Visuele<\/strong> editor en voeg het element toe waarop gebruikers zullen klikken om naar de gewenste sectie te springen.<\/p>\n\n Markeer het, selecteer de linkknop en typ dan de anchor-ID die je eerder hebt ingesteld, plus een hashtag. In dit voorbeeld typen we \u201c#anchor-link-two\u201d. <\/p>\n\n Net als bij de Gutenberg-editor gebruikt u het voorbeeldscherm om het uit te testen en te controleren of het werkt.<\/p>\n\n Net als in het bovenstaande voorbeeld kun je HTML gebruiken om direct een ankerlink te maken. Zo doe je dat. <\/p>\n\n Geef het anker eerst een naam. Je kunt dit doen met de HTML-tag \u201cid\u201d, die je bijna overal kunt plaatsen. Hier zijn een paar voorbeelden: <\/p>\n\n 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: <\/p>\n\n 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: <\/p>\n\n 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. <\/p>\n\n 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<\/strong> te selecteren.<\/p>\n\n 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.<\/p>\n\n Tot slot kun je de HTML van het thema bewerken door te navigeren naar Tools<\/strong> > Theme file editor<\/strong>, hoewel het niet aan te raden is om dit direct te bewerken. In plaats daarvan kun je een child theme<\/a> instellen. <\/p>\n\n 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 \u00e9\u00e9n pagina. <\/p>\n\n Door dit te combineren met de Conditional Menus<\/a> 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: <\/p>\n\n 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. <\/p>\n\n Navigeer in het WordPress dashboard naar Uiterlijk<\/strong> > Menu’s<\/strong>. Maak een menu en klik vervolgens op de vervolgkeuzelijst Aangepaste koppelingen<\/strong>. Voeg de anker-ID in die je hebt gemaakt, met een hashtag ervoor, en klik vervolgens op Toevoegen aan menu.<\/strong> <\/p>\n\n Onthoud dat dit niet goed werkt op pagina \u201cs zonder anker-ID, dus het maken van een globaal menu zoals dit op een website met meerdere pagina\u201d s is geen goed idee.<\/p>\n\n Nadat je je menu hebt gemaakt, klik je op het tabblad Locaties beheren <\/strong>. Klik onder een van de opgegeven menulocaties op + Voorwaardelijk menu<\/strong> en vervolgens op + Voorwaarden<\/strong>. Je kunt de voorwaarden zo instellen dat het menu alleen op bepaalde pagina’s verschijnt. <\/p>\n\n Tot slot kun je een plugin installeren<\/a> als alle bovenstaande methoden te tijdrovend zijn.<\/p>\n\n 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<\/a>.<\/p>\n\n 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. <\/p>\n\n Nu je weet hoe je ankerlinks kunt maken in WordPress, kun je deze tips volgen om ze goed te implementeren.<\/p>\n\n Plaats ankerlinks op de juiste pagina \u201cs. Of het nu gaat om een ToC of een manier om snel FAQ\u201d s door te nemen, stel UX voorop. <\/p>\n\n Plaats ankerlinks op de juiste pagina \u201cs. Of het nu gaat om een ToC of een manier om snel FAQ\u201d s door te nemen, stel UX voorop. <\/p><\/blockquote><\/figure>\n\n 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. <\/p>\n\n Ankertekst is hier net zo belangrijk als voor elke interne of externe link. Goede ankertekst verbetert SEO<\/a> door zoekmachines te helpen de structuur van je pagina te categoriseren en het intu\u00eftief te houden voor bezoekers.<\/p>\n\n 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 \u201cklik hier\u201d. <\/p>\n\n 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 \u00e9\u00e9n pagina te gebruiken. Een enkele ToC en een back-to-top link zijn meestal voldoende. <\/p>\n\n Zorg er bovendien voor dat je ankerlinks niet in een nieuw tabblad openen, want dat werkt averechts.<\/p>\n\n 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. <\/p>\n\n 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? <\/p>\n\n Onderscheid ankerlinks van interne of externe links door middel van labeling of styling. Overweeg om \u201csticky\u201d 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. <\/p>\n\n Maak in het algemeen duidelijk dat deze springlinks de gebruiker helpen bij het navigeren op de pagina.<\/p>\n\n UX verbeteren is altijd een goed doel. Tevreden gebruikers blijven langer, bekijken meer pagina’s en zullen uiteindelijk eerder loyale klanten worden. <\/p>\n\n Ankerlinks, hoewel een kleine functie, kunnen een aanzienlijke impact hebben. Dit is slechts \u00e9\u00e9n kleine maar effectieve manier om de UX van je WordPress website te verbeteren. <\/p>\n\n 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.<\/p>\n\n Bluehost biedt betaalbare WordPress hosting<\/a> met een Cloudflare content delivery network<\/a> (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. <\/p>\n","protected":false},"excerpt":{"rendered":" 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 […]<\/p>\n","protected":false},"author":50,"featured_media":213083,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_title":"Hoe ankerlinks maken in WordPress (5 manieren) | Bluehost","_yoast_wpseo_metadesc":"Op zoek naar een snelle manier om de gebruikerservaring te verbeteren? Het kost maar een minuutje om te leren hoe je ankerlinks maakt in WordPress, en ze helpen bezoekers enorm.","inline_featured_image":false,"footnotes":""},"categories":[2356,2384],"tags":[3545,3558,3571,3561,3568],"ppma_author":[588],"class_list":["post-213076","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-inloggen","category-seo","tag-cms-nl","tag-gidsen","tag-lesmateriaal","tag-navigatie","tag-tips-en-trucs"],"acf":[],"yoast_head":"\nWat is een hyperlink?<\/h2>\n\n
![\"Hyperlinks](\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2024\/02\/Hyperlink-Anatomy.png\")
<\/figure>\n\nWat is een ankerlink?<\/h2>\n\n
![\"Een](\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2024\/02\/Sample-Anchor-Link.png\")
<\/figure>\n\nWaarom je ankerlinks moet gebruiken<\/h2>\n\n
\n
![\"Ankerlinks](\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2024\/02\/Anchor-Links-in-Google-SERPs.png\")
<\/figure>\n\n\n
Wanneer je ankerlinks moet gebruiken<\/h3>\n\n
\n
Uitdagingen van het gebruik van ankerlinks<\/h3>\n\n
\n
Hoe ankerlinks maken in WordPress<\/h2>\n\n
Ankerlinks maken in de Gutenberg blok-editor<\/h3>\n\n
Stap 1: Voeg het blok toe waar je naartoe wilt springen<\/h4>\n\n
![\"Je](\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2024\/02\/Wordpress-Anchor-ID-Attributes.png\")
<\/figure>\n\nStap 2: Open het tabblad Instellingen en klik op de vervolgkeuzelijst Geavanceerd<\/h4>\n\n
Stap 3: Zoek het HTML-ankerinvoervak<\/h4>\n\n
Stap 4: Link naar je anker<\/h4>\n\n
![\"Je](\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2024\/02\/Block-Editor-Anchor-Links.png\")
<\/figure>\n\nAnkerlinks toevoegen in de klassieke editor<\/h3>\n\n
Stap 1: Overschakelen naar de teksteditor<\/h4>\n\n
Stap 2: De anker-ID toevoegen<\/h4>\n\n
<h2>Anchor Link 2<\/h2> <\/strong><\/code><\/pre>\n\n<h2 id=\"anchor-link-two\">Anchor Link 2<\/h2> <\/strong><\/code><\/pre>\n\n![\"Je](\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2024\/02\/Classic-Editor-Anchor-ID-Tag.png\")
<\/figure>\n\n<p id=\"anchor-link-two\">Anchor Link 2<\/p> <\/strong><\/code><\/pre>\n\nStap 3: Link naar je anker<\/h4>\n\n
![\"Een](\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2024\/02\/Add-Anchor-Tag-Classic-Editor.png\")
<\/figure>\n\nHandmatig ankerlinks maken met HTML<\/h3>\n\n
Stap 1: Maak een anchor-tag<\/h4>\n\n
\u2022 <a id=\"anchor-example\"><\/a>\n\u2022 <h1 id=\"anchor-example\">Heading example<\/h1>\n\u2022 <p id=\"anchor-example\">Example text.<\/p>\n\u2022 <span id=\"anchor-example\"><\/span><\/strong><\/code><\/pre>\n\nStap 2: Link naar de anchor-tag<\/h4>\n\n
<a href=\"#anchor-example\">Example link.<\/a> <\/strong><\/code><\/pre>\n\nStap 2: Link naar de anchor-tag<\/h4>\n\n
<a href=\"#anchor-example\">Example link.<\/a><\/strong><\/code><\/pre>\n\nStap 3. De HTML-code invoegen <\/h4>\n\n
![\"Je](\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2024\/02\/Anchor-ID-HTML-Edit.png\")
<\/figure>\n\n![\"Je](\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2024\/02\/Access-Code-Editor.png\")
<\/figure>\n\nAnkerlinks toevoegen aan een WordPress menu-item<\/h3>\n\n
Stap 1. Een anker-ID maken <\/h4>\n\n
Stap 2. Ankerlink toevoegen aan menu <\/h4>\n\n
![\"Zelfs](\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2024\/02\/Menu-Items-Anchor-Links.png\")
<\/figure>\n\nStap 3. Voorwaarden instellen <\/h4>\n\n
![\"Als](\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2024\/02\/Setting-Menu-Conditions.png\")
<\/figure>\n\nGebruik een WordPress plugin om ankerlinks toe te voegen<\/h3>\n\n
![\"De](\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2024\/02\/Easy-Table-of-Contents-Plugin.png\")
<\/figure>\n\nBeste praktijken voor ankerlinks<\/h2>\n\n
Plaats ankerlinks strategisch<\/h3>\n\n
Gebruik de juiste ankertekst<\/h3>\n\n
Vermijd rommel<\/h3>\n\n
Test je ankerlinks<\/h3>\n\n
Geef je ankerlinks stijl<\/h3>\n\n
Laatste gedachten: Hoe ankerlinks maken in WordPress<\/h2>\n\n