Bouw een 404-pagina die bezoekers vasthoudt in plaats van wegjaagt

Een bezoeker klikt op een verouderde link en komt op een pagina met alleen de tekst "404 Not Found" in grijze letters. Hij ziet geen zoekveld, geen menu, geen uitweg, en sluit het tabblad. Die ene pagina beslist of je een bezoeker terugkrijgt of voorgoed kwijtraakt.

Key takeaways

• Een standaard WordPress- of Next.js-foutpagina toont alleen een foutcode, zonder navigatie terug naar je site.
• Een zoekveld op je 404-pagina geeft de bezoeker een tweede kans om te vinden wat hij zocht.
• Links naar je drie of vier belangrijkste pagina's werken beter dan een lange lijst met je hele menu.
• Google Search Console laat zien welke 404's het vaakst voorkomen, zodat je weet welke links je eerst herstelt.
• Test je nieuwe pagina altijd naast de standaardpagina om te zien of de boodschap echt duidelijker overkomt.

Stap 1: Breng je huidige 404-situatie in kaart

Open Google Search Console en ga naar het rapport Pagina's. Filter op de status "Niet gevonden (404)" en noteer welke URL's het vaakst een foutmelding opleveren. Bezoek daarna zelf een niet-bestaande pagina op je eigen site, bijvoorbeeld jouwdomein.nl/test-pagina-123, en kijk wat er verschijnt. Bij WordPress zie je vaak nog de kale pagina van je thema. Bij Next.js hangt het ervan af of er al een eigen bestand voor de foutpagina is aangemaakt.

Je weet dat deze stap gelukt is als je een lijst hebt van de URL's die het vaakst een 404 opleveren, en of je site al een eigen 404-sjabloon toont of nog de standaardpagina van het thema of framework.

Stap 2: Bouw de pagina met een zoekveld en de belangrijkste links

Bij WordPress kun je de plugin 404page gebruiken om een bestaande pagina als 404-sjabloon aan te wijzen, of je past het bestand 404.php van je thema aan. Zet op die pagina een korte uitleg, het ingebouwde zoekveld van WordPress en links naar je homepage, je contactpagina en je belangrijkste dienst- of productpagina.

Bij Next.js maak je met de App Router een bestand app/not-found.tsx aan, of bij de Pages Router pages/404.tsx. Zet daarin dezelfde onderdelen: een zoekveld dat naar je zoekresultatenpagina verwijst of een invoerveld dat direct doorstuurt, en Link-componenten naar je belangrijkste pagina's.

Je weet dat deze stap gelukt is als een niet-bestaande URL op je site nu de eigen pagina toont met een werkend zoekveld en minstens drie links, in plaats van de kale standaardmelding.

Stap 3: Schrijf een boodschap die duidelijk is zonder je te verontschuldigen

Zeg in één zin wat er aan de hand is, zonder technische foutcodes of jargon. Vermijd een grap over verdwalen als je site ook bezoekers in een andere taal of cultuur bedient, want een grap vertaalt niet altijd goed. Sluit de zin af met een concrete richting: zoek verder, ga naar de homepage, of neem contact op.

Je weet dat deze stap gelukt is als een collega die de pagina voor het eerst ziet, zonder verdere uitleg begrijpt wat er mis is en wat hij nu kan doen.

Stap 4: Test je pagina tegen de standaardfoutpagina

Vergelijk een screenshot van je nieuwe pagina met de oude, kale foutmelding. Vraag iemand die de site niet kent welke van de twee duidelijker is. Controleer daarna met de netwerktab van je browser, of met een externe statuscontrole, of de pagina nog steeds een echte 404-serverstatus teruggeeft. Dat is belangrijk: een mooie pagina die per ongeluk status 200 teruggeeft, kan door zoekmachines als een echte, indexeerbare pagina worden behandeld.

Je weet dat deze stap gelukt is als de pagina zelf duidelijk verbeterd is, en de serverstatus nog steeds 404 blijft.

Aanbevolen platforms en tools

Tips en tricks

• Zet je zoekveld bovenaan de pagina, niet onderaan. De meeste bezoekers scrollen op een foutpagina niet verder.
• Houd de lijst met links kort. Vier duidelijke keuzes werken beter dan een kopie van je hele hoofdmenu.
• Controleer na elke thema- of frameworkupdate opnieuw of de 404-pagina nog de eigen versie toont. Een update kan de standaardpagina stilzwijgend terugzetten.
• Koppel je 404-pagina aan dezelfde analytics als de rest van je site, zodat je ziet hoeveel bezoekers via het zoekveld alsnog verdergaan in plaats van weggaan.
• Gebruik in de link-lijst de exacte paginanamen zoals bezoekers ze kennen, niet interne benamingen uit je CMS.

Doe de zelfscan

Begin met stap 1 en zoek vandaag nog uit welke 404-pagina je bezoekers nu te zien krijgen. Kun je de technische aanpassing niet zelf inbouwen, dan is HisarWeb er om die kant te verzorgen, maar de basis van dit stappenplan kun je met gemiddelde WordPress- of Next.js-kennis zelf zetten.