Comment créer une bonne page d'erreur 404 personnalisée

L'erreur 404 "not found"

Qu'est-ce qu'une erreur 404 ?

Le code 404 signifie "not found" c'est-à-dire "non trouvé". C'est normal et même conseillé que votre serveur renvoie ce code HTTP si l'URL n'existe pas.

Si un internaute ou un robot (Googlebot et les autres) cherche à accéder à une page de votre site qui n'existe pas, votre serveur doit renvoyer le code HTTP 404. S'il renvoie autre chose c'est qu'il est mal configuré...

Pourquoi faut-il personnaliser le message de la page 404 ?

Quand l'URL est introuvable, selon ce que vous avez prévu sur votre site ou votre CMS, la page qui va s'afficher sera plus ou moins compréhensible et agréable pour l'internaute.

Déjà que l'internaute risque d'être déçu de tomber sur une page introuvable, mieux vaut tout faire pour "rattraper le coup" en rassurant l'internaute pour qu'il reste malgré tout sur votre site.

C'est pour ça que vous devez avoir une page d'erreur 404 personnalisée ! C'est très facile à faire, surtout en suivant ce tuto.

Comment personnaliser la page d'erreur 404

Si vous ne prévoyez rien, en cas d'erreur, la page qui s'affichera sera la page d'erreur par défaut de votre serveur (Apache ou autres) ou peut-être une page prévue par le navigateur (Chrome, Firefox, Safari, Internet Explorer, Edge, Opera, etc.).

La 404 par défaut est trop moche !

La page d'erreur 404 par défaut d'Apache affiche quelque chose de ce genre, avec comme titre le fameux "404 Not Found" :

Not Found

The requested URL /test-erreur-xyz was not found on this server.

Avouez que ce n'est pas super accueillant !

Le code à ajouter dans votre fichier .htaccess

Sur Apache, il suffit d'ajouter une ligne dans votre fichier .htaccess (situé à la racine de votre site). Téléchargez par FTP ce fichier en local sur votre ordinateur, éditez-le et ajoutez la directive ErrorDocument (par exemple en fin de fichier). Puis uploadez-le.

La syntaxe de la directive ErrorDocument est la suivante :

ErrorDocument <code HTTP> <action>

<code HTTP> est le code de l'erreur à personnaliser (dans les 400 ou les 500).

et <action> peut être :

1. soit une URL de redirection locale (si l'action commence par un "/"), ce que je vous recommande fortement
2. soit une URL de redirection externe (si action est une URL valide), ce que je vous déconseille
3. soit un texte à afficher (si l'action ne répond à aucune des deux conditions précédentes). Entourez le texte de guillemets (") s'il contient plusieurs mots.

Concrètement, vous devez indiquer dans <action> l'URI d'une page HTML créée spécialement pour l'occasion. Elle peut être en PHP, en HTML ou ce que vous voulez.

Concrètement, voici donc un exemple valide :

ErrorDocument 404 /page-404.php

8 conseils pour écrire une bonne 404 personnalisée

Conseil n°1 : dans le fichier .htaccess, l'URI de votre page personnalisée doit commencer par / et pas par http ou https, car sinon votre serveur ne va renvoyer un code 302 (redirection temporaire) au lieu du code d'erreur (404 par exemple). En d'autres termes, il ne faut pas ce genre de ligne :

ErrorDocument 404 http://www.example.com/page-404.php

Conseil n°2 : la page personnalisée doit reprendre le design de votre site, avec le même modèle de page que les autres pages de votre site (menu, barre latérale, pied de page). Ainsi, les internautes comprendront qu'ils sont toujours bien sur votre site et seront rassurés. Je ne suis pas le seul à vous le conseiller, l'aide officielle de Google pour créer des pages d'erreur 404 "utiles" indique ceci :

Assurez-vous que votre page d'erreur 404 garde la même apparence graphique (navigation comprise) que le reste de votre site.

Conseil n°3 : la page personnalisée doit rester légère, sans inclure d'éléments lourds à charger ou longs à exécuter. Dans le cas contraire, si vous avez trop d'erreurs 404, votre serveur saturera... Par exemple, ne listez pas les dernières actualités.

Conseil n°4 : en plus de rassurer l'internaute, donnez-lui des moyens de retrouver ce qu'il cherchait. Je vous suggère d'afficher directement au milieu de la page :

• votre moteur de recherche interne
• un lien vers votre formulaire de contact (en invitant l'internaute à expliquer le problème qu'il a rencontré)
• éventuellement quelques liens vers les principales pages

Conseil n°5 : vérifiez que votre page 404 ne génère pas à son tour des erreurs 404 ! Par exemple, si votre template utilise des chemins relatifs en référence à vos fichiers images, CSS, Javascript ou autres, alors il peut arriver que ces chemins ne pointent plus où il faut quand la page 404 est appelée.

Conseil n°6 : si vous avez plusieurs sous-domaines, configurez une page personnalisée pour chaque sous-domaine.

Conseil n°7 : renseignez-vous sur la bonne manière de configurer votre outil de mesure d'audience pour enregistrer le maximum d'informations sur les erreurs 404 (ou 500, etc.). Vous pouvez par exemple créer des alertes pour être prévenu si le nombre d'erreurs dépasse un certain seuil ou augmente trop. Pour aller plus loin, configurez un objectif (même si vous souhaitez qu'il y ait le moins d'erreurs 404 possible) car vous pourrez alors étudier le chemin qui a mené l'internaute vers l'erreur (s'il s'agit de liens internes). Lisez par exemple cet article (en anglais) sur le blog officiel de Google Analytics.

Conseil n°8 : personnalisez l'erreur 404 mais aussi les autres ! Ainsi, le message pourra être plus précis, ce qui sera apprécié par l'internaute. Voici un rappel des erreurs les plus courantes (consultez ma liste complète ou bien celle du W3C) :

• 400 : erreur de syntaxe dans l'adresse de la page
• 403 : le serveur refuse l'accès à la page (en général c'est que l'authentification avec mot de passe a échoué)
• 404 : la page demandée n'existe pas (sous-entendu on n'attendait pas à ce qu'elle soit demandée)
• 410 : la page n'existe plus (sous-entendu c'est voulu et ça ne reviendra pas)
• 500 : erreur interne du serveur
• 503 : service non disponible (l'ensemble du serveur est "planté" !)

Par exemple, pour configurer une page d'erreur 404 personnalisée et aussi une page d'erreur 410 personnalisée, créez les pages page-404.php et page-410.php et mettez ces lignes dans votre fichier .htaccess :

ErrorDocument 404 /page-404.php
ErrorDocument 410 /page-410.php

Personnalisation des erreurs avec les CMS

Personnaliser les pages d'erreur avec WordPress

Si vous utilisez WordPress, c'est vraiment très simple ! Vous pouvez utiliser un plugin dédié (par exemple 404page), mais ça me semble mieux de ne pas surcharger la liste et d'utiliser ce qui est prévu. En effet, il est probable que votre thème contienne un fichier 404.php. Pour le vérifier, une fois dans le back office de WordPress, cliquez sur "Apparence > Editeur" puis sur "404.php" pour l'éditer en ligne.

Il vous suffit alors de modifier le titre (balise H1 a priori) et le texte situé en-dessous, puis d'enregistrer vos modifications. C'est tout !

Si votre page 404.php n'affiche pas de formulaire de recherche interne, ajoutez ceci dans la zone principale du contenu de votre page 404.php :

<?php get_search_form(); ?>

Vous pouvez également créer une page 410.php pour gérer les erreurs 410, et ainsi de suite pour les autres codes d'erreur.

Personnaliser les pages d'erreur avec Joomla

Pour créer une page d'erreur 404 personnalisée pour votre site Joomla, suivez ces étapes :

1. Créez un article 'page-404'

   Créez un article avec l'alias par exemple "page-404" afin de l'utiliser comme page 404. Ajoutez un texte comme par exemple Désolé, nous n'avons pas trouvé la page demandée... Par précaution, interdisez l'indexation en choisissant la valeur "no index, no follow" pour le champ "robots"

2. Ajoutez-le dans votre menu caché

   Créez un élément de menu lié à votre nouvel article 404 (par précaution, mettez là aussi du noindex).

3. Copiez le fichier error.php dans le répertoire de votre template

   Dans votre installation Joomla, vous devriez avoir un fichier error.php situé dans votre répertoire de templates. Sinon, copiez le fichier error.php situé dans templates/system dans votre répertoire de templates. Par exemple, si mon template se nomme 'Cleancloud' je vais copier le fichier error.php dans le répertoire templates/cleancloud.

4. Modifiez le fichier error.php pour rediriger les erreurs 404 vers votre article 404

   Vérifiez que le fichier error.php contient cette ligne au tout début :

   <?php defined('_JEXEC') or die;

   Ajoutez ensuite ces lignes :

   if (($this->error->getCode()) == '404') {
     header("HTTP/1.0 404 Not Found");
     echo file_get_contents(JURI::root().'page-404');
     exit;
   }

Remplacez l'information de 'page-404' par l'alias que vous avez choisi pour l'élément de menu que vous avez créé.

Exemples de pages d'erreur personnalisées

Si vous souhaitez trouver de l'inspiration, regardez des sites fun comme bonjour404.fr qui référence les meilleures idées de pages 404 personnalisées.

Vous pouvez même exploiter votre page d'erreur personnalisée dans votre stratégie de communication ! Ou pourquoi pas de recrutement (pour chercher des bons geeks ou développeurs web) !

Erreurs 404 et référencement (SEO)

Quel est l'impact des erreurs 404 sur le référencement naturel ?

Tout dépend de la cause de l'erreur 404 :

• si vous faites en internes des liens cassés (vers des URL en erreur), ce n'est pas bon !
• si l'erreur ne vient pas de vous mais d'un lien erroné issu d'un autre site, ce n'est pas pénalisant

Je précise tout de même un peu les choses et vous incite à cliquer sur les liens pour en savoir plus :

• vous devriez vérifier qu'en interne, aucun lien ne pointe vers une page en erreur (404 mais aussi 403, 410, 500, etc.). Utilisez mon outil RM Tech pour ça ! Idem pour les URL indiquées dans :
  • vos balises d'URL canoniques
  • vos balises d'URL alternatives pour les langues et les pays (hreflang)
  • vos balises d'URL alternatives pour la version mobile, si vous n'avez pas choisi la technique du responsive web design
  • vos balises d'URL next/prev pour la pagination
  • vos balises d'images <img>
  • etc.
• consultez régulièrement le rapport sur les erreurs d'exploration dans Search Console
• ce n'est pas tout à fait une 404, mais presque : surveillez vos erreurs soft404 !
• vous devriez vérifier régulièrement que vous n'avez pas de (bons) backlinks qui pointent vers des pages en erreur chez vous. Pour savoir quoi faire, suivez ces explications !

Comment réparer une erreur 404 gratuitement ?

Lisez mon tuto ! Comment réparer les erreurs 404 en SEO.

Des questions ? N'hésitez pas à les poser dans les commentaires !

Source de l'image d'illustration : Shutterstock, sous licence