La pagina 404 è uno di quei posti del tuo sito che nessuno vorrebbe visitare, e proprio per questo dovresti renderla memorabile e curarla al meglio. Puoi trasformare un click sbagliato in una navigazione guidata e un errore in un’opportunità.
Se lavori come web designer già sai che non basta dire: “Ops… pagina non trovata”. devi far capire all’utente che per te è importante, e accompagnarlo fuori da quello che sembra un vicolo cieco, senza farlo sentire in colpa per aver sbagliato (anche perchè spesso non è colpa sua…). In questo articolo voglio darti:
- idee moderne e realmente utili per costruire una 404 che funziona
- suggerimenti di comunicazione e visual per renderla coerente con il tuo brand
- indicazioni tecniche per personalizzarla in WordPress, in particolare con tema Neve Pro
- un codice base, pronto da copiare e incollare che puoi adattare ai tuoi progetti
Partiamo per ridare dignità a questa pagina spesso maltrattata!
Per una 404 a prova di bomba:
- Un messaggio umano, non drammatico o accusatorio
- Aggiungi una breve spiegazione, basta una riga ma fatta bene
- Un paio di CTA strategiche per guidare l’utente
- Un tocco creativo al visual anche della 404
- Opzione 1: usare il tema per creare la pagina 404 senza plugin
- Opzione 2: in Neve Pro con Custom Layout + Conditions
- Domande frequenti sulla pagina 404 in WordPress
Cosa deve avere una pagina 404 fatta bene
Un messaggio umano, non drammatico o accusatorio
Evita le frasi come: “Errore! Risorsa non trovata!” ok il contenuto non c’è più o non è stato trovato, ma essere aggressivi non serve non ti pare? Ti lascio qualche esempio da usare per l’h1:
- Ops! Questo link ci ha giocato un brutto scherzo…
- La pagina che cerchi si è presa un giorno libero…
- Potremmo fingere che sia tutto normale, ma qualcosa è andato storto
La comunicazione è tutto, soprattutto quando c’è qualcosa che non va:
Un tono leggero e rassicurante e magari un pizzico di ironia non è forse meglio?
Aggiungi una breve spiegazione, basta una riga ma fatta bene
Dopo un titolo ironico e rassicurante serve una spiegazione, anche breve ma chiara di cosa è successo. Il suo scopo è semplice, far capire perchè l’utente è finito lì e come può rimettersi in carreggiata senza ansia. Ricorda di inserire due elementi indispensabili:
- cos’è successo > semplicemente senza cadere in tecnicismi inutili
- cosa può fare ora l’utente > e almeno una CTA utile (azione da compiere)
Questa frase deve in sunto dire: “Ok ci siamo persi, ma non preoccuparti ti guido io”. Ecco alcuni esempi pratici che puoi usare o adattare ai tuoi progetti:
1. Tono neutro e professionale:
Probabilmente abbiamo aggiornato il sito e questa pagina non esiste più. Ma tranquillo puoi tornare in home o cercare ciò che ti serve da qui.
2. Tono ironico e leggero, perfetto per creativi:
Ooops! Questa pagina si è presa una pausa caffè più lunga del previsto. Intanto possiamo tornare alla Home o dare un’occhiata agli ultimi articoli.
3. Tono amichevole, per siti educativi:
La pagina che cerchi non è disponibile, forse è stata spostata. Nessun problema: ti accompagno alla pagina giusta ripartendo dalla homepage.
4. Tono professionale, per e-commerce o siti complessi:
Il link potrebbe essere cambiato dopo un aggiornamento del catalogo. Puoi tornare alla Home oppure esplorare le categorie principali per trovare quello che cerchi.
5. Tono siti di professionisti o porfolio:
Sembra che questa pagina non esista più. Nel frattempo puoi visitare il portfolio o contattarmi per qualsiasi dubbio.
Una piccola e semplice frase che però può fare la differenza fra:
Utente confuso che chiude il sito e non trova quello che stava cercando
Utente rassicurato che continua a navigare il tuo sito e magari ti contatta
Un paio di CTA strategiche per guidare l’utente
Le call to action in una 404 sono come un faro nella nebbia, devono essere: poche, chiare e orientate a guidare l’utente verso una strada sicura, in modo che non debba chiedersi: “E ora cosa faccio?”.
Non esagerare con le CTA, una o due bastano, queste sono quelle che ti consiglio:
- Torna alla home > semplice e diretta
- Vai ai servizi o contattami > per mostrare cosa offri o farti contattare
L’obiettivo non è offrire all’utente mille possibilità ma accompagnarlo verso un percorso chiaro. Pochi clic, zero stress, massima chiarezza.
Un tocco creativo al visual anche della 404
Sfrutta la grafica per rendere la pagina meno noiosa, alleggerisci l’errore e accompagna il tuo utente con gentilezza. Puoi farlo in diversi modi, come ad esempio con:
- una piccola illustrazione, coerente con il tuo stile o brand
- un’icona che trasmetta leggerezza
- un pattern se ne hai già usati nel sito
- un’immagine ironica, ma senza cadere nel pesante, che strappi un sorriso
- PS qui puoi vedere la mia… è una bussola, che ne pensi?
Ricorda, niente effetti speciali o animazioni che pesano, non servono e distraggono, punta su qualcosa che sia semplice, veloce e accogliente.
Personalizzare la pagina 404 in WordPress
Opzione 1: usare il tema per creare la pagina 404 senza plugin
Molti temi WordPress includono già la pagina 404, che spesso però è un triste: “Page not found”. La buona notizia è che puoi sostituirla in pochi minuti – soprattutto se utilizzi un tema child – cosa che consiglio sempre. Il procedimento è semplice:
- Crea un file chiamato 404.php nel tuo child theme
Se il file non esiste, WordPress userà quello del tema principale, quindi inserirlo nel child ti permette di personalizzarlo senza rischiare di perderlo quando effettui gli aggiornamenti. - Aggiungi al file il contenuto HTML/CSS della tua 404
Non servono i fuochi d’artificio, basta una pagina semplice con elementi ben posizionati. - Integra header e footer del tema
Per mantenere coerenza e navigazione, così la pagina sarà allineata al resto del sito - Aggiungi CTA e messaggio di errore personalizzato
Questa opzione è l’ideale se vuoi massima libertà senza aggiungere un altro plugin solo per questa pagina. Sotto trovi un codice minimal che puoi usare come punto di partenza e adattare al tuo sito:
<div class="ta-404-wrapper">
<div class="ta-404-card">
<div class="ta-404-icon" aria-hidden="true">🧭</div>
<h1 class="ta-404-title">Ops! Questa pagina si è persa.</h1>
<p class="ta-404-text">
Il link che hai seguito non porta più da nessuna parte, oppure la pagina è stata spostata.
Nessun problema: ti accompagno io verso una destinazione più utile.
</p>
<ul class="ta-404-help">
<li>torna alla homepage e riparti da lì</li>
<li>vai direttamente ai servizi</li>
<li>oppure scopri qualcosa in più dal portfolio</li>
</ul>
<div class="ta-404-buttons">
<a href="/" class="ta-404-btn ta-404-btn-primary">
Torna alla home
</a>
<a href="/servizi" class="ta-404-btn ta-404-btn-outline">
Guarda i servizi
</a>
<a href="/portfolio" class="ta-404-link">
Vai al portfolio
</a>
</div>
</div>
</div>
<style>
.ta-404-wrapper {
padding: 80px 20px;
display: flex;
justify-content: center;
}
.ta-404-card {
max-width: 720px;
width: 100%;
margin: 0 auto;
text-align: center;
padding: 40px 28px;
background: #f8f8f8;
border-radius: 16px;
}
.ta-404-icon {
font-size: 3rem;
margin-bottom: 12px;
}
.ta-404-title {
font-size: 2.2rem;
margin-bottom: 14px;
}
.ta-404-text {
margin: 0 auto 18px;
max-width: 540px;
color: #444;
line-height: 1.7;
}
.ta-404-help {
list-style: none;
padding: 0;
margin: 0 0 26px;
color: #666;
font-size: 0.95rem;
}
.ta-404-help li::before {
content: "• ";
}
.ta-404-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 16px;
}
.ta-404-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 24px;
border-radius: 999px;
text-decoration: none;
font-size: 0.98rem;
border: 2px solid transparent;
transition: transform 0.1s ease, background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.ta-404-btn-primary {
background: #000;
color: #fff;
}
.ta-404-btn-primary:hover,
.ta-404-btn-primary:focus-visible {
transform: translateY(-1px);
}
.ta-404-btn-outline {
background: transparent;
color: #000;
border-color: #000;
}
.ta-404-btn-outline:hover,
.ta-404-btn-outline:focus-visible {
background: #000;
color: #fff;
}
.ta-404-link {
font-size: 0.95rem;
text-decoration: underline;
text-underline-offset: 3px;
color: #444;
}
.ta-404-link:hover,
.ta-404-link:focus-visible {
color: #000;
}
/* Responsive */
@media (max-width: 600px) {
.ta-404-card {
padding: 30px 20px;
}
.ta-404-title {
font-size: 1.8rem;
}
}
</style>
Opzione 2: in Neve Pro con Custom Layout + Conditions
Se usi il tema Neve Pro hai un vantaggio, puoi creare la tua 404 senza toccare il codice, con uno stile estremamente personalizzabile. Vediamo come fare passo passo:
- Entra in Neve (o nome del tuo tema child) > Custom layout
- Clicca su Add new
- Scegli il tipo di layout 404 page
- Usa il builder che preferisci – io ad esempio uso Gutenberg e Generate Blocks
- Crea la tua pagina 404 come fosse una landingpage:
- layout a larghezza contenuta
- titolo grande H1
- testo breve e chiaro
- bottoni visibili con CTA chiara
- stile coerente con il resto del sito
- Vai nella scheda Display Rules
- Imposta: Show > 404 Page
- Pubblica
Domande frequenti sulla pagina 404 in WordPress
1. Una pagina 404 personalizzata fa bene alla SEO?
Non migliora il ranking da sola, però riduce il bounce rate, mantiene l’utente sul sito e favorisce una navigazione più fluida. Tutte cose che Google apprezza moltissimo quando valuta la qualità dell’esperienza utente.
2. Posso reindirizzare tutto verso la home invece di creare una 404?
Meglio evitare. Il redirect forzato (301 o peggio 302) può confondere Google, creare soft-404 e far perdere indicizzazione. La 404 serve proprio a dire: “questa pagina non c’è più, ma ti accompagno io dove andare”.
3. Vale la pena inserire la ricerca nella 404?
Dipende. Se il tuo sito ha la ricerca che funziona davvero sì. Se invece la ricerca restituisce risultati casuali stile “slot machine”, meglio evitare: è frustrante e allontana l’utente.
4. Come posso controllare se qualcuno finisce spesso sulla mia 404?
Puoi usare: Google Analytics → comportamento → pagine → cerca “/404/” o l’etichetta che hai impostato, Search Console → copertura → errori e soft-404. Se c’è traffico elevato, significa che hai link rotti o contenuti rimossi senza redirect.
5. Devo mettere il menu completo nella pagina 404?
Si attiva la header del sito in questa pagina, non fa perdere la bussola ai tuoi utenti che hanno una strada alternativa, oltre quella che gli offri con i bottoni torna alla home ecc, per continuare la navigazione.
6. Posso inserire un’immagine o una illustrazione nella 404?
Assolutamente sì. Anzi io te lo consiglio, rende la pagina più leggera graficamente. Ricorda solo di usare un formato leggero, come le webP e che sia inerente.
Vuoi migliorare l’esperienza utente del tuo sito – 404 compresa?
Progettare un sito significa occuparsi anche dei dettagli invisibili, le pagine che nessuno nota finchè non succede qualcosa…
Se vuoi un sito che accompagni davvero le persone, anche quando cliccano un link sbagliato o arrivano al tuo sito tramite vecchie pagine indicizzate che non esistono più? Sono qui per aiutarti.
Costruiamo insieme un sito che funziona e accoglie, anche quando qualcosa va storto.