404 Error Pages: The Complete Guide

A 404 error is an HTTP status code that tells browsers and search engines a requested page cannot be found on the server. The user typed a URL, clicked a link, or followed a redirect, but the destination does not exist. The page was deleted, renamed, or never created in the first place.

When this happens, the web server responds with the 404 status code instead of serving content. The browser then displays whatever page is configured to handle 404 responses. By default, this is a generic server message. With a custom 404 page, you control what the visitor sees.

The 404 status belongs to the 4xx family of HTTP response codes, which covers client-side errors. Other codes in this family include 400 (Bad Request), 401 (Unauthorized), 403 (Forbidden), and 410 (Gone). Each communicates a specific problem. Understanding the difference helps you handle errors correctly and preserve your SEO performance.

What Is a 404 Error and How Does It Work?

Key entities and concepts

HTTP status code: a three-digit number returned by the server to describe the result of a request
Web server: the software (Apache, Nginx, IIS) that hosts your site and responds to requests
Browser request: the action triggered when someone types a URL or clicks a link
URL: the unique address of a page on the web
Custom 404 page: a designed page that replaces the default server error message
Crawler: a program (like Googlebot) that browses the web to index pages

What Causes a 404 Error?

404 errors come from four main sources. Each requires a different response.

1. Deleted or moved content without redirect

You removed a page or changed its URL. No 301 redirect was set up. Old links from other sites, search engines, and bookmarks now lead nowhere. This is the most common cause.

2. Typo in an internal or external link

Someone wrote /contatc instead of /contact. Visitors hit a 404. The fix is on the source page, not the destination.

3. CMS misconfiguration

A WordPress, Shopify, or custom CMS generates URLs automatically. A plugin error, a permalink reset, or a routing bug can produce 404s for pages that should exist. This is critical to fix because the content is technically still on your server.

4. Tracking parameters or session IDs

URLs with utm_source or sid parameters can sometimes be mistaken for new pages by crawlers, even when they point to valid content.

How to classify your 404s

Cause	Action	Priority
Deleted page with backlinks	Create 301 redirect to closest equivalent	High
Deleted page with no value	Leave as 404 (or 410)	Low
Typo in link	Fix the source URL	Medium
CMS bug	Fix the CMS, then redirect	Critical
Random crawlers probing	Ignore (they will stop)	None

The Real Impact of 404 Errors on SEO

A few 404 errors are normal. Every site has them. Google does not penalize a site for a small number of 404s. But three situations require immediate action.

1. Important pages returning 404

A product page, a blog post ranking on Google, or a high-traffic landing page must never return 404. If a page has value, traffic, or backlinks, treat the 404 as a critical bug. Set up a 301 redirect to the correct URL or to the closest equivalent content.

2. Pages with high-quality backlinks

When an external site links to a 404 on your site, you lose the SEO value of that backlink. Google cannot transfer link equity to a page that does not exist. Contact the webmaster to fix the link, or redirect the URL to a relevant page to recover the link juice.

3. Excessive 404 errors across the site

A high volume of 404s wastes crawl budget. Googlebot spends time fetching dead URLs instead of discovering and indexing your real content. Over time, this slows down the indexing of new pages and can reduce the visibility of your entire site.

What Google actually says

Google’s John Mueller has repeatedly confirmed that 404 errors do not directly affect rankings. However, they impact the user experience, which is a ranking factor. A visitor who lands on a broken page and leaves quickly sends a negative signal. This is why a well-designed custom 404 page matters: it turns a dead end into a navigation opportunity.

The crawl budget problem

For small sites, crawl budget is rarely an issue. For sites with 10,000+ pages, every wasted crawl on a 404 URL is a missed opportunity. Google allocates a finite amount of crawling resources to your site. If 20% of those resources are spent on dead URLs, only 80% remain for your real content.

404 vs 410: Which Status Code Should You Use?

The 404 code means “not found.” The 410 code means “gone.” Both signal that the content is unavailable, but with different intent.

Use 404 when: the page might come back, you are not sure, or you want maximum flexibility. Google will keep the URL in its index for some time before eventually dropping it.

Use 410 when: the page is permanently removed and will never return. Google will de-index the URL faster. This is useful when you delete old products, expired content, or entire sections of your site.

Status	Meaning	When to use	Indexing behavior
404	Not Found	Temporary absence, uncertainty	Slow de-indexing
410	Gone	Permanent removal	Fast de-indexing

In practice, most sites use 404 for everything. The difference is marginal. Focus on fixing or redirecting important URLs rather than worrying about the exact code.

How to Find 404 Errors on Your Website

Four reliable methods exist to detect 404 errors. Use at least two for a complete picture.

1. Google Search Console

Go to Indexing > Pages. Filter by “Not found (404)”. This shows every URL Google tried to crawl that returned 404. It also indicates which pages link to these dead URLs.

2. Server logs

Every request to your server is logged. A simple search for “404” in the log file reveals all 404 responses. The “Referer” field shows the page that contained the broken link. This method is comprehensive but requires access to the server.

3. Crawling tools

Screaming Frog SEO Spider, Ahrefs, Semrush, and Sitebulb crawl your site like Googlebot and list all 404 URLs. They also identify broken internal links. Screaming Frog is free for up to 500 URLs.

4. Analytics

Google Analytics does not directly track 404s, but you can create a custom report based on page titles containing “404” or “Page not found”. This shows which 404 pages get the most traffic and from which sources.

Recommended workflow

Check Google Search Console weekly
Run Screaming Frog monthly for a full audit
Review server logs if you notice a spike in 404 traffic
Fix the source of broken links, not just the destination

How to Design a Custom 404 Page That Converts

A custom 404 page is not a dead end. It is a navigation tool. The best 404 pages guide visitors to useful content, reduce bounce rate, and recover lost engagement.

Essential elements

Clear message: tell the user the page does not exist
Search bar: let them find what they were looking for
Main navigation links: provide direct access to key sections
Link to homepage: always offer an escape route
Popular pages: surface your most valuable content
Friendly tone: match your brand voice, use humor if appropriate
Consistent design: maintain the same look and feel as the rest of your site

What to avoid

Generic server messages (“Not Found”)
Redirecting to the homepage (soft 404)
Auto-play videos or sound
Aggressive pop-ups
Dead-end navigation with no exit
Overly technical language

Technical requirements

A custom 404 page must return the actual 404 status code. Many sites mistakenly return a 200 status code on their 404 page, which creates duplicate content issues. Verify your configuration with a tool like httpstatus.io.

Conversion opportunities

A 404 page is an unexpected touchpoint. Smart brands use it for:

Newsletter signups
Product recommendations
Search bar with autocomplete
Contact information
Links to best-selling content
Social media links

The goal is to keep the visitor on your site. Every 404 that leads to a bounce is a lost opportunity.

15 Best 404 Error Page Examples

Here are examples of effective 404 pages that combine design, function, and brand personality.

1. Apple (apple.com/404)

Clean design, direct navigation, search bar. Sets the standard for minimalist 404 pages.

2. GitHub (github.com/404)

Developer-friendly with a starry sky illustration. Includes a search bar and links to documentation.

3. Slack (slack.com/404)

Simple, friendly, on-brand. Offers a search bar and a link to support.

4. Mailchimp (mailchimp.com/404)

Playful illustration, clear message, multiple navigation options.

5. Pixar (pixar.com/404)

Creative illustration featuring characters. Strong brand identity.

6. Lego (lego.com/404)

Lego brick animation. Memorable and on-brand.

7. Marvel (marvel.com/404)

Comic book style design. Appeals to the target audience.

8. Disney (disney.com/404)

Character-driven design. Engaging for the target demographic.

9. Spotify (spotify.com/404)

Minimalist with a search bar. Focus on functionality.

10. Netflix (netflix.com/404)

Dark theme, search bar, links to popular categories.

11. Amazon (amazon.com/404)

Search-focused. Helps users find products despite the error.

12. The Oatmeal (theoatmeal.com)

Humorous illustration. Matches the site’s tone perfectly.

13. Imgur (imgur.com/404)

Simple, friendly, with a clear call to action.

14. Dribbble (dribbble.com/404)

Visual-focused with search functionality.

15. CSS-Tricks (css-tricks.com/404)

Developer-friendly with useful links.

Common patterns in successful 404 pages

Pattern	Frequency	Best for
Search bar	90%	All sites
Homepage link	95%	All sites
Popular pages	60%	Content sites
Humor or illustration	70%	Consumer brands
Newsletter signup	30%	Media and e-commerce
Product recommendations	40%	E-commerce

404 Pages and Conversion: The Hidden Opportunity

Most websites treat 404 pages as a technical necessity. Smart marketers treat them as a conversion opportunity.

Why 404 pages convert

A visitor who hits a 404 was actively trying to reach content on your site. They have intent. If you can redirect that intent to something useful, you recover a potential customer.

Conversion tactics for 404 pages

Personalized recommendations: Use the URL the visitor tried to reach as context. If they hit /products/shoes, recommend your best-selling shoes.
Search with autocomplete: Make the search bar intelligent. Suggest popular categories as the visitor types.
Exit-intent popup: Trigger a discount code or newsletter signup before the visitor leaves.
Live chat: Offer immediate help for visitors who cannot find what they need.
Contact information: Make it easy to reach a human if automated help fails.

Measuring success

Track these metrics to evaluate your 404 page performance:

Bounce rate (lower is better)
Time on page (higher is better)
Click-through rate to internal links
Search usage from the 404 page
Conversion rate (signups, purchases)

A well-designed 404 page can recover 10-20% of lost visitors.

Technical SEO: Soft 404s and Crawl Budget

Two technical issues related to 404 errors can silently damage your SEO.

Soft 404

A soft 404 happens when a page returns a 200 status code but displays “not found” content. This confuses search engines. They index the page, expecting useful content, but find nothing. Over time, this dilutes your site’s quality signals.

Common causes of soft 404s:

WordPress returning 200 on missing pages
Custom CMS not configured to return 404
CDN caching errors masking the real status code

Fix: ensure your server returns a real 404 status code for missing pages. Verify with httpstatus.io or a similar tool.

Crawl budget waste

When Googlebot spends time on dead URLs, it has less time for your real content. For large sites, this can delay the indexing of new pages by weeks.

Symptoms of crawl budget issues:

New pages take weeks to get indexed
Google Search Console shows thousands of 404 errors
Crawl stats show Googlebot spending time on non-existent URLs

Solutions:

Fix or redirect all 404s with backlinks
Block irrelevant URLs in robots.txt
Use canonical tags to consolidate duplicate content
Improve internal linking to guide crawlers to important pages

XML sitemap best practices

Your XML sitemap should only list pages that return 200. Never include 404 or 301 URLs. Update your sitemap whenever you delete or move content. Submit the updated sitemap to Google Search Console.

404 Errors Across Different Platforms

The way you handle 404 errors depends on your platform.

WordPress

WordPress automatically returns 404 for missing pages, but you need to create a 404.php file in your theme to customize the page. Many themes include this by default. Plugins like “404page” let you design a custom 404 page from the WordPress admin.

Shopify

Shopify uses a built-in 404 page. You can customize it by editing the 404.liquid template in your theme. Shopify automatically returns a 404 status code for missing products and pages.

Apache servers

On Apache, you can configure custom 404 pages in the .htaccess file:

ErrorDocument 404 /404.html

This tells Apache to serve /404.html whenever a 404 error occurs.

Nginx servers

On Nginx, the configuration goes in the server block:

error_page 404 /404.html;
location = /404.html {
    internal;
}

Cloudflare

If you use Cloudflare, you can create custom error pages in the dashboard. The status code returned will match your origin server’s response.

Conclusion

A 404 error is not a failure. It is an opportunity to demonstrate professionalism, guide users, and recover lost engagement. By understanding the causes, monitoring the impact, and designing a custom 404 page, you turn a technical problem into a competitive advantage.

The sites that rank highest treat every touchpoint as valuable, including the error pages. Your 404 page is part of your brand. Make it count.