Comment créer une page d'erreur 404 personnalisée sur son site web

par Tychic Obanda


Programmation web | 17 commentaires



Besoin d'une carte Visa ? Procurez-vous la carte visa Fyatu à seulement 5$. Cliquez ici


Salut, Mbote! Aujourd'hui je vais vous parler d'un sujet que vous connaissez peut-être déjà. Mais dont vous ignorez comment ça marche. Il s'agit d'erreur 404 sur un site web.

Connaissez-vous cette erreur? D'accord. Si vous ne la connaissez pas, ce n'est pas grave car cet article va tout expliquer.

Une erreur 404 survient lors qu'un internaute accède à une page qui ne se trouve pas sur votre site web. Cependant, au cas où vous n'avez pas de page d'erreur sur votre site, l'internaute sera face à une page blanche avec comme message : Not Found.

Or, cette page n'est pas ce que les internautes détestent voir sur un site web.

Dans cet article je vous montre alors comment personnaliser une page d'erreur 404 sur votre site web. Vous verrez que c'est un jeu d'enfant et même Chrismy à la maison peut le faire.

Hey Tychic! Pourquoi personnaliser une page d'erreur 404 sur son site alors qu'il y a déjà cette page qui s'affiche en cas d'erreur?

Non! Votre site web n'a pas de page d'erreur. La page qui s'affiche n'est pas une de vos pages web. Non! C'est une page générée par le serveur au cas où une erreur survient sur votre site. Ce n'est pas donc votre page. Et le but de cet article, c'est de pouvoir sa propre page d'erreur car la page que le serveur affiche, présente certaine inconvénients.

Les inconvénients de l'erreur 404

Dans la vie réelle, une erreur entraîne toujours certains inconvénients et c'est de même que sur le web. Voici quelques inconvénients de l'erreur 404 sur un site web :

  • Pénalise le référencement du site : Google déteste trouver des liens cassés sur un site web.
  • Un internaute qui arrive sur une page d'erreur 404 non personnalisée peut rapidement quitter votre site

Cette liste n'est pas exhaustive car vous, entant webmaster, pouvez rencontrer d'autres inconvénients pour l'erreur 404 sur votre site web.

Comment créer une page d'erreur 404

Passons maintenant à l'acte! Voyons ensemble comment créer une page d'erreur 404 sur son site web.

Nous aurons ici besoin de trois fichiers que je vous demande déjà de créer avec votre éditeur de texte. Il s'agit des fichiers : .htaccess , error.php et erreur-404.php.

Le fichier .htaccess est un fichier un peu particulier dès par sa syntaxe et fonctionnalités. Le fichier error.php servira à accueillir toutes erreurs. Le fichier errreur-404.php est notre page d'erreur(vous pouvez la renommer comme vous voulez).

Les codes .htaccess

ErrorDocument 404 https://www.243tech.com/error.php?code=404

Cette ligne indique au serveur que, lorsqu'il y a erreur 404 sur le site, il faut faire une redirection vers la page error.php en précisant le type d'erreur passé en paramètre(code).

Les codes error.php

<?php
switch($_GET['code'])
{
case '404':header('Location: https://www.243tech.com/erreur-404.php');
break;
default:header('Location: https://www.243tech.com/');
}
?>

Dans le fichier error.php, on récupère le code de l'erreur qui était passé en paramètre et on pose une condition(switch) en utilisant des cas(case). Vous pouvez même utiliser if … elseif … else

En cas d'erreur 404, on fait une redirection vers la page erreur-404.php

case '404':header('Location: https://www.243tech.com/erreur-404.php');

Et au cas où il s'agit d'une autre erreur, on fait une redirection vers la page d'accueil.

default:header('Location: https://www.243tech.com/');

Les codes erreur-404.php

<!DOCTYPE html>
<html>
<head>
<title>Page d'erreur 404</title>
</head>
<body>
<h1>Oups! Page introuvable</h1>
<p>Vous avez tenté d’accéder à une page qui ne se trouve plus sur ce site. Veuillez revenir sur la page d'accueil afin de continuer votre navigation sur notre site.</p>
<p><a href="https://www.243tech.com">Revenir à l'accueil</a></p>
</body>
</html>

La page erreur-404.php ne contient que des balises HTML afin d'avoir une page web personnalisée selon vos besoins. Vous pouvez modifier le design, modifier le texte, mettre des images, ajouter des liens importants, etc.

Le but c'est de garder l'internaute perdu sur votre site. Qu'il ne ferme pas la fenêtre de son navigateur.

Malheureusement, sur 243tech vous ne verrez pas une page d'erreur 404 car je redirige toutes les erreurs vers la page d'accueil. Vous voulez savoir comment je l'ai fait? D'accord je vous montre. Vous verrez que c'est facile et simple.

Rediriger une erreur 404 vers la page d'accueil

Ici, la logique est simple : rediriger toutes les erreurs 404 vers la page d'accueil. Donc on aura plus besoin du fichier erreur-404.php. Nous allons faire la redirection directement à partir du fichier error.php.

Les codes error.php

<?php
switch($_GET['code'])
{
case '404':header('Location: https://www.243tech.com/');
break;
default:header('Location: https://www.243tech.com/');
}
?>

Donc ici, la redirection se fait directement vers la page d'accueil sans même passer par une page d'erreur personnalisée.

Conclusion

Avoir une page d'erreur 404 personnalisée sur son site web est une bonne expérience pour vos visiteurs.

Dites-moi alors dans les commentaires si vous êtes arrivé à personnaliser votre page d'erreur 404 sur votre site web. Si vous avez rencontré des difficultés pour le faire, dites-le moi dans les commentaires.


Tychic ObandaJe suis Tychic Obanda. Avant j'étais un simple visiteur des sites internet et aujourd'hui je suis devenu le créateur des sites internet. Passionné de l'internet et de la programmation, je publie sur ce site des astuces et tutoriels pour vous aider de mieux apprendre la programmation web et de vivre de cette passion.




Laisser un commentaire
Vous pouvez écrire en gras en utilisant * et en italique en utilisant _
654

17 commentaires

Zazou
Zazou

j'etais en train de faire des recherches et je suis tomber sur votre page et je crois que ca deviendra une page de reference pour moi!
merci de partager votre savoir na leli ango fort wumela

Répondre
<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda

Merci d'avoir lu l'article. Yo pe wumela


Delsu
Delsu

Problème résolu. le serveur faisait appel à une autre page d'erreur sur laquelle j'ai mis une redirection vers index.php.
Merci.

Répondre
<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda

Je suis content que ça marche.

Bon codage Delsu !


Alfred
Alfred

Merci pour cet article Tychic. Tes articles touchent les cœurs.

Répondre
<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda

C'est un plaisir de voir que l'article te touche


Kacper
Kacper

Bonjour Tychic,

Cela fait seulement depuis hier que je li votre blog et je dois admettre qu'il est très bien fait et que vos articles sont très intéressants. Continuez ainci! ????

Répondre
<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda

Bonjour

Content de lire votre commentaire Kacper. Rien n'est encore perdu car l'essentiel est déjà fait : vous avez découvert 243tech.

Merci pour l'encouragement


Darty
Darty

C'est cool d'avoir ses propres pages

Répondre
<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda

Oui Darty. En plus, sur une page d'erreur personnalisée, c'est mieux de mettre des liens importants de votre site


Tanguy
Tanguy

Pouvez vous nous apprendre comment dimentionner un site de sorte qu'un utilisateur l'ouvre depuis n'importe quel portable ou pc ?

Répondre
<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda

Content de lire votre commentaire Tanguy. Cela me donne une idée d'article à écrire le plutôt possible pour répondre à votre préoccupation.

Merci


Tanguy
Tanguy

Svp le fichier .htacess est de quel type ?

Répondre
<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda

C'est un fichier particulier. Il est de type txt mais ne prend pas .txt comme extension. Quand vous le créez, il faut juste le renommer par .htaccess


Paradoxe
Paradoxe

J'aime ça

Répondre

Osée Mukaya
Osée Mukaya

merci pour l'article

Répondre
<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda

Le plaisir est partagé @osée


Recherche

Bonus Gratuit

50 conseils aux blogueurs débutants et futurs blogueurs

Un ebook écrit pour vous montrer tout ce qu'il faut pour devenir développeur web

Avatar Tychic Obanda

Envie d'apprendre plus sur la création de sites web ? Vous êtes au bon endroit ! 170 articles publiés, 7647 commentaires ont été postés sur 243tech. Tout ce que vous cherchez se trouve certainement ici...