Anchor links is geen onderwerp waar je veel over hoort en dat is zonde! Wij hebben er namelijk uitstekende resultaten mee behaald. Vandaag leggen we je uit hoe je anchor links kunt maken in WordPress en bespreken we waarom ook jij ze zou kunnen gebruiken. Onze ervaring is dat anchor links kunnen helpen om de gebruikerservaring te verbeteren, het navigeren van lange content een stuk makkelijker te maken en je zelfs een klein voordeel te geven in Google. En wie wil er nou geen gratis voordeel in Google? 😉

Voorbeeld van een anchor link

Je hoeft je geen zorgen te maken als je nog steeds niet goed weet wat anchor links zijn. Bekijk onderstaande voorbeeldafbeelding. We gebruiken anchor links voor elk opgesomd item in deze lijst. Wanneer je op deze items klikt, ga je direct naar de H2 header die deze inhoud bevat. Je kunt deze zelf verderop in dit bericht bekijken. Anchor links kunnen voor alles worden gebruikt, zoals tekst, afbeeldingen en H1-H6 headers.

Anchor links

Anchor links

Op veel sites worden anchor links alleen gebruikt om een inhoudsopgave te maken aan het begin van lange artikelen. Als je een beetje vertrouwd bent met CSS, kun je deze op een creatieve manier wat stijlvoller maken, zoals we hebben gedaan op onze landingspagina’s.

Anchor links voor een long-form artikel

Anchor links voor een long-form artikel

Op andere sites zie je misschien geen anchor links, maar worden ze wel gebruikt voor headers. Zo kunnen ze links delen die rechtstreeks linken naar een bepaald onderdeel.

Voor- en nadelen van anchor links

Omdat wij iets doen, betekent het niet dat jij dat natuurlijk ook moet doen. Hier zijn enkele voor- en nadelen waar je rekening mee moet houden wanneer je anchor links op je WordPress site gebruikt.

Voordelen

Nadelen

Hoewel we vinden dat de voordelen zeker opwegen tegen de nadelen, zijn er enkele nadelen die je misschien in overweging wilt nemen.

Anchor link overgang

Je zou ook kunnen overwegen om de anchor link overgang aan te passen. Standaard zal de anchor link plotseling naar het ID verderop op de pagina springen. Omdat sommige mensen dit vervelend vinden, kun je dit veranderen in een soepele scrollende overgang. Dit is wat we ook doen op de Kinsta blog. Je kunt gebruik maken van een gratis plugin, zoals Page scroll to id, of CSS toevoegen aan je site, zoals scroll-behavior: smooth;. Dit bericht van Stack Overflow heeft enkele extra tips voor ontwikkelaars.

Zoals bij de meeste WordPress tips zijn er verschillende manieren om anchor links toe te voegen in WordPress. Bekijk deze vier verschillende eenvoudige methodes. En ja, onderstaande links maken gebruik van anchor tekst. 😁

De eerste manier om anchor links te maken in WordPress is door dit eenvoudigweg handmatig met HTML te doen in elk van je berichten. Laten we er een maken zodat je kunt zien hoe ze werken.

Stap 1

Maak de tekst voor je link en voeg er een hyperlink aan toe op dezelfde manier zoals je dat voor elke andere link zou doen.

Een anchor link maken met HTML

Een anchor link maken met HTML

Stap 2

In plaats van het te koppelen aan een URL, bericht of pagina, geef je het een anchor naam. URL’s die anchors aanduiden bevatten een “#”-teken gevolgd door de anchor naam. Je kunt dit elke naam geven die je wil, hoewel we meestal aanraden om anchor namen kort te houden en ze te laten verwijzen naar de eigenlijke naam van de header.

Als je naar de tekstweergave (HTML) kijkt, ziet deze er als volgt uit:

<a href="#manually-create-anchor-links-wordpress">How to Manually Create Anchor Links in WordPress</a>

Hier is een voorbeeld van anchor links die we in dit artikel gebruiken:

<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>

Stap 3

Vervolgens moet je een ID toevoegen aan de header waar je je anchor link naartoe wilt laten springen. Hiervoor moet je in de WordPress editor overschakelen naar de tekstweergave (HTML). In de header, in dit geval een H2 header, voeg je het ID toe samen met de anchor naam die je in stap 2 hebt gekozen. De anchor naam en het ID-attribuut moeten exact hetzelfde zijn om de link te laten werken.

<h2 id="manually-create-anchor-links-wordpress">How to Manually Create Anchors Link in WordPress</h2>

Wil je niet elke keer opnieuw HTML code gebruiken? Geen probleem, want er zijn enkele geweldige gratis WordPress plugins waarmee je eenvoudig anchor links en zelfs een inhoudsopgave aan elk bericht kunt toevoegen.

Een anchor link toevoegen met een plugin

Een van de eenvoudigste manieren om een anchor link toe te voegen is met de gratis TinyMCE Advanced plugin. Deze plugin voegt eigenlijk extra functionaliteit toe aan de editor met snelkoppelingen. Op het moment dat we dit bericht schrijven, heeft deze plugin meer dan 2 miljoen actieve installaties met een beoordeling van 4,5 op 5 sterren.

TinyMCE Advanced WordPress plugin

TinyMCE Advanced WordPress plugin

Stap 1

Nadat je de plugin hebt geïnstalleerd en geactiveerd, ga je naar je bericht en maak je een hyperlink voor je anchor tekst. In plaats van dit te koppelen aan een URL, bericht of pagina, geef je het een anchor naam met een # ervoor.

Anchor naam toevoegen

Anchor naam toevoegen

Stap 2

Markeer de header waar je het aan wilt koppelen. Klik dan bovenaan op de knop “Insert” en selecteer “Anchor”. Deze knop verschijnt in de editor dankzij de TinyMCE Advanced plugin.

Anchor toevoegen

Anchor toevoegen

Stap 3

Voer de anchor naam in die je het in Stap 1 hebt gegeven en klik op “OK”. Deze plugin bespaart je tijd, want je hoeft nooit de visuele editor weergave te verlaten. Als je het handmatig met HTML doet, moet je heen en weer springen tussen de visuele editor en de tekst editor (HTML) weergave.

Anchor ID

Anchor ID

Inhoudsopgave toevoegen met een plugin

Misschien wil je het proces nog meer versnellen. 😄 Als je veel uitgebreide inhoud schrijft en altijd een inhoudsopgave (anchor link-lijsten/snelkoppelingen) in je berichten wilt opnemen, moet je gebruikmaken van een inhoudsopgaveplugin.

Een betere gebruikservaring begint bij een betere websitehost. Probeer Kinsta gratis.

Een van de beste gratis plugins is Easy Table of Contents. Deze plugin genereert automatisch anchor links voor je headers en laat je je inhoudsopgave overal in je bericht invoegen met een eenvoudige shortcode. Op het moment dat we dit artikel schrijven, heeft deze plugin meer dan 30.000 actieve installaties met een beoordeling van 4,5 uit 5 sterren.

Easy Table of Contents WordPress plugin

Easy Table of Contents WordPress plugin

Stap 1

Nadat je de plugin hebt geïnstalleerd en geactiveerd, zijn er enkele instellingen die je waarschijnlijk wilt wijzigen. Deze kun je vinden onder “Instellingen → Table of Contents”.

Easy Table of Contents instellingen

Easy Table of Contents instellingen

Stap 2

Om de inhoudsopgave handmatig in te voegen, voeg je eenvoudigweg de shortcode [ez-toc] in op de plaats waar je deze in het bericht wilt laten zien.

EZ-TOC shortcode

EZ-TOC shortcode

De inhoudsopgave wordt vervolgens automatisch gegenereerd voor alle headers in het bericht. Hoe gaaf is dat?

WordPress inhoudsopgave

WordPress inhoudsopgave

Je kunt ook meer wijzigingen aanbrengen in de instellingen met betrekking tot wat er te zien moet zijn, zoals weergave en uitsluitingen. Zo heb je misschien altijd een header “Samenvatting” aan het einde van je berichten. In de instellingen kun je die header toevoegen aan de lijst met uitsluitingen, zodat deze niet wordt opgenomen in de inhoudsopgave.

Een andere inhoudsopgaveplugin waarin je mogelijk geïnteresseerd in bent, is Shortcode Table of Contents. Dit is een wat nieuwere plugin die ontwikkeld werd door James Kemp. Eerder hadden we de eer om deze man te mogen interviewen.

Anchor links automatisch toevoegen aan headers met een plugin

Wil je eenvoudig automatisch anchor links toevoegen aan al je headers? Dan moet je de gratis plugin WP Anchor Header eens bekijken. Deze zal anchor links toevoegen aan al je H1-H6 headers.

WP Anchor Header plugin

WP Anchor Header plugin

Dit is een zeer eenvoudige plugin en er zijn geen instellingen. Je hoeft hem alleen maar te installeren en te activeren. Elke header krijgt automatisch een anchor naam (afgeleid van de header naam) en zelfs een klein cool anchor pictogram dat verschijnt als je met de muis over de header beweegt. Hierdoor kunnen bezoekers gemakkelijk zien dat er een link is die ze indien gewenst kunnen kopiëren.

Automatische anchor links voor headers

Automatische anchor links voor headers

De nieuwe Gutenberg editor is er reeds en werd samen met WordPress 5.0 uitgebracht. Deze bevat verbeterde en ingebouwde ondersteuning om anchor ID’s aan headers toe te voegen.

Stap 1

Selecteer de header in het Gutenbergblok en klik aan de rechterkant op “Advanced”. Vervolgens zie je een optie om een HTML anchor toe te voegen.

HTML-anchor toevoegen in Gutenberg editor

HTML-anchor toevoegen in Gutenberg editor

Stap 2

Als je ernaar wilt linken, maak je gewoon een hyperlink voor je anchor tekst. In plaats van het te linken naar een URL, bericht of pagina, geef je het een anchor naam met een # ervoor.

Anchor link toevoegen in Gutenberg

Anchor link toevoegen in Gutenberg

Wil je geen anchor links met HTML maken of een plugin installeren? Dan is de gratis Anchor Links Chrome extension misschien iets voor jou. Deze is volledig compatibel met self-hosted WordPress, WordPress.com en Medium.

Stap 1

Nadat je de Chrome extensie hebt geïnstalleerd, markeer je eenvoudigweg de header waarop je de anchor link wilt aanbrengen. Klik vervolgens op het kleine pictogram van de Anchor Link Chrome extensie in de toolbar van je browser.

Anchor link toevoegen Chrome extensie

Anchor link toevoegen Chrome extensie

Achter de schermen wordt het anchor ID aangemaakt (afgeleid van de header naam). In dit voorbeeld: #Header_1. Wanneer je op het pictogram klikt, wordt dit automatisch naar je klembord gekopieerd.

Gekopieerd naar klembord

Gekopieerd naar klembord

Stap 2

Ga vervolgens naar de tekst waar je de anchor link aan wilt toevoegen, maak een hyperlink zoals je normaal gesproken zou doen, en klik op “Paste”.

Anchor link toevoegen

Anchor link toevoegen

Dat is alles! De Chrome extensie maakt het snel en gemakkelijk zonder afhankelijk te zijn van externe plugins.

Samenvatting

Zoals je kunt zien, zijn er veel creatieve manieren om anchor links toe te voegen in WordPress. Sommige zijn makkelijker dan andere. Als je regelmatig langere inhoud publiceert, helpt dit je bezoekers om rechtstreeks naar de gewenste inhoud te gaan. We hebben ook gezien dat anchor links helpen bij het krijgen van “jump to menus” in SERP’s. Dit helpt om de CTR van je organische vermelding te verhogen.

Gebruik je al anchor links op je WordPress site? Zo ja, dan horen we graag je mening of ervaring.


Als je dit artikel leuk vond, dan ga je Kinsta’s WordPress hosting platform ook heel erg leuk vinden! Of het nu gaat om het versnellen van je website of de 24/7 support van ons ervaren WordPress-team. Onze door Google Cloud aangedreven infrastructuur is gericht op automatische schaalbaarheid, prestaties en beveiliging. Laat ons jou het Kinsta verschil tonen! Bekijk onze pakketten