Créer une page 404 personnalisée et utile avec Wordpress

erreur 404

Parce qu’il est dommage d’avoir une page 404 moche et inutile, voici un tutoriel complet vous expliquant comment rendre cette page plus attractive et utile pour vos lecteurs. Mais d’abord, répondons à cette question :

Qu’est-ce qu’une erreur 404 ?

Pour ceux qui ne connaissent pas, une erreur 404 est un code d’erreur renvoyé par le serveur pour indiquer que la page n’existe pas. Si le site ne gère pas les erreurs, alors le navigateur web va afficher une page d’erreur très moche de ce type, qui vous fera perdre le visiteur à coup sûr :

erreur 404 du navigateur

Comme la plupart des CMS, Wordpress gère les erreurs 404 et affiche par défaut une page de ce type :

Erreur 404 par défaut du thème Wordpress : Twenty Fifteen

Ce message peut légèrement varier d’un thème à un autre. Parfois, il n’y a même pas de formulaire de recherche.

Qu’est-ce qui ne va pas avec ce modèle ?

Tout d’abord, il faut avouer que ce n’est pas très sexy. Pourquoi ne pas apporter une petite touche personnelle ou une image pour encourager le lecteur à rester et poursuivre ses recherches ?

D’autre part, la page est en anglais. Vraiment bof pour un site qui est censé être en français… On va la traduire et l’améliorer par la même occasion !

Avant de passer au tutoriel, qu’est-ce qu’une page 404 réussie ?

Exemples de pages d’erreur 404 efficaces

On commence par l’agence AxeNet qui offre une excellente page 404 :

erreur 404 axenet

Elle est très bien réalisée, claire, drôle, unique et propose de poursuivre notre navigation en consultant :

  • la page d’accueil
  • les catégories
  • les pages importantes
  • un moteur de recherche

Laurent Bourrelly, un autre consultant en référencement, propose une page 404 plus contextuelle :

erreur 404 laurent bourrelly

Le gros bouton d’erreur fait un peu peur, mais le contenu convient parfaitement pour accompagner le visiteur perdu. Il est invité à :

  • se rendre sur la page d’accueil
  • sur le blog
  • ou contacter le webmaster par mail pour faire part d’un éventuel soucis technique

Le formulaire de recherche n’apparait pas sur l’aperçu mais il est bel et bien accessible dans la sidebar.

En rafraichissant la page, je me suis aperçu que l’affichage de l’image était aléatoire, ce qui est plutôt sympa 😉 Voici l’autre image qui s’est affichée :

gif 404 blog laurent bourrelly

Enfin un dernier exemple tout simple, celui du blog 🙂

erreur 404 webandseoLa page va à l’essentiel : je propose au visiteur perdu de retourner sur le blog, consulter mon guide gratuit, mes ressources web ou de s’inscrire à ma newsletter, bref les pages importantes du site. Il peut également naviguer sur le site grâce à la barre de navigation dans l’en-tête qui présente les catégories, un formulaire de recherche, mais aussi la sidebar.

Découvrez d’autres exemples de pages d’erreur très sympas ici : http://www.404notfound.fr/

Comment personnaliser sa page d’erreur 404 ?

Normalement, votre thème devrait disposer d’un fichier appelé 404.php, situé à la racine de votre thème.

1er cas : la page 404.php existe

Page d'erreur 404 du site Reputation Squad

Page 404 du site Reputation Squad

Si la page 404.php existe déjà, gardez le template existant et éditez simplement les champs nécessaires : H1 et paragraphe.

Remplacez le paragraphe existant par ce code :

<!-- Placer ici le lien vers une image personnalisée -->
<p align="center"><img src="/page-404.png" alt="Erreur 404" /></p>
<!-- Personnaliser le message comme souhaité -->
<p>Nous sommes désolés mais la page que vous cherchez n'est pas ou plus 
disponible. Nous vous suggérons de vous rendre sur <a href="/">la page 
d'accueil</a> du site ou d'effectuer une nouvelle recherche :</p>

Normalement, vous devriez avoir un formulaire de recherche qui apparait juste après. Si ce n’est pas le cas, ajoutez cette ligne :

<?php get_search_form(); ?>

Enfin, vous pouvez encore enrichir le contenu en invitant le visiteur à consulter vos pages importantes :

<!-- Ajouter des liens vers vos pages importantes -->
<p>Vous pouvez aussi consulter :</p>
<ul>
<li><a href="/">Page importante #1</a></li>
<li><a href="/">Page importante #2</a></li>
<li><a href="/">Page importante #3</a></li>
</ul>

Ou en consultant vos derniers articles :

<!-- Afficher les derniers articles du blog -->
<p>Découvrez nos derniers articles :</p>
<ul>
<?php
$my_query = new WP_Query('showposts=5');
while ($my_query->have_posts()) : $my_query->the_post();
?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php
endwhile;
?>
</ul>

2nd cas : la page 404.php n’existe pas

Superbe page 404 avec Homer Simpson

Page 404 du site OnSydney

Vous devez dans un premier temps créer le fichier 404.php à la racine de votre thème.

Puis, vous pourrez copier, coller puis personnaliser ce template que je viens de vous concocter :

<?php get_header(); ?>

<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">

<section class="error-404 not-found">
<header class="page-header">

<!-- Personnaliser le titre ici -->
<h1 class="page-title">Erreur 404 : Page Non Trouvée</h1>
</header>

<div class="page-content">

<!-- Placer ici le lien vers votre image d'erreur 404 personnalisée -->
<p align="center"><img src="/page-404.png" alt="Erreur 404" /></p>

<!-- Personnaliser le message comme vous le souhaitez -->
<p>Nous sommes désolé mais la page que vous cherchez n'est pas ou plus 
disponible. Nous vous suggérons de vous rendre sur <a href="/">la page 
d'accueil</a> du site ou d'effectuer une nouvelle recherche :</p>

<?php get_search_form(); ?>

<!-- Afficher les derniers articles du blog -->
<p>Découvrez nos derniers articles :</p>

<ul>
<?php
$my_query = new WP_Query('showposts=5');
while ($my_query->have_posts()) : $my_query->the_post();
?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php
endwhile;
?>
</ul>

<!-- Ajouter des liens vers vos pages importantes -->
<p>Vous pouvez aussi consulter :</p>

<ul>
<li><a href="/">Page importante #1</a></li>
<li><a href="/">Page importante #2</a></li>
<li><a href="/">Page importante #3</a></li>
</ul>

</div>
</section>

</main>
</div>

<?php get_footer(); ?>

Page 404 du site Espnza.com

Page 404 du site Espnza.com

3ème cas : utiliser un plugin

Plugin Wordpress : 404page

Création d’une page 404 avec le plugin : 404page

Il y a enfin une dernière alternative qui n’implique pas de rentrer dans le code de Wordpress : utiliser un plugin. 404page remplit parfaitement son rôle et permet de personnaliser sa page 404 simplement en créant une page via l’éditeur. Peu importe si la page 404.php existe ou pas, vous pouvez utiliser ce plugin.

Design de pages 404

Si vous n’êtes pas webdesigner et que vous n’avez pas envie de perdre du temps à créer une superbe illustration pour votre page 404, sachez que vous pouvez en acheter une toute faite, au format PSD / PNG, sur le site graphicriver.net. Voici quelques exemples :

Note : Certaines illustrations ci-dessus nécessitent quand même des compétences en intégration web.

Vous êtes enfin paré pour faire face aux multiples erreurs 404 que votre site peut subir ! Personnaliser cette page est plutôt rapide, fun et pas si compliquée que ça. On ne dirait pas comme ça, mais ça permet de garder un nombre important de visiteurs perdus sur son site !

Avez-vous pensé à personnaliser votre page d’erreur 404 ? Pensiez-vous que c’était aussi simple ? 😉 N’hésitez pas à partager si vous trouvez cet article

Dernière MAJ : le 9 décembre 2015

Ces articles devraient aussi vous intéresser :

8 réactions instructives :

  1. Fred
    20 juillet 2015 à 7 h 40 min #

    C’est une très bonne idée de customiser cette page parce que l’on peut se permettre un côté décalé qu’on ne peut pas toujours insérer sur un site institutionnel.
    Très importante également pour guider les internautes oui.
    Je vais réfléchir pour reprendre la mienne … Merci pour l’article !

    • Maximilien Labadie
      20 juillet 2015 à 8 h 29 min #

      Tout a fait ! Tu me diras quand ta page est prête 😉

  2. boris
    21 juillet 2015 à 0 h 34 min #

    Yo,

    il y a les pages 404 gaming qui sont sympa :
    http://www.romainbrasier.fr/404.php?lang=en

    Les pages videos sont marrantes aussi :
    http://visitsteve.com/kjdhhx

    Et les animées
    http://visitsteve.com/kjdhhx
    http://proteys.info/404

    Mais il de te faut de bon ptits dev/infographistes ^^

    thanks pour l’article

    • Maximilien Labadie
      21 juillet 2015 à 17 h 47 min #

      Top les exemples, j’adore 🙂

  3. 15 août 2015 à 15 h 29 min #

    Fallait y penser !

    C’est vrai que l’erreur 404 peut faire perdre un nombre conséquent de visiteurs. Pris de panique, ils peuvent fermer l’onglet de leur navigateur et perdre l’adresse de notre site !

    J’adore l’exemple de Axenet car en plus d’être sympathique et non “anxiogène” elle explique au néophyte ce qu’est l’erreur 404 🙂

    Merci bcp !

  4. Tom Breton
    6 septembre 2015 à 18 h 38 min #

    Bonjour,
    Le mieux c’est même d’arriver sur un page 404 qui ne soit pas une impasse. En tout cas ton article m’a donné envie de modifier la mienne.
    En passant, Je suis graphiste et webdesigner sur bordeaux et j’ai créer un article sur mon blog pour répertorier des meilleurs banques d’images gratuites, j’en avait un peu assez de chercher partout.
    N’hésitez pas à aller y faire un tour si vous en avez besoin pour vos sites 😉
    http://www.tombreton.com/liste-des-meilleures-banques-dimages-gratuites-et-libres-de-droits/

  5. Laetitia
    25 janvier 2016 à 17 h 11 min #

    C’est dommage que la page 404 soit trop peu exploitée car elle présente de nombreux avantages et utilités.
    Entre autres, c’est un excellent moyen :
    – d’améliorer l’expérience utilisateur,
    – d’inciter l’internaute à rester sur le site et à poursuivre sa navigation,
    – de fournir des informations utiles,
    – de limiter la frustration de l’internaute (quoi de plus ennuyant que de tomber sur une page 404 par défaut),
    – de faire parler de soi (vive le bouche à oreille).

    En personnalisant la page 404, on peut joindre l’utile à l’agréable. Pour mon site, j’ai choisi de jouer la carte de l’humour tout en guidant le visiteur. Je vous laisse juger 😉 : http://www.passion-cricetus.alsace/404
    En tout cas, merci pour ton article très intéressant. Les piqûres de rappel, ça ne fait pas de mal !

    • Maximilien Labadie
      26 janvier 2016 à 0 h 39 min #

      L’exemple est vraiment superbe, bravo Laeticia !

Donne ton avis :

Je souhaite recevoir les meilleurs conseils et astuces de Web & SEO


Plus que quelques jours pour en profiter !

2 méga formations sites de niche à -50%

Ça m'intéresse !

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match