404 Page: How to Design a Custom 404 Page That Helps Visitors and SEO

Every website has a 404 page, whether anyone designed it or not. When a visitor follows an old link, mistypes an address or clicks a page you removed last year, the server answers with a “not found” response and shows whatever page it was set up to show. On many business websites that is a gray screen with a line of technical text, or a theme default nobody has looked at since launch.

That moment matters more than it seems. A thoughtful 404 page can still help the visitor, keep them on the site and protect the signals search engines use to understand it. This guide covers the design, the copy, the status codes and the maintenance work, for WordPress, custom-coded sites and most other platforms.

What is a 404 page?

Two things share the name. The first is the 404 status code, a three-digit answer the server sends with every response. The HTTP standard defines 404 Not Found as the code a server returns when it has no current representation of the requested resource, or is not willing to say that one exists. Browsers and crawlers read that code before they read anything on the page.

The second is the 404 error page: the HTML document sent along with that code so a human has something to look at. When people talk about 404 page design or a custom 404 page, they mean this document.

The two have to agree. When they do not, for example a friendly “page not found” message sent with a 200 OK code, you get a soft 404, covered below.

A custom 404 page is not a page in your menu; it is a template the site uses for any address it cannot match. Our guide to what pages a business website should have places it next to the sitemap and site search as a utility page every site should plan.

Why does a 404 page matter for a business website?

Most visitors who land on a 404 page did nothing wrong. They clicked an old email, a bookmark or a search result that has not caught up with your changes. What happens next depends on the page they see.

A bare error screen gives them two options: press back or leave. A useful 404 page gives them a third: keep going. It confirms they are still on your site, explains what happened in plain words and puts the most likely next steps within one click. For a business that depends on its website for calls, bookings or quote requests, that difference shows up as contacts you either receive or never hear about.

A 404 page cannot bring back the page that is gone. Its job is to make sure the visitor’s next click still lands somewhere useful on your site.

The 404 page is also part of how search engines read your site: its status code tells crawlers which URLs no longer exist, which keeps your indexed pages clean.

What causes 404 errors on a business website?

Not every 404 is a problem, but every one has a cause. These are the patterns that show up on business websites most often.

Some 404s come from bots probing for files your site never had. That is normal background noise and needs no redirects.

404, 410, soft 404 or redirect: which response should a missing page return?

When a page is gone, the server has a few honest answers. Each one tells browsers and search engines something different, so the choice should be deliberate. Here is how the main options compare, with how Google describes handling each one in its documentation on HTTP status codes and Google crawlers.

For most missing pages the choice comes down to one question: is there a page that serves the same need? If yes, redirect to it with a 301. If no, let the URL return 404, or 410 if you want to state that the removal is permanent. MDN’s reference describes 410 as the code for a resource that is gone and likely to stay gone, and recommends 404 when you do not know whether the condition is permanent.

Google says it handles all 4xx errors except 429 the same way, so for search the practical difference between 404 and 410 is small. The bigger mistake is choosing neither: sending every missing URL to the home page, or serving an error message with a success code. If you are not sure which answer your site gives today, that is a quick thing to check on a Blueprint Briefing call while we look at the rest of your site’s health.

What is a soft 404, and why does Google flag it?

A soft 404 is a page that tells people the content is missing while telling software that everything is fine. In the words of Google’s Page indexing report help, it is a page that returns a user-friendly “not found” message but not a 404 HTTP response code. Google’s status code documentation adds that when a 2xx response contains an error message or an empty page, Search Console reports it as a soft 404.

Soft 404s usually appear for one of these reasons:

• The 404 template returns 200. Some themes, page builders and custom setups show a nice error page but forget to send the 404 code. Every unknown URL then looks like a real page.
• Empty or near-empty pages. A category with no products, a search results page with zero results or a tag archive with nothing in it can look like an error to Google, even though the URL is valid.
• Blanket redirects. Sending every missing URL to the home page gives visitors a page they did not ask for, and the result often looks like an error disguised as a success.
• Client-side routing. In single-page apps, the server may answer 200 for every route and let JavaScript decide what to show. Google’s JavaScript SEO guide addresses this directly.

The fix depends on the cause. If the page truly does not exist, make the server return 404 or 410. If the page should exist, give it real content so it no longer looks like an error. If a better page serves the same need, redirect to that page specifically. For JavaScript apps, Google suggests either redirecting to a URL where the server responds with 404, or adding a noindex robots meta tag to error views.

Do 404 pages hurt SEO?

A 404 on its own is not a penalty. Google’s Search Console help says 404 responses are not necessarily a problem if a page has been removed without any replacement. The web is full of retired pages, and search engines expect them. A site with some 404s in its reports is a normal site.

What matters is which URLs return 404 and why. Three situations deserve attention:

1. Pages that still have value. If a removed page earned links from other websites or still gets visits, letting it return 404 throws that away. A 301 to the closest equivalent keeps the visitor and the link pointed somewhere useful.
2. Broken links you control. Google recommends fixing the 404 errors that you link to yourself or list in a sitemap. Internal links and sitemaps are your own instructions to crawlers, so they should never point to dead pages.
3. Important pages returning 404 by accident. A plugin conflict, a deleted parent page or a bad deploy can turn a live service page into a 404. Because Google removes 4xx URLs from its index over time, an accidental 404 on a key page can cost you that page’s visibility until it is fixed.

Google keeps trying known 404 URLs for a while, less and less often. You do not need to chase every old address; you need your current site to send clear signals, and our guide to internal linking strategy explains how to keep those links pointed at live, relevant pages.

What should a custom 404 page include?

A custom 404 page has a short list of jobs: confirm where the visitor is, explain what happened, and offer the most useful next steps. Everything on the page should serve one of those jobs. This table lists the elements that do.

The links you choose deserve more thought than the design. What do people most often come to your site to do? Those tasks belong on the 404 page. A good website call to action follows the same rule as the rest of the site: one clear primary action, with softer options beside it.

404 page design: what does a good layout look like?

Good 404 page design looks like the rest of the website, with a shorter main area and options visible without scrolling, on a phone as well. A layout that works on most business sites stacks the content in this order:

1. Site header with logo and main navigation, unchanged.
2. Heading and short message explaining that the page was not found, in your normal voice.
3. Search field with a visible label and a button.
4. A short list of helpful links, ideally grouped by what visitors want rather than by your org chart.
5. One primary action, such as booking a call or requesting a quote, plus a phone number or contact link.
6. Site footer, unchanged, with the same secondary links as every page.

Visual personality is welcome as long as it does not get in the way. A simple illustration or a line of humor can soften the moment, but keep images light and make sure the message and links work without them.

The best 404 page design is the one a visitor barely notices, because the next useful link is already in front of them.

Do not redirect visitors away from the 404 page automatically. A timer that sends people to the home page after a few seconds takes away their choice and hides what happened. If you want a page that turns lost visitors into conversations, a Blueprint Briefing is where we map which links and actions your 404 page, and every other page, should lead to.

How do you write 404 page copy?

404 page copy should be short, honest and specific to your business. The visitor needs three facts: the page is not here, it is probably not their fault, and here is where to go next. Everything else is optional.

The table below shows weak lines that appear on many sites and clearer alternatives. The rewrites are illustrations to adapt, not text to copy word for word.

Match your brand voice, keep the heading under ten words and the explanation to one or two sentences. Give the page a plain title tag such as “Page not found | Your Business Name”. It needs no meta description, because it should never appear in search results; for the pages that do, see our guide to writing a meta description Google actually shows.

404 page examples by business type

The right links and tone change with the business. The examples below are illustrations of how different kinds of websites might adapt the same structure. They are starting points, not templates from real companies.

Stores and listing sites see URLs expire constantly. A sold-out product or closed listing can often keep its page with a clear status and similar items instead of returning 404. For real estate, our real estate websites page explains how we plan listing pages, IDX and lead capture together.

How do you make a 404 page accessible?

An accessible 404 page follows the same rules as any accessible page: real text, enough contrast, a logical heading order and keyboard-friendly controls. A few points matter more here.

• Say it in text. If the message lives only inside an illustration or animation, screen reader users and anyone with images blocked will miss it. The heading should be real HTML text.
• Use a descriptive page title. The title element is often the first thing a screen reader announces. “Page not found” tells the visitor what happened before they explore further.
• Keep navigation consistent. W3C’s Understanding documents for WCAG 2.2 describe consistent navigation and offering more than one way to locate a page within a site. Keeping your normal menu, adding search and listing key links on the 404 page serves all three.
• Label the search field. A placeholder alone disappears as soon as someone types. Use a visible label or at least an accessible one.

How do you set up a custom 404 page?

The method depends on the platform, but the goal is the same everywhere: one template that renders for any unknown URL and returns a 404 status code. These are the common setups.

• WordPress with a classic theme. WordPress uses a template file called 404.php when no content matches a request. The WordPress Theme Handbook walks through creating a 404 page that includes the normal header, a message, a search form and the footer. WordPress sends the 404 status for you.
• WordPress with a block theme. Block themes include a 404 template you can edit in the Site Editor, with the same header and footer parts as the rest of the site.
• Page builders. Many builders let you design a 404 template visually. After publishing it, confirm the status code, because a builder that renders the design as a normal page can create soft 404s.
• Apache servers. The ErrorDocument 404 /404.html directive points the server to a custom page while keeping the 404 status. Use a local path; a full URL makes Apache redirect instead.
• Nginx servers. The error_page 404 /404.html; directive does the same job, again with a local path.
• Custom frameworks. Most modern frameworks have a built-in not-found route or component. Use it, and make sure server-rendered responses carry the 404 code rather than 200.
• Single-page apps. When routing happens in the browser, follow Google’s JavaScript SEO advice: redirect unknown routes to a URL that the server answers with 404, or add a noindex tag to the error view.

Whichever route you take, build the 404 template from the same header, footer and components as the rest of the site, so it stays in step when the design changes. If you are weighing platforms for a new build, our comparison of custom website vs WordPress covers how each handles templates like this one. And if you would rather have someone set it up and test it with you, book a Blueprint Briefing and we will look at how your current site responds to missing pages.

How do you test that a 404 page returns the right status code?

A soft 404 looks identical to a real one in the browser, so you need to see the status code. Any of these checks will show it.

1. Request a URL that cannot exist. Add a random string to your domain, such as /this-page-does-not-exist-123, and load it. Your custom 404 page should appear.
2. Open the browser’s developer tools. In the Network tab, reload the page and select the first request. The status column should read 404, not 200.
3. Use a command-line check. Running curl -I against the same URL prints the response headers, starting with the status line.
4. Use Google’s URL Inspection tool. In Search Console, a live test of a missing URL shows how Google receives it, including whether it sees the page as not found.
5. Test a removed page, not only a random one. Pick a URL you deleted on purpose and confirm it returns 404, 410 or the redirect you planned.

If a fixed page still shows as missing, a cache may be serving the old 404; clear the cache for that URL and test again.

How do you find broken links and 404 errors on your site?

Finding broken links before visitors do is the other half of the job. These sources, used together, give a full picture.

• Google Search Console. The Page indexing report lists URLs under “Not found (404)” and “Soft 404”. Each entry shows example URLs, and the URL Inspection tool shows where Google found the link.
• A site crawler. Crawling tools follow every internal link on your site and report the ones that return 4xx or 5xx codes, along with the page that contains each broken link. Run one after every significant content or structure change.
• Your analytics. If your 404 page has a consistent title, your analytics tool can show how many views it gets and which pages sent visitors there.
• Server or hosting logs. Logs record every request, including those from crawlers and links you would never see in analytics.

Do not try to clear every entry. Sort by impact: links on your own pages first, then URLs with external links or real visits, then everything else.

How do you track 404 page views in GA4?

Tracking turns the 404 page into a list of maintenance tasks. The simplest approach in Google Analytics 4 uses the page title.

1. Give the 404 template a unique, stable title. Use the same title on every 404 response so it is easy to filter.
2. Filter page views by that title. In GA4’s reports or an Exploration, filter the page title dimension to the 404 title and add the page path to see which broken addresses people reach.
3. Add the referrer. The page referrer shows where the visitor came from: one of your pages, another website, an email or a social post. That tells you who needs to fix which link.
4. Consider a dedicated event. For more control, a developer can send a custom event when the 404 template loads, with the missing path and referrer as parameters.

Review the list monthly and after any launch. If your site gets traffic but too few contacts, our guide to why a website is not getting leads covers the other leaks worth checking alongside broken links.

How do you fix 404 errors without creating new problems?

Fixing 404s is a series of small decisions, one URL at a time. This process keeps them consistent.

1. Confirm the URL really returns 404. Test it yourself. Reports can lag behind fixes you already made.
2. Find out whether it matters. Does the URL appear in your own links or sitemap? Does it have external links or real visits? If none of these apply, a 404 is an acceptable final answer.
3. Fix internal links at the source. If your own pages link to the dead URL, edit those links to point at the correct live page. A redirect helps, but a direct link is cleaner.
4. Look for a true equivalent. If a page now serves the same need, such as a renamed service or an updated guide, add a 301 redirect from the old URL to it.
5. Avoid weak matches. If the closest page is only loosely related, a redirect can confuse visitors. A clear 404 or 410 with good links is often more honest.
6. Remove dead URLs from your sitemap. Your sitemap should list only live, canonical pages.
7. Avoid redirect chains and log changes. Point old URLs straight to the final destination, and keep a short redirect log for the next redesign.

On a site that has been through several redesigns this can be a long list. If you want a plan that ranks the fixes by impact, a Blueprint Briefing is a short call where we go through what your site has to produce and what is getting in the way.

How do you prevent 404 errors during a website redesign or migration?

Redesigns and platform moves are a major source of 404s: URL patterns change and links built up over years suddenly point nowhere. The prevention work happens before launch.

• Export every current URL. Combine your sitemap, a crawl of the live site and the pages that receive traffic or links in your reports.
• Map each old URL to a new one. Every URL gets a decision: keep, redirect to a specific new page, or retire with a 404 or 410.
• Use 301 redirects for moved pages. Google describes a permanent redirect as a strong signal that the target should be processed instead of the old URL. Our older guide on how to migrate a website without losing SEO rankings covers the mechanics.
• Test the map on staging. Run the old URL list against the new site before it goes live and confirm every response is the one you planned.
• Monitor after launch. Watch the 404 report, the analytics view of the 404 page and Search Console closely in the weeks after launch, and fix gaps as they appear.

Our website redesign process guide covers this step inside the full plan, from inventory to launch checks, so a new design does not quietly erase what the old site had earned.

404 pages, AI crawlers and AI search

AI assistants and AI search features rely on crawlers too, which request pages, follow links and read status codes. A few points matter specifically for AI visibility:

• Pages that get cited should stay live. If an AI answer or an article links to one of your pages and that page later returns 404, the citation now leads to a dead end. When you retire a page that was referenced elsewhere, redirect it to the closest equivalent.
• Files you publish for machines must point to live pages. If you publish an llms.txt file, a sitemap or structured data with URLs, every URL in them should return 200.
• Soft 404s blur your content. An error page served with a success code can be read as thin content. Returning the correct status keeps it out of the material any crawler considers.

None of this guarantees that an AI tool will mention your business; nothing does. It simply removes avoidable noise from the signals you control. For the broader picture of being found in Google, answer engines and AI search, see our SEO, AEO and GEO services and our guide on how to appear in AI Overviews.

What are the most common 404 page mistakes?

Most 404 problems repeat from site to site. This table lists the ones that show up most often, what each one costs and the fix.

Visit your own 404 page once a quarter, on a phone. If the next step is not obvious at a glance, the page needs work.

How GoSocial handles 404 pages on a website build

Here is how we work, using only facts published on our own site. GoSocial is a custom web design company in Boca Raton, Florida, building websites for businesses across the United States since 2016. We build both custom-coded and custom WordPress websites, and we recommend the fit for each project.

Our web development process runs from discovery and strategy to architecture, design and content, development, testing, launch and measurement. The 404 page is planned inside that flow: architecture decides which links it should offer, design builds it from the same components as every other page, testing confirms the status code, and launch includes the redirect map for any URLs that change. We build websites around buyer psychology and strengthen them with SEO, AEO and GEO on one foundation.

Every GoSocial website launches with GA4 and Google Search Console connected and tracks form submissions, phone clicks, WhatsApp clicks and bookings, so broken links and lost visits show up in the data instead of staying invisible. We do not promise a ranking or an AI citation; we build for the metrics and show you the measurements. The domain, hosting account and code belong to the client, so another team can maintain the site if you ever choose to.