Une page d'erreur 404 personnalisée

1. Comment ça marche ?
Le but est d'éviter que l'utilisateur atterrisse sur des liens morts se trouvant à l'intérieur de votre site. À la place, il tombera sur une page spéciale (personnalisée au niveau du texte et du design), qui lui permettra de retourner à la page d'accueil en un clic et de vous signaler ce lien mort, donc de faire un rapport d'erreur. Fonction idéale si votre site se compose de nombreuses pages. Fini les pages 404 moroses et communes !

2. Récupération du fichier et description du script
Récupérez le script en cliquant ici.

Décompressez le fichier obtenu dans un dossier de travail de votre choix. Vous vous retrouvez en présence de plusieurs fichiers. Un fichier nommé 404.htm, qui est la page d'erreur modèle, et un ensemble de 8 images libres pour personnaliser notre page au format Jpeg. Choisissez l'image qui vous convient ou prenez une de vos images.

3. Conception et personnalisation

Éditez le fichier 404.htm à l'aide de votre logiciel préféré; le Bloc-notes ou notepad ++ peut suffire. Votre personnalisation portera sur plusieurs points. Tout d'abord, vous pouvez préciser dans la balise "meta" http-equiv le nombre de secondes au bout duquel le visiteur est redirigé vers votre page d'accueil ; vous pourrez aussi préciser quelle est cette page d'accueil. Par défaut, dans notre modèle, le délai est de 30 secondes. Vous pouvez éventuellement mettre "0" comme valeur pour une redirection automatique. À la suite, et séparée par un point-virgule, mettez l'adresse exacte de la page d'accueil de votre site. Ensuite, dans le body, personnalisez la phrase que verra le visiteur. Dans la balise IMG, indiquez le nom de l'image que vous aurez choisie. Enfin, placez votre adresse e-mail dans le lien à la place de l'adresse modèle pour que l'utilisateur puisse vous signaler l'erreur. Et n'oubliez pas de remplacer le lien modèle "http://www.monsite.com" situé à la fin du code par celui qui mène à votre page d'accueil ; le même que celui figurant dans la balise "meta" http-equiv en début de code. En suivant notre démo, vous devriez obtenir un résultat similaire à notre capture.

Le code de notre page 404 :
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<meta http-equiv="Refresh" content="30;URL=http://www.monsite.com">
<title>Page non trouvée !!</title>
<style> p{font-family:verdana;font-size:11pt;text-align:center;} </style>
</head>
<body>
<p> Cette page n'existe plus, vous allez être redirigé dans quelques instants sur notre page d'accueil<br> <img src="404_8.jpg" alt="Erreur 404" Title="Erreur 404">
<br>
Pour signaler ce lien brisé cliquez <a href="mailto:webmaster@monsite .com?subject=lien brisé">ici</a><br>
Pour revenir sans plus attendre sur notre page d'accueil cliquez <a href="http://www.monsite.com">ici</a><br> </p>
</body>
</html>

4. Envoi du script par FTP

Utilisez votre logiciel client FTP favori (FileZilla, par exemple) et connectez-vous sur votre hébergement. Renvoyez tout de suite le fichier 404.htm et l'image que vous avez choisie à la racine de votre site. Il ne vous reste plus qu'à faire comprendre que c'est cette page qui doit être associée à l'erreur 404 que renvoie votre hébergeur quand un utilisateur demande une page qui n'existe pas ou plus. Pour cela, nous allons créer avec le Bloc-notes ou Notepad ++ un fichier nommé htaccess.txt. Mettez ensuite cette seule ligne à l'intérieur et sauvegardez : ErrorDocument 404 /monfichier404.html Enfin, envoyez ce document à la racine de votre site, toujours par FTP, et renommez-le .htaccess (rien à gauche du point). Si vous tentez d'atteindre une page qui n'existe pas sur votre site, vous tomberez dorénavant sur une page 404 flambant neuve !

Références:
http://www.svmlemag.fr/pratique/une_page_derreur_404_personnalisee