10 conseils pour faire une page 404

10 conseils pour faire une page 404

Comment faire une page 404 pour qu’elle ne fasse pas fuir vos visiteurs ?

La page 404 correspond à ce qui est affiché lorsque la page que vous avez demandée est introuvable. On connaît tous le fameux message « la page demandée n’existe pas ».

Ce message est si habituel, qu’il déclenche un réflexe chez les utilisateurs: celui de partir sans accorder plus d’intérêt à la page (et au site dans son ensemble).

Comment pouvez-vous tirer avantage de la situation ?

Avant de vous donner les 10 conseils pour faire une page 404 et ne plus faire fuir vos visiteurs, je voudrais partager avec vous une anecdote.

Savez-vous d’où vient le nom de code « Erreur 404 » ?

D’après la légende, des chercheurs du CERN, en Suisse, possédaient un serveur qu’il fallait sans cesse relancer. Or, un serveur défaillant est une des causes d’une « page introuvable ». Pour relancer le serveur les chercheurs devaient se déplacer très souvent dans la pièce où il se trouvait: le bureau 404. Excédés, ils ont fini par nommer cette erreur du numéro de cette pièce maudite. (Source: Wikipédia )

Passons maintenant au vif du sujet!

1. Informez votre visiteurs que la page demandée est introuvable

Ca paraît bête de le préciser, mais pourtant, toutes les améliorations du monde ne devraient pas outrepasser le sens originel de la page. Votre visiteur s’attend à trouver une certaine page : soyez très explicite quand au fait qu‘il ne s’agit pas de la page qu’il attendait.

Ce conseil est d’autant plus vrai que la page ne contiendra pas que cette phrase (au contraire d’une page 404 classique), elle ressemblera donc à une page de contenu.

2. Expliquez pourquoi la page est introuvable

Le premier réflexe du visiteur va être de savoir comment il peut modifier sa requête pour trouver ce qu’il cherche. Donnez lui des indications: url mal orthographiée, page ancienne déplacée, indiquez lui un moteur de recherche ou la page de votre produit phare…

3. Soyez sympa avec votre visiteur

En arrivant sur votre page 404, votre visiteur est débouté et certainement déçu. Rassurez-le et donnez lui des alternatives. Vous ne voudriez pas qu’il se sente stupide et se vexe?

4. Proposez du contenu à se mettre sous la dent

On a tendance a ne vouloir proposer que des liens vers d’autres pages du site. Sachez que vous pouvez y mettre un contenu: vidéo, article écrit, présentation de votre activité, extrait des médias qui parlent de vous…

Ciblez de préférence un contenu accrocheur et original. Plus le visiteur sera surpris, plus son attention sera retenue. Attention tout-de-même à rester dans votre ligne éditoriale!

La plupart des visiteurs se repère à la page d’accueil d’un site web. Le fait d’avoir gardé votre navigation n’est pas suffisant: proposez un lien bien explicite vers l’accueil.

5. Faîtes votre promotion

Profitez-en pour lui proposer de télécharger votre livret promotionnel, utilisez un script « tell a friend » ou mettez un formulaire d’inscription à votre liste d’abonnés.

6. N’hésitez pas à faire une page 404 orignale et marquez votre différence!

La page 404 est souvent décorée d’une grande image explicite. Sortez des sentiers battus et surprenez vos visiteurs.
page 404 | design de site web

7. Mettez en valeur la page par un design particulier

Afin de renforcer la différence entre cette page et les autres pages du site, vous pourriez modifier légèrement votre design (par exemple, vous pouvez enlever la colonne si vous en avez une). Votre visiteur doit savoir qu’il est sur le même site qu’avant: n’en abusez pas !

8. Faîtes de votre page une VRAIE erreur 404

Quand le serveur qui héberge le site web ne trouve pas une page, il renvoie au navigateur une erreur en particulier. Cette erreur possède un nom de code que vous connaissez bien: 404.

Au départ, c’est le navigateur qui créait sa propre page (très moche) et qui contenait le fameux message « La page demandée n’existe pas ». Or, depuis l’avènement de la personnalisation, la plupart des sites sont configurés pour « attraper » l’erreur 404 retournée par le serveur, et envoyer à la place une page dite « 404 » au navigateur.

C’est grâce à cela que vous pouvez créer votre design sur les pages 404.

Cette manipulation ne doit pas empêcher votre site d‘indiquer au navigateur qu’il s’agir d’une erreur 404. La plupart des CMS font ça automatiquement, mais si vous avez créé votre site vous-même, vous devriez indiquer la ligne suivante dans votre fichier htaccess:

ErrorDocument 404 /chemin-vers-votre-page-404.html

9. Permettez à vos visiteurs de vous contacter

Profitez de l’occasion pour proposer votre aide aux visiteurs. Ils apprécieront d’avoir une vraie personne derrière la machine, pour leur venir en aide dans leur recherche.

10. Ne redirigez pas automatiquement!

Ce dernier conseil est un des plus importants et rejoint le premier conseil: votre visiteur doit savoir que sa requête n’a pas abouti. Comment voulez-vous qu’il s’en rende compte s’il est redirigé ? Pour peu qu’il soit distrait un instant, il ne verra même pas la redirection: votre navigation lui semblera alors totalement fantaisiste!

En conclusion, pour créer une bonne page 404 :

Les cordonniers sont évidemment les plus mal chaussés…. Si vous regardez ma page 404, vous le constaterez par vous-même! J’ai justement écrit cet article dans le but de centraliser les bonnes pratiques à appliquer. Maintenant, y’a plus qu’à!

Avez-vous d’autres recommandations pour me permettre de faire une page 404 originale et percutante ?

EDIT 14/03/2013 : Certains conseils sont trop vagues ? Vous ne voyez pas comment les appliquer ? Suivez le guide…

Image: graur razvan ionut / FreeDigitalPhotos.net

créer sa page 404, erreur 404 personnalisée, faire une bonne page 404

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

46 commentaires

  1. Voici de très bonnes suggestions pour une 404, je suis plus ou moins d’accord avec l’ajout de contenu dans cette page, imaginez que cette page finisse par être indexée !… Je préfère travailler le contenu des vraies pages…
    Une petite question me vient à l’esprit, lorsque le serveur plante, il n’y a pas de redirection possible par le htaccess, alors la page affichée sera la page 404 de l’hébergeur non ?

    Répondre
    • C’est une bonne question. En fait, ça ne se passe pas comme vous le suggérez. Si le serveur est arrêté, il renvoie une erreur 503 (serveur indisponible). Mais il est vrai que le navigateur affiche alors sa propre page d’erreur. Généralement, on a le message « Service momentanément indisponible. Veuillez réessayer ultérieurement. »

      En fait, pour être plus précis, les erreurs « 400 » sont provoquées par le client (le navigateur). Par exemple, quand le serveur ne trouve pas une page demandée par le navigateur, il retourne une erreur 404.

      Par contre, si le serveur a un problème interne, alors il émet une erreur « 500 ». Par exemple, l’erreur 503 quand le service est indisponible.

      Merci d’avoir posé cette question. A bientôt

      Répondre
      • Merci MarieEve pour cette réponse précise et détaillée, il va falloir que je révise mes codes d’erreurs !!!

    • Un moteur de recherche ne va pas indexer une page où lui revient un message d’erreur. J’ai par le passé essayé de faire indexer mon « Soft 404 » que j’avais organisé comme un « sitemap ». Si ça peut aider à relancer les visiteurs, ce n’est pas utile du point de vue des moteurs de recherche.

      Répondre
      • Bien vu 😉 Ca semble assez logique en effet que les moteurs ignorent cette page puisqu’elle leur envoie un message d’erreur.
        Merci pour le complément.

  2. Bonsoir Marie-Eve,
    Merci pour ton article, cela m’a permis d’ajouter la dans ma todolist la réfonte de ma page 404.
    En effet, cette page est très importante et il faut la personnaliser. Ainsi, elle empêchera les visiteurs de quitter notre site lorsqu’il tombe sur une page introuvable.

    Manuel

    Répondre
  3. Ca tombe vraiment pile-poil, j’étais en train de suivre le cheminement d’un visiteur sur mon site marchand et paf (et non pas bing 😉 une belle erreur 404.
    Ce visiteur paraissait pourtant bien intéressé mais la il est parti direct.Je vais tacher de suivre vos conseils. Merci.

    Répondre
    • Bonjour Gilles,
      Dans le cas d’un ecommerce, personnaliser la page 404 est vraiment super-importante!

      Répondre
  4. Bonjour Marie-Eve,

    Je pense qu’apporter des alternatives et des portes de sortie est un moyen de palier efficacement à une page 404.

    amicalement

    Répondre
  5. Bonjour Marie-Eve,
    J’ai une question à propos de la page intermédiaire qui s’affiche lorsqu’on s’est incrit sur ton blog et que tu nous dis qu’il faut aller cliquer sur un email qu’on a reçu.
    Où se trouve cette page dans le blog? Comment la crée t-on?
    J’imagine que c’est du B.A BA mais c’est un grand mystère pour une néophyte comme moi en matière d’informatique.

    Répondre
    • Bonjour Hannah,
      Il n’y a pas de question bête, tu fais bien de demander.
      Cette page est simplement une page statique (comme ta page « A propos »). Ensuite, le visiteur est redirigé sur cette page grâce à mon auto-répondeur. En as-tu un ?

      Répondre
  6. Bonsoir MarieEve,
    Oui j’ai SG autorépondeur. Je pense pouvoir me débrouiller pour renvoyer le répondeur sur une page. Si je crée une page elle va être visible dans mon menu alors .Y a t- il un moyen de ne pas la faire apparaître dans mon menu?

    Répondre
    • Si ton menu affiche automatiquement les pages de ton site, je ne crois pas que ce soit possible. Cherche du côté des plugins ou déclare un nouveau menu dans ton thème (c’est un peu technique mais avec un tuto tu devrais y arriver). Après tu pourras le configurer dans l’administration.

      Répondre
      • Bonsoir Marie-Eve, bonsoir Hannah,

        Il y a peut-être plus bête encore, qui serait de créer une vraie page statique en HTML, dans un répertoire hors-wordpress, avec une ligne « disallow » sur ce répertoire dans le robot.text ? Pas d’indexation ni d’apparition au menu…

        Sinon, je crois bien qu’il existe une ligne de code à insérer dans le header du thème, j’avais mis ça dans un ancien blog mais je ne sais pas si ça marche toujours, quelque chose comme :
        wp_list_pages(‘exclude=nnn,nnn,nnn&title_li=’); /* exclure les pages cachees dont les ips sont nnn */
        Il faudrait voir dans le codex de wordpress pour ça…

      • Bonjour,

        Statique ou pas, il faut de toute façon y mettre une instruction pour la cacher de l’indexation. Je ne vois pas trop l’intérêt de passer par une page statique (et se taper la mise en page).

        Pour le menu, je préconise de le créer à la main via le menu « Menu » du menu « Apparence » plutôt que de laisser la liste des pages. Mais sinon, tu as raison, on peut les exclure avec wp_list_page (ce sont les identifiants qu’il faut passer en paramètre et non les ip) 😉

  7. Tiens je ne connaissais pas l histoire du 404.
    Sinon suite à une erreur d orthographe dans une url, je l ai corrigé mais là page a eu le temps d être referencer avant la correction. Du coup erreur 404 et comme c est un site marchant va vraiment falloir que je la personnalisé proposant des produits en vente etc.

    Répondre
    • dans ce cas la, il aurait peut-être mieux valu transformer cette url personnalisée en redirection vers l’adresse corrigée

      2 adresses qui renvoient vers la même page, mouais, Google n’aime pas trop (duplicate content), du coup il faut spécifier sur la page avec la mauvaise url qu’il s’agit d’une copie à l’aide de la balise « link » (à placer dans le header) et de l’attribut « rel=canonical »

      voir : http://support.google.com/webmasters/bin/answer.py?hl=fr&answer=139394

      Répondre
  8. Même si aucun webmaster ne souhaite qu’un visiteur arrive sur une 404 il faut malheureusement quand même s’y préparer car au final c’est autant d’internaute en moins!

    Répondre
  9. Bonjour Marie-Ève,

    Pour ne pas faire fuir le visiteur lorsqu’il reçoit la mauvaise page avec la mention «Erreur 404», la première chose à faire est de l’informer tout de suite en lui donnant des nouvelles alternatives pour tenter de ne pas perdre son client.

    Si le visiteur se sent surpris par rapport à la signification d’une page d’erreur 404, il faut le rassurer gentillement et centraliser les bonnes pratiques à appliquer en lui proposant d’optimiser la page 404 par les moyens suivants:

    ° un lien bien explicite vers la page d’accueil

    ° En lui donnant des indications de la page de votre produit phare

    ° En proposant d’y mettre du contenu accrocheur et orriginal

    ° Mettre un formulaire d’inscription à votre liste d’abonnés

    ° Proposer de l’aide aux visiteurs en leur permettant de vous contacter

    ° Ne pas rediriger automatiquement

    En effet, personnaliser sa page 404 est essentiel et empêchera le visiteur de quitter le site lorsqu’il tombe sur une page introuvable.

    Réal

    Répondre
  10. Beaucoup de bonnes idées dans cet article.
    Je vais voir comment je peux faire sur mes sites .
    (enfin, dès que et si j’arrive à régler le bug qui m’… depuis quelques temps sur mon blog principal :) ).

    Amicalement
    Rémi

    Répondre
  11. Bonsoir,
    Par rapport à ton article, il me manque certaines informations pour créer une 404 attractive :
    – sous quel format créer une page 404, dans quelles dimensions ?
    – comment installer la page 404 créée dans WordPress ?
    Sinon ton article est très clair !
    Bonne soirée et bonnes vacances marocaines !

    Répondre
    • Pouvez-vous nous dire quel est le (très beau) thème de votre site ?

      Répondre
      • C’est vertulab, mais je l’ai pas mal modifié 😉

  12. Marie-Eve, dites-nous comment techniquement on modifie la page 404 sous wordpress. Où la trouve-t-on, tout simplement ?

    Répondre
    • Si vous avez un template 404.php c’est celui-là, sinon créé-le dupliquant page.php.

      Répondre
  13. Bonjour,
    Article et site franchement génial que je découvre aujourd’hui et grâce au site vivez-bloguez ou j’ai trouver le lien.
    Je voulais juste poser le problème que sur mon thème alltuts d’un de mes nouveau site (www.pour-mon-bebe.fr) je n’ai pas la page 404.php dans l’éditeur et non plus dans les fichiers racines du site ?? Comment fait on dans ce cas là ?
    Dans ton dernier post tu parle de dupliquer la page.php en fait il faut la dupliquer et la nommé 404.php en la mettant à la racine du site après l’avoir modifié pour y faire apparaitre tes conseils ? Je m’avoue un peu perdu…

    Répondre
    • Bonjour,

      … en fait il faut la dupliquer et la nommé 404.php en la mettant à la racine du site après l’avoir modifié pour y faire apparaitre tes conseils ?

      Oui c’est ça. EN fait, tu peux la transformer en template facilement en modifiant les premières lignes du fichiers. Comme ça, tu peux créer une nouvelle page et lui associer ce templat et zou!

      Si tu es toujours perdu, no soucy, je vais faire un tuto là-dessus, ça complètera celui-ci! :)

      Répondre
  14. liens d’inscription non opérationel !!!!

    Répondre
    • Vous voulez dire pour l’espace membre ? Il y a parfois des erreurs PHP (je cherche toujours l’origine mais elle semble changeante), dans ce cas, il suffit de recommencer. Désolée pour les inconvénients, je travaille à une solution.

      Répondre
  15. Bonjour MarieEve,

    Ton article est très important pour moi, j’ai changé d’hébergeur,

    j’ai fait des erreurs en changeant de thème, j’ai tout reconstruit de AàZ :-)

    Certains articles ne me plaisaient plus etc… Et je suis néophyte sur WordPress.

    Bref , tu imagines les conséquences.

    J’ai zappé les erreurs 404, j’en suis une moi-même :-)

    J’ai essayé de bidouiller quelque chose, c’est pas mal, mais dois-je nommément intituler la Page 404 ? ou la cacher? Moi je l’ai appelée « section 404 » mais n’aurais je pas de problème avec Google ?

    Elle est ici :

    Peux-tu me dire ce que tu en pense?

    Merci.

    Vincent.

    Répondre
    • Bonjour Vincent,

      Je viens de jeter un oeil à ta page, j’aime bien les listes d’articles, il y en a tant que le lecteur en trouvera bien un qui l’accroche. La page renvoie bien une vraie erreur 404. Et ne t’inquiète pas, elle ne doit pas s’appeler « erreur 404 » absolument, tant que le code serveur qu’elle renvoie est le 404 (ce qui est bien ton cas).

      Pour l’améliorer, je te suggèrerais de mettre un titre plus explicite, histoire qu’on comprenne bien qu’on est pas arrivé là où on était censé arrivé. Les listes d’articles doivent apparaître comme une alternative à ce qu’on cherchait, et non comme contenu principal. Bref, rajoute une phrase d’intro, modifie le titre et ce sera parfait :)

      A++

      Répondre
      • Bonjour MarieEve,

        Merci pour tes précieux conseils, j’ai découvert ton site en essayant de trouver « comment faire pour les erreurs 404 »

        Depuis je reviens régulièrement ici.

        Je trouve ton site formidable avec de précieux conseils.

        Bien à toi

        Vincent

      • Bonjour Vincent,

        Merci pour ta fidélité, c’est important pour moi de savoir que mes lecteurs reviennent spontanément. Ca me motive!

        Bien à toi également,
        MarieEve

  16. Bonsoir,

    Je me suis jamais intéressée à cette page si ce n’est un texte que j’ai traduit pour que ce soir en français, mais c’est vrai qu’on peut bien personnaliser pour mieux accueillir les visiteurs.

    Répondre
  17. Deux excellentes choses à inclure dans la page 404:
    1. un outil de recherche (limité à votre site)
    2. un lien « retour » si la page précédente est bien chez vous.

    J’ajouterais (quoiqu’on puisse le faire via analyse des logs du serveur) un envoi de mail automatisé (en javascript par ex., car la plupart du temps la page doit être en HTML et pas en PHP) au webmaster(soi) pour l’avertir de l’erreur, avec l’HTTP_REFERER évidemment :)

    M., personnaliseur de page 404 depuis le siècle dernier (vieil exemple mais pas le plus ancien ni le plus représentatif : )

    Répondre
  18. merci pour ces conseil sur les pages d’erreur 404.
    Site thème WordPress – page erreur 404, je ne peux pas changer son contenu dans le CMS. IL est paramétré par défaut. je peux juste bouger des widgets dans le footer
    juste une question : comment dupliquer la page est ce sur le serveur par le ftp ? où ailleurs ?

    merci
    Max

    Répondre
  19. merci de ta réponse rapide
    Max

    Répondre
  20. Hum… !

    Bonjour Marie-Eve,

    En lisant ceci, je me suis dit :

    « Wahoo ! Quelle super-page 404 il doit se cacher dans ce site ! Voyons voir tout de suite… »

    J’ai donc tapé « http://lesdoigtsdanslenet.com/gabuzomeuh/ » comme ça, pour voir…

    Et qu’est-ce que je trouve :

    « THE PAGE YOU ARE LOOKING FOR DOES NOT EXIST. SORRY. »
    Rechercher…

    Oups, c’est vrai, je n’avais pas lu ton article jusqu’à la fin, où tu fais bien de préciser : « Les cordonniers sont évidemment les plus mal chaussés…. Si vous regardez ma page 404, vous le constaterez par vous-même! »

    Ceci étant, c’est plein de bonnes idées tout ça, je vais voir ce que je peux en faire, très beaucoup merci bien pour tout ça 😉

    Amicalement,
    Michaël

    Répondre
  21. Tout ceci est-ce bien raisonnable (vu l’heure), mais je me suis bien amusé :

    Merci Marie-Eve :-)

    Répondre
    • Bravo Michael ! Passer à l’action immédiatement est la meilleure des attitudes. :)

      PS: ton formulaire est super centré, ça ne fait pas très joli. Je remettrais les éléments alignés à gauche, ça serait plus joli selon moi.

      Répondre
      • Ah oui, excellente idée, merci beaucoup !

      • Voilà qui est fait :

        ->

        ->

  22. Bonjour Marie Eve,

    Merci pour ces explications, j’ai SG autorépondeur depuis peu, au début le thème de mon blog ne permettait pas l’affichage de mon formulaire dans un widget latéral, j’ai donc crée une nouvelle page en l’appelant « inscrivez vous et recevez gratuitement… », puis maintenant quand je tente l’opération, je n’ai que des pages 404 lol, le seul moment ou je n’ai pas de pages 404 c’est quand je laisse la page automatique de SG autorépondeur lol.
    Même la page ou le lien à télécharger (le cadeau) se met en 404, j’attends une réponse de Autorépondeur. Avez-vous déjà été confronté à cela ? Quelqu’un a-t-il déjà été confronté à cela svp ? Cela me permettrait d’avancer. Merci de vos réponses. Excellente continuation.

    Répondre
    • Bonjour,

      Vérifiez la réécriture d’url de votre site.
      Sinon vérifier que les pages que vous avez indiqué à SG sont bien celles que vous voulez afficher (SG pourra vous guider si vous ne trouvez pas).

      Bien à vous

      Répondre

Trackbacks/Pingbacks

  1. Les 5 commandements du webmaster débutant - Les Doigts dans le Net - [...] il ne trouve rien, il renvoie la fameuse erreur 404: « La page demandée n’existe [...]
  2. Du code à copier-coller pour remplir votre page 404 - Les Doigts dans le Net - [...] d’un de mes premiers articles, je vous expliquais quels contenus mettre sur votre page 404 afin de retenir vos…
  3. Finis les liens cassés dans Wordpress « Flora de Latour Flora de Latour - […] découvert sur le blog de Marie Eve, les doigts dans le net, que l’on pouvait « arranger », relooker, notre page…

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint