Met anchorlinks: linken naar een plek BINNEN een (andere) pagina
Linken naar een andere plek binnen dezelfde pagina
Waarom zou je dat doen
Hoe werkt het? Het principe van anchorlinks
Hoe doe je het in WordPress
Hoe doe je het, in HTML
(en hoe link je vanaf MailChimp, of andere website)
Kan het met een plugin
Link opnemen in het Menu
Bonustip/TRUC: ‘Verdwijnt’ de koptekst onder de header of menubalk?
Waarom zou je dat doen
Met zo’n inhoudsopgave zoals bij Wikipedia zie jij als bezoeker meteen wat er op de pagina te vinden is.
- Iedere titel is een linkje.
- Je komt meteen bij de info, zonder scrollen en zoeken.
- Bezoekers met een smartphone of tablet scrollen niet gauw om kopjes te scannen. Op deze manier geef je hen snel overzicht.
Linken naar een specifiek onderdeel in een andere pagina
dat kan natuurlijk ook!
Hoe werken anchorlinks? Het principe:
- Om te kunnen linken naar een ‘plek verderop’ in een pagina (het ‘linkDOEL’), moet die plek verderop een ankerplaats worden.
- Daarna ga je de link leggen; zeg maar een anker uitgooien, naar de unieke ankerplaats (het linkdoel) die je net gemaakt hebt.
Hoe maak je anchorlinks in WordPress
(in de nieuwe Gutenberg Block editor.)
Je hebt dus twee dingen nodig: een ankerplaats (linkdoel) en de link erheen.
Stap 1: ankerplaats (linkdoel)
Schuif de muis over het blok dat je ankerplaats/linkdoel moet zijn.
Maak je tekst op, geef de stijl aan; bijvoorbeeld ‘H2’ (= Koptekst 2).
Wanneer je blok is aangeklikt zie je in de rechterkolom de optie Advanced. Klik dit open en je ziet het veld HTML anchor.
Hier geef je de naam van je anker op.
Dit werkt ook met afbeeldingen.
Stap 2: de link
De link naar de ankerplaats/linkdoel.
Selecteer de tekst (een afbeelding kan ook) die link moet worden en klik op het kettingsymbool.
Geef de unieke naam van de zojuist gemaakte ankerplaats op,
met een # ervoor, bijvoorbeeld (ik verzin maar wat):
#hoedoejehet
Niet vergeten je pagina/bericht op te slaan.
Hoe doe je het – in HTML
Stap 1. De ankerplaats / linkdoel
Koptekst 1 gebruik je niet, deze is al vergeven aan je Pagina- of Bericht-titel. Anders weet Google niet wat je belangrijkste titel is. Vergelijk het met een hoofdstuktitel in een boek: een hoofdstuk kan maar 1 hoofdstuktitel hebben.
Daarna zoek je in de code je kopjes op: rechtsboven je tekstvenster kies je de tab HTML (of Text – afh. van je theme) naast de Wysiwyg-tab.
Zoek het tekstje op dat ankerplaats gaat worden (gebruik de zoekfunctie van je browser, met Command-F op Mac of Control-F op Windows).
Bijvoorbeeld het koptekstje van deze alinea ziet er zo uit:
<h2>Hoe doe je het</h2>
Om er een ankerplaats van te maken voeg je code toe:
<h2 id="hoedoejehet">Hoe doe je het</h2>
de tag id met direct aansluitend het = teken,
en weer direct aansluitend, tussen dubbele aanhalingstekens, een unieke naam in kleine letters, zonder spaties.
Nu heb je de ankerplaats waarheen je kunt linken.
Stap 2. De link naar de ankerplaats
Selecteer de tekst (een afbeelding kan ook) die link moet worden en klik op het kettingsymbool.
Geef de unieke naam van de zojuist gemaakte ankerplaats op, met een # ervoor.
Klik ‘Link toevoegen’ en daarna Pagina/Bericht ‘Bijwerken’.
Linken vanaf andere pagina’s:
Je selecteert op die andere pagina de tekst of afbeelding die link moet worden en klikt op het kettingsymbool.
Kies in de lijst de pagina waar je heen wil linken.
Tik achter de slash / een # en meteen aansluitend de naam van de ankerplaats (dus zonder spaties).
Klik ‘Link toevoegen’ en daarna Pagina/Bericht ‘Bijwerken’.
Linken vanaf andere websites, of vanuit je MailChimp nieuwsbrief, etc?
Ook dan gebruik je, precies zoals hierboven genoemd, de volledige URL
met achter de laatste / een #
en meteen aansluitend de naam van de ankerplaats (dus zonder spaties):
https://website-coach.nl/anchorlinks-linken-binnen-pagina/#hoedoejehet
Kan het met een plugin?
Natuurlijk zijn er WordPress-plugins waarmee je dit voor elkaar krijgt,
zoals TinyMCE Advanced, WP Edit waarmee je veel extra mogelijkheden in de editor krijgt.
Heb je maar af en toe deze optie nodig dan kun je dit beter zonder zo’n uitgebreide plugin doen.
Anchorlinks opnemen in het Menu
Ga naar Weergave – Menu, kies ‘Aangepaste links‘.
Bij URL vul je het doel in: de volledige URL inclusief #hoedoejehet, deze wordt dan:
https://website-coach.nl/anchorlinks-linken-binnen-pagina/#hoedoejehet
Bij “Link tekst” vul je de tekst in die de bezoeker ziet en kan aanklikken.
Bonustip
‘Verdwijnt’ de koptekst onder de menubalk?
Heb je een menubalk die in beeld blijft bij scrollen, waardoor je bezoeker die kop (het linkdoel) niet ziet?
Dat kan verwarrend zijn voor je bezoeker.
Wat je kunt doen is het linkdoel, de id, iets hoger plaatsen.
Bijvoorbeeld in de alinea net vóór de kop.
Maar daar heb je geen misschien plaats waar je het id kunt bijvoegen.
TIP:
- Simpelste oplossing: Kies in de Blok-editor de alinea net vóór de kop, en geef bij Advanced je HTML anchor in. Is het een lange alinea: maak dan van de laatste zin een nieuwe alinea zodat je het HTML anchor bij Advanced kunt opgeven.
- Of werk in HTML en lees hieronder verder.
- In de oude WP editor klik je op de Tekst-tab zodat je in HTML werkt.
Maak de punt aan het eind van de alinea cursief door de em-code toe te voegen, zie hieronder:
<em>.</em>
Een cursieve punt valt namelijk niet op bij het lezen.
Waardoor je nu de ID kunt bijvoegen:
<em id="hoedoejehet">.</em>
Sla op en test even of de code misschien iets hoger in de alinea geplaatst moet worden.
NB. Wel even oppassen: als je later tekst gaat wijzigen, dat je de code niet weghaalt.
Dus na wijzigingen altijd even testen of je anchorlinks nog werken.