Venti design originali di pagine 404 da copiare in HTML e CSS, cosa include una pagina 404 utile, esempi di tono di voce e come assicurarti che la pagina invii un vero stato 404 su Next.js, Netlify, Vercel e altro.
Una buona pagina 404 ammette con parole semplici che la pagina manca, mantiene la tua navigazione e offre una via d'uscita: un campo di ricerca, link alle pagine più visitate e un modo per segnalare un link rotto. Deve anche inviare un vero codice di stato 404, altrimenti i motori di ricerca la trattano come un soft 404. Qui sotto trovi 20 design da copiare.
Cosa deve includere una pagina 404
Ogni design qui sotto è semplice HTML e CSS che puoi modificare accanto a un'anteprima dal vivo e poi incollare nella tua pagina 404. Dopo i design arriva la parte che la maggior parte delle gallerie salta: fare in modo che il server invii il codice di stato corretto.
Una pagina che dice qualcosa come non trovato ma restituisce uno stato 200 OK, oppure una pagina povera che i motori di ricerca giudicano un errore. Google le segnala come soft 404 in Search Console e può rimuoverle dai risultati. La soluzione è restituire un vero stato 404 o 410 per le pagine mancanti.
Entrambi indicano che la pagina non c'è, e Google dice di gestire gli errori 4xx più o meno allo stesso modo. 410 Gone dichiara che la rimozione è permanente, il che si adatta a campagne concluse e prodotti eliminati. 404 va bene nella maggior parte dei casi, soprattutto quando non sei sicuro.
Non di per sé. Le pagine mancanti sono una parte normale del web, e Google dice che i 404 per pagine che non dovrebbero esistere non danneggiano il resto del sito. Il danno deriva dai link interni rotti, dalla perdita dei link che puntavano a una pagina eliminata e dai soft 404.
La maggior parte delle single-page app riscrive ogni URL verso index.html così il router può funzionare, e questo fa rispondere il server con 200 a tutto. Puoi pre-renderizzare le pagine reali e lasciare che i percorsi sconosciuti finiscano su un 404.html, oppure far restituire al server uno stato 404 per i percorsi che il router non conosce.
Ogni design è HTML e CSS autonomo. Modifica il codice e l'anteprima si aggiorna.
La base: messaggio, ricerca, qualche link. Funziona per qualsiasi attività.
Grandi cifre con solo il contorno danno alla pagina una forma forte senza immagini.
Messaggio a sinistra, un breve elenco di pagine popolari a destra. Si impila sui telefoni.
Per siti con tema scuro. Il bagliore morbido mantiene leggibile il titolo senza urlare.
Per i negozi online: trasforma il vicolo cieco in una navigazione con tre prodotti popolari.
Un link mailto con l'oggetto già pronto rende la segnalazione di un link rotto un solo clic. Se puoi, aggiungi l'indirizzo della pagina al corpo del messaggio lato server.
Un cartello stradale disegnato solo con CSS, quindi non c'è nessuna immagine da caricare.
Per documentazione e grandi siti di contenuti, dove la ricerca è il modo più veloce per tornare indietro.
Per portfolio e siti personali dove meno è meglio.
Porta i visitatori affamati dritti al menu, alla prenotazione e al numero di telefono.
Per gli artigiani: probabilmente il visitatore ha un lavoro da prenotare, quindi mostra il numero di telefono.
Un titolo colorato adatto ai brand giocosi.
Per strumenti per sviluppatori: una finta riga di comando con link veri.
Indirizza i lettori agli ultimi articoli invece che a una pagina vuota.
Per i software: gli utenti connessi finiscono spesso su 404 da vecchi segnalibri, quindi offri la dashboard.
Testo su un'immagine a tutta pagina con una sovrapposizione scura per il contrasto. Sostituisci l'URL con la tua immagine.
Suggerisce dove va di solito la maggior parte delle persone ma non reindirizza mai, così lo stato resta 404.
Una scheda centrata su uno sfondo tinto, ottima per siti moderni e puliti.
Per siti bilingui, il messaggio in entrambe le lingue con link a ciascuna homepage.
Per pagine che non torneranno. Abbinalo a uno stato 410.
Il design aiuta solo se anche il server dice 404. Ecco come fare con le configurazioni più comuni.
Viene renderizzato per gli URL sconosciuti e ogni volta che chiami notFound(); Next.js invia uno stato 404.
Entrambi servono un 404.html nella radice della cartella pubblicata con stato 404. Una riscrittura catch-all verso index.html con stato 200 rompe questo comportamento.
Aggiungi 404.html nella radice della sorgente di pubblicazione. GitHub Pages lo serve con stato 404.
Indirizza gli URL mancanti alla tua pagina mantenendo lo stato 404. Usa un percorso locale, non un URL completo, altrimenti Apache esegue un redirect.
Il flag internal impedisce di caricare /404.html direttamente con un 200.
Aggiungi il gestore dopo tutte le altre route, così lo raggiungono solo le richieste senza corrispondenza.
Inizia gratis · Nessuna carta di credito richiesta