Comment créer une page 404 efficace ? 5 exemples

Quand les liens ne sont pas corrigés suite à la mise à jour d'un site web, ou quand un internaute fait une erreur au moment de renseigner une URL, aucune page web ne correspond : le navigateur ne peut pas afficher le contenu requis. Par défaut, s'affiche alors à l'écran un message difficilement compréhensible, et inesthétique. Créer une page 404 permet de personnaliser le fond et la forme de ce message. La page 404 peut alors transformer l'erreur technique en un avantage stratégique et bénéfique à l'expérience utilisateur.

Est-il nécessaire d'avoir une page 404 sur son site web ?

Les pages 404 permettent de rendre un résultat à l'écran en cas d'erreur de saisie d'une adresse URL. Une page 404 s'affiche également lorsqu'une page du site web est supprimée, et que son lien n'a pas été corrigé. Peu importe d'où provient l'erreur, le risque ne peut être totalement évité.

Une solution consiste à faire un travail permanent d'identification des liens brisés, pour corriger les erreurs. Il n'en reste pas moins que le délai de correction, aussi court soit-il, laisse le temps de faire apparaître des erreurs. Sans compter que malgré son travail de redirection 301, le web designer peut difficilement anticiper l'intégralité des éventuelles fautes de frappe des internautes.

A priori, créer une page 404 personnalisée n'est pas nécessaire. En cas d'erreur en effet, le navigateur affiche une page 404 par défaut. Mais l'enjeu n'est pas uniquement technique, il porte également sur la qualité de l'expérience utilisateur. Or avec et sans page 404, le résultat n'est pas le même. La preuve en images de la nécessité d'avoir une page 404 sur son site web :

Exemple de page 404 par défaut :

Exemple de page 404 personnalisée :

Peu de professionnels s'en passent en pratique, avoir une page 404 sur son site web est en effet recommandé à 3 égards :

• Pour une entreprise, c'est un gage de professionnalisme.
• L'internaute atterrit sur une page d'erreur, soit, mais sur le site web qu'il recherche. Il peut alors se rediriger vers le contenu requis grâce au menu de navigation.
• De nombreuses marques ajoutent une touche d'humour sur leur page 404. C'est un bon moyen de retenir l'attention de l'internaute amusé, à condition que cela soit cohérent avec l'image de marque.

Comment trouver la page 404 d'un site ?

Un web designer peut avoir intérêt à trouver la page 404 d'un site, afin d'y puiser de l'inspiration pour le site web sur lequel il travaille. Pour trouver la page 404 d'un site web, il suffit de rajouter « /404 » à la fin du nom de domaine dans l'URL du site web. Les pages 404 sont également accessibles en suivant la méthode suivante :

1. Se rendre sur une page du site web, autre que la page d'accueil.
2. Modifier l'adresse URL dans la barre d'adresse du navigateur, en insérant une coquille. Il suffit en général de retirer ou d'ajouter des caractères.
3. Observer le résultat : la page 404 du site s'affiche.

1 - Définir des objectifs

Une page 404, en tout état de cause, informe l'internaute que la page est inaccessible. Il n'est pas nécessaire d'en expliquer les causes, qui sont sans doute très techniques eu égard aux connaissances de l'internaute en matière de développement web. Une page 404 efficace fournit en plus des informations utiles. Exemples :

• Aider à la navigation, en affichant le moteur de recherche du site web.
• Rediriger vers des pages stratégiques du site, en intégrant des boutons de redirection.
• Retenir l'attention, en proposant un contenu qui suscite des émotions.
• Distraire, en insérant une animation ou une vidéo pertinente eu égard à la cible.
• Nouer le lien, en ajoutant un formulaire de contact.

À noter que de nombreuses pages 404 redirigent vers la page d'accueil. C'est en effet une page web qui n'a pas vocation à être supprimée, et dont l'URL n'a pas vocation à changer. Le développeur web s'assure ainsi que la redirection fonctionne sur le long terme, sans avoir besoin de modifier la page 404.

2 - Personnaliser le message d'erreur

Le message d'erreur est un contenu froid. C'est-à-dire qu'il n'est pas lié à l'actualité, pour éviter d'avoir à modifier régulièrement la page 404. Il ne s'agit pas de mettre en avant une offre promotionnelle, ni de rebondir sur une actualité pour faire de l'humour, par exemple. Les possibilités sont donc relativement limitées.

Le message d'erreur en outre est un contenu bref. La page 404 ne correspond pas à l'intention de recherche de l'internaute, il ne s'y éternise donc pas : inutile de rédiger de longs textes. « La page demandée n'existe pas », « Page introuvable » ou encore « La page recherchée est indisponible » : une mention de ce type suffit.

Il faut veiller, en tout état de cause, à respecter la ligne éditoriale du site web. Tutoiement ou vouvoiement, niveau de langage et références socioculturelles : l'internaute doit retrouver sur la page 404 les codes éditoriaux habituels de la marque.

3 - Respecter la charte graphique

Personnaliser la page 404 sert à créer une page 404 efficace, et esthétique.

• Une page 404 efficace respecte la charte graphique du site web. Ainsi, l'internaute sait qu'il se trouve plus ou moins au bon endroit. Il poursuit plus favorablement sa navigation sur le site. Concrètement, il s'agit par exemple de reprendre la palette de couleurs de la marque.
• Une page 404 esthétique a une mise en forme soignée et harmonieuse. C'est un gage de professionnalisme, et cela améliore l'expérience utilisateur sur la page 404. Ajouter des médias de type images ou vidéos est un bon moyen de l'agrémenter.

3 - Coder la page 404

Le développeur web code la page 404 comme il code les autres pages du site web. Dans la mesure où son contenu est succinct, la tâche est relativement aisée : quelques lignes d'HTML et de CSS suffisent. Les développeurs qui utilisent un CMS pour créer le site web codent la page d'erreur dans le fichier dédié. Sur WordPress, par exemple, la page 404 peut être personnalisée directement dans le fichier 404.php du thème WordPress du site web. Pour faciliter le codage, et étendre les possibilités stylistiques, il est possible d'utiliser des extensions.

Pour lier la page 404 aux URL erronées, il faut veiller à créer la page 404 au niveau du répertoire racine.

Exemples de pages 404 créatifs

La page 404 utile

L'internaute qui atterrit sur la page 404 de HubSpot constate qu'il se trouve bien sur le site de HubSpot : il y retrouve le menu de navigation, ainsi que la charte graphique du site web. Le message est clair, et l'internaute est incité à consulter, au choix, trois contenus utiles car très recherchés.

La page 404 animée

L'internaute est accueilli de manière conviviale, conformément à la ligne éditoriale de la marque Innocent. Une animation rend l'expérience utilisateur agréable, et dynamise la page 404 d'Innocent. L'internaute peut utiliser le menu pour trouver le contenu recherché, ou faire défiler la page : il accède à un contenu amusant.

La page 404 promotionnelle

Le message de la page 404 Red Bull mise sur une référence humoristique pour distraire sa cible. Une vidéo d'un évènement sponsorisé est ajoutée pour promouvoir la marque et intéresser son auditoire.

La page 404 drôle

Le niveau de langage est volontairement familier, pour s'adresser personnellement à la cible. Le message qui s'affiche sur la page 404 de Topito est clair, et bref. Une vidéo suscite l'émotion : l'internaute ressent de l'amusement, cela améliore son expérience utilisateur.

La page 404 attractive

La page 404 d'Angry Birds s'ouvre sur un visuel grand format, qui confirme à l'internaute qu'il est sur le site web de la marque. L'image en outre attire l'œil, pour retenir l'attention. Le message fait référence à une chanson connue, pour faire sourire.

Pour aller plus loin dans votre stratégie web, évaluez votre site internet avec l'outil Website Grader, ou découvrez le logiciel CMS de Hubspot.