L’errore 404 indica una Pagina non trovata ed è uno dei più comuni. Capita anche ai navigatori esperti di perdere il timone del web e naufragare su una pagina 404. Basta digitare un indirizzo sbagliato, aggiungere una lettera all’url o seguire un link rotto che porta a una pagina cancellata, spostata e non reindirizzata correttamente. Se gestite un sito vi consigliamo di non lasciare i vostri utenti alla deriva, sfruttando la pagina 404 per indirizzarli alla home page o alle pagine più interessanti del portale.
In questa guida vi mostreremo:
- cos’è l’errore 404;
- i vantaggi di una pagina 404 personalizzata;
- come creare una pagina 404 personalizzata;
- alcuni esempi di pagine 404 originali e utili.
L’errore 404
L’errore 404 è un codice di stato del protocollo HTTP. Questo messaggio standard indica che il server non ha trovato la pagina richiesta per un errore di ricerca o configurazione.
Perché personalizzare la pagina di errore 404
Se siete dei programmatori, finire su una pagina di errore 404 vi farà pensare a un sito non curato, ma non vi lascerà troppo smarriti. Voi sapete benissimo cos’è una pagina 404 e perché vi viene restituita una schermata di errore. Ma pensate a cosa accade quando un utente comune, senza alcuna nozione sul funzionamento delle pagine web, vede apparire un messaggio simile sul suo schermo:
Si sentirà disorientato. La sua prima reazione sarà quella di uscire dal sito e non tornarci mai più. Che per un ecommerce si traduce in un calo delle vendite.
Personalizzare la pagina di errore 404 vi permette di trattenere l’utente sul vostro sito, riducendo il bounce rate (la frequenza di rimbalzo) e migliorando il ranking (il posizionamento del sito).
Per gli ecommerce personalizzare la pagina 404 è importante per non perdere i tanti utenti che cercano un prodotto che non esiste più sul portale (magari ancora linkato da siti esterni).
Per aiutare l’utente smarrito a riprendere la navigazione una pagina 404 deve:
- essere in linea con lo stile del sito (stessi font e colori);
- contenere un link alla home page;
- linkare altre pagine del sito potenzialmente interessanti (categorie popolari, post più letti, pagine di download di app e guide);
- avere lo stesso menu di navigazione delle altre pagine del sito.
Potete inoltre inserire un form per invitare l’utente a segnalare le pagine inesistenti. I link rotti possono essere individuati anche dalla Search Console di Google o usando uno strumento come Screaming Frog.
Ottenuta la lista dei link rotti usate il Redirect 301 per reindirizzare gli utenti su una pagina attiva. Per farlo trovate il file .htaccess presente nella root del dominio e scrivete:
“Redirect 301 /vecchia/pagina/ http://www.miosito./nuova/pagina” (senza virgolette). La prima parte deve contenere solo il percorso relativo che parte dalla root del sito. Dovrete dunque omettere “http://www.miosito“. Nella seconda parte dovrete invece inserire l’url completo, che può linkare anche una pagina esterna al dominio.
Da un errore nascono le strategie di marketing
La pagina 404 può essere sfruttata anche come strumento di web marketing. Approfittate di questo errore per:
- inserire un form di iscrizione alla newsletter;
- far crescere la community, rinviando l’utente a forum e canali social;
- strappare un sorriso ai vostri clienti con una grafica originale che comunichi i valori del brand;
- portare il cliente verso una landing page che volete promuovere;
- sponsorizzare prodotti e servizi (ad esempio inserendo gli articoli più venduti, un buono sconto, le offerte speciali o il link per scaricare la vostra app);
Gli errori da evitare nella pagina di errore!
Nella personalizzazione della pagina di errore non c’è spazio per altri errori. Non fate sentire in colpa l’utente, accusandolo di aver digitato l’indirizzo sbagliato.
Se modificate il messaggio non siate freddi, ma evitate di abusare dell’ironia. Non è il caso di accogliere l’utente con una scimmia urlatrice o di spaventarlo con scenari alla The Blair Witch Project ( a meno che non si tratti di un sito per appassionati di film horror).
L’utente deve capire che la pagina cercata non esiste o è stata spostata e deve sapere come uscirne. O meglio: come proseguire felicemente la navigazione sul vostro sito.
Come creare una pagina 404 personalizzata
I server restituiscono una pagina 404 standard. Ma una pagina 404 può anche essere una pagina HTML personalizzata.
Se gestite un sito in WordPress la pagina di errore può essere creata come una qualsiasi altra pagina, sfruttando il WordPress Page Editor. Potete inserire un’immagine e scegliere il formato.
Una volta creata la pagina vi basterà andare su Aspetto- 404 Error Page e impostarla come Pagina 404. Di seguito un tutorial:
Per mantenere la corretta funzionalità del vostro sito anche agli occhi dei motori di ricerca, è buona norma correggere gli errori 404 fornendo sia a Google che agli utenti una nuova pagina. Per fare questo è necessario un reindirizzamento.
I reindirizzamenti, o redirect, si realizzano tramite file .htaccess; ricordate di fare le modifiche alla fine del documento e non dimenticatevi di inserire il commento # prima del blocco dei redirect, in modo da essere facilitati nella correzione degli errori.
Ecco la sintassi da tenere a mente:
Redirect 301 /cartellavecchia/paginavecchia http://nuovoindirizzoblablabla/bfgf
Evitate di creare redirect che rimandano solo alla home. Cercate piuttosto di reindirizzare a pagine con contenuti simili a quello mancante.
Un ultimo consiglio: se la rimozione del contenuto con conseguente redirect è solo temporanea, potete usare il redirect 302.
Per chi invece usa WordPress e ha bisogno di soluzioni già pronte, c’è la possibilità di installare il plug-in 404to301. Questo plug-in individua tutti gli errori 404 e li gestisce al posto vostro, reindirizzando gli utenti a una pagina di vostra scelta, attraverso il codice di stato 301 (Moved Permanently). Attenzione però, è sempre bene non fidarsi di ciò che viene fatto in automatico!
404 template file
Quasi tutti i temi WordPress hanno una pagina 404. Se il tema non ha una pagina 404 personalizzata WordPress mostrerà l’home page (index.php).
Se volete modificare la pagina di errore 404 apritela con un editor di testo come TextEdit e modificate il messaggio. Poi salvate le modifiche e caricatela nella directory del tema.
Di seguito il 404 template file del tema Twenty Thirteen, che può essere usato come modello. Il file contiene i tag che mostrano l’header, la sidebar, il footer e un’area per il il messaggio personalizzato.
Altri modi di personalizzare la pagina 404
Potete personalizzare la pagina 404 anche caricando sul server via FTP con Filezilla, Cyberduck o il client FTP che più vi piace. Se utilizzare cPanel come pannello di controllo del web hosting accedete alla sezione delle pagine di errore, trovate la pagina 404 e cliccateci per modificarla con il codice personalizzato.
Per modificare la pagina 404 dal file .htaccess la stringa da inserire invece è:
ErrorDocument 404 http://www.domain.com/404page.html.
Sostituite l’url d’esempio con l’url della pagina 404 personalizzata che avete creato.
In cerca d’ispirazione? Ecco una nostra selezione delle pagine 404 più creative e divertenti.
Zalando propone un simpatico gioco con il corriere Joe per (in)trattenere l’utente. Inoltre ne approfitta per sponsorizzare i suoi buoni regalo e invitare l’utente a una nuova ricerca dell’articolo desiderato.
H&M sceglie invece di non mostrare la pagina di errore e reindirizzare l’utente direttamente alla homepage. Un po’ deludente la pagina 404 di Amazon Italia. Anche al minimalismo c’è un limite!
Lego mostra una simpatica scena di panico nello stile inconfondibile del marchio. Semplice ma d’effetto.
WordPress non si scompone e va sul pratico, fornendo una serie di link a risorse utili: dai forum alla documentazione, fino alle pagine di download del CMS.
Abbiamo trovato semplicemente geniale l’errore 404 di TripAdvisor che manda in vacanza la pagina e suggerisce all’utente di fare lo stesso, invitandolo a cercare le offerte di voli e hotel sul suo motore di ricerca.
L’agenzia di stampa ANSA si mantiene professionale e in pieno stile fact checking spiega ai lettori cosa possa essere andato storto, invitandoli a segnalare l’errore. Anche per le pagine 404 non guasta un po’ di citizen journalism!
Di seguito altre pagine 404 creative. E alcuni spunti per realizzare una pagina 404 per un ecommerce.
