404 Page Design: What to Put on Your Error Page, Where to Set It, and How to Test It

Key takeaways

• A 404 page has one job: get the visitor back on track. Say what happened in plain words, then give two or three ways forward.
• The status code matters more than the drawing. Google's crawling docs say URLs that return a 4xx code are not indexed. A friendly "not found" page that returns 200 is what Search Console calls a soft 404.
• The U.S. Web Design System gives a six-part structure: heading, cause, ways to fix, actions, support channels, and the error code in small text.
• Every common platform has a place for it. Webflow keeps it under Utility pages at the reserved slug /404, Shopify uses a 404 template, Cloudflare Pages uses a 404.html file, and Wix needs a premium plan to customise it.
• Test it in one minute. Open a made-up address on your site and check that the server answers 404, not 200.

The short answer

A good 404 page tells the visitor, in one short line, that the page is not there. It does not blame them. It keeps your normal header and menu, offers a link home plus the two or three pages people most often want (services, contact, your best posts or products), and adds a search box only if your site has search and the header does not already show one. Behind the scenes it must return the HTTP status code 404. Humour and illustration are optional. Clear words and a correct status code are not.

Who is writing: Amariq designs and builds websites. The advice comes from the U.S. Web Design System, Google's docs and each platform's help pages, read on 10 November 2026. The only test we ran ourselves is the status code check on our own site.

What ranks for this search, and what it leaves out

On 10 November 2026 the first page of Google (US, English) for "404 page design" was mostly inspiration. It showed the gallery site 404s.design, Figma's 404 templates, Dribbble's 404 tag, an Awwwards collection, the U.S. Web Design System template, a Ramotion list of 20 brand examples updated on 19 October 2026, a Kent State page and an old User Experience Stack Exchange thread. Google's AI Overview listed a clear message, a homepage link, a search bar, popular links and brand personality.

The examples help with tone. What no single result gave a website owner: where the 404 page lives on their platform, how to check the status code, and a plain copy template. Ramotion's FAQ does mention soft 404s. This guide puts those practical steps first.

What a 404 page is for

Visitors land on a 404 page because a link was wrong, a page was removed, or the address was mistyped (the three causes USWDS lists). The page has two audiences:

What to put on the page

The U.S. Web Design System 404 template, read on 10 November 2026, has six sections. It says the same structure works for other error pages too.

Its guidance adds:

• Use concise, non-technical language. Do not make the error code prominent and do not explain too much.
• Be apologetic and do not blame the user. It suggests "We're sorry, that page can't be found" over "Whoops, you made a mistake".
• Use a consistent layout. The error page should look like the rest of the site and include the main navigation.
• No second search box if the header has one.
• Give the page a clear title, such as "Page not found". The page title is often the first thing a screen reader announces, and USWDS points to WCAG 2.4.2 Page Titled.
• Put 404 in the title so analytics can find these visits.

USWDS advises against whimsy on government sites. A bakery can be lighter, but if the joke hides the way forward, cut it.

Which links to offer

The links decide whether the visitor stays. Pick them from what your visitors actually want, not from what you want to promote.

Shopify's docs suggest the same for stores: popular pages, search, or a link to continue shopping. Big brands in Ramotion's list add product carousels or discount codes. For most small business sites, three clear links are enough.

A copy template you can paste

Here is a plain version you can adapt.

Our own 404 page on amariq.com uses a short heading, one line of text, a home button, a link to our work and three popular posts, inside the normal header and footer.

Where to set the 404 page on each platform

Each platform below was checked on its own help or developer pages on 10 November 2026.

That last row is a trap: forget the 404.html file on Cloudflare Pages and every mistyped address shows your home page. On any other platform, search its help for "custom 404 page" and run the test below.

The status code: the part galleries skip

Before it sends a page, the server answers with a number: 200 "here it is", 404 "not found", 410 "gone", 301 "moved for good".

Google's crawling documentation, read on 10 November 2026, says:

• Google does not use content from URLs that return a 4xx code, and URLs already indexed that start returning 4xx are removed from the index.
• 404 and 410 are treated the same way, along with most other 4xx codes.
• If a URL returns 200 but the content looks like an error message or an empty page, Search Console shows a soft 404.

The Search Console help page on the Page indexing report describes a soft 404 as a user-friendly "not found" message without a 404 response code, and recommends returning a 404 code for pages that are truly not found.

The design and the status code are separate jobs. Get both right.

How to test your 404 page in one minute

1. Visit a made-up address on your site, such as yoursite.com/this-does-not-exist. Wix's help suggests the same: take a real page address and add a few extra letters.
2. Check what you see. Your own 404 page, with your header and menu, not the platform's default and not your home page.
3. Check the status code. On a Mac or Linux terminal, run curl -I https://yoursite.com/this-does-not-exist and look at the first line. It should say 404. In Chrome you can also open Developer Tools, go to the Network tab, reload, and read the status of the first request.
4. Test a deeper address too, such as yoursite.com/blog/not-a-post, and check it on a phone.

We ran step 3 on our own site on 10 November 2026: a made-up address on www.amariq.com returned HTTP/2 404, with our custom page as the content.

Redirect, 404 or 410: what to do with a missing page

Search Console's help says 404s are not necessarily a problem when a page was removed with no replacement. Moving a site? Our website redesign SEO checklist covers the redirect map.

Find the links that send people to your 404 page

A good 404 page catches mistakes. Fixing the mistakes is better.

• Search Console. The Page indexing report's "Not found (404)" row lists URLs Google found through links or old pages. Fix your own links and redirect the ones that had value.
• Your analytics. With 404 in the page title, filter for those visits and see where they come from.
• Your own site. Run a link check after content changes, as in our website audit checklist.

Design details that matter

• Keep the header, menu and footer. As our website footer design guide says, the footer is a second menu, and here it is one more way out.
• Put the actions near the top, visible on a phone without scrolling.
• Keep it light. A heavy animation on a page people reach by mistake is a slow page at a bad moment. Our website animations guide covers reduced motion.
• Make it accessible: a clear title, readable contrast, keyboard-friendly buttons, real text. See our website accessibility checklist.

How Amariq can help

When we build a site, the 404 page is designed with the rest of the pages: the same header and footer, plain words, the links your visitors need, and a status code check before launch. When we move a site, we write the redirect map so old addresses land on the right new pages instead of the error page. We work on Webflow, Framer, WordPress, Shopify, Wix, Squarespace or a custom stack. Each project is priced from its scope, never by the hour, with 40% to start, 30% at design approval and 30% before launch. Once the final payment is made, the design, copy and code belong to you, and your domain, hosting and analytics accounts sit in your name. See our web design service or our website redesign service.

Frequently asked questions

What should a 404 page say?

That the page cannot be found, in one short line, without blaming the visitor. Then a link home and two or three links to the pages people most often want. USWDS also suggests listing other ways to get help and showing the error code in small text.

Does a custom 404 page help SEO?

We found no source that says a nicer design ranks a site higher. What Google's docs do describe is the status code: a missing page should return 404 or 410. A "not found" page that returns 200 shows up in Search Console as a soft 404.

What is a soft 404?

A page that tells visitors it was not found but returns the status code 200 instead of 404. Search Console's help recommends returning a 404 code for pages that are truly not found.

Should I redirect my 404 page to the home page?

Not as a blanket rule. Redirect a missing address with a 301 when a real replacement exists. If nothing replaces it, let it return 404 and let your 404 page offer the way forward.

What is the difference between a 404 and a 410?

404 means not found and 410 means gone. Google's crawling docs say it treats both the same way: the URL is treated as not existing and is dropped from the index if it was indexed.

How do I check that my 404 page returns a 404 code?

Run curl -I on a made-up address on your site, or open Chrome Developer Tools, Network tab, and reload. The status should be 404.