Personnaliser la page d'erreur 404

En général, lorsqu’on demande une page qui n’existe pas ou plus, le navigateur web affiche une page d’erreur 404. Pour voir ce que cela donne, il suffit de taper une URL fantaisiste, comme par exemple celle-là: http://www.letemps.ch/tdg.

En changeant récemment de système de publication, j’ai pris consciemment le risque de présenter ce genre de pages à mes visiteurs, puisque les URL qui étaient en vigueur à l’époque de Spip n’allaient plus fonctionner.

Comme on peut le constater sur certains sites, il est possible de personnaliser la page d’erreur 404 pour:

  • la rendre plus conviviable en expliquant ce qu’il se passe
  • donner l’impression au visiteur qu’il est quand même sur le bon site, malgré l’URL erronée
  • présenter une alternative au visiteur en proposant différents liens pour retrouver l’information désirée
  • passer encore quelques minutes à améliorer son site :smile:

Voici quelques exemples de personnalisation de la page d’erreur 404:

  • Un exemple à ne pas imiter, celui de UBS. On peut essayer par exemple de taper http://www.ubs.ch/garderlargentchezsoi. Dans ce cas-là, le système mis en place par UBS est très simple: lorsqu’une URL inexistante est détectée, le visiteur est redirigé vers la page d’accueil. Il vaut mieux à mon avis présenter une page d’erreur personnalisée pour confirmer au visiteur qu’il s’est bien trompé mais qu’on va l’aider à s’en sortir. Le rediriger automatiquement vers la page d’accueil l’empêche de savoir ce qu’il se passe et le déstabilise.
  • Un exemple minimal avec le site des CFF. On peut essayer par exemple de taper http://www.cff.ch/jepreferelavion. On remarque que l’on se trouve sur une des pages du site des CFF, mais il faut vraiment être attentif car le langage est plus celui d’un informaticien que d’un vulgarisateur. De plus, pour un site suisse qui affiche ses informations dans les 3 langues nationales, afficher un message d’erreur en anglais n’est pas la meilleure manière de se faire comprendre.
  • Un bon exemple avec Apple. On peut essayer par exemple de taper http://www.apple.fr/vivemicrosoft. Nous retrouvons ici presque tous les ingrédients constituant une bonne page d’erreur 404. Nous avons le design du site apple, un message expliquant pourquoi nous ne tombons pas sur la page désirée, une série de liens pour aller plus loin et des images présentant les dernières actualités d’Apple (on pense que dans la majorité des cas, les visiteurs recherchent de l’information actuelle). Pour parfaire le tout, un moteur de recherche trouverait à merveille sa place ici.

Maintenant que vous êtes convaincus de la nécessité de personnaliser votre page d’erreur 404, voici la procédure à suivre:

  • Créez à la racine de votre site un fichier nommé “404.html” qui contiendra le message d’erreur.
  • Créez un simple fichier texte (avec le bloc-notes par exemple), dans lequel vous écrivez ceci:
    ErrorDocument 404 http://www.nom-de-votre-site.com/404.html
  • Nommez ce fichier ainsi: .htaccess et placez-le également à la racine de votre site

Voici ce que ça donne sur mon site: page d’erreur 404 de davidtouvet.com. Quelques ressources pour en savoir plus:

Tags: ,