La pagina 404 di un sito indica una pagina cancellata o spostata che non è stata reindirizzata correttamente, oppure semplicemente un URL digitato male. Se gestisci un sito, puoi sfruttare la pagina di errore 404 per indirizzare gli utenti alle pagine più simili all’articolo o al servizio ricercato dall’utente.
Ad esempio, se la pagina conteneva un modello di sneaker da donna, puoi inserire un link alla scheda del prodotto più somigliante.
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 di configurazione.
Perché personalizzare la pagina 404
Se sei un programmatore, finire su una pagina di errore 404 ti farà pensare a un sito poco curato, ma non ti lascerà troppo disorientato. Sai benissimo cos’è una pagina 404 e perché appare una schermata di errore. Ma pensa a cosa accade quando un utente comune vede apparire un messaggio simile sul suo schermo:
Si sentirà smarrito, e la sua prima reazione sarà quella di uscire dal sito. Che per un e-commerce si traduce in un calo delle vendite.
Personalizzare la pagina 404 ti permette di trattenere l’utente sul sito, riducendo la frequenza di rimbalzo e migliorando il posizionamento organico del sito. Per i portali e-commerce è importante quindi curare la pagina di errore 404 per non perdere gli utenti che cercano un prodotto inesistente.
Per essere funzionale, una pagina 404 deve:
- Essere in linea con lo stile del sito (stessi font e colori);
- Contenere un link alla home page;
- Linkare ad 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.
Puoi anche inserire un modulo per invitare l’utente a segnalare le pagine inesistenti. Sei pronto a iniziare?
Individua i link rotti usando la Search Console di Google o uno strumento come Screaming Frog. Una volta ottenuta la lista dei link rotti, usa il Redirect 301 per reindirizzare gli utenti su una pagina attiva. Per farlo, trova il file .htaccess presente nella root del dominio e scrivi:
“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. Dovrai quindi omettere “http://www.miosito“. Nella seconda parte inserisci invece 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. Approfitta di questo errore per:
- Inserire un form di iscrizione alla newsletter;
- Far crescere la community, indirizzando l’utente a forum e canali social;
- Strappare un sorriso ai clienti con una grafica originale che comunichi i valori del brand;
- Portare il cliente verso una landing page che vuoi promuovere;
- Sponsorizzare prodotti e servizi, ad esempio inserendo gli articoli più venduti, un buono sconto, le offerte speciali o il link per scaricare l’app aziendale.
Gli errori da evitare nella pagina 404
Innanzitutto, cerca di non far sentire in colpa l’utente per aver digitato l’indirizzo sbagliato. Usa un tono di voce amichevole, senza esagerare con l’ironia.
Semplicemente, il visitatore dovrà capire che la pagina cercata non esiste o è stata spostata, e ricevere tutte le informazioni utili a proseguire tranquillamente la navigazione sul sito.
Come creare una pagina 404 personalizzata
Se gestisci un sito in WordPress, puoi creare la pagina 404 sfruttando il WordPress Page Editor. Una volta creata la pagina, ti basterà andare su: Aspetto –> 404 Error Page e impostarla come Pagina 404. Di seguito un breve tutorial:
Per mantenere la corretta funzionalità del tuo 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 creare un reindirizzamento.
I reindirizzamenti, o redirect, si realizzano tramite file .htaccess; ricordati di fare le modifiche alla fine del documento e non dimenticarti di inserire il commento # prima del blocco dei redirect, in modo da essere facilitato nella correzione degli errori.
Ecco la sintassi da tenere a mente:
Redirect 301 /cartellavecchia/paginavecchia http://nuovoindirizzoblablabla/bfgf
Evita di creare redirect che rimandano solo alla home page, e cerca piuttosto di reindirizzare a pagine con contenuti simili a quella mancante.
Un ultimo consiglio: se la rimozione del contenuto con conseguente redirect è solo temporanea, puoi usare il redirect 302.
Se invece usi WordPress e hai bisogno di soluzioni già pronte, puoi installare il plugin 404 to 301. Questo plugin individua tutti gli errori 404 e li gestisce al posto tuo, reindirizzando gli utenti a una determinata pagina attraverso il codice di stato 301 (Moved Permanently). Attenzione però, è sempre bene non fidarsi troppo 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 vuoi modificare la pagina di errore 404, aprila con un editor di testo come TextEdit e modifica il messaggio. Poi salva le modifiche e caricala 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 messaggio personalizzato.
Altri modi di personalizzare la pagina 404
Puoi caricare la pagina 404 personalizzata sul server via FTP, con Filezilla, Cyberduck o il client FTP che preferisci. Se utilizzi cPanel come pannello di controllo del web hosting, accedi alla sezione delle pagine di errore, trova la pagina 404 e cliccaci per modificarla con il codice personalizzato.
Per modificare invece la pagina 404 dal file .htaccess la stringa da inserire è:
ErrorDocument 404 http://www.domain.com/404page.html.
Sostituisci l’url d’esempio con l’url della pagina 404 personalizzata che hai creato.
Esempi di pagine 404 originali
Sei in cerca d’ispirazione? Ecco una selezione delle pagine 404 più efficaci e creative che abbiamo trovato sul Web!
Zalando propone un simpatico gioco con il corriere Joe per (in)trattenere l’utente. Inoltre coglie l’occasione per sponsorizzare i suoi buoni regalo e invitare l’utente a una nuova ricerca dell’articolo desiderato.
Lego mostra una simpatica scena di panico nello stile inconfondibile del marchio. Semplice, ma d’effetto.
WordPress sceglie una soluzione pratica, fornendo una serie di link a risorse utili: dai forum alla documentazione, fino alle pagine di download del CMS.
Semplicemente geniale la pagina 404 di TripAdvisor, che sfrutta il tema delle vacanze per invitare l’utente a cercare le offerte di voli e hotel sul motore di ricerca.
In pieno stile fact checking la pagina dell’agenzia di stampa ANSA, che spiega ai lettori cosa potrebbe essere andato storto e li invita a segnalare l’errore.
Vuoi approfondire le tue competenze di programmazione per iniziare a sviluppare siti e applicazioni web? Scopri il nostro corso di PHP e mySQL!
