Come personalizzare le pagine di errore del sito?
Uno dei tanti aspetti da non trascurare durante la realizzazione di un sito web, riguarda le pagine di errore. Cosa succede se un utente inserisce nell’url il nome di una pagina che non esiste? Compare la pagina standard di Apache “404 not found“.
Come vedremo tra poco, questo non è molto corretto dal punto di vista dell’usabilità.
In questo breve articolo potrai capire come personalizzare le pagine di errore del tuo sito.
Personalizzare le pagine di errore, una questione di usabilità
Già, è proprio questo il punto, l’usabilità. Il paragrafo quattro del decalogo di Nielsen dice: “consistenza e standard“, che tra le altre cose significa che dobbiamo dare all’utente l’impressione di essere sempre nello stesso ambiente, anche e soprattutto nel caso di un messaggio di errore. Inoltre il paragrafo nove dice: “aiuto all’utente” riferendosi in particolare agli errori, che devono essere espressi in linguaggio comprensibile e senza l’utilizzo di codici.
Dunque il messaggio di errore mostrato nella seguente immagine:
non va bene. Per una migliore usabilità le pagine di errore vanno ridefinite in modo da essere usabili. Se provi a cliccare sul seguente link (che ci porta ad una pagina inesistente), vedrai un risultato corretto:
https://www.yourinspirationweb.com/paginaCheNonEsiste.html
Come vedi, è chiara l’impressione di essere nello stesso sito. L’errore viene spiegato in italiano ed ho a disposizione la navigazione in modo da poter raggiungere la home page.
Prepariamo la nostra pagina di errore personalizzata
Dal momento che la gestione degli errori è affidata direttamente al web server, dovremo agire sulla sua configurazione. Ma prima prepara la tua pagina di errore personalizzata come una normale pagina html e chiamala notfound.html. Fai in modo che abbia lo stesso layout del resto del sito; indica in modo chiaro l’errore che si è verificato e prevedi un link che ti rimandi alla home page.
Modifichiamo la configurazione di Apache
Per modificare la configurazione di Apache, si fa capo ad un particolare tipo di file chiamato .htaccess (nessun nome – estensione htaccess). Non puoi nemmeno immaginare quante cose si possano fare con questo file (ma con il tempo le vedremo). Per il momento ci limiteremo a crearlo con un qualsiasi editor di testo e a dichiarare che vogliamo sostituire la pagina standard per l’errore 404 (file non trovato) con quella che abbiamo preparato (notfound.html) in questo modo:
ErrorDocument 404 /notfound.html
Salva il documento con il nome .htaccess e mettilo nella cartella principale del tuo sito assieme al file notfound.html.
Il file .htaccess modifica il comportamento di apache nella cartella in cui risiede ed in tutte le sue sottocartelle, di conseguenza mettendolo nella root questa nuova impostazione avrà valore in tutto il sito.
Come puoi vedere, se adesso cerchi di caricare una pagina inesistente, non viene più mostrata la pagina di errore standard ma quella da te realizzata.
E’ possibile personalizzare le pagine di tutti gli errori utilizzando la sintassi che abbiamo visto:
ErrorDocument [codice di errore] [pagina]
Quindi se volessimo personalizzare anche ad esempio l’internal server error (500), modificheremo il nostro file .htaccess in questo modo:
ErrorDocument 404 /notfound.html ErrorDocument 500 /serverError.html
Naturalmente avendo cura di creare prima la pagina serverError.html.
Se desideri salvare le pagine di errore in una cartella separata, dovrai indicarne il percorso. Ad esempio:
ErrorDocument 404 /errorPages/notfound.html
Per finire, ecco la lista completa dei codici di errore che ti potrebbe servire.
http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
Conclusioni
In questo articolo abbiamo visto come sia possibile, in pochi passi ed impiegando pochissimo tempo, migliorare l’usabilità dei nostri siti aggiungendo valore e professionalità. E tu cosa farai adesso? Personalizzerai anche tu le pagine di errore?
L'autore
18 commenti
Trackback e pingback
-
uberVU - social comments
Social comments and analytics for this post... This post was mentioned on Twitter by yiw: RT @YIW Come personalizzare le…
Articolo molto interessante, così come è interessante tutto l’argomento .htaccess
Grazie per l’ottimo articolo!
Ciao Antonio, grazie.
Parleremo ancora di .htaccess in altri articoli
E’ interessante sì, però a me ad esempio su aruba non funziona… se metto quella riga nel .htaccess mi da internal server error 500 su tutte le pagine :)
chiedo scusa, in realtà me lo da a prescindere da che cosa ci scrivo nel .htaccess XD
E’ possibile che il tuo hosting non ammetta modifiche alla configurazione
Davide, dipende se stai su un Hosting Windows o Linux. Su Aruba se usi Linux puoi utilizzare anche il file .htaccess mentre con Windows no. :-P
Sisi, su quelli stranieri di solito non ho problemi, purtroppo con aruba mi fregano… peccato perchè in Italia è molto usato :( grazie cmq :)
Grazie infinite! come al solito indispensabili!
bene, se ti è stata utile sono contento!
Grazie per l’articolo! Era proprio quello che cercavo!
Ciao Giacomo. Con YIW vai sul sicuro. Trovi tutto!
E’ possibile che il tuo hosting non ammetta modifiche alla configurazione
Ciao,
ho provato ad usare il tuo codice e metterlo nel .htaccess ma quando digito una pagina insesistente, mi appare questo errore:
“Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.”
Salve,
anch’io ho provato a inserire il codice sul un mio sito e mi restituisce lo stesso errore di Tarab. Perchè?
Salv
articolo veramente interessante..ma a me non funziona.
creo con wordpad un file con all’interno
ErrorDocument 404 /notfound.html
ho creato il file notfound.html
ma che estenzione devo dare al file dov c’è scritto ErrorDocument…., creato con wordpad?
grazie in anticipo
Ciao Maurizio.
Vorrei chiedere come si fa un reindirizzamento di errore 404 di una URL con slash finale forzato in htaccess (come nel vostro sito). Ad esempio http:// http://www.sitoweb.com/pagina-inesistente/
Una URL del genere, nel mio sito, non reindirizza alla pagina 404.php creata ma visualizza il template del sito senza contenuto.
Sia il file htaccess che il file 404.php si trovano nella ROOT del sito
Posto il mio codice htaccess
Options +FollowSymLinks -MultiViews
AddDefaultCharset UTF-8
RewriteEngine On
RewriteBase /
#
# PROC/SELF/ENVIRON? NO!
RewriteCond %{QUERY_STRING} proc/self/environ [OR]
#
# BLOCCO ACCESSO AL FILE .HTACCESS
Order allow,deny
Deny from all
Satisfy All
#
# FORZA AGGIUNTA DELLO SLASH / ALLA FINE DELLA URL
#RewriteCond %{REQUEST_URI} /+[^\.]+$
#RewriteRule ^(.+[^/])$ %{REQUEST_URI}/ [R=301,L]
#
# RIMUOVE INDEX.PHP DALLA URL
RewriteCond %{THE_REQUEST} ^GET.*index\.php [NC]
RewriteRule (.*?)index\.php/*(.*) /$1$2 [R=301,NE,L]
#
# RISCRIVE URL
RewriteRule ^([^/]*)/$ index.php?id=$1 [L]
RewriteRule ^([^/]*)/([^/]*)/$ index.php?id=$1&sezione=$2 [L]
#
php_flag magic_quotes_gpc off
#
# ERRORE PAGINA NON TROVATA
ErrorDocument 404 /404.php
192.168.0.1 is one of the private IP Addresses assigned to a device by IANA. If you are a little bit tech freak, then you already have an idea of what is an IP Address. It is a kind of address provided by the ISP / IANA organization whenever you are connected to the internet.