La pagina di errore 404, il famelico errore di pagina non trovata (page not found) in stile web 2.0: chiedere agli utenti di aiutarci a mantenere i link dei nostri siti sempre aggiornati e funzionali. Questa guida funziona su IIS per Windows, ma anche su Apache per i server Linux: dovete solo sapere dove posizionare la pagina, con che nome salvarla o come far riconoscere la stessa al server come pagine di errore 404 principale.
Personalizzare la pagina di errore 404
La pagina di erorre 404, almeno sui server Windows su cui sono solito lavorare, deve necessariamente essere una pagina statica, in formato .htm o .html, incapace di essere processata e quindi di eseguire delle operazioni automaticamente. Ecco allora che, durante la ristrutturazione delle nostre macchine, ne ho approfittato per creare una 404 “collaborativa”, tipo Users Generate Contents: questa sarà però solo Users Advise Errors.
Dopo aver disegnato una grafica “personale”, attraverso la scrittura di codice JS, cerchiamo di capire se
- l’utente ha seguito un link trovato su qualunque pagina (anche motori di ricerca)
- l’utente ha digitato male un indirizzo
L’unica differenza tra queste due modalità si riconosce, banalmente, attraverso la verifica dell’HTTP Referrer. Se quest ultimo è presente, significa che esiste un referente per la nostra pagina, quindi un sito che presenta un vecchio o errato collegamento.
Il codice JS
Sfortunatamente, tutti i contenuti della pagina andranno disegnati in JS.
Il codice JS che trovate qui in seguito va inserito all’interno dei tag <body> della vostra pagina 404.
<script>
<!--
// verifica referrer
var strReferrer=document.referrer.toLowerCase();
if (location.href.indexOf("noreferrer=true")>=0) strReferrer="";
//no referrer!
var str='';
str+='<div><p><a href="/" title="Vai alla Home Page">Home Page<\/a><\/p><\/div>';
str+='<div><p><strong>La pagina che stai cercando potrebbe non essere visibile a causa di:<\/strong><\/p>';
str+='<ol type="a">';
str+=' <li>un <strong>vecchio segnalibro<\/strong><\/li>';
str+=' <li>un motore di ricerca con un <strong>vecchio collegamento<\/strong><\/li>';
str+=' <li>un <strong>indirizzo mal digitato<\/strong><\/li>';
str+='<\/ol><\/div>';
document.write(str);
var blnInsiteReferral = false;
var strSite = "";
//si referrer!
if (strReferrer.length!=0) {
//verifico la possibile provenienza dallo stesso sito
blnInsiteReferral = (strReferrer.indexOf(location.href)>=0)
str='<div><h3>Aiutaci ad aiutarti...</h3>';
//stesso sito
if (blnInsiteReferral){
str+='<p>Sembra che qualcuno dei nostri link sia rovinato. Tutto quello che ti chiediamo di fare per darci una mano è di premere il bottone in seguito.<\/p>';
} else {
str+='<p>Per migliorare i nostri servizi, ti chiediamo di informarci sui link scorretti. Ci occuperemo noi di informare chi di dovere per modificare il link.<br />Premi <strong>Invia<\/strong>!<\/p>';
}
//form per l'invio delle informazioni
str+='<form method="post" action="http:\/\/www.mysite.com\/send404.asp">';
str+='<input type="hidden" name="referring" value="' + strReferrer + '" \/>';
str+='<input type="hidden" name="page" value="' + location.href + '" \/>';
str+='<input type="submit" name="cmdSubmit" class="button" value="Invia" \/>';
str+='<\/form>';
str+='<\/div>';
document.write(str);
}
-->
Io invio email, tu?
Come potete vedere, il form disegnato dal JS viene mandato ad una pagina di nome send404.asp, pagina che si incaricherà di inviare un’email ad uno dei nostri account di posta per informarlo del link rovinato. Non sto a riportarvi anche il codice del form, potete facilmente ritrovarlo anche voi facendo una semplice ricerca su Google!
Conclusioni
A differenza di quanto credevo e potevo aspettarmi, la pagina ha riscosso parecchio successo e molte delle persone che, navigando finivano su uno di quei pochi link “rovinati” e di conseguenza sulla nostra nuova pagina 404, cliccavano sul bottone e…ecco arrivare una bella email nella nostra casella di posta che ci informa di referrer e indirizzo della pagina non trovata! Che ne dite?
