Blog Mind
  • How To
  • Vita da corsista
  • Inspiration
  • Work Tips
  • Corsi
Home  /  Inspiration  /  Pagina 404: e se non fosse solo un errore?
Inspiration

Pagina 404: e se non fosse solo un errore?

Mind Come progettare un sito web, Idee grafica, Idee per siti web
Mind: come e perchè sfruttare la pagina errore 404

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.

Mind Tips: errori HTTP e i loro codici

 

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:

Pagina errore 404 Not Found

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.

Sito notfound.org per donare la pagina 404 ai bambini scomparsiPersonalizzare 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

Mind Tips: evitare di indicizzare la pagina 404

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:

Evitare i 404 con Search Console

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.

La pagina 404 del tema WordPress Twenty Thirteen
La pagina 404 del tema WordPress Twenty Thirteen

 

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.

Pagina errore 404 di Zalando

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!

Pagina 404 minimale per Amazon

Simpatica pagina 404 personalizzata della Lego

 

Lego mostra una simpatica scena di panico nello stile inconfondibile del marchio. Semplice ma d’effetto.

 

La pagina di errore 404 WordPress.org

 

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.

 

Come sfruttare la pagina 404 per Tripadvisor

 

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.

 

Pagina errore 404 personalizzata Ansa

 

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.

Related Posts

  • Alcuni esempi di digital storytelling da cui trarre ispirazione

  • Robert Frank

    Robert Frank, il fotografo che ha cambiato il nostro sguardo sull’America

  • Il fallimento lavorativo

    Come affrontare un fallimento lavorativo

  • illustrazione per Lago Film Fest

    Diventare illustratore: intervista a La Tos

Newsletter

Iscriviti alla nostra newsletter!



Post recenti

  • Usabilità sito web
    Usabilità di un sito web: le regole da seguire How To, Web Design
  • Come progettare un sito web
    Come progettare un sito web efficace How To, Web Design
  • Mattia Malengo
    Intervista a Mattia Malengo: vi racconto la mia esperienza di TikToker Work Tips
  • Numerazione delle pagine con InDesign
    Come inserire la numerazione delle pagine con InDesign Graphic Design, How To
  • Promuovere una pagina Facebook
    Come promuovere una pagina Facebook: alcuni consigli utili How To, Social Media Marketing

Tendenze

Come fare copywriting Come gestire i social media Come progettare un sito web Consigli seo Corso Graphic Design Creare un brand di successo Gestione clienti Idee grafica Idee per siti web Ispirazione design Ispirazione grafica Lavoro freelance Mobile working Normative per il web Passione fotografia Passione grafica Personal branding Professione fumettista Progettazione siti web Social media marketing idee Strategie di marketing e comunicazione Strumenti per web designer Trend design

Contatti

Dove siamo

Sede
Via Venezia, 90/A
35129 Padova, Italia

Come contattarci

Telefono
049 7449220
Email
info@creativemind.academy

Newsletter

Iscriviti alla nostra newsletter!

Lasciaci la tua email
Riceverai in anteprima i nostri articoli



Post popolari

  • Brand book per l'immagine aziendale
    Guida alla creazione di un brand book Mind
Blog Mind

© MIND srl 2019 - Tutti i diritti riservati

MIND srl P.IVA e Codice Fiscale 05079870282 - Rea PD - 441420 - Reg Imprese 11/08/2017 - Marchio registrato/depositato presso Camera di Commercio codice 302016000074765