Polish
Custom 404 Page
When someone hits a broken link, a custom 404 page keeps them on your site instead of showing a bare error.
low severityWhat is this?
A 404 page is shown when someone visits a URL that doesn't exist on your site. By default, most frameworks and servers show a minimal error message like "Cannot GET /path" or a blank page. A custom 404 page:
- Matches your site's design and branding
- Explains what happened in plain language
- Provides navigation back to the homepage or other key pages
- Optionally offers a search box or popular links
Why it matters
- Users who hit broken links give up without a custom 404 - they see an error and close the tab
- A good 404 page recovers the visit - a link back home or a search box keeps users engaged
- Looks unprofessional without one. A bare "Not Found" error signals an unfinished product
How to fix it
Create a 404 page in your framework - it's usually just a file in the right location:
Providers & tools
| Framework | Where to create 404 page |
|---|---|
| Next.js App Router | app/not-found.js |
| Next.js Pages Router | pages/404.js |
| Astro | src/pages/404.astro |
| SvelteKit | src/routes/+error.svelte |
| Vite / static | public/404.html |
| Netlify | 404.html in your publish directory |
| Nginx | error_page 404 /404.html; in config |
What to include on a good 404 page:
- Clear message that the page wasn't found
- Link back to the homepage
- 3-5 links to popular sections
- Search box (optional but helpful)
- Same header/nav as the rest of your site
Check if your domain has this issue