How to Design a 404 Page That Doesn't Lose Visitors

A good 404 page does two jobs: it tells the visitor clearly that the requested page cannot be found, then gives them an obvious way to continue. The design should feel like part of the website, not a technical dead end.

The most important rule is not visual. The server should still return a real 404 Not Found status for a missing page, even when the error page itself is friendly.

First, make sure it is a real 404

A 404 page is shown when the requested resource cannot be found.

MDN's current 404 Not Found reference explains that the status means the server cannot find the requested resource. If content is permanently gone and you specifically want to signal that permanence, 410 Gone may be appropriate instead.

The common technical mistake is a soft 404: the page looks like an error page to the visitor but returns 200 OK.

Google's current crawling-error guidance recommends returning a real 404 or 410 when content no longer exists and has no suitable replacement.

Design the helpful page, but keep the correct status code underneath it.

Say what happened in plain language

Do not make the visitor interpret an error code.

A useful message can be:

We couldn't find that page.

Then add one short explanation:

The link may be outdated, the page may have moved, or the address may have been typed incorrectly.

Avoid blaming the visitor.

“Invalid request” or “You entered the wrong URL” sounds unnecessarily technical and accusatory.

Keep the normal website identity and navigation

A 404 page should still feel like the same business website.

Keep:

• Logo
• Main navigation
• Brand typography
• Core colors
• Footer links
• Contact route where relevant

Google's custom-404 guidance recommends giving the error page the same look and feel, including navigation, as the rest of the site.

Someone arriving through an old external link may never have seen the homepage. The 404 page may be their first impression of the business.

Give visitors useful routes forward

Do not stop at a Back to Home button.

Useful recovery links might include:

• Home
• Services
• Pricing
• Contact
• Blog or resources
• Popular guides
• Search
• Relevant category pages

Choose the routes that genuinely help your audience.

Example:

Page not found Try one of these instead:

• View services
• See pricing
• Read practical website guides
• Contact the team

Google recommends considering links to popular content and the homepage on a custom 404 page.

The goal is to turn a dead end into a routing page.

Add site search only when it is useful

Search can help on sites with enough content to justify it.

It is especially useful for:

• Ecommerce stores
• Documentation
• Large blogs
• Knowledge bases
• Large service directories

A seven-page business website probably does not need a search box on its 404 page.

Use the simplest recovery path that matches the size of the site.

Do not redirect every missing page to the homepage

Automatically sending all missing URLs to the homepage may feel helpful, but it hides the fact that the requested resource is gone.

Google's site-migration guidance warns against redirecting many old URLs to one irrelevant destination such as the homepage because it can confuse users and may be treated as a soft 404.

Use a 301 redirect when there is a genuine replacement.

Examples:

• Old service URL → new version of that service page
• Old article → updated article covering the same topic
• Old location page → replacement location page

If no meaningful replacement exists, return the custom 404.

Give the page one primary recovery action

A 404 page can have several links, but it should still have a clear hierarchy.

One action should be visually strongest.

For a small-business site, that may be:

Return to Home

or:

View Our Services

Secondary options can sit underneath.

Avoid turning the page into a second homepage with ten competing cards, forms, a newsletter popup, and a chat prompt.

The visitor is already recovering from an interruption. Make the next step easy.

Keep humor secondary to clarity

Creative 404 pages can be memorable, but the joke should never hide the message.

A playful illustration or sentence is fine after the visitor understands:

1. The page is missing.
2. The website itself is still working.
3. There is a clear way to continue.

MDN's 404 guidance makes the same practical point: custom error pages can be human or humorous, but they should not confuse visitors about why they are seeing the page.

Clarity first. Personality second.

Make the page accessible and mobile-friendly

A 404 page still needs the same usability standards as any other page.

Check:

• The error heading is a real heading
• Links have descriptive labels
• Text has sufficient contrast
• Focus states are visible
• Navigation works by keyboard
• Images have appropriate alt text
• Buttons are easy to tap
• The page works without horizontal scrolling

Do not make the recovery experience harder for someone using a phone, keyboard, or assistive technology.

Track how people reach the 404 page

The 404 page is useful, but repeated 404 visits are a signal.

Monitor:

• Internal broken links
• Old campaign URLs
• Deleted pages
• Misspelled backlinks
• Navigation errors
• Bad redirects
• Recently migrated URLs

Google Search Console can also surface not-found URLs discovered during crawling.

Fix internal links whenever possible. If a deleted page has a clear replacement, redirect it instead of relying on the 404 forever.

The FOUND framework

Use FOUND to review a custom 404 page:

• F — Factual status: Does the server return a real 404 when the resource is missing?
• O — Orientation: Does the visitor immediately understand what happened?
• U — Useful routes: Are there clear ways back into the site?
• N — Native design: Does the page feel like the same website?
• D — Diagnostics: Are broken URLs monitored and repaired?

A clever illustration cannot compensate for a failure in FOUND.

10-point custom 404 page checklist

Before publishing, ask:

1. Does the missing URL return HTTP 404?
2. Is the message clear and non-technical?
3. Does the page use the normal brand and navigation?
4. Is there one obvious primary recovery action?
5. Are useful service or content links available?
6. Is site search included only if the site needs it?
7. Are moved pages redirected to relevant replacements?
8. Is the page usable on mobile and by keyboard?
9. Are internal broken links monitored and fixed?
10. Have you tested several deliberately incorrect URLs?

A good 404 page cannot prevent every broken link, but it can stop a missing page from becoming the end of the customer journey.

If broken links, confusing navigation, or outdated site structure are creating friction, Veil Vertex's free tailored website audit can identify the highest-impact issues first. For a broader rebuild, review the current Managed Website options and pricing.