Annonces Google

Vous êtes ici : Dossiers référencement > Webmastering

Créez enfin une bonne page d'erreur 404 personnalisée !

Par , le 27 mai 2016

Il est (malheureusement) courant que des internautes arrivent sur une page introuvable sur votre site. Plutôt que de leur afficher la page 404 par défaut, vous devriez créer une page 404 personnalisée. Voici comment faire avec plein d'astuces !

Page d'erreur 404

Créer une page d'erreur 404 personnalisée utile à l'internaute

Qu'est-ce qu'une erreur 404 ? Pourquoi la personnaliser ?

Juste un rappel : 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é...

Dans ce cas, 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 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 !

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

Conseil n°1 : 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...

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 (source) :

  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 ou 404notfound.fr qui référencent 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

Au fait, 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 !

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

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

Cet article vous a-t-il plu ?
Note : 5.0 (1 vote)
Cliquez pour voter !

A propos de l'auteur : Olivier Duffez Olivier Duffez sur Google+ Olivier Duffez sur Twitter Olivier Duffez sur Facebook Olivier Duffez sur Pinterest Olivier Duffez sur LinkedIn

Consultant en référencement, Olivier Duffez a travaillé pour les plus grands sites (Doctissimo, FNAC,...). Il édite le site WebRankInfo qu'il a créé en 2002, devenu la + grande communauté francophone sur le SEO (+300.000 membres, 1,5 million de posts). Il est aussi cofondateur de Ranking Metrics, leader des formations webmarketing en France (SEO, AdWords, Analytics, réseaux sociaux) et éditrice de la plateforme MyRankingMetrics (crawler et audit SEO en ligne).

Article (8 conseils pour créer une bonne page d'erreur 404 personnalisée) publié par WebRankInfo dans la rubrique Webmastering. Si vous souhaitez publier un extrait de cet article sur votre site, assurez-vous de respecter les conditions générales d'utilisation de WebRankInfo.

8 commentaires

Postez un commentaire !

Les champs marqués du signe * sont obligatoires. L'adresse email ne sera pas affichée.

En postant un commentaire, vous acceptez les CGU du site WebRankInfo.

Catégories des dossiers

Consultez les dossiers par thématiques :

Annonces Google

Formation référencement et webmarketing

Venez chez Ranking Metrics vous former au référencement, à Google AdWords et Analytics ainsi qu'aux réseaux sociaux ! Plus de 4000 entreprises sont déjà venues (Dossier possible OPCA...).

Préparés et animés par Olivier Duffez (WebRankInfo) et Fabien Faceries (AgentWebRanking), 2 professionnels reconnus dans le domaine, nos modules sur le référencement naturel sont très complets tout en laissant une grande place à l'interactivité pour répondre à toutes les questions des participants.

Pour connaître le plan détaillé de chaque module, le prix, les dates et les lieux, consultez le site de Ranking Metrics (organisme de formation).

Hébergement web

Hébergement web mutualisé et dédié

Pour un bon référencement, il faut un bon hébergeur. Testez Sivit by Nerim, l'hébergeur choisi par Olivier Duffez pour son site WebRankInfo.

A partir de 3€ HT/mois.

Annonces Google


478 Partages