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. La checklist completa è in Rifare il sito senza perdere il posizionamento. 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.

Alcuni esempi citati spesso

Le rassegne di pagine 404 tornano spesso sugli stessi nomi. Le pagine di errore cambiano nel tempo, quindi vanno aperte e verificate prima di prenderle come riferimento.

• Lego: un omino preoccupato e un gioco di parole, perfettamente nel tono del marchio.
• Pixar: un personaggio di Inside Out e l'idea della pagina persa nella memoria a lungo termine, un riferimento che i fan riconoscono subito.
• GitHub: semplicità e umorismo da sviluppatori.
• Mantra Labs: un astronauta animato e un ritorno automatico alla home dopo qualche secondo.
• Dan Woodger: l'umorismo coerente con il lavoro dell'illustratore.

Altri esempi nelle rassegne di IONOS, UX Planet e Speckyboy.

Il denominatore comune: il tema appartiene al sito, l'errore non è colpa di chi visita, e c'è sempre una via d'uscita visibile.

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 solo lì e solo nel browser, quindi non pesa sulle altre pagine;
• 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.

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 solo dove servono, niente peso inutile sul resto del sito, e la funzione principale (aiutarti a ritrovare la strada) che non dipende dall'effetto speciale.

Perché affidarlo a me

Programmo dal 1999, ho consegnato più di 300 progetti e lavoro come sviluppatore esterno con circa 30 agenzie, 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.