Twintig originele 404-pagina-ontwerpen die u als HTML en CSS kunt kopiëren, wat een nuttige 404-pagina bevat, voorbeelden van tone of voice, en hoe u zorgt dat de pagina een echte 404-status stuurt op Next.js, Netlify, Vercel en meer.
Een goede 404-pagina zegt in gewone woorden dat de pagina ontbreekt, houdt uw navigatie in beeld en biedt een uitweg: een zoekvak, links naar populaire pagina's en een manier om een kapotte link te melden. Ze moet ook een echte 404-statuscode sturen, anders behandelen zoekmachines haar als een soft 404. Hieronder staan 20 ontwerpen om te kopiëren.
Wat een 404-pagina moet bevatten
Elk ontwerp hieronder is gewone HTML en CSS die u naast een live preview kunt bewerken en daarna in uw eigen 404-pagina kunt plakken. Na de ontwerpen volgt het deel dat de meeste galerijen overslaan: de server de juiste statuscode laten sturen.
Een pagina die iets als niet gevonden zegt maar een 200 OK-status teruggeeft, of een magere pagina die zoekmachines als fout beoordelen. Google meldt deze als soft 404's in Search Console en kan ze uit de resultaten halen. De oplossing is een echte 404- of 410-status teruggeven voor ontbrekende pagina's.
Beide betekenen dat de pagina er niet is, en Google zegt 4xx-fouten grotendeels hetzelfde te behandelen. 410 Gone geeft aan dat de verwijdering definitief is, wat past bij afgelopen campagnes en verwijderde producten. 404 is in de meeste gevallen prima, zeker als u het niet zeker weet.
Niet op zichzelf. Ontbrekende pagina's horen gewoon bij het web, en Google zegt dat 404's voor pagina's die niet zouden moeten bestaan de rest van uw site niet schaden. De schade komt van kapotte interne links, van het verlies van links die naar een verwijderde pagina wezen, en van soft 404's.
De meeste single-page apps herschrijven elke URL naar index.html zodat de router kan draaien, waardoor de server overal 200 op antwoordt. Prerender echte pagina's en laat onbekende paden terugvallen op een 404.html, of laat uw server een 404-status teruggeven voor paden die uw router niet kent.
Elk ontwerp is losstaande HTML en CSS. Bewerk de code en de preview wordt bijgewerkt.
De basis: melding, zoekvak, een paar links. Werkt voor elk bedrijf.
Grote omlijnde cijfers geven de pagina een sterke vorm zonder afbeeldingen.
Melding links, een korte lijst populaire pagina's rechts. Komt op telefoons onder elkaar te staan.
Voor sites met een donker thema. De zachte gloed houdt de kop leesbaar zonder te schreeuwen.
Voor webshops: maak van het doodlopende pad een rondleiding met drie populaire producten.
Een mailto-link met een kant-en-klare onderwerpregel maakt het melden van een kapotte link één klik. Voeg indien mogelijk op uw server het paginaadres toe aan de berichttekst.
Een verkeersbord dat alleen met CSS is getekend, dus er hoeft geen afbeelding te laden.
Voor documentatie en grote contentsites, waar zoeken de snelste weg terug is.
Voor portfolio's en persoonlijke sites waar minder meer is.
Brengt hongerige bezoekers direct naar het menu, reserveren en het telefoonnummer.
Voor vakmensen: de bezoeker wil waarschijnlijk een klus boeken, dus toon het telefoonnummer.
Een kleurrijke kop die past bij speelse merken.
Voor developer tools: een nep-opdrachtregel met echte links.
Wijst lezers op de nieuwste artikelen in plaats van een lege pagina.
Voor software: ingelogde gebruikers krijgen vaak 404's via oude bladwijzers, dus bied het dashboard aan.
Tekst over een paginavullende afbeelding met een donkere overlay voor contrast. Vervang de URL door die van uw eigen foto.
Stelt voor waar de meeste mensen daarna heen gaan, maar stuurt nooit door, zodat de status 404 blijft.
Een gecentreerde kaart op een getinte achtergrond, goed voor strakke moderne sites.
Voor tweetalige sites: de melding in beide talen met links naar elke homepage.
Voor pagina's die niet terugkomen. Combineer dit met een 410-status.
Het ontwerp helpt alleen als de server ook 404 zegt. Zo doet u dat op gangbare opstellingen.
Wordt gerenderd voor onbekende URL's en telkens als u notFound() aanroept; Next.js stuurt een 404-status.
Beide serveren een 404.html in de root van de gepubliceerde map met een 404-status. Een catch-all rewrite naar index.html met status 200 maakt dit kapot.
Zet 404.html in de root van de publicatiebron. GitHub Pages serveert die met een 404-status.
Laat ontbrekende URL's naar uw pagina wijzen en behoudt de 404-status. Gebruik een lokaal pad, geen volledige URL, anders stuurt Apache door.
De internal-vlag voorkomt dat mensen /404.html rechtstreeks laden met een 200.
Voeg de handler toe na alle andere routes, zodat alleen niet-gematchte verzoeken hem bereiken.
Gratis beginnen · Geen creditcard nodig