Heb je wel eens op een website gezeten waar een handige snelle navigatie op gebruikt werd waarmee je snel naar een stuk tekst kon springen? Hier wordt slim gebruik gemaakt van anchor links. Wat dit zijn en hoe je ze kunt gebruiken vertellen we je in dit artikel.
Wat is een anchor link?
Wat is een anchor link dan precies? Anchor links, die ook wel vaak jump links worden genoemd zijn links die direct naar een bepaalde sectie op een webpagina springen. De bestemming van een anchor link wordt met het href-attribuut benoemd en de bestemming / sectie van de pagina wordt met het name-attribuut van het A element benoemd. Geen stress, we leggen het verder in dit artikel uit.
Voorbeeld van een anchor link navigatie
Om je gelijk een leuke ervaring te geven met anchor links heb ik ze ook hier in dit artikel opgenomen:
Snelle navigatie- Wat is een anchor link?
- Voor- en nadelen van anchor links
- Hoe werken anchor links en hoe krijg ik ze?
- Handmatig anchor links maken
Aan het eind van dit artikel zal ik de code van de snelle navigatie hierboven met jullie delen.
Op veel websites wordt dus slim gebruik gemaakt van anchor links. Waarom is dat slim zul je nu wel denken? Uit onze ervaring blijkt dat anchor links kunnen helpen om de gebruikerservaring van je bezoekers te verbeteren en het navigeren van lange stukken content makkelijker te maken. Het is niet alleen slim om je bezoekers een betere gebruikerservaring te geven maar Google geeft je hierdoor ook een leuk voordeel mee als jouw website wordt vertoond in de zoekresultaten.
Wat we dus zeker weten is dat Google meer liefde krijgt voor je website als je gebruik maakt van anchor links. Dat willen we toch allemaal? Lang leve Google!
“First, ensure that long, multi-topic pages on your site are well-structured and broken into distinct logical sections. Second, ensure that each section has an associated anchor with a descriptive name (i.e., not just ‘Section 2.1′), and that your page includes a ’table of contents’ which links to the individual anchors.”
Google Webmaster Central
Voor- en nadelen van anchor links
Zoals we in het begin van dit artikel al hebben vermeld is het gebruik maken van anchor links een must voor betere gebruikerservaring en krijg je van Google ook nog eens wat extra grond toegekend in de zoekresultaten, helemaal gratis. Maar aan alles wat mooi is in het leven zit er ook een donkere kant aan het gebruik maken van anchor links. Hieronder hebben we de voor- en nadelen van anchor links voor jullie samengesteld:
Voordelen
- Het grootste voordeel van anchor links is het creëren van betere gebruikerservaring voor je website bezoekers. Als je in een blog artikel uitgebreide content moet behandelen en je uiteindelijk meer dan 1000 woorden hebt geschreven dan kan het vinden van de gezochte informatie erg irritant worden voor je bezoeker. Door het gebruiken van anchor links kan jouw bezoeker rechtstreeks naar het gedeelte navigeren waarin hij of zij naar op zoek is.
- Wanneer Google je website crawlt en anchor links tegenkomt worden deze als snelkoppelingen vertoont op de resultatenpagina van Google. Ze geven je dus in feite een extra regel met links als je met die specifieke pagina wordt vertoont op Google. Dit zorgt er dan ook weer voor dat je CTR (doorklik ratio) wordt verhoogt omdat de zoeker wellicht direct kan vinden waar hij of zij naar op zoek is.
Nadelen
- Aan het krijgen van een betere gebruikerservaring zit ook weer een keerzijde en dat is in dit geval de gemiddelde tijd die de bezoeker op je site doorbrengt. Waarom? Als je bezoeker rechtstreeks naar de gewenste content kan klikken dan is er weinig kans dat hij of zij het volledige artikel nog gaat doornemen.
- Met betrekking tot het bovenste kan het er dus ook voor zorgen dat jou CTA’s (call to actions) gewoon worden overgeslagen omdat de bezoeker niet meer langs andere content en dus ook jouw CTA’s hoeft te scrollen en je hierdoor leads misloopt.
Conclusie
Al met al zijn wij er van overtuigd dat het gebruik maken van anchor links uiteindelijk toch voor de beste gebruikerservaring zorgt en geloven wij erin dat Google hierdoor een voorkeur heeft voor jouw webpagina wat dus kan leiden tot betere posities in de zoekmachine!
Hoe werken anchor links en hoe krijg ik ze?
Op welke manier kan ook jij gebruik maken van anchor links op je webpagina’s? De simpele manier, waar ik zelf nooit fan van ben, is het gebruik maken van plugins. Veel WordPress gebruikers grijpen snel naar plugins waardoor de website uiteindelijk door tientallen plugins bij elkaar wordt gehouden. Ga je voor de ‘easy way’ bekijk dan de wordpress anchor link plugins hier. Met een beetje basiskennis van HTML kun je zelf gemakkelijk handmatig anchor links maken op elke website, dus zo moeilijk is het echt niet.
Handmatig anchor links maken
Hier proberen we je simpel uit te leggen hoe je handmatig anchor links kan maken. Je moet ze in beginsel gewoon zien als normale links. Alleen navigeren deze links in plaats van naar een andere pagina juist naar een sectie binnen de huidige pagina. Dus als je weet hoe je normale links moet maken naar een andere pagina op je website dan kun je al bijna anchor links maken. Bij een normale link naar een andere pagina gebruik je de URL van de pagina in het href-attribuut van de link.
Laten we aan de slag gaan met de technische gedeelte. Geen stress, het zal erg meevallen;)
Handmatig anchor links maken met HTML
Totale tijd: 4 minuten
Gebruik de A element code zoals bij een normale link
In plaats van het invoeren van een URL gebruik je ID-namen die voorafgaan met een hashtag. Dus stel ik schrijf een artikel over anchor links en mijn eerste kop is ‘Wat is een anchor link?’ dan gebruik ik bijvoorbeeld de volgende code om te linken naar de eerste kop van mijn artikel:
<a href="#watisanchorlink">Wat is een anchor link?</a>
Benoem de items uit je snelle navigatie
Wat je na de # invoert is naar eigen keuze. Wel raden wij aan om een herkenbare ID-naam te gebruiken omdat je hem straks nodig hebt bij de sectie waar je naar toe wilt springen. De code van de snelle navigatie die ik in dit artikel gebruik is:
<strong>Snelle navigatie</strong><ol><li><a href="#watisanchorlink">Wat is een anchor link?</a></li><li><a href="#voordelennadelenanchor">Voor- en nadelen van anchor links</a></li><li><a href="#hoewerktanchorlink">Hoe werken anchor links</a></li><li><a href="#anchorlinkmaken">Handmatig anchor links maken</a></li></ol>
Benoem de secties waar je naar toe wilt linken
Maar wacht we zijn nog niet klaar natuurlijk. Als je alle items uit mijn navigatie heb benoemd dan moet je nog de unieke ID’s toevoegen aan elk van de koppen. Let op: dit hoeven niet perse heading koppen (H1, H2, H3 etc) te zijn maar kan ook gewoon aan een stuk tekst (p) worden toegekend. Hieronder zie je de code die ik heb gebruikt bij 1 van mijn koppen:
<h2 id="anchorlinkmaken">Handmatig anchor links maken</h2>
Voilà, nu ben je echt klaar en kun je de webpagina testen. Je kunt de code uit het voorbeeld testen door op deze pagina de snelle navigatie uit te proberen.
Soms is het even tweaken om precies het juiste stuk content in beeld te krijgen maar ik ben ervan overtuigd dat jullie daar wel uitkomen!
Vragen of hulp nodig?
Is dit artikel toch nog een beetje onduidelijk voor je en wil je meer hulp met je website? Neem dan vrijblijvend contact met ons op, dan kijken we samen met jou naar de mogelijkheden.