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: ,

feed rss Vous aimez ce type de contenu?
Alors suivez-ce blog par RSS ou par email!

Continuez la lecture avec les articles suivants



6 commentaires pour “Personnaliser la page d’erreur 404”

  1. roby dit :

    Pas mal, mais que va t’il se passer si le .htaccess est déjà utilisé pour définir les cool url?

    Je m’explique. Imaginons d’avoir installe WordPress à la racine d’un site. En utilise le fichier .htaccess pour indiquer au serveur de m’afficher des urls sympas, comme pour ton blog. Pourrais-je rajouter la ligne de code que tu présentes dans ce même fichier?

  2. winset dit :

    Salut Roby, oui, le fichier htaccess peut être utilisé pour plusieurs objectifs.

  3. Arno dit :

    Salut j’ai suivi tes instruction a la lettre et ca ma remplencer mon httaccess
    que j’ai remplacer a la racine de mon site et maintenant j’ai plus rien
    http://www.studio35bis.net/naussac/index.htm. qui est une page bidon me renvoi vers un javascript.
    Merci de ton aide

  4. Arno dit :

    Je m’escuse mais c’est pas de ta faute.
    J’ai nomer mon fichier erreur 404.html
    au lieu de 404.html
    Pardon.

  5. nounours dit :

    lorsque je met le fichier .htaccess à la racine je n’est plus rien, on ne peut plus accéder à mon site, pourquoi?
    y’a t il un nom particulier à donner à ce fichier.htaccess?

    merci par avance

  6. nounours dit :

    c’est bon j’ai résolu le problème, désolé…

Laisser un commentaire



Tag Cloud