Vingt designs de page 404 originaux à copier en HTML et CSS, ce que contient une page 404 utile, des exemples de ton, et comment vous assurer que la page renvoie un vrai statut 404 sur Next.js, Netlify, Vercel et d'autres.
Une bonne page 404 dit simplement que la page est introuvable, conserve votre navigation et propose une suite : un champ de recherche, des liens vers les pages populaires et un moyen de signaler un lien cassé. Elle doit aussi renvoyer un vrai code de statut 404, sinon les moteurs de recherche la traitent comme une soft 404. Voici 20 designs à copier.
Ce qu'une page 404 doit contenir
Chaque design ci-dessous est en HTML et CSS simples, modifiables à côté d'un aperçu en direct, puis à coller dans votre propre page 404. Après les designs vient la partie que la plupart des galeries oublient : faire envoyer le bon code de statut par le serveur.
Une page qui affiche quelque chose comme introuvable mais renvoie un statut 200 OK, ou une page pauvre que les moteurs de recherche considèrent comme une erreur. Google les signale comme soft 404 dans Search Console et peut les retirer des résultats. La solution est de renvoyer un vrai statut 404 ou 410 pour les pages manquantes.
Les deux signifient que la page n'existe pas, et Google indique traiter les erreurs 4xx à peu près de la même façon. 410 Gone déclare que la suppression est définitive, ce qui convient aux campagnes terminées et aux produits supprimés. 404 convient dans la plupart des cas, surtout quand vous n'êtes pas sûr.
Pas en elles-mêmes. Les pages manquantes font partie de la vie normale du web, et Google indique que les 404 pour des pages qui ne devraient pas exister ne nuisent pas au reste de votre site. Le tort vient des liens internes cassés, de la perte des liens qui pointaient vers une page supprimée, et des soft 404.
La plupart des applications monopages réécrivent toutes les URL vers index.html pour que le routeur puisse s'exécuter, ce qui fait répondre 200 au serveur pour tout. Soit vous prérendez les vraies pages et laissez les chemins inconnus tomber sur un 404.html, soit votre serveur renvoie un statut 404 pour les chemins que votre routeur ne connaît pas.
Chaque design est en HTML et CSS autonomes. Modifiez le code et l'aperçu se met à jour.
La base : message, recherche, quelques liens. Convient à toute entreprise.
De grands chiffres en contour donnent à la page une forme marquée, sans aucune image.
Le message à gauche, une courte liste de pages populaires à droite. S'empile sur mobile.
Pour les sites à thème sombre. Le halo doux garde le titre lisible sans crier.
Pour les boutiques en ligne : transformez l'impasse en visite avec trois produits populaires.
Un lien mailto avec un objet prérempli permet de signaler un lien cassé en un clic. Ajoutez si possible l'adresse de la page dans le corps côté serveur.
Un panneau routier dessiné uniquement en CSS, donc aucune image à charger.
Pour les documentations et les grands sites de contenu, où la recherche est le chemin de retour le plus rapide.
Pour les portfolios et les sites personnels, où moins c'est mieux.
Mène directement les visiteurs affamés au menu, à la réservation et au numéro de téléphone.
Pour les artisans : le visiteur a sans doute un chantier à réserver, alors affichez le numéro de téléphone.
Un titre coloré qui convient aux marques ludiques.
Pour les outils de développement : une fausse ligne de commande avec de vrais liens.
Oriente les lecteurs vers les derniers articles plutôt que vers une page vide.
Pour les logiciels : les utilisateurs connectés tombent souvent sur des 404 via d'anciens favoris, proposez donc le tableau de bord.
Du texte sur une image pleine largeur avec un voile sombre pour le contraste. Remplacez l'URL par celle de votre image.
Suggère où vont la plupart des gens ensuite mais ne redirige jamais, le statut reste donc 404.
Une carte centrée sur un fond teinté, idéale pour les sites modernes et épurés.
Pour les sites bilingues, le message dans les deux langues avec un lien vers chaque page d'accueil.
Pour les pages qui ne reviendront pas. Associez-la à un statut 410.
Le design n'aide que si le serveur répond aussi 404. Voici comment faire sur les configurations courantes.
Affiché pour les URL inconnues et chaque fois que vous appelez notFound() ; Next.js envoie un statut 404.
Les deux servent un 404.html à la racine du dossier publié avec un statut 404. Une réécriture fourre-tout vers index.html avec un statut 200 casse ce comportement.
Ajoutez 404.html à la racine de la source de publication. GitHub Pages le sert avec un statut 404.
Envoie les URL manquantes vers votre page en conservant le statut 404. Utilisez un chemin local, pas une URL complète, sinon Apache fait une redirection.
Le flag internal empêche de charger /404.html directement avec un 200.
Ajoutez le gestionnaire après toutes les autres routes pour que seules les requêtes sans correspondance l'atteignent.
Commencer gratuitement · Sans carte bancaire