Come puoi trasformare la pagina 404 in un contenuto di valore per il tuo sito web? Ecco i nostri consigli+30 ottime pagine 404 personalizzate da cui prendere spunto.
Cosa troverai in questo articolo:
Come creare una pagina 404 personalizzata
Ogni pagina del tuo sito web è importante e dovrebbe essere curata in tutti i dettagli. E la pagina errore 404 non fa eccezione!
La pagina 404 è ciò che viene mostrato alle persone quando si verifica un errore 404 (not found), cioè quando una pagina o un’altra risorsa del sito non è raggiungibile per uno di questi motivi:
- è stata rimossa o spostata;
- c’è stato un errore dell’utente nel digitare l’indirizzo (URL) nella barra di ricerca;
- il link che dovrebbe aprire la risorsa è corrotto e non funziona.
Per approfondire: Come risolvere l’errore 404 sul tuo sito web
Parliamo un po’ di come costruire e soprattutto personalizzare la tua pagina 404 per trasformala in un’opportunità. Se invece vuoi vedere subito 30 esempi di ottime pagine 404 vai direttamente ?qui.
Perché dovresti avere una pagina 404 personalizzata sul tuo sito web
Quando si genera una pagina 404 a causa di un errore 404 not found accade più o meno questo:
- se il tuo sito è costruito in codice puro, il server mostra una schermata generica che segnala l’errore;
- se il tuo sito è realizzato con WordPress (oppure con altro CMS come Drupal o Joomla) si genera una pagina 404 standard, di solito in linea con il tema del sito web, generica, poco elaborata e poco comunicativa.
A cosa serve una pagina 404 personalizzata: su misura, originale e creativa
Il tuo sito web è in panne e mostra all’utente una pagina errore generica e poco utile: un ostacolo di solito non gradito che tende a far scappare le persone.
Offrire un messaggio di errore standard o limitarsi ad aggiungere al sito una pagina preimpostata del tema di WordPress che indica lo stato di errore 404 offre un’esperienza di navigazione pessima o scadente.
Puoi fare di meglio!
Trasforma l’errore 404 in un’opportunità: quando la pagina non può essere trovata, volgi la situazione a tuo vantaggio e cogli l’occasione per mostrare una schermata 404 personalizzata: piacevole e ricca di contenuti utili.
Aiuta l’utente a capire cosa succede e incoraggialo a riprendere la navigazione delle tue pagine web.
Comunica con chiarezza che c’è un problema con un messaggio originale e coinvolgente.
Anche Google nelle sue linee guida per la SEO dei siti web incoraggia l’uso di pagine 404 personalizzate, a misura di utente.
Come creare un’ottima pagina 404 personalizzata: 5 consigli utili
- Prima di tutto una pagine 404 utile
- Non indicizzare la pagina 404
- Costruisci una pagina 404 coerente con il resto del sito
- Trasforma la tua pagina 404 in uno strumento di marketing
- Personalizza le tue pagine 404 con il copywriting
1. Prima di tutto una pagina 404 utile
Qualcuno ha scelto di visitare il tuo sito web. Se qualcosa non va dovresti spiegare in modo chiaro cosa succede e come si puoi rimediare.
Il primo scopo di una pagina errore 404 personalizzata è essere utile
- Segnala il problema e spiega le cause.
- Invita l’utente a riprendere il cammino: inserisci un link per tornare alla home, altri collegamenti utili e un modo per contattare il servizio assistenza. Potresti anche aggiungere alla pagina una barra di ricerca.
- Non creare un redirect automatico alla home page del sito. Le persone devono capire che c’è un errore 404 oppure che il file che cercano non è al momento disponibile.
Quella di mostrare la home page in automatico al posto della pagina 404 è una pratica ancora abbastanza diffusa, sebbene Google sconsigli vivamente di usare in questo modo “distorto” il redirect 301.
Se rinvii in automatico alla home quando c’è un errore 404 le persone non riescono a capire e probabilmente penseranno “perché invece di vedere quello che cerco mii ritrovo involontariamente ai blocchi di partenza?”
Personalmente, mi innervosisco parecchio quando incappo in questa sorta strategia del “come nulla fosse” e di solito abbandono il sito.
Una strada migliore? Suggerisci un percorso nella tua pagina 404 evitando così la frustrazione di una strada senza uscita in modo da incoraggiare l’utente a restare.
2. Non indicizzare la pagina 404
Anche se realizzi una pagina 404 degna di nota (utile, comunicativa e magari anche divertente) non dovresti mai permetterne l’indicizzazione, per evitare che sia inserita nel database di Google e quindi mostrata fra i risultati di ricerca.
Per evitare che le pagine 404 vengano indicizzate assicurati che il tuo server restituisca un codice di stato HTTP 404 quando vengono richieste pagine momentaneamente mancanti o quando ci sono link che non funzionano.
N.B. Le pagine che non non sono disponibili ora e non lo saranno mai più dovrebbero essere segnalate con lo stato di errore http 410 gone.
Per approfondire: Come gestire al meglio l’errore 404 su tuo sito web
3. Costruisci una pagina 404 coerente con il resto del sito
La pagina errore 404 dovrebbe essere in linea con il design e con gli elementi funzionali del tuo sito web. Anche la grafica dovrebbe essere coerente con resto del sito.
Non usare una pagina 404 completamente difforme dal resto del sito e non in linea con l’estetica e le funzionalità delle tue pagine web.
Questo vale quasi sempre: a meno che la scelta di creare una grafica “di rottura” sia voluta e consapevole: per stupire o per strappare una risata (un’occhiata alla lista di esempi che troverai più avanti basterà a chiarire quello che intendo).
4. Trasforma la tua pagina 404 in uno strumento di marketing
Il primo scopo di una pagina 404 personalizzata è quello di trattenere l’utente sul tuo sito web. Ma puoi fare di più: agganciare emotivamente le persone, mettere in evidenza il meglio di ciò che sai fare:
- coinvolgi emotivamente l’utente
- diverti con una battuta
- segnala l’errore con una frase informale
- stupisci con un’effetto grafico speciale
Quali sono le tue ultime novità? E i post più letti del tuo blog? Puoi usare la pagina 404 per mettere in evidenza il meglio di quello che offri sul tuo sito web.
5. Personalizza le tue pagine 404 con un buon copywriting
Sfrutta il potere delle parole!
Per creare una pagina 404 personalizzata di forte impatto non sono per forza necessari virtuosismi grafici.
Il tono di voce della tua pagina 404 conta moltissimo e la dice lunga sul tipo di rapporto che intendi stabilire con il tuo interlocutore, che poi, senza girarci in torno, è un potenziale cliente.
Dire le parole giuste con il tono adatto può farti recuperare un rapporto che rischia di andare in malora.
Puoi impostare la tua comunicazione in molti modi diversi, anche sfruttando frasi divertenti o poco formali:
- ammetti che la colpa è tua: evita formule generiche e costruisci invece un messaggio personalizzato per scusati e invitare l’utente a restare sul sito;
- fai una battuta per sdrammatizzare e segnala che l’utente è fuori strada. In questo caso dovrai essere particolarmente cauto e brillante per non creare fastidio;
- crea un testo che sappia colpire, esci dagli schemi. Offri un messaggio inaspettato!
Puoi sorprendere le persone con un’immagine divertente o un’animazione grafica originale ma anche “solo” con le parole.
Fra gli esempi di pagine 404 che sto per mostrarti ce ne sono alcuni che se la giocano solo sul testo, con frasi e parole particolarmente azzeccate.
Ma prima di arrivare alla lista di esempi, ecco un riassunto visivo di quello che ci siamo detti nei paragrafi precedenti, che spero possa esserti utile:
Come creare una pagina 404 personalizzata (infografica)
30 esempi di pagine 404 da cui prendere spunto
Ecco una raccolta di bellissime pagine 404 che hanno fatto di necessità virtù, capaci di stupire e di convincere. Sono molto diverse fra loro in quanto a grafica, tono di voce e struttura.
Questa è la lista delle 30 pagine errore 404 che ho scelto per te:
- Istock
- Medium
- Mailchimp
- Magento
- Airbnb
- Cocacola
- Cern
- DC
- Hubspot
- Harrods
- Lush
- Marvel
- Mulino Bianco
- Netflix
- Pennamontata
- Adidas
- Harry Potter
- Barilla
- Disney
- Lavazza
- Red Bull
- NASA
- Pixar
- Rummo
- Starbuks
- HBO
- Jackdaniels
- Etsy
- Ebay
- Elf on the shelf
1. Istock
La pagina 404 di Istock comunica chiaramente che c’è un problema e suggerisce un paio di alternative per uscire dal vicolo cieco. Colloquiale ed efficace!
2. Medium
Ecco un esempio di pagina errore tutta giocata sulle parole che sanno essere un ottimo esempio di copywriting brillante, ma diventano anche elementi della grafica.
Uso delle forme, scelta dei caratteri tipografici e ripartizione fra spazi pieni e vuoti: tutto funziona alla perfezione!
3. Mailchimp
La pagina 404 di Mailchimp è un ottimo esempio di come si possa sfruttare un copy fresco e leggero per colpire l’utente e farlo sentire considerato.
4. Magento
Utile e sobria la pagina di Magento che segnala in maniera ordinata ed efficace l’errore 404.
I box posti nella parte inferiore della schermata suggeriscono strade alternative da percorrere per riprendere la navigazione.
5. Airbnb
Ecco un esempio di pagina 404 ordinata, fresca ed efficace che mette in primo piano un elemento grafico colorata e attira lo sguardo sulle parole.
Molte (troppe) pagine 404 personalizzate esclamano “Oops!” e seguendo questa strada si può rischiare di proporre una comunicazione omologata e banale. Ma in questo caso la scelta funziona.
6. Coca cola
Coca-Cola propone un messaggio simpatico e poco formale.
Anche in questo caso la grafica è leggera e c’è equilibrio fra testo e immagini, spazi pieni e spazi vuoti.
7. Cern
Mostrare l’errore 404 è inserire un’immagine che l’utente non si aspetta, generando un effetto sorpresa. In questo caso la pagina contiene anche un link per riprendere la navigazione del sito.
8. DC
Per un sito che rappresenta un’azienda creativa è importante puntare su una grafica che sappia sbalordire. Possibilmente, qualcosa che gli utenti si aspettano o amano.
Anche se non sei DC o un colosso dei fumetti puoi ispirarti a questo esempio di pagina 404 se ti occupi di grafica, sei un disegnatore o hai fatto della creatività la tua professione.
9. Hubspot
Dieci e lode per Hubspot che costruisce la sua pagina a regola d’arte: comunicativa, informale ma il linea con la grafica del sito e anche con il suo tone of voice.
10. Harrods
Harrods offre un esempio di pagina 404 semplice con un tono formale, abbastanza efficace.
Bella ed elegante la grafica di sfondo. E c’è tutto quello che serve per riprendere la navigazione.
11. Lush
Questa pagina 404 asciutta e utile con tanti redirect e risorse alternative.
Ben organizzata, non disperde l’attenzione dell’utente. E basta un colpo d’occhio per tornare al sito.
12. Marvel
Se non sei Marvel ma promuovi nel tuo sito qualcosa di creativo puoi mostrare quello che sai fare.
Questa pagina 404 propone diverse grafiche, a rotazione. Tanto che vorresti sbagliare di proposito a digitare l’indirizzo URL per poterle vedere tutte (Confesso, io l’ho fatto!).
13. Mulino Bianco
Un messaggio simpatico che valorizza la brand identity per la pagina 404 di Mulino Bianco che gioca su parole come “briciole” e suggerimenti “buoni” (da mangiare o da navigare?).
14. Netflix
Messaggio forse un po’ freddo per la pagina 404 di Netflix, ma l’immagine di sfondo è efficace.
L’idea di sfruttare una foto come sfondo è una strada che si può percorrere quando un disegno simpatico o una grafica informale non è adatta al tono di voce all’azienda.
15. Pennamontata
Simpatica e utile. Pennamontata ci mette la faccia: stupisce e convince.
16. Adidas
Ho visto tante pagine 404 con immagini molto divertenti e particolari che però ho dimenticato.
Invece questa di Adidas mi è rimasta in mente per una semplice frase: “Never stop trying”, non smettere mai di provare! Mi ha ispirato e anche convinto a riprendere la navigazione.
17. Harry Potter
Ti sei perso? Direi di si ma tutti qui aspettano. Non ti sembra il caso di rimediare, Harry Potter?
18. Barilla
A me è venuta fame. L’obiettivo di questa pagina 404 è stato centrato!
19. Disney
Comunicare l’errore 404 affibbiando la colpa all’utente è sempre una scelta da fare con cautela.
Se vuoi scegliere questa strada fai come Disney: stempera l’atmosfera con una battuta simpatica dal tono gentile.
20. Lavazza
Un messaggio simpatico e una tazza di caffè fumante per la pagina 404 di Lavazza. Non ti senti già pronto a riprendere la navigazione del sito?
21. Red Bull
Mi piace il messaggio di Redbull e anche l’idea di inserire un filmato che trattenga l’utente sul sito.
22. NASA
Il messaggio della pagina 404 della Nasa è decisamente in linea con il sito web e molto originale: forse non puoi andare nello spazio ma sicuramente puoi tornare alla home page del sito!
23. Pixar
Ecco una tra le pagine 404 più famose, quella di Pixar, che usa uno dei suoi personaggi e un messaggio divertente per comunicarci che qualcosa non va.
24. Rummo
Bellissimo esempio questa di Rummo. Puoi creare qualcosa di simile e giocare sul tuo prodotto migliore e inserirlo in modo insolito e originale nella tua pagine errore 404.
25. Starbuks
Sturbucks usa un’immagine particolare e riconoscibile per suggerire che quello che ti aspetti non c’è… ma può tornare disponibile se ordini un buon caffè.
Unica pecca di questa pagina è forse la parte testuale: i dettagli per riprendere la navigazione non sono leggibili perché i font sono troppo piccoli e privi di enfasi.
26. HBO
HBO propone una pagina 404 utile e dal design pulito. Apprezzo particolarmente la ripartizione degli spazi e anche i box in evidenza. Il copywriting è ben strutturato e non banale.
27. Jack Daniels
Un messaggio amichevole che crea empatia in linea con il marchio e con l’atmosfera dell’immagine. Ottimo esempio di pagina 404!
28. Etsy
Misurata nel copywriting e ordinata nella grafica. Etsy offre un esempio di pagina 404 ordinata e utile.
29. Ebay
Un mix perfetto di immagini e copy per la pagina 404 di Ebay che mette in risalto risorse alternative e comunica amichevolmente con l’utente, mostrando interesse e disponibilità.
30. Elf on the shelf
Utile, ricca di contenuto e divertente la pagina 404 di Elf on the shelf. Totalmente in linea con il brand e in grado di affascinare grandi e piccini. Chi non vorrebbe riprendere la strada per il Polo Nord?
Siamo in chiusura. Ti va di dirmi quale fra queste pagine ti è piaciuta di più? Ne hai viste altre che mi vuoi suggerire? Lascia un commento.
Vuoi una pagina 404 personalizzata per il tuo sito web?
