Mega-menu en SEO: navigatie die crawlers en klanten helpt

Een mega-menu is goed voor SEO zolang de links als gewone <a href>-links in de HTML staan, op mobiel dezelfde links bevat als op desktop en alleen de categorieën toont die echt omzet en zoekvraag hebben. Het gaat mis als het menu pas via JavaScript verschijnt, honderden diepe links op elke pagina zet of andere ankerteksten gebruikt dan waar klanten op zoeken. Het menu staat op elke pagina van je shop en is daarmee het zwaarste interne-linksignaal dat je hebt.

Waarom het menu je belangrijkste interne link is

Een link in de hoofdnavigatie staat op elke pagina. Bij een shop met 20.000 URL's zijn dat 20.000 interne links naar dezelfde categorie. Geen enkele blogpost of footerlink komt daarbij in de buurt.

Dat heeft twee gevolgen:

• Crawlen. Googlebot vindt pagina's via links. Wat in het menu staat, zit op één klik van de homepage. Dat houdt de crawldiepte laag voor je belangrijkste categorieën.
• Gewicht. Interne links verdelen link equity over je site. Een categorie met een menulink krijgt structureel meer interne waarde dan een categorie die alleen via een filter of zoekresultaat bereikbaar is.

Een mega-menu is dus geen designkeuze alleen. Het is de ruggengraat van je interne links. Behandel het ook zo: met een eigenaar, een reden per link en een controle na elke wijziging.

Fout 1: het menu bestaat pas na een klik of hover

Het menu wordt pas geladen als iemand over "Heren" hovert. Een script haalt dan via een API-call de subcategorieën op en bouwt de links.

Googlebot hovert niet en klikt niet. Google rendert JavaScript wel, maar voert geen interacties uit. Links die pas na een gebruikersactie in de DOM komen, ziet Google niet.

Controleer het zo:

curl -s https://www.voorbeeldshop.nl/ | grep -o 'href="/heren/[^"]*"' | sort -u | wc -l

Komen je subcategorieën niet terug in de ruwe HTML, kijk dan in de gerenderde HTML via URL-inspectie in Search Console. Staan ze daar ook niet, dan bestaan ze voor Google niet als menulinks.

Fout 2: links zonder href

Een veelvoorkomend patroon in custom menu's:

<span onclick="window.location='/heren/schoenen'">Schoenen</span>
<a href="#" data-url="/heren/schoenen">Schoenen</a>
<button @click="go('/heren/schoenen')">Schoenen</button>

Voor een bezoeker werkt het. Voor Google is het geen link. Google volgt alleen <a>-elementen met een href die naar een echte URL wijst.

<a href="/heren/schoenen">Schoenen</a>

Wil je dat een klik op het hoofdniveau het submenu opent in plaats van naar de categorie te navigeren? Gebruik dan een aparte <button> voor het openklappen, naast een echte link naar de categorie. Zo blijft de link crawlbaar en werkt het menu ook met toetsenbord en screenreader.

Fout 3: mobiel menu met andere links dan desktop

Google indexeert op basis van de mobiele versie van je site. Dat is mobile-first indexing. Wat in je mobiele menu ontbreekt, ontbreekt dus ook voor Google.

Het gebeurt vaker dan je denkt. Het desktopmenu toont drie niveaus, het mobiele menu alleen het eerste niveau en een zoekbalk. Of het mobiele menu laadt zijn submenu's pas als je op een pijltje tikt.

Fout 4: elke categorie in het menu

Het andere uiterste: een mega-menu met 400 links. Elke subcategorie, elk merk, elke kleur.

Google hanteert geen harde limiet voor het aantal links per pagina. Maar meer links betekent:

• Minder onderscheid. Als alles in het menu staat, krijgt alles hetzelfde gewicht. Je topcategorieën vallen niet meer op.
• Een zwaardere DOM. Honderden extra elementen op elke pagina kosten parse- en rendertijd. Dat kan je INP raken, vooral op goedkopere telefoons.
• Slechtere bediening. Klanten scannen een menu. Een kolom met 40 items scant niemand.

Categorieën met omzet of zoekvraag krijgen een plek. De rest bereik je via de categoriepagina zelf, via breadcrumbs of via een "bekijk alles"-link. Zo blijft het menu kort en blijft het gewicht bij de pagina's die geld opleveren.

Fout 5: ankerteksten die niemand zoekt

Het menu zegt "Collectie", "Inspiratie", "Must-haves", "Nieuw binnen". Klanten zoeken op "damesjassen", "regenjas dames", "winterjas".

De ankertekst van een interne link vertelt Google waar de doelpagina over gaat. Een menu is de plek waar je die tekst duizenden keren herhaalt. Een vage label kost je dat signaal op elke pagina.

• Gebruik in het menu de term waar de categorie op moet ranken, zolang die kort blijft.
• Zet marketinglabels als "Must-haves" in een banner of een aparte promo-tegel, niet als hoofdlink.
• Houd ankertekst, H1 en title-tag van de categorie in lijn. Heet de menulink "Trailschoenen", dan heet de H1 niet "Off-road footwear".

Zoekwoorden per categorie haal je uit Search Console en uit je eigen site search. Kijk vooral naar de termen die klanten in je zoekbalk typen: dat is hun eigen woordkeuze.

Fout 6: menulinks naar gefilterde of geredirecte URL's

Een menulink "Rode jurken" wijst naar /jurken?color=rood. Of een menulink wijst nog naar een oude URL die nu een 301 geeft.

In het eerste geval link je vanaf elke pagina naar een filter-URL die waarschijnlijk een canonical naar /jurken heeft of in robots.txt geblokkeerd is. Je stuurt je sterkste signaal naar een URL die je zelf niet in de index wilt.

In het tweede geval gaat elke crawl via een omweg. Een redirect werkt, maar het is verspilling op de plek waar je de meeste links hebt.

• Wil je een filter in het menu, maak er dan een echte landingspagina van met een schone URL, eigen title en zelfverwijzende canonical. Hoe je bepaalt welke filters dat verdienen, lees je op onze pagina over categoriepagina's, filters en faceted navigation.
• Crawl je shop na elke menuwijziging en controleer dat elke menulink een 200 teruggeeft en indexeerbaar is.

Hoe Magento en Shopify het menu opbouwen

Magento 2

Het standaardmenu van Magento wordt opgebouwd uit de categorieboom. Elke categorie met "Include in Menu" op Ja verschijnt in het menu, tot de diepte die het thema toont.

Aandachtspunten:

• "Include in Menu" per categorie. Controleer dit na een import. Categorieën die alleen voor merchandising of campagnes bestaan, staan vaak ongemerkt in het menu.
• Het menu wordt gecachet als block. Na het verplaatsen van categorieën moet de cache vervallen, anders zien bezoekers en crawlers een oud menu.
• Mega-menu-extensies. Veel extensies laden submenu's via AJAX om de pagina lichter te maken. Controleer altijd of de links in de HTML staan.
• Hyvä. In een Hyvä-thema wordt het menu server-side gerenderd en met Alpine.js open- en dichtgeklapt. De links staan dan gewoon in de HTML. Dat is de juiste opzet.

Shopify

In Shopify beheer je menu's onder Online Store, Navigation. Het thema rendert ze via de linklists-objecten in Liquid. Menu's kunnen genest worden tot drie niveaus.

Aandachtspunten:

• Links naar collecties met filters. Shopify maakt het makkelijk om een menulink naar een gefilterde collectie-URL te maken. Doe dat alleen als die URL een bewuste indexeerkeuze is.
• Apps voor mega-menu's. Sommige apps injecteren het menu met JavaScript na het laden. Controleer de ruwe HTML.
• Productlinks in het menu. Link je vanuit het menu naar een product, gebruik dan de /products/-URL en niet een /collections/x/products/y-variant.

Breadcrumbs en footer: de rest van de navigatie

Het menu is niet de enige navigatielaag. Twee andere doen ook mee:

• Breadcrumbs linken van elk product en elke subcategorie terug naar de bovenliggende niveaus. Daarmee ontvangen categorieën die niet in het menu staan toch links van alles eronder. Voeg BreadcrumbList-markup toe zodat Google het pad ook in de zoekresultaten kan tonen.
• De footer is geschikt voor service- en informatiepagina's: verzending, retourneren, klantenservice, over ons. Gebruik de footer niet als tweede menu met 150 categorielinks. Dat voegt weinig toe en maakt elke pagina zwaarder.

Samen met contextuele links vanuit categorieteksten, koopgidsen en productpagina's vormt dit je interne linkstructuur. De volledige aanpak staat in onze interne linking-strategie voor webshops.

Toegankelijkheid en SEO lopen gelijk op

Een menu dat goed werkt voor screenreaders en toetsenbordgebruikers, werkt meestal ook goed voor crawlers. De basis:

• Echte <a href>-links voor navigatie, <button> voor openklappen.
• aria-expanded op de knop die een submenu opent.
• Het menu binnen een <nav>-element.
• Submenu's bereikbaar met Tab en te sluiten met Escape.

Dat is geen SEO-truc. Het is gewoon goede HTML. Google leest die HTML.

Zo test je je menu

Een vaste controle na elke menuwijziging of thema-update:

1. Ruwe HTML. Haal de homepage op met curl en tel de menulinks. Komen ze overeen met wat je in de admin hebt ingesteld?
2. Gerenderde HTML. URL-inspectie in Search Console, "Geteste pagina bekijken". Staan de links in de gerenderde code?
3. Mobiel. Herhaal de controle met een mobiele user-agent. Zelfde links?
4. Statuscodes. Crawl alle menulinks. Elke link moet een 200 geven, indexeerbaar zijn en naar zichzelf canonicaliseren.
5. Inlinks per categorie. Bekijk in je crawler hoeveel interne links elke categorie krijgt. Categorieën met omzet die bijna geen inlinks hebben, horen in het menu of in een contextuele link.
6. Performance. Meet het aantal DOM-elementen in het menu en kijk in je field data of INP op mobiel binnen de 200 ms blijft.

Wil je dat iemand dit voor je hele shop naloopt, inclusief de rest van de techniek? Dat doen we in een SEO-audit voor webshops. Algemene technische controles vind je op onze pagina over technische SEO.

Veelgestelde vragen

Is een mega-menu slecht voor SEO?

Nee. Een mega-menu is slecht als de links pas na een interactie laden, geen echte href hebben of naar niet-indexeerbare URL's wijzen. Met server-side gerenderde links naar de categorieën die omzet en zoekvraag hebben, helpt een mega-menu juist bij crawlen en het verdelen van interne waarde.

Hoeveel links mag een menu bevatten?

Google noemt geen limiet. De praktische grens ligt bij bruikbaarheid en focus. Hoe meer links, hoe minder elke link opvalt, voor klanten en voor Google. Kies op basis van omzet en zoekvraag, niet op basis van volledigheid.

Ziet Google een menu dat met JavaScript is gebouwd?

Google rendert JavaScript en ziet links die na het laden in de DOM staan. Links die pas na een hover, klik of tap worden opgehaald, ziet Google niet. Render het menu daarom in de HTML en gebruik JavaScript alleen om het te tonen en te verbergen.

Moet het mobiele menu dezelfde links bevatten als desktop?

Ja. Google indexeert de mobiele versie. Links die alleen in het desktopmenu staan, tellen voor Google niet mee. Inklappen op mobiel is prima, zolang de links in de HTML staan.

Kan ik merkpagina's of filters in het menu zetten?

Ja, als het volwaardige landingspagina's zijn met een schone URL, eigen content en een zelfverwijzende canonical. Een menulink naar een parameter-URL die je zelf uit de index houdt, is een tegenstrijdig signaal.