Types of Error Pages
Different errors require different responses. Understanding the common error types helps you design appropriate pages for each situation.
404 - Page Not Found
The 404 error is the most common error visitors encounter. It means the URL they tried to reach does not exist on your server. This happens when someone follows an outdated link, mistype a URL, or when a page has been moved or deleted without a proper redirect in place.
A 404 page is an opportunity, not just an apology. Every visitor who sees your 404 page was trying to find something on your site. The page's job is to help them find it through another path.
500 - Internal Server Error
A 500 error means something went wrong on your server. Unlike a 404, which is about a specific missing page, a 500 error indicates a broader problem with your website's code or server configuration. Visitors encountering this error need to know that the problem is temporary and that you are aware of it.
503 - Service Unavailable (Maintenance)
The 503 status code is used when your site is temporarily down for scheduled maintenance. Unlike unexpected errors, maintenance downtime is planned, which means you can communicate clearly about when the site will return and what visitors can do in the meantime.
Designing an Effective 404 Page
The best 404 pages share several characteristics. They acknowledge the error clearly, they maintain your brand identity, and most importantly, they give visitors a way to find what they were looking for.
Essential 404 Page Elements
- A clear error message. Tell visitors plainly that the page they are looking for does not exist. Avoid technical jargon. "The page you are looking for could not be found" is clear and human.
- A search bar. If your site has search functionality, include it on the 404 page. Visitors know what they were looking for, and a search bar lets them try again immediately.
- Links to popular pages. Provide direct links to your most visited pages: home page, services, contact page, and any other high-traffic destinations. One of these is likely what the visitor was trying to reach.
- Your site navigation. Keep your standard header and footer navigation on the 404 page. This ensures visitors can still browse your site normally.
- A link to your home page. Always include an obvious, prominent link back to the home page as a safe fallback.
- Your brand identity. The 404 page should look like it belongs to your website. Use your logo, colors, and fonts. A broken page that also looks broken makes the impression worse.
Personality on 404 Pages
Many businesses use their 404 page as an opportunity to show personality. A touch of humor or a creative illustration can turn a frustrating moment into a positive brand experience. However, keep the humor appropriate for your brand and audience. A law firm's 404 page should be professional. A creative agency has more latitude. Whatever tone you choose, make sure the page is still functional. Clever design should not come at the expense of usability.
Designing a Maintenance Page
When your site is down for planned maintenance, visitors need different information than they do for an unexpected error. A good maintenance page communicates the following:
- What is happening. Explain in plain language that the site is temporarily down for improvements or updates.
- When it will be back. Give an estimated return time. Even a rough estimate is better than no information.
- How to reach you. Provide a phone number or email address so visitors can still contact you during the downtime. Do not leave them stranded.
- Social media links. If you are active on social media, point visitors there for updates on when the site will return.
From a technical standpoint, your maintenance page should return a 503 HTTP status code with a Retry-After header. This tells search engines the downtime is temporary and prevents them from de-indexing your pages.
Designing a 500 Error Page
Server errors feel more alarming to visitors than 404 errors because they suggest something is fundamentally wrong with the website. Your 500 error page should be calming and honest:
- Acknowledge the problem. Do not pretend nothing happened. Let visitors know something went wrong on your end.
- Reassure them. A statement like "Our team has been notified and is working on a fix" helps, even if your error monitoring is automated.
- Suggest trying again. Server errors are often intermittent. A simple "Please try again in a few minutes" may be all the visitor needs.
- Provide alternative contact methods. If your website is not functioning, visitors need a way to reach you by phone or email.
- Keep it simple. Your 500 error page should be a static HTML file that does not depend on your server-side application. If the application is broken, a page that requires the application to render will also break.
Error Page Best Practices
- Make error pages lightweight. Error pages should load quickly, especially 500 error pages that may be served when the server is under stress. Use minimal CSS, no JavaScript dependencies, and no external resources that could fail.
- Monitor 404 errors. Use your analytics or server logs to track which URLs are generating 404 errors. If a particular broken URL gets significant traffic, set up a redirect to the correct page. This recovers lost traffic and improves user experience.
- Set up proper redirects. When you move or rename a page, create a 301 redirect from the old URL to the new one. This prevents 404 errors before they happen and preserves any search engine ranking the old URL had.
- Test your error pages. Visit a URL that does not exist on your site to see what happens. If you see a generic server error or a blank white page, you need a custom 404 page.
- Use the correct HTTP status codes. A 404 page must return a 404 status code, not a 200 (OK). A soft 404, where the server returns a 200 status for a page that does not exist, confuses search engines and can hurt your SEO.
- Do not redirect all 404s to the home page. This is a common mistake that creates a poor user experience. Visitors do not understand why they ended up on the home page, and search engines treat bulk redirects to the home page as soft 404s anyway.
Common Error Page Mistakes
- Using the default server error page. The default Apache or Nginx error page, or your hosting provider's generic error page, makes your site look unprofessional and offers no way for visitors to continue browsing.
- No navigation on the 404 page. If your 404 page is a dead end with just an error message, visitors have no choice but to leave your site entirely.
- Overly creative at the expense of function. An elaborate animation or a clever joke is nice, but if the page does not help visitors find what they need, it has failed its primary purpose.
- 500 error pages that depend on the application. If your 500 error page requires your web application to render, it will fail when the application fails. Use a static HTML file served directly by your web server.
- Not logging errors. Error pages should trigger notifications to your team so you can identify and fix the underlying issues. A spike in 404 errors might mean a recent deployment broke internal links.
Continue Learning
Error pages are part of a complete website strategy. Explore these related guides:
- Site Map Page -- Help visitors and search engines find pages without hitting errors.
- Home Page -- The fallback destination most 404 pages should link to.
- Landing Page -- When landing page URLs change, proper redirects prevent 404 errors.
- Learning Center -- Browse all educational resources.