Pagine 404: gestione tecnica, design creativo e la mia (un videogioco)

La pagina 404 è uno dei pochi punti in cui un sito deve deludere il visitatore: ciò che cercava non c'è. Gestita male, è un vicolo cieco e un piccolo problema SEO. Gestita bene, è un dettaglio che racconta quanto il sito è stato pensato fino in fondo. Qui metto insieme le due cose: la parte tecnica, che è quella che conta di più, e quella creativa, compresa la mia 404, che è un videogioco.

La parte tecnica, prima del design

Il codice di stato giusto

Una pagina inesistente deve rispondere con status 404 (o 410 se rimossa definitivamente). Molti siti mostrano una bella pagina di errore ma rispondono 200: è una soft 404, e Google la segnala in Search Console perché non riesce a distinguere le pagine vere da quelle vuote. Nei framework moderni e nei siti generati in anticipo va verificato esplicitamente che la pagina di errore venga servita con lo status corretto, anche dalla CDN.

Redirect sì, ma uno a uno

Quando una pagina cambia indirizzo, il vecchio URL va reindirizzato con un 301 al nuovo contenuto equivalente. Reindirizzare tutto alla home è la scorciatoia sbagliata: per Google equivale a una soft 404, per l'utente è un disorientamento. Se un contenuto equivalente non esiste, il 404 è la risposta onesta.

Trovare i 404 che contano

Non tutti i 404 sono un problema: quelli generati da bot che provano indirizzi a caso si possono ignorare. Contano quelli su URL con link esterni, traffico storico o link interni. Le fonti: rapporto di indicizzazione di Search Console, log del server o della CDN, crawl periodico del sito per i link interni rotti, strumenti di backlink per quelli esterni.

Prevenire

La maggior parte dei 404 importanti nasce in un rifacimento o in una riorganizzazione dei contenuti senza mappa dei redirect. In questo sito, per esempio, quando la sezione articoli ha cambiato nome e alcuni articoli sono stati uniti, ogni vecchio indirizzo è stato reindirizzato al contenuto più vicino.

La parte di design

Una buona 404 fa tre cose: spiega che la pagina non c'è senza dare la colpa al visitatore, offre subito dove andare (menu, ricerca, pagine principali) e mantiene il tono del sito. La parte creativa serve a rendere tutto questo più piacevole, non a sostituirlo.

Criteri per la parte creativa

L’effetto visivo deve lasciare sempre disponibili messaggio, navigazione e ricerca. Un gioco o un’animazione richiede controlli da tastiera, gestione del focus e una scelta coerente con le preferenze di movimento ridotto. Il contenuto principale della pagina di errore deve restare comprensibile anche se l’effetto non si carica.

I riferimenti di altri siti cambiano nel tempo: preferisco verificare questi requisiti sul progetto reale invece di basarmi su una galleria di screenshot.

La mia 404: Bug Invaders

Sul mio sito ho scelto una strada da sviluppatore: la 404 è un piccolo videogioco, Bug Invaders. Invece di una scritta, un'invasione di bug da abbattere: frecce per muoversi, barra spaziatrice per sparare, dito trascinato sul telefono. Punteggio, ondate, vite, record.

Le scelte tecniche dietro:

• la pagina risponde con un vero 404, non con un 200 travestito;
• il gioco è un componente caricato lato client nei contesti che lo usano, come la 404 e il playground; il suo impatto si verifica nelle richieste di rete;
• sopra il gioco restano messaggio, pulsanti e menu: si può ignorarlo completamente e proseguire, anche da tastiera;
• l'area di gioco resta scura anche con il tema chiaro, per non perdere leggibilità.

Il tema è coerente con il mestiere: chi scrive codice i bug li combatte ogni giorno. Se vuoi provarla, apri la mia pagina 404.

Checklist per una 404 che funziona

1. Status 404 o 410 reale, verificato anche dietro la CDN.
2. Messaggio chiaro, menu, ricerca o link alle pagine principali.
3. Tono coerente con il sito; nel dubbio, sobrio.
4. Peso minimo: niente librerie caricate globalmente per la 404.
5. Accessibile da tastiera e lettore di schermo, animazioni che rispettano la riduzione del movimento.
6. Monitoraggio periodico dei 404 su URL con link o traffico.

Collaudo dell’errore in produzione

Il controllo più utile usa un indirizzo che non è mai esistito, richiesto direttamente al dominio pubblico: la risposta deve essere 404 e non un documento 200 che mostra un messaggio di errore. Ripeto la prova su una rotta profonda e su entrambe le lingue, verificando che la CDN non applichi un fallback globale verso la home.

La navigazione interna richiede un controllo separato: in una SPA il cambio di schermata può non generare una nuova risposta HTML, quindi una 404 visuale nel router non dimostra lo status dell’accesso diretto. Controllo poi un vecchio URL con equivalente valido: deve rispondere con il redirect previsto e arrivare a una pagina 200 senza catene inutili.

Infine verifico nella scheda Network quando viene scaricato il gioco: l’importazione dinamica da sola non prova che altri percorsi non lo carichino o non lo precarichino.

Come la vedo io

Considero la 404 un piccolo test di qualità: dice se chi ha costruito il sito si è preoccupato anche dei casi che nessuno guarda in fase di approvazione. Mi piace che sia creativa, ma solo dopo che la parte tecnica è a posto, perché una 404 bellissima che risponde 200 o un redirect di massa alla home fanno più danni di una pagina spoglia.

Il gioco nella mia 404 è anche una dimostrazione pratica di come lavoro: componenti caricati nei contesti che li usano, con il peso verificato sulle singole pagine, e la funzione principale (aiutarti a ritrovare la strada) che non dipende dall'effetto speciale.

Perché affidarlo a me

Curo i siti dal 1999: più di 300 progetti consegnati e più di 30 agenzie al mio fianco, da Roma e da remoto. Curo anche le parti del sito che non si vedono in approvazione: errori, redirect, stati vuoti e percorsi di uscita.

Se vuoi un sito fatto bene anche quando qualcosa va storto, scrivimi: in una chiacchierata di circa 20 minuti guardiamo insieme come risponde oggi il tuo. Il servizio è in Creazione siti web.