How To Create a Custom 404 Page for Your Website

A visitor clicks a link expecting to find a page, but lands on a 404 because the URL no longer exists or was entered incorrectly. That becomes a problem when the error page explains what went wrong but gives them no clear next step.

A custom 404 page fixes that by telling users, in simple language, that the page cannot be found and guiding them back to useful parts of the site.

In this guide, we’ll show you how to create one that reduces confusion, helps visitors recover quickly, and avoids technical mistakes that can create larger SEO issues.

What a Custom 404 Page Is Actually Supposed To Do

A 404 page is what users see when the URL they requested does not lead to a live page.

A custom 404 page gives your users an easier way out and reduces confusion, protects the user's journey, and helps visitors find something useful instead of bouncing.

Google’s current documentation says a good custom 404 page should help people find what they were looking for, encourage them to explore further, keep the same navigation and look and feel as the rest of the site, and still return a real 404 status code.

Google even states that custom 404 pages are created solely for users, which makes the purpose very clear that they are there to recover the visit and not just report the error.

404 Not Found Is Not Enough

• The first job is to tell users, in plain language, that the page they wanted is not available.
• The second is to give them a useful path forward.

That second job is where many sites underperform by handling only the technical side of the error, which may be good enough for Google, but fails the user experience.

A high-performing, custom 404 page keeps the session alive by reducing confusion and giving the visitor a fast route back into the site.

Why Are 404 Pages Important for a Website?

A custom 404 page gives you a chance to recover the session by offering navigation, search, popular links, or category shortcuts.

• VML’s Future Shopper 2025 found that 45% of global shoppers often abandon purchases because the digital experience is too frustrating.
• The same report found that 51% of shoppers say they will actively avoid retailers, brands, or marketplaces that fail to meet their online expectations.

In other words, when people hit friction, they leave fast. A custom 404 page will not fix every broken journey, but it can prevent a missing page from becoming an immediate exit.

What Should a 404 Page Design Include

A strong custom 404 page should reduce confusion, preserve trust, and make the next step obvious. Read on to find out how to design a 404 page that does that.

1. Explain what happened in plain language
2. Keep your main navigation visible
3. Turn search into an exit route from the dead end
4. Give users useful links instead of a generic homepage button
5. Do not let humor or branding get in the way of recovery

1. Explain What Happened in Plain Language

The copy on a custom 404 page should tell users, immediately and in normal language, that the page they wanted is not available and that the site itself is still functioning.

Visitors should not have to guess whether the issue is the URL, the page, or the website as a whole.

The best 404 copy is clear, calm, and specific and does not hide behind technical language or make the visitor guess whether the problem is the page, the site, or their device.

Apple handles this well.

The content is direct, easy to understand, and keeps the issue focused on the missing page rather than making the whole site feel broken.

2. Keep Your Main Navigation Visible

Google explicitly recommends in its documentation that your 404 page keep the same look and feel, including navigation, as the rest of the site.

If the page suddenly strips away your normal header, footer, or menu structure, the experience feels like a trap instead of a detour.

Spotify is a strong example of this done well. Its 404 page keeps both the header and footer menus visible, fully consistent with the rest of the site.

The branded colors, standard navigation structure, and footer links all remain intact. That continuity reassures users that they are still in the right place and gives them multiple ways to keep moving instead of forcing them to start over.

3. Turn Search Into an Exit Route From the Dead End

A search bar is one of the most useful things you can place on a custom 404 page, especially on large content sites, eCommerce stores, documentation hubs, and resource-heavy websites.

Constructor doubles down on the importance of search, claiming shoppers who use site search are 2.5x more likely to convert. That means we’re talking about real money here.

When visitors land on a missing page, many already know what they were trying to find. Search gives them the fastest way to continue without forcing them to start over from the homepage or dig through navigation menus.

Take Amazon’s 404 page, for example. It places a prominent search bar on the page, allowing shoppers to retry their product query immediately.

Given the depth of Amazon’s catalog, that is far more useful than relying on a static list of categories alone.

4. Give Users Useful Links Instead of a Generic Homepage Button

When someone lands on a missing page, sending them to the homepage usually creates one more problem because now they have to figure out where to go next.

Baymard’s 2025 no-results research says nearly 50% of sites fail to give users effective recovery paths when search returns nothing. That is exactly why a 404 page should not rely on a generic reset button alone.

The better move is to offer a small set of links that match likely intent.

• On eCommerce sites, that usually means top categories or subcategories.
• On publisher sites, it means popular articles, topic hubs, or latest coverage.
• On SaaS sites, it means pricing, product pages, documentation, or support.

Let’s look at Adobe’s error page for this one. Rather than sending visitors back to the homepage and making them figure it out from there, it gives them a list of popular links right on the 404 page.

This approach makes the situation feel clear without getting in the way, and more importantly, it helps people get where they probably meant to go.

5. Do Not Let Humor or Branding Get in the Way of Recovery

A little personality can make the experience feel less abrupt, especially when someone hits a dead end unexpectedly.

But the moment the joke becomes the main event, and the users have no idea what is going on, the page stops helping.

Marvel is a good example of getting that balance right. It swaps in a different hero and plot reference on each 404, but the error message is always clearly stated beneath the character imagery.

The fun is additive, and it doesn’t replace the functional message.

Custom 404 Page Examples by Type: What Works and Why

The best 404 pages reflect how people actually use that type of website and what they are most likely trying to do when something goes missing.

That is why it helps to look at examples by category.

Below, the strongest examples show how different sites handle that balance and why their approach works.

• SaaS 404 pages that recover product intent
• Ecommerce 404 pages that help shoppers continue buying
• Creative 404 pages that reduce friction without hiding the fix

SaaS 404 Pages That Recover Product Intent

Most visitors who hit a broken SaaS URL are usually trying to log in, compare plans, find documentation, access support, or revisit a feature page.

That is why the strongest SaaS 404 pages keep core navigation visible and send users straight to high-intent destinations like pricing, product pages, help docs, search, or the login area.

1. ClickUp keeps recovery tools in plain sight
2. Slack wraps a clear error in a calm, branded moment
3. Intercom keeps the recovery path in its core navigation

1. ClickUp Keeps Recovery Tools in Plain Sight

ClickUp’s 404 keeps core product paths visible, including docs, help center, contact, demo, pricing, and login, and adds a “Find my answer” flow that gives the error state a more useful, support-led feel.

For a platform where users often arrive looking for a specific workflow, feature, or help article, that structure does exactly what a SaaS 404 should do, which is to preserve intent and get people back to the right part of the product fast.

2. Slack Wraps a Clear Error in a Calm, Branded Moment

Slack's 404 takes a deliberate emotional approach with an animated field with pigs and chickens that invites users to "take a scenic walk" with the scroll-on-hover effect.

The page prominently states the error and what the user can do, but wraps it in a calm moment.

More practically, the full site header remains intact with links to product, pricing, support, and the help center which are all the destinations a SaaS visitor is most likely to need.

The help center link in the page body directly serves users who hit broken support doc URLs.

3. Intercom Keeps the Recovery Path in Its Core Navigation

Intercom's 404 page uses clean design, a clear error message, and places its most important navigation, including product pages, pricing, and support resources, directly in the header.

For a customer support platform whose users frequently arrive looking for documentation or integration guides, that header structure does most of the recovery work.

There is no reliance on a single homepage CTA; instead visitors can re-enter the site at the level they need.

Ecommerce 404 Pages That Help Shoppers Continue Buying

A shopper who lands on a dead product or category URL is often still ready to browse, compare, or buy, but only if the site gives them a quick way forward.

The best examples do that with product search, category shortcuts, bestsellers, offers, store links, or account-related actions like reorder and sign-in.

1. Nike uses product discovery to pull shoppers back in
2. IKEA keeps search and navigation ready before users need them
3. Nordstrom uses category links to get shoppers back on track

1. Nike Uses Product Discovery to Pull Shoppers Back In

Nike’s current 404 is built more around utility than charm, which is the right choice for a launch-driven shopping experience.

The message is direct, and the recovery paths are immediate: a sneaker carousel to check out the latest models, a Return to Home, Visit Nike.com, and Help in the navigation.

From a UX standpoint, that is a smart move for a brand whose broken links often come from product drops, launch pages, and member activity.

2. IKEA Keeps Search and Navigation Ready Before Users Need Them

IKEA’s 404 is calmer and more structured, and it does a very good job of preserving orientation.

The page leads with “Page can’t be found” and follows it with “Let’s get you back into it,” which is simple but well judged: clear first, reassuring second.

More importantly, the recovery tools are already in place before the user has to think.

The search field stays visible, the homepage link is embedded in the message, and the full top navigation remains intact with Shop products, Rooms, Deals and loyalty, Design and ideas, and Services.

3. Nordstrom Uses Category Links to Get Shoppers Back on Track

Nordstrom's 404 applies the same approach as their in-store service model: clear, unhurried, and focused on getting the customer back to the product.

The page carries a plain-English message alongside links to primary shopping departments, matching how Nordstrom customers actually navigate, which is by category rather than search.

Nordstrom is among the brands that gets almost all the core elements right: clear error message, navigation options, and search functionality working together.

Creative 404 Pages That Reduce Friction Without Hiding the Fix

On visual-first brands, a missing-page experience should still feel designed, intentional, and in character, but the page cannot forget its real job, and that is to tell visitors what happened and help them recover quickly.

The strongest examples use illustration, motion, or playful copy to soften the interruption while keeping the fix obvious through clear messaging, navigation, search, or direct next steps.

1. Unsplash turns the error into a small discovery moment
2. Discord uses playful animation without losing clarity
3. LEGO softens the dead end with character and clear copy

1. Unsplash Turns the Error Into a Small Discovery Moment

Unsplash treats the 404 page like a miniature piece of image discovery.

Instead of dropping users onto a flat error screen, it places them inside a darkened visual scene and turns the cursor into a flashlight-like reveal, which is a smart fit for a product built around photography, atmosphere, and exploration.

The page is memorable because it turns a wrong turn into a brief visual moment, then gives the visitor a clean route back into the site.

2. Discord Uses Playful Animation Without Losing Clarity

Discord’s 404 leans into character more than utility, but that choice makes sense for the brand.

The page shows an interactive animation and a deliberately offbeat message about cooking up noodles, which is exactly the kind of strange, informal humor Discord can carry without sounding forced.

This is a personality-first 404, but it still reads clearly as an error page rather than a decorative detour.

3. LEGO Softens the Dead End With Character and Clear Copy

LEGO uses familiar brand language and imagery to make the dead end feel less abrupt, but the user still understands immediately that the page is gone.

The message is direct while the visual treatment softens the interruption with a LEGO character moment rather than turning the page into a generic error screen.

How To Avoid Soft 404s and Other Technical Mistakes

Soft 404s are pages that look broken, empty, or like “page not found” to users, but still tell search engines they are valid pages, which can waste crawl attention, weaken indexing, and leave low-value URLs hanging around your site.

In other words, the page feels dead, but technically it is still being treated like a live one.

That usually happens when a missing URL returns the wrong status code, when a page loads almost no real content, or when JavaScript makes the page look like a 404 without the server ever properly saying so.

The fix is not complicated. You just need to make sure your site handles dead, thin, and broken URLs honestly, so both users and search engines know exactly what they are looking at.

1. Don’t return a 200 status with “Page Not Found” content
2. Watch for near-empty pages that look thin or broken
3. Be careful with JavaScript-rendered 404s on modern sites
4. Clean up pagination, faceted URLs, and junk parameter errors

1. Don’t Return a 200 Status With “Page Not Found” Content

A URL does not exist, but instead of returning an actual 404 error, the site loads a friendly “Page not found” message while still returning a 200 status code.

In plain English, that means the site is telling Google and other systems, “Everything is fine, this page works,” even though the content says the opposite.

What to do instead:

• Return a real 404 status for pages that are gone and have no replacement.
• Return 410 if a page was intentionally removed and is not coming back.
• Only return 200 for pages that genuinely exist and provide useful content.

If /summer-sale-2023 is gone forever, do not load a branded error message on that URL with a 200 response. Serve your custom 404 page, but make sure the actual status code is still 404.

2. Watch for Near-Empty Pages That Look Thin or Broken

Sometimes a page technically loads, but it is so empty or broken that it may as well be dead. Maybe the title is there but no products load. Maybe the template appears, but the content block is blank. Maybe a category page exists only because a filter created it, but it shows one lonely sentence and nothing else.

To a visitor, that feels sketchy, and to search engines, it can look like a low-value or soft 404 page.

Common examples:

• Category pages with no products and no useful explanation.
• Search result pages with nothing on them except a header.
• Broken CMS pages where the body content failed to load.
• Tag or filter pages that create a URL but add no real value.

What to do instead:

• If the page has no valid reason to exist, return a proper 404.
• If it should exist, make it genuinely useful with content, navigation, and next-step options.
• For empty category or search states, explain what happened and offer alternative paths like related categories, top products, or a search box.

3. Be Careful With JavaScript-Rendered 404s on Modern Sites

On React, Next.js, Vue, headless CMS, and other JavaScript-heavy setups, the browser may visually show a 404 page, but the server still sends a 200 before JavaScript swaps the content out.

So, to a user, it looks fine. To Google, the initial response may still look like a normal page.

What to do:

• Make sure the server response itself returns 404 for missing pages, not just the frontend.
• Test missing URLs with JavaScript disabled or with a header checker, so you can see the real status code.
• If you use a framework, confirm that its 404 routing is configured correctly at the server level, not only in the client-side app.

4. Clean Up Pagination, Faceted URLs, and Junk Parameter Errors

Some of the messiest soft 404 issues come from URL variations the site never meant to treat as real pages.

This usually happens with:

• Pagination like ?page=999
• Filtered category URLs with endless combinations
• Internal search parameters
• Tracking junk added to URLs
• Broken query strings that generate useless versions of pages

What to do:

• Return a proper 404 when a parameter combination creates a page that should not exist
• Keep valid filter pages indexable only if they offer real value and real demand
• Prevent junk parameter URLs from behaving like standalone content
• Make sure pagination errors, like page 999 when only 12 pages exist, do not return a happy 200 response

Which 404 Errors To Prioritize First

Not all 404s deserve the same response, so the best way to handle them is by priority.

Some are minor dead ends you can clean up later, while others quietly waste backlinks, cut off valuable traffic, or interrupt people who were close to taking action.

That is why this section starts with the 404s most worth fixing first, like the ones that still carry SEO value, conversion value, or both.

1. 404s with backlinks
2. 404s with organic traffic history
3. Broken internal links
4. Recurring typo URLs and common bad patterns

1. 404s With Backlinks

If another site links to a page on your website and that page now returns a 404, you are wasting link equity you already earned.

Someone out there is still sending trust, traffic, or authority to that URL, and instead of receiving it, your site is dropping visitors into a dead end.

Since pages in Google’s top 10 tend to have 3.8 times more backlinks than lower-ranking competitors, if a valuable linked page disappears without a relevant redirect or replacement, you risk wasting authority, traffic, and visibility that could still be working for your site.

What to do:

• Check whether the old page has a close replacement.
• If it does, redirect it to the most relevant live page.
• If there is no equivalent, consider rebuilding the page if the backlink is valuable enough.
• Do not just send everything to the homepage, because that usually helps no one.

2. 404s With Organic Traffic History

If a URL ranked before, pulled clicks, or had visibility in search, that is a sign it once matched real demand.

Letting that page die without checking it is like throwing away something that already proved it could work.

Sometimes the page should come back. Sometimes it should be redirected. Sometimes its content should be merged into a stronger live page. The point is not to leave it broken by default.

What to do:

• Look for pages that used to rank or attract visits.
• Ask whether the topic still matters.
• If yes, restore the page, update it, or redirect it to the best relevant alternative.
• If the search intent is still alive but the page is gone, that is usually a missed opportunity.

3. Broken Internal Links

When your navigation, blog posts, product pages, footer links, or CTAs point to dead URLs, you are creating avoidable friction. Unlike old backlinks from other websites, this is fully within your control, which is exactly why it should be fixed fast.

Broken internal links hurt in two ways: they interrupt the user journey, and they send weak quality signals through the site structure.

What to do:

• Find links on your own site that point to 404 pages.
• Update them to the correct live URL.
• Remove them if the destination no longer makes sense.
• Check menus, resource hubs, old blog posts, and promotional pages first.

4. Recurring Typo URLs and Common Bad Patterns

Some broken URLs are happening because people type them wrong, other sites link incorrectly, or your own naming structure invites confusion.

These patterns are worth fixing because they create repeat friction. Once you notice them, you can usually solve a whole cluster of issues instead of chasing single URLs one by one.

Common examples:

• Misspelled service or product slugs
• Wrong plural versions
• Outdated category naming
• Uppercase/lowercase inconsistencies
• Old campaign URL patterns
• Common parameter or path errors

What to do:

• Look for repeated broken URL patterns in your logs or reports.
• Redirect the obvious, high-confidence variations.
• Standardize URL structure where possible.
• Fix the source if the bad pattern comes from your own internal linking or campaigns.

Our team ranks agencies worldwide to help you find a qualified partner. Visit our Agency Directory for the Top Web Development Companies, as well as:

1. AI Web Design Agencies
2. Top Front End Web Development Companies
3. UI/UX Design Agencies
4. Web Development Companies for Small Businesses
5. Top Dallas Web Development Agencies

Our design experts also recognize the most innovative design projects across the globe. Visit our Awards section to see the best in web design.

Custom 404 Error Pages FAQs

1. Do 404 pages hurt SEO?

Normal 404s do not hurt SEO by themselves. The real problems are soft 404s, broken internal links, and lost value on deleted URLs that still matter.

2. Is a 404 or 410 better for deleted pages?

Either works. Google treats both as signals that the page is gone; use 410 when removal is intentional and permanent, and 404 for standard not-found pages.

3. Should a 404 page have a search bar?

Usually yes, especially on larger sites. It gives people an immediate way to recover, and WordPress’s own 404 guidance uses a search form as a standard helpful element.

4. Can you customize a 404 page in WordPress or Shopify?

Yes. In WordPress, you can create or edit a 404.php template; in Shopify, the 404 template has limited theme-editor settings, but you can customize it with custom CSS and theme code.

5. What is a soft 404?

A soft 404 is a page that looks missing or useless, but returns a non-404 status, often 200 OK, so search engines may treat it like a live page.

6. How do I find broken 404 URLs in Google Search Console?

Open the Page indexing report, go to Why pages aren’t indexed, and click the Not found (404) issue to see affected URLs. Use URL Inspection for any specific URL you want to check more closely.

7. What should a good 404 page say?

It should clearly say the page is not found, keep the message plain, and offer a next step like search or useful links. You can make it helpful and branded, but it should still return a real 404 status.