BlogGuide8 min read

Website 404 Page Design Guide: How to Design an Error Page That Keeps Visitors

A 404 page is seen by every visitor who follows a broken link, types a URL incorrectly, or reaches a page that has been moved or deleted. Most 404 pages lose these visitors immediately — they display a generic browser error or a bare 'Page Not Found' message with no path forward. A well-designed 404 page recovers the visitor and directs them to what they actually need.

M

Mehedi Hasan

Founder & CEO, Evoke Studio

ShareX / TwitterLinkedIn

A 404 page is one of the most overlooked design opportunities on most business websites. Every broken link, every mistyped URL, every deleted page directs a visitor to this page — and the majority of those visitors leave immediately when they see a generic error message. A well-designed 404 page acknowledges the error honestly, keeps the visitor in the site experience, and provides genuine paths to find what they were looking for. This guide covers what a 404 page should contain, how to design it, and how to prevent the most common causes of 404 errors.


What Is a 404 Page?

A 404 page is the web server's response when a visitor requests a URL that does not exist on the website. It is named after the HTTP status code 404 (Not Found). Visitors arrive at a 404 page in several ways:

  • Clicking an external link that pointed to a page that has since been moved or deleted
  • Typing a URL incorrectly (misspelling, missing a word, wrong capitalisation)
  • Following an outdated internal link that was not updated after a site restructure
  • Arriving via a bookmark to a page that no longer exists

A 404 page should return an HTTP 404 status code — not a 200 (OK) status, which is called a "soft 404" and can cause Google to index the error page as content. The technical implementation matters for SEO.

What Should a 404 Page Include?

An honest acknowledgment of the error: "Sorry — that page doesn't exist" or "We can't find the page you're looking for." The message must be clear and human. Not a technical error code, not a corporate apology that fails to explain what happened.

An explanation of why: Optional, but helpful: "This might be because the page has moved, the URL was mistyped, or the link you followed was outdated."

The main navigation header: The 404 page must include the standard site header and navigation — the most direct recovery mechanism for the majority of visitors. A visitor who gets a 404 should be able to navigate to the homepage, any major section, or the contact page in one click.

A search bar: For content-heavy sites (blog, large portfolio, ecommerce), a search bar on the 404 page lets the visitor search for the content they were looking for. Many visitors who encounter a 404 are looking for a specific piece of content — a search function may find it for them.

Suggested pages: 3–5 links to the most commonly visited pages or the most likely alternatives to whatever the visitor was looking for. Homepage, key service pages, blog, contact page — the highest-value destinations for a visitor who has lost their way.

A contact link or CTA: For professional service businesses, a "Can't find what you need? Contact us directly" link on the 404 page captures visitors who were looking for something specific and gives them a direct path to resolution.

How Should a 404 Page Be Designed?

Maintain brand identity. The 404 page should look like part of the website — using the same visual identity, typography, and colour palette as every other page. A jarring departure from the site design (a white page with a large "404" in a default browser font) breaks the visitor's confidence in the site.

Keep it light and human. A 404 page does not need to be a crisis — a small amount of personality (a brief apologetic message, an illustration, or a brand-appropriate visual) reduces visitor frustration. Well-known examples: a 404 page with an illustration of an empty search result, or a brief "Looks like this page took a wrong turn" message.

Do not over-design it. A 404 page with a full-screen animated illustration, a lengthy explanation, and an elaborate recovery pathway is over-engineered. The 404 page's job is to recover the visitor quickly, not to impress them. The navigation and a brief set of suggested links should occupy most of the page.

Test on mobile. 404 pages are often designed desktop-first and left untested on mobile. Verify the 404 page is as usable on mobile as on desktop — the navigation, search bar, and suggested links must be accessible on small screens.

What Are the SEO Implications of 404 Pages?

404s are not inherently an SEO problem. A page that does not exist returning a genuine 404 status code is appropriate — Google understands this and does not penalise sites for having some 404 pages.

What does cause SEO problems:

  • Soft 404s: Pages that return a 200 status code but display "page not found" content. Google may index these as content pages, creating thin content issues.
  • Mass 404 errors from site migrations: If a website is restructured without 301 redirects for old URLs, all the historical link equity (backlinks) pointing at the old URLs is lost. For any website redesign or restructure, configure 301 redirects for every significant URL.
  • Internal links to 404 pages: Internal links pointing to 404 pages waste crawl budget and create a poor user experience. Audit internal links after any URL structure change.

See website seo guide for the full redirect and crawl management framework.

How Do You Prevent 404 Errors?

On website migrations and redesigns:

  • Map every existing URL to its new equivalent before launch
  • Configure 301 redirects for every URL that changes
  • Use a redirect checker tool after launch to verify all redirects resolve correctly

Ongoing maintenance:

  • Run a quarterly broken link audit using Screaming Frog, Sitebulb, or Google Search Console
  • Monitor Google Search Console's Coverage report for 404 errors discovered by Googlebot
  • Fix internal broken links as soon as they are identified — broken internal links affect both SEO and user experience

After deleting pages:

  • If deleting a page permanently, configure a 301 redirect to the most relevant alternative page
  • If no relevant alternative exists and the page had meaningful traffic or backlinks, consider keeping the page active with updated content rather than deleting it

See website redesign guide for the complete redirect and migration checklist for site rebuilds.

Every Page of Your Website Should Work — Including the 404

We build websites where every page is designed, every redirect is configured, and every visitor — including those who reach a 404 — has a clear path forward. For businesses in the US, UK, Canada, and Australia.

A 404 page must include: the standard site navigation header (the most direct recovery mechanism for most visitors), a clear, human message explaining that the page was not found, an optional explanation of why (page moved, URL mistyped, outdated link), 3–5 links to the most important pages on the site, a search bar for content-heavy sites, and a contact link for visitors who need specific help. The 404 page should use the standard site visual identity — same header, fonts, and colours as every other page. Its job is to recover the visitor quickly, not to entertain them.

A page correctly returning a 404 status code does not inherently harm SEO — Google understands that pages are deleted and does not penalise sites for it. What does hurt SEO: soft 404s (pages returning 200 status but showing 'not found' content, which Google may index as thin content), mass 404 errors from site migrations without 301 redirects (losing historical link equity), and internal links pointing to 404 pages (wasting crawl budget). Monitor Google Search Console's Coverage report for 404 errors discovered by Googlebot and fix internal broken links promptly.

A small amount of brand-appropriate personality is acceptable and can reduce visitor frustration — a brief 'Looks like this page took a wrong turn' message, a simple illustration, or a brand-relevant visual reference. What it should not be: a full-screen comedy experience that distracts from the recovery task. The visitor's primary need is to find what they were looking for or navigate to something useful. Personality should be in service of that goal — acknowledging the error with warmth without distracting from the recovery mechanisms (navigation, search, suggested links).

A soft 404 is a page that returns an HTTP 200 (OK) status code but displays 'page not found' or equivalent content. This matters because Google may index a soft 404 as a real content page, creating a thin content page in the index that dilutes the site's overall content quality signals. Soft 404s are often created when: a CMS generates a URL for a category or tag that has no associated content, a 'page not found' message is served on the 200 response rather than being configured as a proper 404, or a redirect points to a page that itself displays 'not found' content. Check for soft 404s in Google Search Console's Coverage report.

Before launching a redesigned website: export all existing URLs from Google Search Console or a site crawl tool like Screaming Frog; map each existing URL to its new equivalent (or to the closest relevant page if the structure has changed); configure 301 (permanent) redirects for every significant URL in the site configuration (in Next.js: next.config.js redirects; in WordPress: Redirection plugin; in Webflow: the URL redirects panel); test all redirects before launch; and monitor Google Search Console post-launch for any 404 errors Googlebot encounters on URLs not captured in the redirect map.

M

Written by

Mehedi Hasan

Founder & CEO of Evoke Studio. 15 years of brand identity design, AI logo vectorization, and visual systems for clients across technology, wellness, professional services, and consumer brands.

404 Page DesignWebsite 404 PageError Page DesignWeb Design Guide
Back to Blog