{"id":31180,"date":"2020-04-22T06:41:22","date_gmt":"2020-04-22T13:41:22","guid":{"rendered":"https:\/\/kinsta.com\/?p=66857&#038;preview=true&#038;preview_id=66857"},"modified":"2023-11-06T14:09:42","modified_gmt":"2023-11-06T13:09:42","slug":"verbeter-navigatie-site","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/","title":{"rendered":"Zo verbeter je de navigatie van je site (met voorbeelden en redenen waarom)"},"content":{"rendered":"<p>Het instellen van de navigatie van een site is iets wat veel site-eigenaren uitstellen tot het laatste moment. Het voelt dan ook vaak meer als een administratieve handeling dan het instellen van een belangrijke feature op je site. Uit recent onderzoek blijkt echter dat slechts 50% van de internetgebruikers op basis van de standaardstructuur voor sitenavigatie kan voorspellen waar ze relevante inhoud kunnen vinden.<\/p>\n<figure style=\"width: 955px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/waar-vind-antwoorden-specifieke-vragen.png\" alt=\"Waar vind je antwoorden op specifieke vragen\" width=\"955\" height=\"377\"><figcaption class=\"wp-caption-text\">Waar vind je antwoorden op specifieke vragen<\/figcaption><\/figure>\n<p>Dat is wel even slikken. Als maar de helft van je bezoekers de pagina kan vinden waarnaar ze op zoek zijn, is dat een gigantisch UX-probleem.<\/p>\n<p>Het niet kunnen vinden van de juiste inhoudt, leidt namelijk tot hogere <a href=\"https:\/\/kinsta.com\/nl\/blog\/hoe-het-bouncepercentage-te-verlagen\/\">bouncepercentage<\/a>, minder bestede tijd op je site en <a href=\"https:\/\/kinsta.com\/nl\/blog\/conversion-rate-optimalisatie-tips\/\">lagere conversiepercentages<\/a>.<\/p>\n<p>Als je <a href=\"https:\/\/kinsta.com\/nl\/blog\/woocommerce-handleiding\/\">een e-commerce winkel beheert<\/a>, kan slechte navigatie ook nog eens een grote negatieve impact hebben op je omzet.<\/p>\n<p>In dit artikel bespreek ik daarom alles over sitenavigatie. Je zult dus alles te weten komen over de best practices, verschillende soorten navigatie en wat jij moet doen om de perfecte navigatie voor jouw site te maken.<\/p>\n<p>Laten we beginnen!<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Wat is sitenavigatie?<\/h2>\n<p>Sitenavigatie is het proces van het navigeren tussen pagina&#8217;s, apps en sites op het internet. De technologie erachter die daarbij helpt heet hypertext of hypermedia.<\/p>\n<p>Hypertext of -media zijn op tekst gebaseerde pagina&#8217;s die hyperlinks gebruiken om ze aan andere pagina&#8217;s op het internet te verbinden. Een <a href=\"https:\/\/techterms.com\/definition\/hyperlink\">hyperlink<\/a> is een link die jou naar een URL brengt vanuit je webbrowser.<\/p>\n<p>De URL geeft aan welke bestand de browser moet vinden op de server, zodat het gedownload en gedenderd kan worden, zodat jij het kunt zien.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/nl\/blog\/google-sitelinks\/#6-build-internal-links\">Interne links<\/a> leiden naar een andere pagina binnen hetzelfde domein. Externe links leiden naar pagina&#8217;s op een ander <a href=\"https:\/\/kinsta.com\/nl\/blog\/hoeveel-kost-een-domeinnaam\/\">domein<\/a>. Een compleet andere site en server dus.<\/p>\n<p>Onderdeel van sitenavigatie zijn menu&#8217;s met interne links waarmee bezoekers eenvoudig de pagina kunnen vinden die ze zoeken. Goede navigatie is essentieel voor een gebruiksvriendelijke site.<\/p>\n<h3>Wat is een navigatiemenu op een site?<\/h3>\n<p>Een <a href=\"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/#navigational-menu\">site navigatiemenu<\/a> is een set links, meestal naar interne pagina&#8217;s, die zijn verzameld binnen een menu. De meeste sites, inclusief onze eigen, bevatten een menu helemaal bovenaan de site.<\/p>\n<figure style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/kinsta-headermenu.png\" alt=\"Kinsta headermenu\" width=\"1200\" height=\"91\"><figcaption class=\"wp-caption-text\">Kinsta headermenu<\/figcaption><\/figure>\n<p>Dit deel heet binnen webdesign de &#8220;header&#8221; van een site. De pagina&#8217;s die je meestal ziet in dit soort menu&#8217;s zijn:<\/p>\n<ul>\n<li>Over ons.<\/li>\n<li>Blog.<\/li>\n<li>Contact.<\/li>\n<li>Features.<\/li>\n<li>Pakketten\/prijzen<\/li>\n<\/ul>\n<p>Natuurlijk kan een menu ook prima links naar andere pagina&#8217;s bevatten.<\/p>\n<h3>Wat is de navigatiestructuur van een site?<\/h3>\n<p>De navigatiestructuur van een site beschrijft hoe verschillende pagina&#8217;s binnen een site zijn georganiseerd en onderling zijn verbonden.<\/p>\n<p>Zo kunnen sommige pagina&#8217;s en stukken inhoud bijvoorbeeld alleen gevonden worden door naar een specifieke pagina te gaan. <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ontwikkelaar-huren\/\">Designers en webdevelopers<\/a> maken meestal een plan voor de navigatiestructuur bij het ontwikkelen van een nieuwe site.<\/p>\n<figure style=\"width: 992px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/02\/navigatiestructurr-site.jpg\" alt=\"Navigatiestructuur van een site\" width=\"992\" height=\"336\"><figcaption class=\"wp-caption-text\">Navigatiestructuur van een site<\/figcaption><\/figure>\n<p>In dit voorbeeld zijn de pagina\u2019s\u00a0<strong>About<\/strong>,\u00a0<strong>Plans<\/strong>,\u00a0<strong>Contact<\/strong>, en <strong>Blog<\/strong>te bereiken vanaf het startmenu. Om de <strong>Mission<\/strong> en <strong>Team<\/strong> pagina&#8217;s te bereiken moet je eerst naar de <strong>About<\/strong> pagina gaan.<\/p>\n<h3>Waarom is navigatie zo belangrijk voor een site?<\/h3>\n<p>In de intro van dit artikel vertelden we dat 50% van de gebruikers niet weet hoe ze een standaardmenu moeten gebruiken. Stel je eens voor hoe weinig mensen <a href=\"https:\/\/kinsta.com\/nl\/onderwerpen\/contentstrategie\/\">de juiste inhoud<\/a> zouden kunnen vinden als er helemaal geen navigatie te vinden was op een site.<\/p>\n<p>Als je het goed aanpakt, kun je het percentage van mensen die niet goed weten hoe ze door jouw site moeten navigeren, ver onder de 50% krijgen. Hiermee verlaag je het bouncepercentage, verhoog je de tijd die mensen doorbrengen op je site, waardoor je meer <a href=\"https:\/\/kinsta.com\/nl\/blog\/meer-website-verkeer\/\">verkeer<\/a>, leads en uiteindelijk klanten krijgt.<\/p>\n\n<h2>Soorten sitenavigatie<\/h2>\n<p>Er zijn drie hoofdsoorten sitenavigatie. Te weten:<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<p>Wanneer je deze drie goed combineert, maak je het je bezoekers makkelijk om hun weg te vinden op je site. Laten we daarom elke soort beter bekijken.<\/p>\n<h3>1. Globale sitenavigatie<\/h3>\n<p>Met globale sitenavigatie zijn het menu en de links precies hetzelfde op alle pagina&#8217;s binnen de site. Veel moderne menu\u2019s volgen dit principe, inclusief ons eigen menu van Kinsta: als je naar beneden scrolt, &#8220;volgt&#8221; het menu.<\/p>\n<figure style=\"width: 1282px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/kinsta-globaal-headermenu.png\" alt=\"Kinsta globaal headermenu\" width=\"1282\" height=\"750\"><figcaption class=\"wp-caption-text\">Kinsta globaal headermenu<\/figcaption><\/figure>\n<p>In de screenshot zie je dat ons headermenu eenvoudig en begrijpelijk is. Het is op alle pagina&#8217;s hetzelfde en leidt direct naar onze belangrijkste pagina&#8217;s en inhoud.<\/p>\n<p>We weten welke cruciale informatie een gemiddelde potenti\u00eble klant nodig heeft om een beslissing te kunnen maken over een hostingbedrijf. Daarom hebben we het voor potenti\u00eble klanten zo makkelijk mogelijk gemaakt om onze features, pakketten en contactopties te vinden. En voor bestaande gebruikers hebben we de inloglink toegevoegd, zodat ze meteen naar hun <a href=\"https:\/\/kinsta.com\/nl\/mykinsta\/\">MyKinsta dashboard<\/a> kunnen gaan.<\/p>\n<p>Ook ons footermenu is globaal en brengt, naast uitgelichte inhoud, enkele essenti\u00eble onderdelen van onze site naar voren.<\/p>\n<figure style=\"width: 1184px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/footermenu-nl.png\" alt=\"Footermenu\" width=\"1184\" height=\"729\"><figcaption class=\"wp-caption-text\">Footermenu<\/figcaption><\/figure>\n<p>Globale menu&#8217;s zijn tegenwoordig voor de <a href=\"https:\/\/kinsta.com\/nl\/wordpress-marktaandeel\/\">meeste CMS-oplossingen<\/a> de standaard.<\/p>\n<p>Elk WordPress-thema biedt je mogelijkheden om verschillende types of gebieden uit te lichten in je navigatiemenu. Als je nog meer opties nodig hebt, kun je altijd een <a href=\"https:\/\/kinsta.com\/nl\/blog\/plugins-wordpress-menu\/\">menuplugin<\/a> gebruiken.<\/p>\n<h3>2. Hi\u00ebrarchische sitenavigatie<\/h3>\n<p>Hi\u00ebrarchische navigatie betekent dat de menu&#8217;s veranderen op basis van de context van een pagina.<\/p>\n<p>Veel kranten en contentgerichte sites maken hier gebruik van. Als je bijvoorbeeld naar de homepage van een krant gaat, zie je bovenaan meestal links naar de belangrijkste nieuwscategorie\u00ebn.<\/p>\n<figure style=\"width: 1309px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/voorbeeld-hierarchische-navigatie-new-york-times.png\" alt=\"Voorbeeld van hi\u00ebrarchische navigatie bij de New York Times\" width=\"1309\" height=\"210\"><figcaption class=\"wp-caption-text\">Voorbeeld van hi\u00ebrarchische navigatie bij de New York Times<\/figcaption><\/figure>\n<p>Als het menu globaal was, zou het gelijk blijven nadat je naar een bepaalde categorie gaat. Maar omdat het hi\u00ebrarchisch is, krijg je nieuwe links te zien. Deze links zijn subcategorie\u00ebn van de hoofdcategorie van de pagina waar we op klikten.<\/p>\n<figure style=\"width: 1820px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/voorbeeld-hierarchische-navigatie.png\" alt=\"Voorbeeld van hi\u00ebrarchische navigatie\" width=\"1820\" height=\"496\"><figcaption class=\"wp-caption-text\">Voorbeeld van hi\u00ebrarchische navigatie<\/figcaption><\/figure>\n<p>Op de <strong>Science<\/strong> pagina van de New York Times zie je bijvoorbeeld het hoofdmenu helemaal niet meer. In plaats daarvan zie je alleen links naar andere subcategorie\u00ebn en artikelen die te maken hebben met wetenschap.<\/p>\n<p>Dat het menu verandert op basis van de pagina. is het grote verschil tussen dit type en een globaal menu.<\/p>\n<h3>3. Lokale sitenavigatie<\/h3>\n<p>In tegenstelling tot zowel hi\u00ebrarchische als globale navigatie, refereert een lokale sitenavigatie naar interne links die in de inhoud zelf verwerkt zitten. Meestal krijgt de gebruiker opties te zien die zich bevinden op hetzelfde niveau in de hi\u00ebrarchie \u00f3f een niveau lager. In sommige gevallen worden links voorgesteld die naar andere, relevante pagina&#8217;s leiden.<\/p>\n<p>Een goed voorbeeld zijn magazinesites, die meestal links gebruiken om hun lezers te verleiden om meer te lezen over de context van een onderwerp dat in een artikel wordt besproken. Als ze bijvoorbeeld iets aanhalen waar ze in het verleden over geschreven hebben, dan zullen ze daarnaar linken, in plaats van het helemaal opnieuw uit te leggen.<\/p>\n<figure style=\"width: 980px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/voorbeeld-links-gerelateerde-content-pagina.png\" alt=\"Voorbeeld van links naar gerelateerde content op een pagina\" width=\"980\" height=\"908\"><figcaption class=\"wp-caption-text\">Voorbeeld van links naar gerelateerde content op een pagina<\/figcaption><\/figure>\n<p>Dit wordt echter niet alleen gebruikt door magazines en nieuwssites. <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ecommerce-plugins\/\">Webshops<\/a> gebruiken ook erg vaak dit soort navigatiemenu&#8217;s om producten in dezelfde categorie te laten zien.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/voorbeeld-lokale-navigatie-webshop.png\" alt=\"Voorbeeld van lokale navigatie bij een webshop\" width=\"1500\" height=\"576\"><figcaption class=\"wp-caption-text\">Voorbeeld van lokale navigatie bij een webshop<\/figcaption><\/figure>\n<p>Interne links zijn ook wat betreft <a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-betekent-seo\/\">SEO<\/a> een cruciaal onderdeel. Dit geldt met name voor <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-seo\/\">WordPress SEO<\/a>. Met andere woorden, interne links zijn dus voor iedereen met een site van groot belang.<\/p>\n<h2>Praktijkvoorbeelden van sitenavigatie<\/h2>\n<p>Laten we niet te lang doorhameren op theorie, maar ook eens goed kijken naar wat voorbeelden uit de praktijk. Ik zal het hebben over een nieuwssite en het <a href=\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-thema\/\">Twenty Twenty WordPress-thema<\/a>.<\/p>\n<h3>Nieuwssite: New York Times<\/h3>\n<figure style=\"width: 1267px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/new-york-times-homepage-nl.png\" alt=\"New York Time homepage\" width=\"1267\" height=\"223\"><figcaption class=\"wp-caption-text\">New York Time homepage<\/figcaption><\/figure>\n<p>Op het eerste gezicht lijkt het alsof de New York Times uitsluitend een globaal headermenu gebruikt met daarin de categorie\u00ebn.<\/p>\n<p>Maar schijn bedriegt. De NYT gebruikt allerlei verschillende soorten navigatie op hun honderden pagina&#8217;s met categorie\u00ebn en miljoenen artikelen.<\/p>\n<p><strong>De soorten die ze gebruiken:<br \/>\n<\/strong><\/p>\n<ul>\n<li>Hi\u00ebrarchisch.<\/li>\n<li>Globaal.<\/li>\n<li>Lokaal.<\/li>\n<\/ul>\n<p>Laten we naar de verschillende soorten headernavigaties kijken.<\/p>\n<h4>Homepage<\/h4>\n<p>In de header van de site zitten meteen twee menu&#8217;s verstopt, namelijk een uitvouwbaar globaal menu boven het logo en een hi\u00ebrarchisch menu onder de header. Het is dus eigenlijk een menu met een header en een sub-header.<\/p>\n<figure style=\"width: 1569px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/nyt-homepage-headermenu.png\" alt=\"NYT homepage - headermenu's\" width=\"1569\" height=\"772\"><figcaption class=\"wp-caption-text\">NYT homepage &#8211; headermenu&#8217;s<\/figcaption><\/figure>\n<p>Als je het drop-downmenu in de header uitvouwt, vormt zich aan de linkerkant een sidebar, waar je normaal in de meeste gevallen een lege ruimte ziet.<\/p>\n<p>Op die manier komt het menu dus niet over inhoud van de site heen te staan.<\/p>\n<h4>Homepage (mobiel)<\/h4>\n<p>Laten we dezelfde header eens op een mobiel apparaat bekijken. De meerderheid van internetgebruikers kijkt via hun smartphone naar nieuwssites, dus de mobiele beleving is eigenlijk belangrijker dan die op een computer.<\/p>\n<figure style=\"width: 375px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/nyt-homepage-mobiel.png\" alt=\"NYT homepage - mobiel\" width=\"375\" height=\"100\"><figcaption class=\"wp-caption-text\">NYT homepage &#8211; mobiel<\/figcaption><\/figure>\n<p>Het subheadermenu met nieuwscategorie\u00ebn is niet te zien op de mobiele homepage. In plaats daarvan heb je alleen de uitvouwbare optie.<\/p>\n<p>Wanneer je die uitvouwt neemt het menu je hele scherm in beslag en bedekt daarmee dus alle inhoud op de homepage.<\/p>\n<figure style=\"width: 375px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/uitgevouwen-menu-nyt-homepage-mobiel.png\" alt=\"Uitgevouwen menu - NYT homepage (mobiel)\" width=\"375\" height=\"747\"><figcaption class=\"wp-caption-text\">Uitgevouwen menu &#8211; NYT homepage (mobiel)<\/figcaption><\/figure>\n<p>Het menu bevat alles wat het hoofdmenu van de normale homepage ook bevat en alle links zijn netjes georganiseerd per categorie.<\/p>\n<h4>Categoriepagina<\/h4>\n<p>Op de categoriepagina onder het headermenu, zie je een link naar een verdere subset van de <a href=\"https:\/\/kinsta.com\/blog\/what-is-taxonomy\/\">categorie\u00ebn<\/a>.<\/p>\n<figure style=\"width: 1006px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/nyt-wetenschapspagina-hoofdmenu.png\" alt=\"NYT wetenschapspagina - hoofdmenu\" width=\"1006\" height=\"729\"><figcaption class=\"wp-caption-text\">NYT wetenschapspagina &#8211; hoofdmenu<\/figcaption><\/figure>\n<p>Dit maakt het makkelijker voor mensen die alleen ge\u00efnteresseerd zijn in een specifiek gebied om artikelen te vinden die bij hun interesses passen.<\/p>\n<h4>Categoriepagina (mobiel)<\/h4>\n<p>Op een mobiel apparaat bevatten deze categoriepagina&#8217;s hetzelfde headermenu en dezelfde structuur als de desktopversie. Het secundaire headermenu is echter duidelijk zichtbaar om zo de navigatie naar andere inhoud makkelijker te maken.<\/p>\n<figure style=\"width: 375px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/nyt-wetenschapspagina-hoofdmenu-mobiel.png\" alt=\"NYT wetenschapspagina - hoofdmenu (mobiel)\" width=\"375\" height=\"747\"><figcaption class=\"wp-caption-text\">NYT wetenschapspagina &#8211; hoofdmenu (mobiel)<\/figcaption><\/figure>\n<p>Een andere reden voor deze designkeuze is dat de meeste mobiele gebruikers via social media of een zoekopdracht op een artikel aanbelanden, en dus niet via de homepage.<\/p>\n<h4>Individueel artikel<\/h4>\n<p>Voor individuele artikelen laat de zwevende header zien in welk onderwerp je momenteel zit, maar je ziet alleen het uitvouwbare globale menu (samen met de zoekbalk).<\/p>\n<figure style=\"width: 1820px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/nyt-artikel-headermenu.png\" alt=\"NYT artikel - headermenu\" width=\"1820\" height=\"508\"><figcaption class=\"wp-caption-text\">NYT artikel &#8211; headermenu<\/figcaption><\/figure>\n<h4>Individueel artikel (mobiel)<\/h4>\n<p>Op een mobiel apparaat is de strakke navigatie behouden doordat alleen het headermenu te zien is.<\/p>\n<figure style=\"width: 375px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/nyt-artikel-headermenu-mobiel.png\" alt=\"NYT artikel - headermenu (mobiel)\" width=\"375\" height=\"747\"><figcaption class=\"wp-caption-text\">NYT artikel &#8211; headermenu (mobiel)<\/figcaption><\/figure>\n<h4>Footer<\/h4>\n<p>Het NYT footermenu is hetzelfde op alle homepage&#8217;s, categoriepagina&#8217;s en individuele artikelen.<\/p>\n<figure style=\"width: 1820px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/nyt-artikel-footermenu.png\" alt=\"NYT artikel - footermenu\" width=\"1820\" height=\"1025\"><figcaption class=\"wp-caption-text\">NYT artikel &#8211; footermenu<\/figcaption><\/figure>\n<h4>Footer (mobiel)<\/h4>\n<figure style=\"width: 375px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/nyt-artikel-footermenu-mobiel.png\" alt=\"NYT artikel - footermenu (mobiel)\" width=\"375\" height=\"747\"><figcaption class=\"wp-caption-text\">NYT artikel &#8211; footermenu (mobiel)<\/figcaption><\/figure>\n<p>Op mobiele apparaten laat het footermenu slechts vijf menu-items zien, die allemaal uitvouwen naar subsecties als je erop klikt.<\/p>\n<p>Als je bijvoorbeeld op de sectie <strong>Kunst<\/strong> klikt, zie je al deze subsecties:<\/p>\n<figure style=\"width: 375px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/nyt-artikel-uitgevouwen-footermenu-mobiel.png\" alt=\"NYT artikel - uitgevouwen footermenu (mobiel)\" width=\"375\" height=\"747\"><figcaption class=\"wp-caption-text\">NYT artikel &#8211; uitgevouwen footermenu (mobiel)<\/figcaption><\/figure>\n<p>Aangezien de site <a href=\"https:\/\/kinsta.com\/nl\/blog\/defer-parsing-of-javascript\/\">JavaScript<\/a> gebruikt om dynamisch meer content te laden naarmate je naar beneden scrolt, lijkt het alsof de footer helemaal niet bestaat.<\/p>\n<p>Het dynamisch meer content laden is een leuk trucje waarmee je als sitebeheerder de tijd die bezoekers op je site besteden, kan verhogen. Daarnaast moedig je lezers aan om meer artikelen te lezen. Het nadeel is dat de navigatie iets aan duidelijkheid inboet.<\/p>\n<h4>Content lay-out<\/h4>\n<p>Sommige mensen zijn van mening dat het menu niet de belangrijkste navigatie-tool is voor kranten en blogs. In plaats daarvan is deze groep van mening dat de lay-out zelf de navigatiestructuur aanbrengt voor sites zoals de NYT.<\/p>\n<figure style=\"width: 1820px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/nyt-homepage-netherlands.png\" alt=\"NYT homepage\" width=\"1820\" height=\"1025\"><figcaption class=\"wp-caption-text\">NYT homepage<\/figcaption><\/figure>\n<p>Alle hierboven uitgelichte elementen zijn klikbaar en leiden naar andere interne pagina&#8217;s binnen de site van de New York Times.<\/p>\n<p>Dit heet content lay-out en is een belangrijk element voor de navigatie van hun site. De NYT heeft dit vooral ge\u00efmplementeerd op hun homepage en categoriepagina&#8217;s.<\/p>\n<h3>Het Twenty Twenty WordPress-thema<\/h3>\n<p>Een nieuw jaar, dus een nieuw standaardthema voor WordPress. Deze keer is het <a href=\"https:\/\/kinsta.com\/nl\/blog\/twenty-twenty-thema\/\">Twenty Twenty<\/a> en we zullen dus naar de details kijken om te zien wat er veranderd is qua navigatie.<\/p>\n<p>Ik zal bespreken wat er is veranderd aan hoe de ontwikkelaars met menu&#8217;s en interne links omgaan met deze nieuwste versie van WordPress.<\/p>\n<h4>Headermenu<\/h4>\n<p>Net als bij alle andere standaard <a href=\"https:\/\/kinsta.com\/nl\/blog\/snelste-wordpress-thema\/\">WordPress-thema&#8217;s<\/a>, heeft het nieuwe offici\u00eble thema een eenvoudig menu in de header. Je kunt verschillende locaties voor het menu aangeven. Zo bijvoorbeeld de optie <strong>Desktop Horizontal Menu<\/strong> eruit:<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/04\/voorbeeld-headermenu-twenty-twenty-thema.png\" alt=\"Voorbeeld van een headermenu in het Twenty Twenty thema\" width=\"1920\" height=\"1017\"><figcaption class=\"wp-caption-text\">Voorbeeld van een headermenu in het Twenty Twenty thema<\/figcaption><\/figure>\n<p>Aan de andere kant biedt de optie <strong>Desktop Expanded Menu<\/strong> de mogelijkheid om de menulinks uit te vouwen in een uitgelijnde balk bovenaan rechts.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/04\/voorbeld-uitgevouwen-headermenu-twenty-twenty.png\" alt=\"Voorbeeld van een uitgevouwen headermenu in het Twenty Twenty thema\" width=\"1920\" height=\"1016\"><figcaption class=\"wp-caption-text\">Voorbeeld van een uitgevouwen headermenu in het Twenty Twenty thema<\/figcaption><\/figure>\n<p>Het hoofdgebied voor de content heeft een donkergrijze tint, waardoor de focus van de bezoeker naar het menu gaat.<\/p>\n<h4>Footer<\/h4>\n<figure style=\"width: 1224px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/04\/voorbeeld-foltermenu-twenty.png\" alt=\"Voorbeeld van een footermenu in het Twenty Twenty thema\" width=\"1224\" height=\"122\"><figcaption class=\"wp-caption-text\">Voorbeeld van een footermenu in het Twenty Twenty thema<\/figcaption><\/figure>\n<p>In de footer zitten geen links voor interne navigatie, behalve een simpele &#8220;Tot he top&#8221; link die je terugbrengt helemaal bovenaan de pagina.<\/p>\n<h2>Kenmerken van goede sitenavigatie<\/h2>\n<p>Goede sitenavigatie is altijd ontworpen met een focus op de gebruiker. Het gebruikt duidelijke, eenvoudige taal en links naar de belangrijkste pagina&#8217;s.<\/p>\n<p>Er is genoeg witruimte, kleurgebruik en andere ontwerptechnieken om de navigatie duidelijk te onderscheiden van de content. Daarnaast is het op alle apparaten (zowel mobiel als desktop) makkelijk te lezen en te gebruiken.<\/p>\n<p>Gebruikersgerichte navigatie betekent ook dat het contextueel is. Het neemt de ervaring en verwachting van de gebruiker mee in het ontwerp. Dat is wellicht een reden waarom online kranten nog altijd blijven hangen in hun overvolle design.<\/p>\n<p>Immers, dit is ook de stijl van hun papieren tegenhangers. Wat betreft een krant is dat wat gebruikers en potenti\u00eble klanten verwachten. Daar horen dus ook uitgebreide menu&#8217;s met heel veel (sub)categorie\u00ebn bij.<\/p>\n<p>In het volgende gedeelte zal ik de basics van het maken van een goede navigatie uitleggen.<\/p>\n<h2>8 principes voor een betere sitenavigatie<\/h2>\n<p>Zelfs als je je nog nooit eerder met sitenavigatie hebt beziggehouden, kan je met onderstaande tips de perfecte navigatie voor je site maken.<\/p>\n<h3>1. Plan de structuur en navigatie<\/h3>\n<p>Voordat je begint met het <a href=\"https:\/\/kinsta.com\/nl\/blog\/evergreen-content\/\">schrijven van inhoud voor je site<\/a>, moet je een plan maken hoe de structuur van je pagina&#8217;s en je navigatie eruit zal gaan zien.<\/p>\n<p>Planning is een essentieel onderdeel van het proces om je gebruikers een prettige ervaring te geven. Je kunt een sitemap-creator gebruik om snel testversies te maken van hoe je wilt dat je site-ervaring eruitziet.<\/p>\n<p>Een voorbeeld van een goede tool hiervoor is <a href=\"https:\/\/www.gloomaps.com\/\">GlooMaps<\/a>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/04\/gloomaps.png\" alt=\"GlooMaps\" width=\"1920\" height=\"1049\"><figcaption class=\"wp-caption-text\">GlooMaps<\/figcaption><\/figure>\n<p>Hierbij kun je zoveel documenten maken als je nodig hebt, helemaal gratis. Elk document heeft een unieke URL die je kunt delen om feedback te krijgen en anderen eraan te laten werken. Als het eenmaal gemaakt is, zal je URL 14 dagen beschikbaar zijn na het laatste bezoek. Elk nieuw bezoek verlengt de link met weer 14 dagen.<\/p>\n<p>GlooMaps is zeker niet de enige tool, zo heb je verder bijvoorbeeld <a href=\"https:\/\/octopus.do\/\">Octopus<\/a>, <a href=\"https:\/\/visualsitemaps.com\/\">VisualSitemaps<\/a>, <a href=\"https:\/\/creately.com\/lp\/website-sitemap-creator-online\/\">Creately<\/a>.<\/p>\n<h3>2. Volg bewezen standaarden<\/h3>\n<p>Probeer niet zelf het wiel opnieuw uit te vinden. Sitenavigatie draait meer om bruikbaarheid dan creativiteit.<\/p>\n<p>Zeker voor belangrijke elementen zoals waar je je menu moet plaatsen en hoe je duidelijk maakt dat het menu uitvouwbaar is, kun je dus het beste de <a href=\"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/\">bekende standaarden<\/a> volgen.<\/p>\n<p>Drie horizontale strepen, bekend als <a href=\"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/#hamburger-menu\">de &#8220;hamburger&#8221; \u2630<\/a> is \u00e9\u00e9n van de meeste herkenbare iconen voor een uitvouwbaar menu. Een andere is drie punten op een verticale lijn.<\/p>\n<p>Er is een goede kans dat je bezoekers je menu niet goed snappen als je zelf een alternatief gaat proberen te ontwerpen.<\/p>\n<h3>3. Gebruik dezelfde taal als je gebruikers<\/h3>\n<p>In plaats van alleen naar alle standaardpagina&#8217;s te linken, jargon van ontwikkelaars te gebruiken, of extreem creatief te worden, moet je dezelfde taal gebruiken als je gebruikers.<\/p>\n<p>Dit is zowel goed voor je <a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-betekent-seo\/\">SEO<\/a> als gebruiksvriendelijkheid. Maak pagina&#8217;s die laten zien waar je gebruikers op zoeken.<\/p>\n<p>Je kunt die pagina&#8217;s vervolgens linken door <a href=\"https:\/\/kinsta.com\/nl\/blog\/zoekwoorden-onderzoek\/\">dezelfde woorden en termen te gebruiken waarmee je bezoekers je site vinden<\/a> op Google.<\/p>\n<h3>4. Gebruik responsive menu&#8217;s<\/h3>\n<p>Aangezien al <a href=\"https:\/\/www.broadbandsearch.net\/blog\/mobile-desktop-internet-usage-statistics\">meer dan 52% van het online verkeer<\/a> van mobiele apparaten komt, is een responsive\/mobile-first ontwerp tegenwoordig de standaard.<\/p>\n<p>In plaats van menu&#8217;s die zich tot buiten het frame van een mobiele browser uitstrekken of veel te vol zijn, moet je zorgen dat je uitvouwbare mobiele menu&#8217;s maakt.<\/p>\n<p>Er is een goede reden dat het tegenwoordig de standaard is. Horizontale menu&#8217;s met kleine tekst zijn moeilijk te lezen en het is vaak nog moeilijker om erop te klikken en dus te gebruiken op mobiele apparaten.<\/p>\n<p>Het goede nieuws is dat alle <a href=\"https:\/\/kinsta.com\/nl\/blog\/snelste-wordpress-thema\/\">betere WordPress-thema&#8217;s<\/a> standaard een <a href=\"https:\/\/kinsta.com\/nl\/blog\/responsive-webdesign\/\">responsive ontwerp<\/a> en menu hebben. Tenzij je dus je eigen WordPress-site helemaal zelf maakt, helpt WordPress je op dit punt dus uit de brand.<\/p>\n<h3>5. Gebruik je footermenu op een handige manier<\/h3>\n<p>Gebruikers die blijven lezen en scrollen naar de onderkant van je menu zijn meer betrokken dan de gemiddelde gebruiker. Doe daar je voordeel mee door de ruimte onderaan elke pagina&#8217;s te vullen met je beste content.<\/p>\n<p>Aangezien de <a href=\"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/#web-best-designformatting-practices\">footer geen ruimte &#8220;above the fold&#8221;<\/a> gebruikt, kun je hier gerust erg specifiek zijn en verschillende categorie\u00ebn opsommen en zelfs belangrijke pagina&#8217;s of artikelen specifiek noemen.<\/p>\n<p>Kijk als voorbeeld eens naar hoe we onze footer op deze pagina hebben vormgegeven. We benoemen essenti\u00eble feature-pagina&#8217;s, ons bedrijf, verschillende bronnen en nog meer.<\/p>\n<p>De footer biedt je de mogelijkheid om content te benadrukken die net niet in je header past.<\/p>\n<h3>6. Gebruik kleur en witruimte om navigatie te scheiden van andere elementen<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/nl\/blog\/zo-verander-je-het-lettertype-in-wordpress\/\">Gebruik kleur, lettertypen en witruimte<\/a> om je menu&#8217;s zichtbaar te scheiden van je content en zijbalken. Maak het zo duidelijk mogelijk waar je navigatie begint en eindigt.<\/p>\n<p>Het maakt niet uit wat hoe duidelijk je menu&#8217;s zijn of naar welke prachtige pagina\u2019s ze linken als je bezoekers je menu\u2019s \u00fcberhaupt niet kunnen vinden.<\/p>\n<h3>7. Gebruik geen dropdown-menu&#8217;s<\/h3>\n<p>Voor de meeste sites zijn <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-dropdown-menu\/\">dropdown-menu&#8217;s<\/a> niet nodig of nuttig. Wanneer gebruikers een link in een menu zien, is de aanname dat je daarop kan klikken. Dit leidt dus tot verwarring bij de gebruiker, tenzij het ontwerp de dropdown duidelijk scheidt van klikbare links.<\/p>\n<p>Te veel links in je hoofdmenu is ook slecht voor de gebruiksvriendelijkheid van je site.<\/p>\n<p>Het implementeren van hi\u00ebrarchische en lokale navigatie in plaats van dropdown-menu&#8217;s versoepelt het gebruik. Hierdoor kunnen gebruikers meerdere pagina&#8217;s vinden en brengen ze meer tijd met de inhoud van je site door, in plaats van door een enorme lijst met links te scrollen.<\/p>\n<h3>8. Maak je structuur zo plat mogelijk<\/h3>\n<p>Als je wilt dat gebruikers gemakkelijk alle pagina&#8217;s op je site kunnen vinden, moet je een platte structuur gebruiken.<\/p>\n<p>In plaats van het linken naar een handjevol pagina&#8217;s vanaf je homepage, waarna je steeds verder uitbreidt met sub-pagina&#8217;s en categorie\u00ebn, kun je het beter simpel houden.<\/p>\n<p>Zorg dat je een link hebt naar belangrijke categorie\u00ebn vanaf je homepage, en link vanaf daar direct naar elke laag binnen de subcategorie\u00ebn of artikelen.<\/p>\n<figure style=\"width: 1461px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/02\/platte-sitestructuur.jpg\" alt=\"Platte sitestructuur\" width=\"1461\" height=\"350\"><figcaption class=\"wp-caption-text\">Platte sitestructuur<\/figcaption><\/figure>\n<p>There is evidence that <a href=\"https:\/\/searchengineland.com\/seo-benefits-developing-solid-site-structure-277456\" target=\"_blank\" rel=\"noopener noreferrer\">flattening the structure<\/a> in this way has a positive effect on SEO and can lead to <a href=\"https:\/\/kinsta.com\/nl\/blog\/google-sitelinks\/\">Google sitelinks<\/a>. So don&#8217;t let your website structure get too messy!<\/p>\n<h2>Trends in sitenavigatie<\/h2>\n<p>Alhoewel de bredere <a href=\"https:\/\/kinsta.com\/nl\/blog\/webdesign-trends\/\">trends binnen webdesign<\/a> geavanceerde elementen bevatten zoals 3D-ontwerpen en het gebruiken van op maat gemaakte afbeeldingen in combinatie met bijzondere designs, hebben menu&#8217;s een wat rustiger jaar achter de rug.<\/p>\n<p>Maar dat betekent niet dat alles hetzelfde is gebleven. Hier is onze samenvatting van de belangrijkste menutrends in de laatste paar jaar.<\/p>\n<h3>Expandable Categories in Full-Screen Mobile Menus<\/h3>\n<figure style=\"width: 750px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/04\/uber-mobiel-menu.jpeg\" alt=\"Uber - mobiel menu\" width=\"750\" height=\"1187\"><figcaption class=\"wp-caption-text\">Uber &#8211; mobiel menu<\/figcaption><\/figure>\n<p>Uber en andere giganten met moderne ontwerpen hebben de gebruiksvriendelijkheid van hun menu\u2019s sterk verbeterd.<\/p>\n<p>Een probleem voor dit soort bedrijven is dat ze zoveel producten en categorie\u00ebn hebben dat ze nooit in \u00e9\u00e9n menu passen.<\/p>\n<p>Dit is opgelost door duidelijke, uitvouwbare mobiele menu&#8217;s met heldere categorie\u00ebn te gebruiken, in plaats van eindeloze lijsten met links.<\/p>\n<h3>Zwevende headermenu&#8217;s<\/h3>\n<p>De meest zichtbare trend voor menu&#8217;s is waarschijnlijk het zwevende headermenu.<\/p>\n<p>Een zwevend menu blijft bovenaan het venster van je browser &#8220;plakken&#8221; terwijl je naar beneden scrolt (zoals te zien bij ons op kinsta.com). Dit is meestal een header met ook een klein logo en een zoekbalk.<\/p>\n<p>Het is een goede oplossing, omdat het voor gebruikers handig is om continue toegang te hebben tot het menu. Dit type menu is onderdeel van de meeste WordPress-thema&#8217;s en het lijkt er niet op dat dit, in elk geval op korte termijn, zal veranderen.<\/p>\n<h3>Overlappende dropdown-menu&#8217;s op desktop<\/h3>\n<p>Zoals we eerder zeiden is een belangrijk advies het achterwege laten van dropdown-menu&#8217;s. Daar is een goede reden voor.<\/p>\n<p>Maar dat betekent niet dat deze menu\u2019s meteen de prullenbak inkunnen. Het probleem is alleen dat het implementeren van <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-dropdown-menu\/\">dropdown-menu&#8217;s<\/a> op een logische manier erg lastig is.<\/p>\n<p>Als je de overlapping een duidelijke kleur geeft, kunnen ze er juist voor zorgen dat de volledige aandacht van je gebruiker naar het menu gaat. Je hebt ook meer opties voor uitvouwbare categorie\u00ebn dan alleen links te laten zien wanneer mensen hun muis erboven hangen.<\/p>\n<p>Hierdoor is dit de afgelopen jaren een groeiende trend geweest. Inmiddels gebruiken veel innovatieve sites en templates een overlappend dropdown-menu binnen de desktopversie.<\/p>\n\n<h2>Samenvatting<\/h2>\n<p>Hopelijk heb je door dit artikel een helder beeld van wat sitenavigatie is en wat belangrijke aandachtspunten zijn.<\/p>\n<p>Focus altijd op eenvoud en duidelijkheid, en niet op creatief ontwerp. Zorg dat je voor de navigatie van je site rekening houdt met zowel mobiele als desktop-gebruikers. Vind je het allemaal toch te ingewikkeld? Dan kan het een goed idee zijn om <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ontwikkelaar-huren\/\">een webdeveloper in te huren<\/a>.<\/p>\n<p>Probeer in ieder geval altijd de <a href=\"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/#menu-navigation\">best practices voor het ontwerpen van menu&#8217;s<\/a> te volgen zodat je bezoekers en <a href=\"https:\/\/kinsta.com\/nl\/blog\/alternatieve-zoekmachines\/\">zoekmachines<\/a> je inhoud makkelijk kunnen vinden.<\/p>\n<p>Duidelijkheid en bruikbaarheid zullen ook in de toekomst belangrijk blijven. Als je dezelfde taal gebruikt als je gebruikers en een voor hen logische structuur gebruikt, dan gaan je menu\u2019s zeker nog wel een tijdje mee.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Het instellen van de navigatie van een site is iets wat veel site-eigenaren uitstellen tot het laatste moment. Het voelt dan ook vaak meer als een &#8230;<\/p>\n","protected":false},"author":103,"featured_media":31209,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[195,82],"topic":[877],"class_list":["post-31180","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-ux","tag-website","topic-gebruikerservaring"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Zo verbeter je de navigatie van je site (met voorbeelden en redenen waarom)<\/title>\n<meta name=\"description\" content=\"Sitenavigatie be\u00efnvloedt hoe bezoekers door je pagina&#039;s scrollen. Slechte navigatie heeft negatieve impact op conversies, tijd op je site en SEO.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo verbeter je de navigatie van je site (met voorbeelden en redenen waarom)\" \/>\n<meta property=\"og:description\" content=\"Sitenavigatie be\u00efnvloedt hoe bezoekers door je pagina&#039;s scrollen. Slechte navigatie heeft negatieve impact op conversies, tijd op je site en SEO.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-22T13:41:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-06T13:09:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/04\/verbeter-navigatie-site.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Matteo Du\u00f2\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Sitenavigatie be\u00efnvloedt hoe bezoekers door je pagina&#039;s scrollen. Slechte navigatie heeft negatieve impact op conversies, tijd op je site en SEO.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/04\/verbeter-navigatie-site.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@matteoduo\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matteo Du\u00f2\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"22 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/\"},\"author\":{\"name\":\"Matteo Du\u00f2\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/9d811e805493f00205e6409451055174\"},\"headline\":\"Zo verbeter je de navigatie van je site (met voorbeelden en redenen waarom)\",\"datePublished\":\"2020-04-22T13:41:22+00:00\",\"dateModified\":\"2023-11-06T13:09:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/\"},\"wordCount\":3840,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/04\/verbeter-navigatie-site.jpg\",\"keywords\":[\"UX\",\"website\"],\"articleSection\":[\"WordPress handleidingen\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/\",\"name\":\"Zo verbeter je de navigatie van je site (met voorbeelden en redenen waarom)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/04\/verbeter-navigatie-site.jpg\",\"datePublished\":\"2020-04-22T13:41:22+00:00\",\"dateModified\":\"2023-11-06T13:09:42+00:00\",\"description\":\"Sitenavigatie be\u00efnvloedt hoe bezoekers door je pagina's scrollen. Slechte navigatie heeft negatieve impact op conversies, tijd op je site en SEO.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/04\/verbeter-navigatie-site.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/04\/verbeter-navigatie-site.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Zo verbeter je de navigatie van je site (met voorbeelden en redenen waarom)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gebruikerservaring\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/gebruikerservaring\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Zo verbeter je de navigatie van je site (met voorbeelden en redenen waarom)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/9d811e805493f00205e6409451055174\",\"name\":\"Matteo Du\u00f2\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/78636e34d9c125b93efb7e0893a776f8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/78636e34d9c125b93efb7e0893a776f8?s=96&d=mm&r=g\",\"caption\":\"Matteo Du\u00f2\"},\"description\":\"Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.\",\"sameAs\":[\"https:\/\/www.matteoduo.com\",\"https:\/\/www.linkedin.com\/in\/matteoduo\/\",\"https:\/\/x.com\/matteoduo\"],\"url\":\"https:\/\/kinsta.com\/nl\/blog\/author\/matteoduo\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Zo verbeter je de navigatie van je site (met voorbeelden en redenen waarom)","description":"Sitenavigatie be\u00efnvloedt hoe bezoekers door je pagina's scrollen. Slechte navigatie heeft negatieve impact op conversies, tijd op je site en SEO.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo verbeter je de navigatie van je site (met voorbeelden en redenen waarom)","og_description":"Sitenavigatie be\u00efnvloedt hoe bezoekers door je pagina's scrollen. Slechte navigatie heeft negatieve impact op conversies, tijd op je site en SEO.","og_url":"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2020-04-22T13:41:22+00:00","article_modified_time":"2023-11-06T13:09:42+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/04\/verbeter-navigatie-site.jpg","type":"image\/jpeg"}],"author":"Matteo Du\u00f2","twitter_card":"summary_large_image","twitter_description":"Sitenavigatie be\u00efnvloedt hoe bezoekers door je pagina's scrollen. Slechte navigatie heeft negatieve impact op conversies, tijd op je site en SEO.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/04\/verbeter-navigatie-site.jpg","twitter_creator":"@matteoduo","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Matteo Du\u00f2","Geschatte leestijd":"22 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/"},"author":{"name":"Matteo Du\u00f2","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/9d811e805493f00205e6409451055174"},"headline":"Zo verbeter je de navigatie van je site (met voorbeelden en redenen waarom)","datePublished":"2020-04-22T13:41:22+00:00","dateModified":"2023-11-06T13:09:42+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/"},"wordCount":3840,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/04\/verbeter-navigatie-site.jpg","keywords":["UX","website"],"articleSection":["WordPress handleidingen"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/","url":"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/","name":"Zo verbeter je de navigatie van je site (met voorbeelden en redenen waarom)","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/04\/verbeter-navigatie-site.jpg","datePublished":"2020-04-22T13:41:22+00:00","dateModified":"2023-11-06T13:09:42+00:00","description":"Sitenavigatie be\u00efnvloedt hoe bezoekers door je pagina's scrollen. Slechte navigatie heeft negatieve impact op conversies, tijd op je site en SEO.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/04\/verbeter-navigatie-site.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/04\/verbeter-navigatie-site.jpg","width":1460,"height":730,"caption":"Zo verbeter je de navigatie van je site (met voorbeelden en redenen waarom)"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/verbeter-navigatie-site\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"Gebruikerservaring","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/gebruikerservaring\/"},{"@type":"ListItem","position":3,"name":"Zo verbeter je de navigatie van je site (met voorbeelden en redenen waarom)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/9d811e805493f00205e6409451055174","name":"Matteo Du\u00f2","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/78636e34d9c125b93efb7e0893a776f8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/78636e34d9c125b93efb7e0893a776f8?s=96&d=mm&r=g","caption":"Matteo Du\u00f2"},"description":"Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.","sameAs":["https:\/\/www.matteoduo.com","https:\/\/www.linkedin.com\/in\/matteoduo\/","https:\/\/x.com\/matteoduo"],"url":"https:\/\/kinsta.com\/nl\/blog\/author\/matteoduo\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/31180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/103"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=31180"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/31180\/revisions"}],"predecessor-version":[{"id":49889,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/31180\/revisions\/49889"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/31180\/translations\/en"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/31180\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/31180\/translations\/es"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/31180\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/31180\/translations\/fr"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/31180\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/31180\/translations\/jp"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/31180\/translations\/de"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/31180\/translations\/se"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/31180\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/31209"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=31180"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=31180"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=31180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}