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:
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 viene mostrata 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:
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.
Quando si genera una pagina 404 a causa di un errore 404 not found accade più o meno questo:
Il tuo sito web è in panne e mostra all’utente una pagina errore generica e poco utile. Un ostacolo poco gradito che tende a far scappare le persone.
Offrire un messaggio di errore generico o limitarsi ad aggiungere al sito una pagina preimpostata del tema di WordPress che indica lo stato di errore 404 offre una pessima o scadente esperienza di navigazione.
Quando si verifica un errore 404 e la pagina non può essere trovata, volgi la situazione a tuo vantaggio. E cogli l’occasione per mostrare una pagina errore 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 e cogli l’occasione per offrire 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.
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 è infatti essere utile suggerendo percorsi alternativi per uscire dal vicolo cieco:
Quella di mostrare la home page in automatico al posto della pagina 404 è una pratica 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 le persone non riescono a comprendere: perché invece di vedere quello che cerco mii ritrova 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.
Suggerisci un percorso alternativo evitando la frustrazione di una strada senza uscita per indurre l’utente a restare sul tuo sito.
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 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
La pagina errore 404 dovrebbe essere in linea con il design e con gli elementi funzionali del tuo sito web.
Quanto alla grafica: dovrebbe essere coerente con resto del sito.
Non usare una pagina 404 completamente difforme dal resto del sito o non in linea con l’estetica e le funzionalità delle tue pagine web.
Questo vale a meno che la scelta di creare una grafica di rottura, non coerente con il resto del design del sito non sia fatta con consapevolezza: per stupire o per strappare una risata.
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 della tua attività.
Quali sono le tue ultime novità? E i post più letti del tuo blog? Puoi usare lo spazio della pagina 404 per suggerire una nuova strada o per mettere in evidenza il meglio di quello che offri.
Sfrutta il potere delle parole!
Per creare una pagina 404 personalizzata di forte impatto non sono per forza necessari virtuosismi grafici.
Il tone of voice 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 il potere di frasi divertenti, poco formali o emotivamente coinvolgente:
Puoi creare engagement e sorprendere le persone con un’immagine divertente o un’animazione originale ma anche “solo” o soprattutto con le parole.
Fra gli esempi di pagine 404 che sto per mostrarti ce ne sono alcuni che giocano sul testo, con frasi e parole particolarmente azzeccate.
Ma prima, un riassunto visivo di quello che ci siamo detti nei paragrafi precedenti:
A questo punto ti mostro 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.
Ecco le 30 pagine errore 404 che ho scelto per te:
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!
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!
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.
I box posti nella parte inferiore della schermata suggeriscono strade alternative da percorrere per riprendere la navigazione.
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.
Coca-Cola propone un messaggio simpatico e poco formale.
Anche in questo caso la grafica è leggera e c’è un buon equilibrio fra testo e immagini, spazi pieni e spazi vuoti.
Una possibile strada per mostrare l’errore 404 è inserire un’immagine che l’utente non si aspetta. Questo genera un effetto sorpresa. In questo caso la pagina contiene anche un link per riprendere la navigazione del sito.
Per un sito che rappresenta un’azienda creativa è importante puntare su una grafica che sappia sbalordire. Possibilmente, qualcosa di graficamente in linea con quanto 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.
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.
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.
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.
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!).
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?).
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.
Simpatica e utile. Pennamontata ci mette la faccia: stupisce e convince.
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.
Ti sei perso? Direi di si ma tutti qui aspettano. Non ti sembra il caso di rimediare, Harry Potter?
A me è venuta fame. L’obiettivo di questa pagina 404 è stato centrato!
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.
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?
Mi piace il messaggio di Redbull e anche l’idea di inserire un filmato che trattenga l’utente sul sito.
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!
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.
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.
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.
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.
Un messaggio amichevole che crea empatia in linea con il marchio e con l’atmosfera dell’immagine. Ottimo esempio di pagina 404!
Misurata nel copywriting e ordinata nella grafica. Etsy offre un esempio di pagina 404 ordinata e utile.
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à.
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.
Ultima modifica: Febbraio 23, 2024
La SERP di Google si rinnova con lo scrolling infinito: la pagina dei risultati di…
LCP: quanto conta per l'esperienza utente e perché è importante ottimizzarlo? (altro…)
EEAT: cos'è? Comprendi e Valuta la qualità delle tue pagine web per aumentare le tue…
Come scegliere le dimensioni delle immagini per Linkedin? Prova con questa breve guida, completa e…
autenticazione a due fattori: ecco come può aiutarti a proteggere il tuo sito WordPress e…
Cos'è il SEM (search engine marketing) e che differenze c'è fra SEM, SEO e SEA?…