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? 😉
Wat zijn anchor links?
Anchor links, ook wel jump menu links of inhoudsopgave genoemd, zijn links die je rechtstreeks naar een bepaald deel van de pagina (of naar een externe pagina) brengen. De bestemmingen van anchor links worden meestal gespecificeerd met behulp van het A element (het benoemen met het name attribuut) of met een ander element (het benoemen met het ID attribuut). Beide methoden zijn volledig in overeenstemming met de W3C standaarden (bron).
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.
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.
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
- Een van de grootste voordelen van anchor links is het creëren van een betere gebruikerservaring voor mensen die je site bezoeken. Dit geldt vooral voor zogenaamde long-form artikelen. Omdat wij veel uitgebreide content (meer dan 4.000 woorden) publiceren, kan veel scrollen al snel vervelend worden. Door gebruik te maken van anchor links kan de gebruiker rechtstreeks naar het gedeelte gaan waarin hij of zij geïnteresseerd is. Laat je gebruikers sneller vinden wat ze nodig hebben.
- Met anchor links in headers kun je rechtstreekse links naar verschillende onderdelen binnen een artikel delen. Dit is geweldig voor sociale media en zelfs voor supportteams. Ons Kinsta ondersteuningsteam is bijvoorbeeld sterk afhankelijk van de anchor links in onze Kennisbank artikelen, zodat we de gebruiker naar de exacte stappen kunnen sturen die hij of zij moet volgen om een probleem op te lossen. Om sneller antwoord te kunnen geven op vragen over Kinsta, maakt ons verkoopteam hier ook handig gebruik van.
- Als het gaat om de resultatenpagina’s van zoekmachines (SERP’s), hangt het ervan af hoe zoekmachines je content laten zien. We hebben echter keer op keer de anchor links (snelkoppelingen) zien verschijnen in de SERPS, omdat we deze in onze artikelen hebben gebruikt. Ze zijn geweldig omdat ze je in feite een extra tekstregel geven voor je organische vermelding. Ze kunnen ook helpen om de CTR te verhogen, omdat de gebruiker iets kan zien met betrekking tot zijn of haar zoekopdracht dat je niet in de metabeschrijving of -titel hebt vermeld.
Anchor links in Google voorbeeld - • Anchor links kunnen ook gebruikt worden voor andere zaken, zoals de link “return to top” die Wikipedia gebruikt samen met zijn citaten ^ of voetnoten. [1]
Nadelen
Hoewel we vinden dat de voordelen zeker opwegen tegen de nadelen, zijn er enkele nadelen die je misschien in overweging wilt nemen.
- Anchor links of een inhoudsopgave kan de gemiddelde tijd die een bezoeker op je site doorbrengt, verminderen. Waarom? Omdat ze rechtstreeks naar de gewenste inhoud klikken in plaats van je volledig artikel te lezen. Als je je bezoeker echter (vanaf het moment dat ze op de link klikken) beter kan bedienen, kan dit er wel toe leiden dat hij of zij zich aanmeldt voor je nieuwsbrief of gaat bekijken wat je verkoopt. Dit kan dus zowel een voor- als een nadeel zijn.
- Direct gerelateerd aan bovenstaande kwestie, kunnen anchor links invloed hebben op je advertentie-inkomsten. Bezoekers die rechtstreeks naar een bepaald onderdeel gaan, kunnen het aantal weergaven en kliks verminderen. Sites die sterk afhankelijk zijn van reclame zouden een AB test kunnen doen met anchor links en een inhoudsopgave.
- Als je van domeinnaam verandert of 301-omleidingen moet toevoegen, is het belangrijk om op te merken dat de fragmentidentificatie (#) nooit naar de server wordt gestuurd. Als je later je anchor links aanpast, kan dit namelijk problemen veroorzaken. Er zijn manieren om dit te omzeilen met JavaScript, maar dit is zeker geen gemakkelijke opdracht.
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. 😁
- Handmatig anchor links maken in WordPress
- Anchor links maken in WordPress met een plugin
- Anchor links maken in WordPress met Gutenberg
- Anchor links maken in WordPress met Chrome Extension
Handmatig anchor links maken in WordPress
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.
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>Anchor links maken in WordPress met een plugin
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.
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.
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.
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.
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 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.
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”.
- Met de optie “Enable support” kun je kiezen voor welk soort berichten je de inhoudsopgave wilt gebruiken. Waarschijnlijk is dit je “Berichten” type.
- Vervolgens kun je kiezen of je een inhoudsopgave automatisch wilt laten invoegen of dat je deze handmatig wilt invoegen. We raden je aan om handmatig te werken als je berichten regelmatig veranderen.
- Met de optie “Show when” kun je bepalen hoeveel koppen het bericht moet hebben voordat er een inhoudsopgave verschijnt. Omdat je waarschijnlijk niet wilt dat er een inhoudsopgave bij een kort blogbericht verschijnt, kun je best minstens vier headers hebben.
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.
De inhoudsopgave wordt vervolgens automatisch gegenereerd voor alle headers in het bericht. Hoe gaaf is dat?
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.
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.
Anchor links maken in WordPress met Gutenberg
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.
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 links maken in WordPress met Chrome Extension
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.
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.
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”.
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.
Brian heeft een enorme passie voor WordPress, gebruikt het al meer dan tien jaar en heeft zelfs al aantal premium plugins ontwikkeld. Brian houdt van bloggen, films en hikes. Kom in contact met Brian op Twitter.
Laat een reactie achter