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.

https://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?



Tag: ,

L'autore

Maurizio è sposato con la triade PHP - MySql - Apache e, non pago, ha un'amante chiamata jQuery. Ha un blog dove cerca di descrivere nei minimi particolari sia la moglie che l'amante. La sua vera specialità è la realizzazione di gestionali complessi anche se non rifiuta mai un sito web. +

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

18 commenti

Trackback e pingback

  1. uberVU - social comments
    Social comments and analytics for this post... This post was mentioned on Twitter by yiw: RT @YIW Come personalizzare le…