Maak je 404 pagina gebruikersvriendelijk in 10 stappen

22 Antwoorden

404 paginaIn principe zijn 404 pagina’s niet nodig. Want CMS’en zorgen ervoor dat links altijd werken, en mensen maken geen fouten… ehh, right? Een 404 pagina is trouwens de pagina die de webserver naar de bezoeker stuurt op het moment dat de opgevraagde URL (het web adres) niet gevonden kan worden. Dit komt meestal doordat de pagina is verwijderd of een typefout is gemaakt in de link of het adres zelf.

Een van de “usability heuristics” (vuistregels voor gebruikersvriendelijkheid) gaat over het opvangen van fouten, zoals bijvoorbeeld de 404 “Pagina niet gevonden” foutmelding. In dit artikel zal ik een aantal van mijn best practices op een rij zetten, en wat voorbeelden geven hoe het wel en niet moet. Aanvullingen zijn natuurlijk welkom in de reacties!

Waar je in ieder geval aan moet denken als je een 404 pagina maakt:

  1. Voorkomen is beter dan genezen

    Voorkomen is beter dan genezen, dus: Verwijder nooit pagina’s. NOOIT!

    • Gebruik bijvoorbeeld Dead-links.com om te checken of je dode links op je eigen site hebt. Als je echt los wil kun je ook nog in zoekmachines [site:domein.nl] invoeren, en de URL van de resultaten ook in dead-links laten checken. Dan weet je of die zoekmachine nog links heeft naar pagina’s die misschien verwijderd zijn. Je kunt die pagina dan weer terugtoveren of er een andere neerzetten. (dit lukte mij alleen bij Google en Yahoo trouwens)
    • Gebruik URL rewriting om een / achter je directories te zetten als de gebruiker (of degene die naar je linkt) dat niet doet. Lang niet alle webservers/ CMS’en doen dit voor je. De server gaat er namelijk vanuit dat als er geen / aan het eind van de URL staat, hij moet zoeken naar een bestand. Op Usarchy is dit overigens nog steeds een probleem met sommige pagina’s, mea culpa :0
    • Verwijder nooit pagina’s. NOOIT! Hier zijn hele boeken over te schrijven, maar de bottom line is dat pagina’s nooit verwijderd mogen worden omdat zoekmachines, backlinks en gebruikers-bookmarks er altijd naar blijven wijzen. Als de informatie niet meer up to date is, zet dat er dan bij. Als je om legale redenen de info niet meer online mag hebben, haal de info dan weg en zet er een waarschuwing neer. Maar laat het adres in tact!
    • Met Google Sitemaps kun je ook goed zien of er nog indexeringsproblemen zijn. De grotere weblog paketten (zoals WordPress) hebben plugins om automagisch de Google sitemap te genereren.

  2. 404 pagina statistieken

    Bijna alle statistische paketten kunnen statistieken geven van hoevaak een 404 melding wordt gegeven. Zoek dat eens uit zodat je weet waar je het allemaal voor doet, je zult verbaasd staan!

  3. Maak je eigen 404 pagina

    Vreemd genoeg hebben heel veel websites nog helemaal geen 404 pagina. Dan krijgt de bezoeker bij een niet gevonden adres een foutmelding van zijn browser, die niet goed uitlegt wat het probleem is en weinig hoop biedt. Je kunt je eigen site testen door gewoon een niet bestaand adres achter je domeinnaam in te voeren (www.domein.nl/onzinlalala)

  4. Nee, de standaard pagina van je webserver/ CMS is niet goed genoeg

    De standaard pagina van je webserver komt meestal niet verder dan een foutmelding en verwijzen naar het hoofddomein. Sommige CMS’en en servers zijn zelfs slechter dan de eigen foutmelding van de browser, zoals bij Martinair.nl:

    Http Status Code: 404
    Reason: File not found or unable to read file

    Daar kan een gebruiker natuurlijk niets mee…

  5. Leg (de oorzaak van) de fout uit

    Leg kort aan de gebruiker uit wat er is gebeurd, en wat de 404 pagina kan hebben veroorzaakt.Leg kort aan de gebruiker uit wat er is gebeurd: “De pagina kan niet worden gevonden”. En ook even wat dat kan hebben veroorzaakt: “Dit kan komen doordat wij een pagina hebben verwijderd, of een typefout is gemaakt in het adres”. Zorg dat de melding in de taal van de gebruiker is en leg de fout niet bij de gebruiker: “404: U heeft een verkeerd adres ingetypt!”. Daar heeft die gebruiker ook niks aan, en in principe kan de gebruiker nooit iets fout doen!

  6. Laat je huisstijl zien

    Om de bezoeker wel het idee te geven dat hij op de goede site zit, moet je op je 404 pagina je logo en huisstijl laten zien. Zorg uiteraard dat je logo een link is naar je homepage.

  7. Geef mogelijkheden voor verder navigeren

    In ieder geval een link naar je homepage, en liefst ook wat categorieën binnen je site waar de bezoeker misschien naar op zoek was. Als het een grote website betreft, loont het om voor verschillende secties eigen 404 pagina’s te maken.

  8. Geef je zoekfunctie weer

    Spreekt voor zichzelf. Een zoekfunctie moet altijd op elke pagina te zien zijn, en zeker ook op je foutmeldingen zodat gebruikers direct verder kunnen zoeken.

    9. Geef jezelf én de gebruiker mogelijkheid voor feedback.

  9. Geef mogelijkheid voor feedback

    Maak een link naar je contact formulier en leg uit dat je feedback erg waardeert, en je daarmee het probleem voor andere gebruikers kunt oplossen. Zo leer je misschien dat een andere website een dode link heeft naar de jouwe, en kun je ze mailen om te vragen het probleem op te lossen. Nog beter is direct een contact formuliertje op de 404 pagina te zetten. Een mailto: link is minder goed, want meer moeite voor de gebruiker.

  10. Geef jezelf feedback

    Zorg natuurlijk voor 404 statistieken, maar ook voor concrete feedback elke keer als een foutmelding zich voordoet. Zorg dat de webmaster een mailtje krijgt als een gebruiker een 404 krijgt, zodat het probleem opgelost kan worden. Zet daarin in ieder geval de URL, de referrer en misschien het IP van de gebruiker om misbruik te voorkomen.

  11. Voor guru’s: voer de verkeerde URL/ querystring in in je interne zoekmachine

    Als je echt lekker bezig bent kun je de URL gebruiken om informatie uit te halen waar de gebruiker naar op zoek was. Dit is natuurlijk een stuk makkelijker als je leesbare URL’s gebruikt, dus niet http://www.domein.nl/?id=123432, maar http://www.domein.nl/rubriek/onderwerp.html. Als dit een 404 oplevert, kun je het woord onderwerp in je zoekmachine invoeren en bijvoorbeeld direct een link maken naar /rubriek/.
    Ditzelfde kun je ook doen met de querystring uit de referrer. Als iemand uit een zoekmachine op een dode link terecht komt, kun je die woorden weer in je zoekmachine invoeren om zo direct een paar goede resultaten weer te geven. Bij A list apart geven ze hier een aardig voorbeeld van.

Bij nader inzien moet ik misschien nog eens een artikeltje schrijven over een van de doodzonden van het web: pagina’s verwijderen. Niet dat daar niet al veel over is geschreven, maar het lijkt wel nodig.

En wat voor 404 pagina heeft Usarchy dan?

Oh, bij Usarchy heb ik (adel verplicht ;)) een 404 gemaakt, die mij eerst deze feedback stuurt:

Source: /static/contact/
Referrer: http://www.dead-links.com/check_links.php
IP: x.x.x.x

Een PHP scriptje pakt dus de URL en de referrer URL (als die er is), en mailt die voordat de echte 404 pagina wordt weergegeven, naar mij. Zo kan ik altijd zien wanneer iemand een 404 foutmelding heeft gekregen.
Vervolgens wordt deze pagina weergegeven, waar de gebruiker nog extra feedback kan geven, en natuurlijk zoeken en verder navigeren.

Heb jij nog andere tips om een 404 pagina gebruikersvriendelijk te maken? Reageer gerust!

22 gedachten over “Maak je 404 pagina gebruikersvriendelijk in 10 stappen”

  1. Erwin

    “vervolgens wordt _deze_ pagina weergegeven”

    HAHAHA wat kreeg ik toen ik op ‘deze’ klikte:

    Parse error: parse error, unexpected T_BOOLEAN_AND in /home/usarchy/domains/usarchy.com/public_html/404_output.php on line 16

    🙂

    Like

    Beantwoorden ↓
  5. davnu

    Verwijder nooit pagina’s. NOOIT! Hier zijn hele boeken over te schrijven, maar de bottom line is dat pagina’s nooit verwijderd mogen worden omdat zoekmachines, backlinks en gebruikers-bookmarks er altijd naar blijven wijzen. Als de informatie niet meer up to date is, zet dat er dan bij. Als je om legale redenen de info niet meer online mag hebben, haal de info dan weg en zet er een waarschuwing neer. Maar laat het adres in tact!

    Kan iemand me uitleggen waarom (niet)? Hoe hou je dan een beheersbare site qua hoeveelheid content? En is het niet slecht qua imago dat je als organisatie ‘nieuws’ van 2004 op je website hebt staan?

    Like

    Beantwoorden ↓
  6. Ruben Timmerman Berichtauteur

    NOOIT! is misschien wat hard gesteld. Maar pagina’s die aan veroudering onderhevig zijn, moeten in een archiefstructuur verwerkt worden. Voor nieuws kun je dus prima een nieuwsarchief maken, waar het nieuws uit 2004 te vinden is.
    Het is daarbij wel belangrijk niet de URL van de pagina te veranderen. Op Usarchy zul je in 2011 nog steeds dit stukje vinden op
    http://www.usarchy.com/2005/11/maak-je-404-pagina-gebruikersvriendelijk/

    Dat je dit automatisch doet (door een goede structuur voor je verouderende content te bedenken) betekent dat URL’s goed blijven werken, en dat het atijd beheersbaar blijft.

    Davnu: wat vind je van dit standpunt? Heb je een voorbeeld waar ik de plank missla of iets mis? Ik hoor het graag!

    Like

    Beantwoorden ↓
  7. lowline

    ..een 404 pagina gebruikersvriendelijk te maken?…of gebruik onze zoekfunctie (rechtsbovenin!)

    Ja hallo Ruben, de luie bezoeker wil dan direct kunnen klikken op _onze zoekfunctie_ en niet hoeven te gaan nadenken waar _(rechtsbovenin!)_ ook alweer zit.

    Like

    Beantwoorden ↓
  8. Ruben Timmerman Berichtauteur

    Hmm ja daar zit wat in lowline. Maar klikken zou je ook weer naar een nieuwe pagina moeten brengen en dit bespaart die click + reload. En ik zou een speciale zoekpagina moeten maken waar nog een keer de zoekfunctie staat 😦

    Toch eens naar kijken misschien…

    Like

    Beantwoorden ↓
  9. Evelina

    Bijna alle statistische paketten kunnen statistieken geven van hoevaak een 404 melding wordt gegeven. Zoek dat eens uit zodat je weet waar je het allemaal voor doet, je zult verbaasd staan!

    Wordt hiermee het onderstaande bedoeld of snap ik het nu niet helemaal?!?!

    feestideeen.html 29,04%
    Default Page 20,30%

    Like

    Beantwoorden ↓
  10. Ruben Timmerman Berichtauteur

    Evelina: nee, dat zijn andere cijfers. Je zou ergens naar moeten zoeken dat lijkt op “error pages” ofzo. Overigens is mijn bewering dat “bijna alle statistische pakketten” dat kunnen misschien wat overdreven. De grote dure pakketten kunnen het wel, maar lang niet alle gratis diensten bieden de mogelijkheid.

    Hier wordt uitgelegd hoe je het met Google Analytics zelf kunt doen:
    http://analytics.blogspot.com/2006/09/tip-tracking-404-pages.html

    Like

    Beantwoorden ↓
  11. Sander

    @Ruben:
    Klikken om bij het zoekvenster te komen betekent natuurlijk geen reload als die zoekfunctie als op de pagina staat. ...of gebruik onze zoekfunctie zou moeten volstaan. Overigens is het de bedoeling dat je, indien je zowel een id als name aan een tag meegeeft, dat deze dezelfde naam hebben (in dit geval heeft je zoekvenster id=”search” en name=”s”). Dit geldt overigens niet voor radio buttons, maar dat terzijde.

    Oh ja, bovenstaande link geeft overigens nog niet meteen de focus aan je zoekveld, maar wellicht dat linken naar een (aan het zoekveld gekoppeld) label hiervoor zou kunnen zorgen.
    En anders maar een JavaScriptje voor hen die dat kunne betalen 😉

    Like

    Beantwoorden ↓
  13. Henri van den Hoof

    Zit zelf in de sales en marketing hoek van onze organisatie en heb deze tip al eerder ooit eens op gelezen. De tip is destijds blijven hangen en heb ‘em dan ook recentelijk verwerkt in de website van onze organistatie. Houden ons bezig met vindbaar maken van informatie in bedrijfsaplicaties, dus een verwijzing daarnaar op de 404 leek me wel toepasselijk met een kleine knipoog. Zie de 404-foutmelding:

    En enigzins aagngepast ook naar de 500-foutmelding:

    En de 403-foutmelding:

    Maar de 404 zal toch wel de meest voorkomende zijn. Verder zeker 301 redirects plaatsen. Het liefst zien we deze pagina’s natuurlijk helemaal niet vertoond worden. Maar als ze nodig zijn, dan toch maar bij voorkeur op een de(r)gelijke manier 🙂

    Like

    Beantwoorden ↓
  15. Boake

    Hallo.

    Ik ben onlangs ook begonnen met een site te maken.
    Heb wel een serieus probleem.
    Mijn 401, 402,404 pagina’s zijn verdwenen.
    Denk dat ik die pagina’s per vergissing heb gewist, maar ben dat niet zeker.
    Dan is er ook nog een http 500 fout.

    Als iemand me daarmee kan helpen zodat ik die pagina’s terug kan invullen, zou dat prachtig zijn.

    Groeten Boake

    Like

    Beantwoorden ↓
  16. Rooseboom

    Ik ben eigenlijk wel benieuwd of je van mening bent, vanuit usablility of een 404 pagina eigenlijk ook de header 404 terug moet geven. 

    Ik noem dit vanuit het oogpunt van zoekmachines (waarvan we er zelf ook een hebben ontwikkeld, vandaar de interesse) die 404 pagina’s graag herkennen aan de status van de pagina en niet zozeer dat het op de pagina zelf vermeldt wordt (pagina niet gevonden).

    Hoe zit dit vanuit het oogpunt dat zoekmachines oude pagina’s reeds hebben geindexeerd?

    grt,
    Maarten

    Like

    Beantwoorden ↓
  18. Rooseboom

    Ruben: tja, aangezien je elke inhoud in een 404 kunt presenteren zou het geen voordeel opleveren om een 200 terug te geven ipv en 404. Toch zie je dat veel websites een verwijderde pagina opvangen met een 200 header en een tekst dat het niet meer bestaat…wellicht dat ze daarmee langer in een SE blijven staan?

    Like

    Beantwoorden ↓
  19. Sander

    Ik ben nu toch al even aan het zoeken via zoekmachines, maar ik vind elke keer alleen maar hoe je met Apache via het .htaccess bestand redirect naar een error pagina (zoals http://www.domein.com/errors/404.html).

    Wat ik wil, is dat de adresbalk van je browser het niet-bestaande webadres blijft tonen, maar in plaats van de standaard server foutmelding mijn eigen melding toont. Hoe krijg ik dat voor elkaar? Moet ik dan bij mijn hostingpartij zijn, of kan ik dit zelf regelen?

    Ruben, jij geeft aan dat je de source meegeeft in de melding die je via mail ontvangt (“Source: /static/contact/”). Ik neem aan dat dat deze url in de adresbalk van de browser is, dus jij weet vast hoe ik dit voor elkaar krijg.

    Like

    Beantwoorden ↓
  20. Wouter de Boer

    Sander:Een 404 moet je niet redirecten. Als je in je .htaccess
    “ErrorDocument 404 /404-pagina.html”
    zet toont apache de inhoud van “404-pagina.html”, die ik hier dus in de root heb gezet.
    Omdat domein.nl/404-pagina.html nu geindexeerd kan worden zou ik voor de zekerheid de noindex,nofollow meta-tag in de header van je custom 404 zetten.

    Like

    Beantwoorden ↓
  21. Patrick

    Ik ben wel erg benieuwd naar dat php script dat je gebruikt om de locatie van de 404 weer te geven en de automastische mailer instelt. Heb je dat ergens van afgeleidt, of zelf ontworpen?

    Like

    Beantwoorden ↓
  22. knutselen

    Het niet verwijderen van pagina’s maakt je sitestructuur onoverzichtelijk. En als ik een map: Archief aanmaak, zal de betreffende link ook niet meer werken. Dank je.

    Wat is hier dan de oplossing voor?

    Like

    Beantwoorden ↓

Plaats een reactie