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

par Tychic Obanda


Posté le 16-10-2018 à 15:18 | Programmation web | 11


478
Partages
Partager sur Facebook153 Partager sur Twitter118 Partager sur Whatsapp207

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 ObandaSalut, Mbote! Je m'appelle 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.









Laisser un commentaire

11 commentaires

Kacper
Kacper
03-11-2018 à 00:04

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
03-11-2018 à 06:55

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
31-10-2018 à 20:50

C'est cool d'avoir ses propres pages

Répondre
<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda
03-11-2018 à 06:57

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


Tanguy
Tanguy
25-10-2018 à 07:40

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
25-10-2018 à 21:57

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
25-10-2018 à 07:37

Svp le fichier .htacess est de quel type ?

Répondre
<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda
25-10-2018 à 21:59

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
19-10-2018 à 09:06

J'aime ça

Répondre

Osée Mukaya
Osée Mukaya
16-10-2018 à 15:41

merci pour l'article

Répondre
<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda
25-10-2018 à 22:01

Le plaisir est partagé @osée


Recherche
Annonces
Citation Tychic Obanda
Newsletter
M'écrire sur Whatsapp

Cliquez sur l'image ci-dessous pour entrer en contact avec moi sur Whatsapp. J'aimerais vraiment échanger avec vous!!!

Citation Tychic Obanda
M'écrire sur Facebook Messenger

Cliquez sur l'image ci-dessous pour entrer en contact avec moi sur Messenger. J'aimerais vraiment échanger avec vous!!!

Citation Tychic Obanda

Avatar Tychic Obanda

Envie d'apprendre plus sur la création de sites web ? Vous êtes au bon endroit ! 70 articlés publiés, 430 commentaires ont été postés sur 243tech. Tout ce que vous cherchez se trouve peut-être ici...