Een 404-pagina ontwerpen die een eerlijke fout en bruikbare uitweg biedt

Een goede 404-pagina vertelt dat het gevraagde adres niet beschikbaar is en helpt iemand een passende volgende route vinden. Zij moet ook technisch een echte 404-respons leveren. Een vriendelijk ontwerp met status 200 kan de ontbrekende pagina als succesvolle publicatie laten lijken.

Ontwerp de foutpagina als herstelpunt. Houd de boodschap kort, behoud herkenbare navigatie en bied enkele nuttige keuzes. Gebruik de fout niet als aanleiding om een bezoeker automatisch naar een willekeurig aanbod te sturen. Soms bestaat er een passende opvolger; dat vraagt een afzonderlijke redirectbeslissing voor dat specifieke adres.

Begin met een bruikbaar tekstmodel

Een eerste tekst kan uit drie eenvoudige onderdelen bestaan:

• “Deze pagina is niet gevonden.” Benoem de feitelijke toestand zonder de bezoeker de schuld te geven.
• “Het adres kan gewijzigd zijn of niet meer bestaan.” Geef een mogelijke verklaring zonder te doen alsof de oorzaak al bekend is.
• “Bekijk onze diensten of zoek een onderwerp.” Bied routes die werkelijk op de site beschikbaar zijn.

Dit is een bruikbaar redactioneel model, geen verplichte standaardtekst. Pas de opties aan uw inhoud aan. De gids over oproepen tot actie helpt knoptekst koppelen aan een echte handeling. Beloof geen zoekfunctie die de pagina vervolgens niet heeft.

Bewaar de juiste technische betekenis

De server hoort op een ontbrekend adres de passende status terug te geven, ook wanneer het foutscherm in dezelfde vormgeving wordt getoond als gewone pagina's. Test een willekeurig onbekend pad rechtstreeks. Een router kan bij interne navigatie correct lijken en bij rechtstreeks laden toch een verkeerd antwoord geven.

Google beschrijft 404 en soft 404 in zijn documentatie over HTTP-fouten. De officiële betekenis van de status staat in RFC 9110. Een 404 is niet automatisch een websitefout die koste wat kost moet verdwijnen. Zij is juist wanneer de gevraagde publieke inhoud niet bestaat en geen andere passende bestemming is gekozen.

Geef een beperkte set herstelroutes

Kies routes die bij de website passen: dienstenoverzicht, kennisbank, productcategorieën of een zoekfunctie. Een lijst met twintig promoties maakt herstel moeilijker. Algemene navigatie mag herkenbaar blijven, maar het hoofdantwoord moet de ontbrekende toestand duidelijk houden.

Werk vanuit de interne linkstructuur. Een bezoeker die een oud artikel zocht heeft niet noodzakelijk behoefte aan een verkoopgesprek. Wanneer het oorspronkelijke adres herkenbaar bij een categorie hoort, kan een relevante suggestie helpen. Zorg wel dat een automatische suggestie als alternatief wordt gepresenteerd en niet beweert het gezochte document te zijn. Toets ook dat alle aangeboden routes zelf bestaan.

Een fictieve foutpagina voor een vakvereniging

Een fictieve vakvereniging ontdekt oude links naar beëindigde evenementpagina's. Op onbekende evenementadressen toont zij een korte foutmelding, een link naar actuele evenementen en een route naar het archief. Er verschijnt geen automatisch inschrijfformulier voor een ander evenement.

Voor drie oude evenementen met een werkelijk bewaard verslag bestaat een passende inhoudelijke bestemming. Die adressen worden apart beoordeeld voor omleiding. Overige onbekende paden blijven een echte 404 met dezelfde herstelmogelijkheden.

Dit is een fictief ontwerp. De drie mogelijke omleidingen zijn geen bewijs dat ieder oud evenement een opvolger heeft. De oefening scheidt een algemene foutpagina van specifieke beslissingen over bekende oude inhoud.

Stuur alleen om wanneer de bestemming past

Een algemene omleiding naar de homepage laat bezoekers vaak raden wat er gebeurd is. Zij kan bovendien de technische fout verbergen zonder de oorspronkelijke vraag te beantwoorden. Een echte opvolger verdient een doelgerichte omleiding; een willekeurige centrale pagina niet automatisch.

De gids over redirects beschrijft hoe u overeenkomst beoordeelt. Vraag bij een oud adres welke informatie iemand verwachtte en wat de nieuwe bestemming daarvan overneemt. Leg de keuze vast. Zo voorkomt u dat een massaregel alle verwijderde producten, oude vacatures en onbekende typfouten als hetzelfde probleem behandelt. De 404-pagina blijft beschikbaar voor adressen zonder passende opvolger.

Maak herstel toegankelijk en rustig

Gebruik een duidelijke hoofdkop, gewone links, zichtbare focus en voldoende contrast. Een groot decoratief beeld mag de foutmelding niet verdringen. Vermijd automatische tijdslimieten of onverwacht doorspringen terwijl iemand probeert te lezen.

W3C beschrijft het belang van begrijpelijke linkdoelen. Een link “Naar de kennisbank” helpt kiezen wanneer die bestemming werkelijk een kennisbank is. Een algemene knop “Doorgaan” geeft weinig context. Controleer de foutpagina met toetsenbord en op een klein scherm. Een onbereikbaar zoekveld op de herstelpagina maakt een bestaande frustratie groter.

Voorkom dat de foutpagina gevoelige invoer herhaalt

Een onbekend pad kan willekeurige tekst, namen of parameters bevatten. Toon het volledige ingevoerde adres niet zonder noodzaak terug in de zichtbare boodschap of analytische rapportage. Laat de ontwikkelaar eventuele uitvoer veilig behandelen.

Gebruik een generieke uitleg en alleen voldoende context voor herstel. Wanneer u foutmeldingen onderzoekt, is een beperkt patroon vaak nuttiger dan een export met alle volledige URL's. Een contactmogelijkheid om een kapotte verwijzing te melden kan helpen, maar vraag geen onnodige persoonlijke gegevens. De foutpagina is een openbaar onderdeel van de website en verdient dezelfde gegevensgrenzen als andere pagina's.

Controleer foutoorzaak en ontwerp afzonderlijk

Een goede herstelpagina vervangt het repareren van kapotte eigen links niet. Wanneer een actieve menuknop naar een ontbrekend adres leidt, hoort de bron te worden hersteld. Externe oude links kunnen blijven voorkomen, ook wanneer uw eigen site correct is.

Neem daarom in de controle na publicatie zowel een onbekend pad als de belangrijkste gewone routes op. Controleer status, tekst, links en directe toegang. Rapporteer vervolgens concreet wat is hersteld. Een vriendelijkere foutpagina bewijst geen afgenomen foutaantal en een afgenomen foutaantal bewijst geen nieuwe aanvragen. Beide uitkomsten vragen hun eigen waarneming.

Bronnen en grenzen

Google behandelt HTTP-fouten; RFC 9110 definieert statuscodes. W3C beschrijft linkdoelen in context. De vereniging is fictief. Het tekstmodel helpt ontwerpen, maar vervangt geen controle van servergedrag en uw eigen inhoudelijke opvolgers.