Hyperlink gebruik je over het algemeen om naar een andere pagina te gaan. Maar je kunt ook linken naar plekken binnen een pagina: met anchorlinks (worden ook wel Jumplinks genoemd).
Fijn voor je bezoeker en goed voor je SEO sorry, I stand corrected… dit laatste schijnt alleen zo te zijn bij extreem lange teksten.
Desalniettemin een handige tip lijkt me.
Het kan op alle websites – dus niet alleen in WordPress.
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.
Koppen Die Klikken?
Speciaal voor coaches, dienstverleners en online-cursus makers:
Ontdek 5 simpele headline technieken voor meer verkopen
hoe maak je een link naar een speciafieke plek in een website die je niet beheert?
Dat kan alleen als het element waar je naar wil linken een eigen ID heeft. Met een developertool van je browser kun je achterhalen of het element een ID heeft, en zo ja hoe het heet.
Goedemorgen Riet,
Zou je dit ook kunnen doen, en dan naar verschillende tabbladen?
Ik wil namelijk vanuit een sidebar kunnen linken naar verschillende tabbladen.
Vriendelijke groet,
Pascal
Hoi Pascal, sorry ik begrijp je vraag niet helemaal? Je kunt in de zijbalk de Tekst-widget plaatsen en daarin gebruik je de URL zoals beschreven bij ‘Linken vanaf andere pagina’s kan ook’.
Hoi Riet, je stond bovenaan bij de zoekresultaten in duckduck go. En precies ook het antwoord op mijn vraag! Er is echter het een en ander veranderd aan de achterkant in wordpress sinds dit artikel. Ik herinner me dat je vroeger zo’n soort ‘word’ balk met gereedschappen had; een soort tekstverwerkingsbalkje.
Dat bestaat niet meer. Althans, niet in mijn nieuwe site (wp met thema Daydream). Daar werk ik nu met een Block editor (helaas). Per blok kun je instellen of het een H1, H2 etc moet worden, of een paragraaf, citaat of strofe. Bold kan ook nog, maar daar houdt het wel zo’n beetje mee op. Kan ook niet meer switchen van HTML naar WYSIWYG modus.
Enig idee of een anchor dan toch nog mogelijk is?
Hoi Henriette, je hebt hiervoor inderdaad de HTML/Text editor nodig. In de nieuwe Blok editor gaat dit vrij onhandig, vind ik zelf. Als je in de oude editor wil werken, installeer dan de plugin Klassieke Editor (https://nl.wordpress.org/plugins/classic-editor/ ).
Na activeren vink je aan bij de Settings dat je per nieuwe pagina/bericht wil kunnen switchen tussen de Classic editor (de oude editor) of de Blok editor (of helemaal uitschakelen, maar door te switchen kun je er langzaam aan wennen. Over een paar jaar bestaat de classic editor niet meer). Vervolgens kun je bij bewerken van je pagina/bericht switchen naar de klassieke editor, via de drie bolletjes rechts bovenaan.
Ik ken het thema Daydream zelf niet maar ik ga er van uit dat je ook hier in weer met de oude editor aan slag kunt, met deze plugin.
Hoi Henriette, ik heb uitleg toegevoegd in het artikel, hoe je dit ook in de Blok editor kunt doen.
Ha Riet, dank voor je toevoeging! Heb ik nog 1 vraag, want dit gaat over een link binnen het artikel. Maar ik wil eigenlijk vanuit Mailchimp een deel van mn nieuwe blog versturen en als je dan op de link klikt, dat je dan niet eerst hoeft te zoeken waar je verder leest op de site maar dat je dan precies op het juiste punt in het blog verder kunt lezen. Wel zo handig voor mensen die op hun telefoon lezen..
Hoi Henriette, dan gebruik je in MailChimp de volledige URL van je pagina of bericht, met daarachter de naam van de ankerplaats; zoals in dit voorbeeld:
https://website-coach.nl/linken-binnen-pagina-anchorlinks/#hoedoejehet
Ik heb er nog een trucje bijgevoegd, onderaan het artikel 😉
Dankjewel voor je vragen!
Hartelijk dank voor de duidelijke uitleg!
Dankjewel Steven!
Dankjewel Riet, het werkt geweldig! Alleen rond de kopjes waarnaar ik binnen dezelfde pagina link, staat na het linken een kader in een kleur blauw die helemaal niet past bij mijn site. Kan ik de kleur in mijn huisstijlkleur aanpassen? Ik hoor het graag!
Hallo Diana, dat ligt vast in het stijlblad van je theme. Je kunt afwijkende ‘rules’ opgeven voor de kopjes mbv. de plugin Simple Custom CSS. In dit filmpje https://youtu.be/InzuTj_thLg zie je hoe je deze plugin installeert, en hoe je de bijbehorende code voor het kader opzoekt en aanpast. In het filmpje gebruik ik de browser Firefox, maar elke moderne browser (Safari, Chrome) heeft zo’n inspector.
@TjeerdL ja hier, is dit wat? ‘Anchor links’ https://t.co/Yw65fGbgIp
Beste Riet,
Ik zou graag willen dat een pagina die ik aanmaak onder een tag in de menubalk krijg. zoals jij ook hebt op deze website, bij “Over Riet” als je daar op staat heb je daar onder “wat zeggen andere” dit zou ik ook willen bij mijn site met groepslessen en daar onder de verschillende groepslessen die wij aanbieden. Weet jij hoe dit werkt?
Alvast Bedankt!
Met vriendelijke groet,
Vincent Mosterd
Hoi Vincent, dat is een submenu.
Dit regel je in het Menu (je vindt het in de linkerkolom onder Weergave).
Lees hier meer over het maken van een eigen Menu, daar staat ook in hoe je een paginatitel opneemt als submenu.
Hoi Riet,
Dank voor de uitleg.
Is het ook mogelijk een “anker”te plaatsen in een image. Ik wil graag vanuit het menu linken naar een foto ergens verder op in de pagina.
Dank!
Edwin
Hoi Edwin,
ja, dat werkt volgens hetzelfde principe.
Zoek je afbeelding op in de code. Een afbeelding wordt aangeduid met ‘img‘ (afkorting voor ‘image’).
Tik een spatie en daarachter
id=”hoedoejehet”
In het menu neem je als linkdoel de volledige URL op, dus inclusief http:// enz. tot en met #hoedoejehet
Hoi Riet, dank voor het snelle antwoord.
De code ziet er als volgt uit. moet ik het id plaatsen tussen image=”237″?
[vc_single_image image=”237″ img_size=”500×500″ alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_text_separator title=”” color=”custom” accent_color=”#d89f07″][/vc_column][/vc_row][vc_row type=”boxed”][vc_column width=”1/2″][vc_single_image image=”90″ img_size=”full” alignment=”center”][/vc_column][vc_column width=”1/2″][vc_empty_space][vc_empty_space][vc_empty_space][vc_column_text]
O je hebt een of andere Pagebuilder zie ik.
Dan zou ik eerst even de originele code kopiëren naar Kladblok (Windows) of Teksteditor (Mac, opmaak Platte Tekst) – niet naar Word want die plakt er onzichtbare code bij en heb je een probleem als je de code terug moet plakken.
Zo heb je even een backup voor als het onverhoopt niet zou lukken, dan plak je deze weer terug.
Zet het id achteraan de eerste regel waar ‘image’ in staat, binnen de vierkante haken:
[vc_single_image image=”237″ img_size=”500×500″ alignment=”center” id=”hoedoejehet”]
Hoi dit is al een oude post dus ik hoop dat ik nog kan reageren. Ik heb bovenstaande toegepast en het werkt maar de pagina springt net niet naar de titel van de betreffende alinea (waar ik wel de enkel voor heb geplaatst), maar naar halverwege de tekst eronder. Dan is het voor de bezoeker nog steeds niet duidelijk. Kan ik op een of andere manier beter bepalen tot welke hoogte de pagina verspringt? Of doe ik iets verkeerd?
Hoi Carly, de info is nog actueel, dus de post blijft online, en het commentveld ook 🙂
Bij sommige themes valt het anker net onder een headerbalk die niet mee naar boven schuift bij scrollen.
Plaats dan de ankerplaats iets hoger, dus nit bij de kop maar in de tekst erboven.
Als je daar geen code hebt (tussen ‘kleiner dan’ en ‘groter dan’ haken is er een trucje: maak de punt van de vorige alinea cursief. Deze punt krijgt dan de code ’em’ voor cursief met de codehaken, en hier kun je je anker aan toevoegen zoals hierboven beschreven. Het is even uitproberen wat de goede plek is, afhankelijk van hoe hoog een headerbalk is.
Hoi Riet. Ik heb een vraagje
Waar moet ik dat anker “als boven beschreven naar een plek op een ander pag. ” zetten als ik die tekst een kleur gegeven heb als bv
Snoep,zal ik en zo ja wat zal ik mee nemen ?
en ik wil de “tekst snoep zal ik en zo ja”enz
Ik had al het 1 en ander geprobeerd maar kwam er nog niet uit. Als de tekst gewoon standaard zwart is gaat het prima!
Ik hoop dat je even tijd hebt alvast bedankt
Groetjes Marjolein
Hoi Marjolein,
als je eerst de anchorlink maakt en dan, in het tabblad Visueel, de kleur eraan toevoegt dan gaat het vanzelf goed, net even getest.
Voeg je eerst de kleur toe en daarna de link dan is het wat ingewikkelder.
Ik wilde hier de code neerzetten maar WordPress pakt dat niet, ook geen afbeelding.
Ik zal proberen het duidelijk te omschrijven:
als je eerst de kleur toevoegt dan zie je dat in de code is bijgekomen:
het woord span gevolgd door het kleurnummer (hekje met 6 cijfers/letters) tussen aanhalingstekens,
alles tussen groter/kleiner-dan haken.
Tik een spatie achter de ‘aanhalingstekens sluiten’ van het kleurnummer.
Plak het id erbij – dus nog vóór de kleiner-dan haak bv. id=”hoedoejehet”
Sla je pagina/bericht op.
(PS: Ik neem aan dat je de kleur handmatig toevoegde? Wat overigens niet heel handig is: als je alle linkjes op je site automatisch in dezelfde kleur wil dan pas je dat aan in het stijlblad, of gebruik een plugin als Simple Custom CSS om wijzigingen in je theme niet kwijt te raken bij een theme-update).
Heel erg bedankt! Ik ben best lang op zoek geweest naar deze tip, heb hem net toegepast op mijn website en het werkt! Ik ben heel blij. Dank voor deze en alle andere tips.
Leuk te horen Nicoline!
Hoi, dank voor deze mooie tip! Ik werk niet met WordPress, maar met Typo3. Weet je of het daarmee ook kan? Hoor graag!
Met enthousiaste groet, John Vrakking
Hoi John, ik ken Typo3 zelf niet, maar als je in de HTML code kunt werken dan kan het daar ook.
RT @WebsiteCoachRdW: Hoe link je binnen een pagina? http://t.co/5u5lgYFiQ1