Hyperlink.

Een hyperlink is een verwijzing in een webpagina waarop je klikt om ergens anders te komen: een andere pagina, een plek verderop in hetzelfde document, een bestand of een e-mailadres. In HTML is dat één element, de a-tag, met daarin een href die zegt waar de verwijzing naartoe wijst.

Het is het onderdeel dat losse documenten tot een web maakt. Het is ook het onderdeel waar op een gemiddelde website het meeste stilzwijgend misgaat, want een link die verkeerd staat ziet er precies hetzelfde uit als een link die goed staat.

Waar het anker-element uit bestaat

De basis is kort. Je opent met een a-tag, zet er een href in met de bestemming, schrijft de tekst waarop iemand klikt, en sluit af. De a komt van anchor, anker: dat woord sloeg oorspronkelijk op de plek waar de verwijzing landt.

Naast href kun je er een handvol attributen bij zetten. Target bepaalt in welk venster de bestemming opent. Rel vertelt wat voor soort relatie het is, bijvoorbeeld gesponsord of niet te volgen. Download zorgt dat een bestand wordt opgeslagen in plaats van geopend. Referrerpolicy regelt hoeveel de ontvangende site te zien krijgt over waar de bezoeker vandaan kwam.

Een a-tag zonder href is geen link. Hij is niet met de tab-toets te bereiken, een schermlezer meldt hem niet als link, en je kunt hem niet met het middelste muisknopje in een nieuw tabblad openen. Datzelfde geldt voor het gebruikelijke alternatief: een div waar met JavaScript een klikreactie op zit. Dat ziet eruit als een link en gedraagt zich als niets. Ik kom dat vaak tegen bij knoppen uit een ontwerpsjabloon. Alles werkt met de muis en niets werkt met het toetsenbord.

Absolute, relatieve en wortelrelatieve adressen

Er zijn drie manieren om een bestemming op te schrijven, en de keuze heeft gevolgen.

Een absoluut adres is compleet: protocol, domein en pad. Het werkt overal, ook als je pagina ergens anders wordt getoond, bijvoorbeeld in een nieuwsbrief. Een wortelrelatief adres begint met een schuine streep en laat het domein weg; dat gebruik ik meestal, want het blijft kloppen als je van een testomgeving naar het echte adres verhuist. Een gewoon relatief adres zonder beginstreep rekent vanaf de map waarin de pagina staat, en gaat mis zodra iemand die pagina verplaatst.

Het adres dat begint met twee schuine strepen en dan het domein, zonder https ervoor, kwam vroeger veel voor. Dat is verleden tijd. Sinds vrijwel alles op https draait, schrijf je https gewoon voluit. Hoe een webadres precies is opgebouwd staat bij URL.

In WordPress zit hier een addertje. WordPress bewaart interne links meestal voluit in de database, inclusief het domein. Verhuis je een site van een testadres naar het echte adres, dan moet je die adressen in de database vervangen, anders blijft de helft van je links naar de testomgeving wijzen. Vervang ze met gereedschap dat de opgeslagen datavelden begrijpt, want die bevatten lengtes die niet meer kloppen als je botweg zoekt en vervangt.

De soorten links die je op een site tegenkomt

• Interne links. Verwijzingen naar een andere pagina op je eigen site. Ze brengen de bezoeker verder en ze laten een zoekmachine zien welke pagina's bij elkaar horen.
• Externe links. Verwijzingen naar een andere site. Naar een bron verwijzen maakt een stuk geloofwaardiger, en het is precies wat de meeste bedrijfssites nalaten.
• Ankerlinks. Verwijzingen naar een plek op dezelfde pagina, met een hekje en een id. Een inhoudsopgave boven een lang artikel werkt daarmee.
• Bestandslinks. Verwijzingen naar een pdf, een afbeelding of een spreadsheet.
• Mailto- en tel-links. Verwijzingen die het mailprogramma openen of een telefoonnummer kiezen.

Bij ankerlinks zit een probleem dat je op bijna elke moderne site ziet. Springt de pagina naar het kopje, dan verdwijnt dat kopje onder de menubalk die bovenaan blijft plakken. Dat los je op met scroll-margin-top in je CSS, ter grootte van die balk.

De linktekst doet het meeste werk

Hier valt het meeste te winnen en hier gaat het het vaakst mis. De woorden waarop iemand klikt vertellen zowel de bezoeker als de zoekmachine wat er aan de andere kant staat. "Klik hier" vertelt niets. Het is geen stijlkwestie. Wie een schermlezer gebruikt, kan een lijst opvragen van alle links op een pagina, los van de tekst eromheen. Staat er tien keer "klik hier" en vier keer "lees meer", dan is die lijst waardeloos. De toegankelijkheidsrichtlijn WCAG heeft daar een apart punt voor: het doel van een link moet duidelijk zijn uit de linktekst met de omringende zin erbij, en op het strengste niveau uit de linktekst alleen.

Schrijf dus op waar je naartoe wijst. Niet "lees hier meer", maar "hoe je zoekwoorden kiest". Dat leest beter, het scheelt woorden, en Google gebruikt die tekst om de doelpagina te plaatsen. Houd hem kort: drie tot zeven woorden is genoeg. Een hele zin onderstrepen leest slecht.

Gebruik niet steeds dezelfde tekst voor verschillende bestemmingen. Twee links die allebei "meer informatie" heten en op verschillende pagina's uitkomen zijn verwarrend voor een bezoeker en nutteloos als signaal.

Staat er een afbeelding in de link en verder geen tekst, dan neemt de alt-tekst van die afbeelding de rol van linktekst over. Beschrijf dan de bestemming en niet het plaatje. Bij een logo dat naar de homepage wijst is "Naar de homepage" nuttiger dan "logo".

Nieuw tabblad, target en rel="noopener"

Een oude discussie met een redelijk eenvoudig antwoord. Interne links open je in hetzelfde tabblad, want mensen verwachten dat en gebruiken de terugknop. Externe links mogen in een nieuw tabblad, zeker als iemand midden in een bestelling of een formulier zit.

Doe het niet standaard bij alles. Iemand die tien keer klikt heeft dan tien tabbladen en is de weg kwijt. Besef ook dat je een keuze afpakt: de bezoeker kon zelf al met ctrl-klik een nieuw tabblad openen.

Open je toch in een nieuw venster, zet er dan rel="noopener" bij. Dat heeft een concrete achtergrond. Een pagina die in een nieuw tabblad wordt geopend, kreeg vroeger via JavaScript toegang tot het venster waaruit hij kwam en kon dat naar een ander adres sturen. Het klassieke misbruik is een nepinlogscherm: jij klikt op een link, en achter je rug wordt het tabblad waar je vandaan kwam vervangen door een namaakpagina die om je wachtwoord vraagt.

Browsers zijn dat gat zelf gaan dichten. Safari deed het als eerste, Firefox volgde, en met Chrome 88 in januari 2021 werd het overal de standaard: target="_blank" gedraagt zich sindsdien alsof noopener er staat. Toch schrijf ik het er nog steeds bij, want je weet niet in welke ingebouwde browser van welke app je pagina wordt geopend.

Rel="noreferrer" doet er iets bovenop: het verbergt ook waar de bezoeker vandaan kwam, zodat de ontvangende site hem als direct verkeer ziet. Dat is meestal niet wat je wilt.

Nofollow, sponsored en ugc

Deze drie waarden in het rel-attribuut zeggen tegen zoekmachines hoe zij de link moeten wegen. Nofollow is de oudste. Google kondigde het op 18 januari 2005 aan als antwoord op spam in reactievelden, en Yahoo en MSN Search sloten zich er meteen bij aan. Wie een link achterliet onder een blogartikel kreeg daarmee geen aanbeveling meer. Dat de spam er niet door verdween is een ander verhaal, en dat staat bij comment spam.

Op 10 september 2019 kwamen er twee bij. Sponsored betekent dat er voor de link is betaald, in geld of in producten. Ugc staat voor user generated content en hoort bij links die een bezoeker heeft geplaatst, zoals in een reactie of op een forum. Google behandelt de drie sinds diezelfde dag als hint bij het rangschikken, en sinds 1 maart 2020 ook bij het verkennen en indexeren. Een hint betekent dat Google zelf besluit wat hij ermee doet. Deze twee zijn overigens geen webstandaard: ze zijn door Google gedefinieerd, terwijl nofollow wel in de HTML-specificatie staat.

Gebruik sponsored bij elke betaalde link, ook bij affiliatelinks en bij een artikel dat je hebt laten schrijven met een link erin. Betaalde links zonder aanduiding zijn precies waar Google op filtert, en de maatregel treft de site die de link ontvangt. Wat er verder bij het verwerven van links komt kijken staat bij linkbuilding.

Een hardnekkig misverstand: nofollow houdt een pagina niet uit de index. Wil je dat een pagina niet in de zoekresultaten komt, dan heb je een noindex nodig op die pagina zelf. Hoe dat werkt staat bij indexering door zoekmachines.

Interne links en waar de waarde heen stroomt

Zoekmachines vinden pagina's door links te volgen. Wijst er nergens een link naar een pagina, dan bestaat die alleen nog via je sitemap, en dat is een zwakker signaal. Zo'n verweesde pagina ontstaat vanzelf, meestal na een herbouw waarbij iets uit het menu verdween. Hoe die verkenning werkt staat bij zoekmachine-spiders.

Een link in je lopende tekst zegt meer dan een link in je menu, omdat er woorden omheen staan die betekenis geven. Een menu staat op elke pagina en onderscheidt dus niets.

De praktische regel die ik aanhoud: elke pagina die geld waard is, moet binnen drie klikken vanaf de homepage te bereiken zijn, en er moeten minstens twee tekstlinks naartoe wijzen vanaf een andere pagina met inhoud.

Wat niet werkt is een blok met dertig links onderaan elke pagina naar elke dienst in elke plaats. Dit is jarenlang gedaan en het levert niets op.

Hoe een link eruit hoort te zien

Herkenbaar als link, en dat is minder vanzelfsprekend dan het klinkt sinds ontwerpers onderstreping lelijk vinden. Alleen een andere kleur is niet genoeg: wie kleuren slecht onderscheidt, ziet het verschil met gewone tekst niet. Werk je toch zonder streep, dan heb je een duidelijk kleurverschil nodig plus een tweede aanwijzing bij hover en focus.

Laat de focusrand staan. Dat randje dat verschijnt als je met de tab-toets door een pagina loopt, wordt in ontwerpen standaard weggehaald omdat het niet mooi is. Voor iemand die geen muis kan gebruiken is dat het enige wat laat zien waar hij is.

Op een telefoon telt de grootte van het aanraakgebied. WCAG 2.2, sinds oktober 2023 de geldende versie, vraagt minstens 24 bij 24 pixels per klikbaar element, of genoeg ruimte eromheen. Links die vlak onder elkaar in een lijst staan zijn de plek waar dat misgaat.

Wat de wet sinds 2025 van je vraagt

Toegankelijkheid was voor bedrijven lang vrijwillig. Dat is veranderd. De Europese toegankelijkheidsrichtlijn geldt sinds 28 juni 2025 en raakt onder meer webshops, bankdiensten, e-books, telecom en het kopen van vervoerbewijzen. In Nederland heet de omzetting de Implementatiewet toegankelijkheidsvoorschriften producten en diensten, die op dezelfde datum inging. De norm waaraan je in de praktijk voldoet is WCAG op niveau AA. Voor overheidssites gold al langer een eigen regeling met een verplichte toegankelijkheidsverklaring.

Er is een uitzondering voor micro-ondernemingen die diensten leveren: minder dan tien mensen in dienst en een omzet of balanstotaal onder de twee miljoen euro. Veel eenmanszaken en kleine bureaus vallen daaronder. Verkoop je producten, dan liggen de verplichtingen anders.

Mijn advies aan een klein bedrijf is nuchter. Ga niet op zoek naar een certificaat. Zorg dat links een duidelijke tekst hebben, dat de focus zichtbaar is en dat je met het toetsenbord door je site kunt. Daarmee heb je het grootste deel van de praktijkproblemen te pakken.

Links naar bestanden, e-mailadressen en telefoonnummers

Wijs je naar een pdf, zeg dat er dan bij. Iemand die op een telefoon een link aantikt en ineens een document van tien megabyte binnenhaalt, is niet blij. Zet het bestandstype in de linktekst en de grootte erachter. Het download-attribuut zorgt dat het bestand wordt opgeslagen in plaats van geopend, en werkt alleen bij bestanden op je eigen domein.

Een mailto-link opent het mailprogramma van de bezoeker. Bij iemand die zijn mail in de browser leest en geen standaardprogramma heeft ingesteld, gebeurt er niets of opent er een leeg venster. Zet je e-mailadres er daarom altijd ook als leesbare tekst bij. En weet dat een adres dat als mailto op een pagina staat door spamrobots wordt geoogst. Voor het echte contactverkeer is een contactformulier praktischer, met het adres erbij voor wie liever zelf mailt.

Een tel-link maakt van je telefoonnummer één tik. Schrijf het nummer in de href internationaal en zonder spaties, dus beginnend met +31 en zonder de nul die daarna zou komen. De weergegeven tekst mag gewoon in de Nederlandse schrijfwijze staan. Voor een lokaal bedrijf is dit het onderdeel dat direct geld oplevert, en het ontbreekt op verrassend veel sites in de kop en de voettekst.

Gebroken links opsporen en doorverwijzen

Links naar andere sites gaan kapot. Die sites verhuizen, gaan op in een ander merk of verdwijnen. Het Pew Research Center publiceerde daar in mei 2024 cijfers over: van de pagina's die in 2013 bestonden was tien jaar later 38 procent niet meer bereikbaar. Een verwijzing die je vier jaar geleden hebt gezet, is dus geen zekerheid.

Op je eigen site ontstaan gebroken links vooral bij verhuizingen. Iemand past een paginatitel aan, WordPress past het webadres aan, en alle links die je zelf in oude artikelen had gezet wijzen naar niets.

Zoeken doe je op drie plekken. Google Search Console meldt adressen die een 404 geven en toont bij welke pagina hij ze vond. Een crawler die je site doorloopt vindt ze in één keer allemaal, ook de externe. Je serverlogboek laat zien welke foutmeldingen bezoekers echt tegenkomen.

Verhuis je zelf een pagina, zet er dan een permanente doorverwijzing op met statuscode 301. Doorverwijzen naar de homepage is de luie oplossing en werkt slecht: stuur naar de pagina die er inhoudelijk het dichtst bij zit. Bestaat er geen vervanger, dan is een nette 404-pagina met een zoekveld en een paar links beter dan een omweg. Wat die statuscodes betekenen staat bij HTTP. Repareer daarna ook de links zelf, want een keten van drie doorverwijzingen achter elkaar kost snelheid en raakt op den duur zoek.

Wat een link onveilig maakt

De tekst van een link en de bestemming hoeven niets met elkaar te maken te hebben. Dat is de hele basis van phishing: er staat een vertrouwde naam, en de href wijst ergens anders heen. In een browser zie je het echte adres onderin het venster als je met de muis boven de link hangt. Op een telefoon houd je de link ingedrukt.

Op je eigen site let je op twee dingen. Laat je bezoekers reacties plaatsen, zorg dan dat links daaruit automatisch nofollow en ugc krijgen. En pas op met een pagina die een adres uit de URL overneemt om door te sturen, zoals na het uitloggen. Zo'n open doorverwijzing wordt misbruikt voor phishinglinks die op jouw vertrouwde domein beginnen.

Links in WordPress

In de blokkeneditor selecteer je tekst en druk je op ctrl-k. Je plakt of zoekt een bestemming, en met het schuifje zet je hem in een nieuw tabblad. Nofollow of sponsored toevoegen kan daar niet: dat doe je in de codeweergave van het blok of met een plugin.

Je menu bestaat ook uit links, alleen worden die apart opgeslagen. Verwijder je een pagina, dan blijft het menu-item staan en wijst het naar niets. Dit is de meest voorkomende gebroken link op een WordPress-site, en hij staat op elke pagina tegelijk.

Werk je met een paginabouwer, dan heeft elke knop zijn eigen linkveld met eigen instellingen. In Beaver Builder, waar ik zelf mee werk, zit dat bij de knopmodule inclusief de keuze voor een nieuw tabblad en de rel-waarde. Die velden staan in de opmaakgegevens en niet in de tekst, dus een zoek-en-vervangactie op je database raakt ze niet altijd. Daar loop je tegenaan bij een verhuizing.

Veelgestelde vragen over hyperlinks

Wat is een hyperlink precies?

Een hyperlink is een verwijzing in een document waarop je klikt om naar een andere plek te gaan. In HTML bestaat hij uit een a-element met een href-attribuut dat de bestemming bevat, en de tekst of afbeelding ertussen is het deel waarop iemand klikt.

Wat betekent href in HTML?

Href staat voor hypertext reference en bevat het adres waar de link naartoe gaat. Dat kan een volledig webadres zijn, een pad op je eigen site, een verwijzing naar een plek op dezelfde pagina met een hekje, of iets als mailto en tel.

Wat is het verschil tussen een interne en een externe link?

Een interne link wijst naar een andere pagina op hetzelfde domein, een externe link naar een pagina op een andere site. Interne links stuur je zelf en gebruik je om samenhang aan te brengen.

Moet een link in een nieuw tabblad openen?

Interne links niet. Mensen verwachten dat ze op dezelfde plek blijven en gebruiken de terugknop. Bij externe links en bij pdf-bestanden is een nieuw tabblad verdedigbaar, zeker als iemand midden in een formulier of bestelling zit. Maak er geen automatisme van, want dan houdt de bezoeker een rij tabbladen over die hij niet zelf heeft geopend.

Wat doet rel="noopener" en heb ik dat nog nodig?

Het voorkomt dat de pagina die je in een nieuw tabblad opent, invloed kan uitoefenen op de pagina waar de bezoeker vandaan kwam. Zonder die afscherming kon een kwaadwillende site het oude tabblad vervangen door een nepinlogpagina. Moderne browsers doen dit sinds januari 2021 zelf bij target="_blank", maar ik zet het er nog steeds bij, omdat je pagina ook wordt geopend in ingebouwde browsers van apps waarvan je de versie niet kent.

Wat is een nofollow-link?

Een link met rel="nofollow" erin. Daarmee zeg je tegen zoekmachines dat ze de verwijzing niet als aanbeveling moeten opvatten. Het is in januari 2005 bedacht tegen spam in reactievelden. Sinds september 2019 behandelt Google het als hint in plaats van als harde instructie, dus je hebt er geen garantie meer aan.

Wanneer gebruik ik rel="sponsored" en wanneer rel="ugc"?

Sponsored gebruik je bij elke link waarvoor is betaald, in geld of in natura: advertenties, affiliatelinks en gesponsorde artikelen. Ugc gebruik je bij links die bezoekers zelf plaatsen, zoals in reacties of forumberichten. Je mag beide waarden combineren met nofollow.

Waarom is "klik hier" een slechte linktekst?

Omdat hij niets zegt over de bestemming. Wie een schermlezer gebruikt kan een lijst van alle links op een pagina opvragen zonder de tekst eromheen, en een lijst met tien keer "klik hier" is onbruikbaar.

Daarnaast gebruiken zoekmachines de linktekst om te begrijpen waar de doelpagina over gaat. Je geeft dus een gratis signaal weg.

Moeten links onderstreept zijn?

In lopende tekst is dat de veiligste keuze, want kleur alleen is niet genoeg: een deel van de mensen ziet dat kleurverschil niet. In een menu of een knop is onderstrepen niet nodig, omdat de plaats en de vorm daar al duidelijk maken dat je erop kunt klikken.

Hoe maak ik een link naar een e-mailadres?

Je zet mailto: voor het adres in de href. Je kunt er een onderwerp aan meegeven door achter het adres een vraagteken te zetten en subject= met de gewenste tekst. Houd er rekening mee dat het bij bezoekers zonder ingesteld mailprogramma niets doet, dus zet het adres ook als gewone tekst op de pagina.

Hoe maak ik een link naar een telefoonnummer?

Je zet tel: voor het nummer in de href en schrijft het internationaal zonder spaties, dus met +31 ervoor en zonder de nul die daarop zou volgen. De tekst die de bezoeker ziet mag in de normale schrijfwijze staan.

Hoe vind ik gebroken links op mijn website?

Google Search Console laat zien welke adressen op je eigen site een foutmelding geven en op welke pagina hij de verwijzing tegenkwam. Voor links naar buiten heb je een crawler nodig, of een plugin die dat periodiek controleert. Twee keer per jaar kijken is voor een gewone bedrijfssite genoeg.

Wat doe ik met een pagina die ik verplaats of verwijder?

Verplaats je hem, zet dan een permanente doorverwijzing van het oude naar het nieuwe adres. Verwijder je hem definitief en is er een goede vervanger, verwijs dan daarheen. Is die er niet, laat het dan een 404 geven en zorg dat je foutpagina de bezoeker verder helpt. Pas daarna je eigen links aan, zodat ze rechtstreeks naar het nieuwe adres wijzen.

Hoeveel links mogen er op één pagina staan?

Er is geen limiet meer. Google hanteerde ooit een richtlijn van ongeveer honderd links per pagina en die is losgelaten. Wat wel blijft gelden is dat elke extra link de aandacht verdeelt. Een pagina met drie doordachte verwijzingen doet meer dan een pagina met veertig.

Schaden externe links naar andere sites mijn positie?

Nee. Verwijzen naar een goede bron kost je niets en helpt de lezer. Wat wel schaadt is een pagina vol betaalde links zonder aanduiding.