The Ultimate Guide to 404 Pages for WordPress
Bad 404 pages are like trampolines for your WordPress site: Visitors who land on them are going to bounce. How you deal with 404s will determine whether visitors stick around or check out the competition when they end up on a page that WordPress can’t find.
404 errors aren’t unique to WordPress. The 404 message is the standard error code returned by a web server when a requested webpage can’t be located. Basically, a 404 means the server is working just fine, but the requested webpage is nowhere to be found.
This post will help you get a handle on your 404s. I’m going to explain:
- How 404s happen,
- How the WordPress core deals with 404s,
- How themes are designed to pretty up 404 pages, and
- What you should do to make sure that a visitor who lands on a 404 has the best chance possible of sticking around rather than bouncing off your site.
Why Do Bad 404s Happen to Good Websites?
While 404s aren’t unique to WordPress sites – they will happen regardless of the application running your website – they certainly are very easy to create when working with WordPress. WordPress makes it really easy to tweak page URLs and change the post permalink structure to fit your preferences and SEO objectives, but this also makes is way too easy to break a lot of links very quickly.
If you have a website with published posts and you change your permalink structure, every link to a post on your web page will break. The same scenario can play out when working with pages. Let’s say that you accidentally publish a page with the URL http://www.yourdomain.com/our-produtcs. Three weeks later, you realize you misspelled products, head for wp-admin, and fix the spelling of products in the URL.
Well, that was easy! Yay WordPress! A simple 30-second fix, right?
Nope. Absolutely not. You just broke every link on your site or any other site that pointed to your misspelled URL.
So what in the world should you do? Put up with the misspelled URL? I know I couldn’t do that. Read on and we’ll sort it out.
How Does WordPress Handle 404s?
Whenever WordPress finds that a page or post has been requested but does not exist, the WordPress core checks for two theme files: 404.php and index.php. If WordPress finds that the active theme has a 404.php template, it will display that template. If no 404.php is found, WordPress will load the theme’s default index.php file and follow the instructions at the end of the loop telling WordPress what to do when no content can be found.
Most themes include a 404.php template. You can find your theme’s 404 template by going to wp-content/themes/active-theme and looking for 404.php. When it comes to working with WordPress 404 pages, 404.php is the place to start.
In most cases, the 404 page that ships with your template will say something pretty generic and provide a search prompt that the visitor can use to try and locate the content they are trying to find. There is so much more you can do with your 404 page but before you start designing you need to think about your strategy.
What is Your 404 Page Strategy?
Before you start creating redirects or building out a witty 404 page that’s sure to wow your visitors, take a minute and think about your strategy. When it comes to 404 pages, you have a couple of things to consider:
- Where are the 404s coming from? Can you find and fix the links that are sending visitors to dead-ends?
- What should you do with your 404 page so that visitors stick around instead of bouncing to a competitor when they see it?
- If you know where some visitors were trying to go when they got the 404 page instead, should you redirect those visitors to the correct URL?
Your best strategy is to find ways to answer all three of these questions. First, locate broken internal links and fix them. Next, create a 404 page that encourages visitors to stick around and helps them find what they are looking for. Third, identify URLs that are repeat offenders for generating 404s and permanently redirect those URLs to the correct web page.
Let’s look at these problems one at a time and figure out how we can fix them.
How to Locate and Fix Broken Links
There are two different paths that visitors might take to land at a 404 on your website:
- By following an internal link between pages and posts on your site.
- By following an external link from another website to a page or post on your site.
At this stage in the process, what we’re worried about are broken internal links. Broken external links you can fix in a later step with a permanent redirect. However, right now you need to find a way to check every link on your website and determine which, if any, are sending visitors to a hard 404 landing.
Here are five tools you can use to check for broken links on your website.
Google Search Console, if you don’t already know, is a free suite of Google products used to monitor the information Google has gleaned while crawling your site. One of the things Google reports back is any broken links found while crawling. To see the broken links Google has found log into Search Console, bring up the property you’re managing, and select Crawl > Crawl Errors from the menu on the left. Then click on the Not found tab to see the broken links Google thinks it has found.
I should point out that dealing with crawl errors in Search Console could stand to be an article all on it’s own. So we won’t go into depth on that topic right now. Thankfully, Google has a pretty good support site you can use to learn more about interpreting and addressing the crawl errors you see in Search Console.
This is a free link checker from the W3C and Mozilla. Enter any URL to check the content of the returned document for broken links. You can even check linked documents if you’d like–a metric called recursion depth. However, checking links recursively can end up taking a lot of time and generating a stack of results too overwhelming to tackle.
Start by checking one page at a time and fixing any broken links you find as you go. If it’s going pretty well, set the recursion depth to 1 and see how that goes. While you’re at it, keep in mind that this tool will look at things like the links between plugins and any servers they connect to. In most cases, these types of links will show up as broken links. What you’re really looking for are links to other pages and posts on your site that show up as broken. Find and fix those broken internal links.
This free plugin from the WordPress plugin directory continually monitors your site for broken links and lets you know as soon as any are found. One of the best features of the plugin is that you can fix broken links directly from the plugin page which can be a huge convenience if you need to fix links in a dozen different posts. With over 400,000 active installations, this is by far the most popular link checking plugin at WordPress.org.
This plugin will check all of the links on your site looking for broken links, redirects, nofollow links, and more. To check links, you create a configurable link scanning operation and then either run it immediately or save it and run it at a later time. Scanning your entire database and website can be a resource intensive process, so this plugin is designed to avoid affecting user experience by prioritizing user traffic over any queries performed by the plugin.
If you’re worried about the impact checking links might have on your website’s performance, Link Checker is an alternative worth considering. An external server run by the plugin developer does most of the heavy lifting so that all your server sees is a web crawler taking a look at each page. The free version of this plugin will check up to 500 links. If you need to check more links than that, consider a different plugin or look at the professional version of Link Checker.
How to Build a Better 404 Page
Unless you permanently redirect your 404 page (and you really shouldn’t do that) it’s impossible to completely eliminate 404 errors. Even Google agrees with that.
404 pages are an opportunity to show some personality while also helping your visitor find what they’re looking for. The best 404 pages are often self-deprecating, humorous, and make a play on the content of the site or the industry of the company behind the website.
Take a minute and think what you want to accomplish with your 404 page and how you can communicate that goal in a fun way. Then take a look at these tools which you can use to spruce up your 404 page.
The classic method for crafting a great 404 page is by modifying the 404.php template included in your theme, or by creating one if your theme doesn’t include a 404 page template. The WordPress Codex includes a very good tutorial that will show you how to do this. However, if you aren’t familiar with PHP and HTML, the rest of the tools in this list are probably a better option.
The first time I used an Upfront theme I was a bit perplexed about how to modify the theme’s 404 template. Then I found a post in our support forum on the topic and it became clear to me: modifying a 404 page in Upfront could not possibly be any easier. If you’re using Upfront, make sure you’re logged in and navigate to any URL on your domain that doesn’t exist, such as http://www.yourdomain.com/nonsense-and-whatnot. Once the 404 page loads, click Upfront from the admin bar at the top of the page and you’ll have complete artistic license to create whatever you want to display as your 404 page.
404page is one of the most popular custom 404 page plugins in the WordPress plugin directory, and for good reason. First, it doesn’t create a redirect which can mask larger structural problems. Second, it doesn’t require any additional HTTP requests, which can impact page load speed.
With 404page you just create a new page, design it as you wish, and then adjust the plugin settings to set that page as your designated 404 error page.
Coming in a close second to 404page in terms of the number of active installs, Custom 404 Pro is another well-vetted plugin you can use to build a custom 404 page. Like 404page, with Custom 404 Pro you first build a new page and then adjust the plugin settings to designate that page as the one to display when a 404 error is encountered.
With 404 Page by SeedProd you can quickly input a few key values, such as the message to display, a background image, and whether or not to display the search prompt, and a completely custom 404 page will be generated. You can even set the plugin to take a screenshot of your homepage and to use that screenshot as the 404 page background. If you want to create a 404 page that breaks out the mold of the rest of your website’s layout, this plugin makes it easy.
Forty Four is a lot like 404 Page by SeedProd. You can use the plugin to generate a completely unique 404 page complete with background, search prompt, custom message, and more. However, one way that it stands out from the other options on this list is that Forty Four has configurable redirects. So, if you want search engines to show a 301 redirect, but your visitors to see your 404 page, Forty Four will let you do that.
How to Redirect Frequent 404 Fliers to Related Content
Earlier in this tutorial, I brought up a “fictional” situation involving a misspelled URL that could result in broken links and visitors landing at 404 pages. In that “fictional” scenario the right thing to do would be to permanently redirect the old misspelled URL to the corrected URL. Doing so has two benefits:
- Visitors who land at the old URL skip the 404 page and are shown the page located at the new URL.
- Search engines interpret the permanent redirect correctly and index the new URL in place of the old one.
There are other scenarios that might cause similar problems. For instance, let’s say that you publish an update to a previous blog post and no longer want visitors to read the older post since it contains outdated information. That happens on this blog from time to time. WordPress is a rapidly changing platform, and we want our visitors to get the most up-to-date information from our site. As articles grow outdated we redirect them to updated articles that cover the same topic. In cases like these, a permanent redirect from the outdated post to the updated post is good form.
Another common way for 404s to show up is when another website links to yours and misspells part of the URL. You can usually look at the URL and figure out pretty quickly which web page they meant to link too. A permanent redirect from the misspelled URL to the intended URL will ensure that traffic from that site lands where it’s supposed to.
I don’t recommend redirecting all 404 traffic. I think it’s a better practice to create a great 404 page and to let it serve its purpose. However, for that percentage of your traffic that you should redirect–such as visitors reaching your site using a known broken or outdated link–it’s best to redirect them to the content you know they’re trying to reach.
There are lots of plugins available that promise to redirect all 404 traffic to your site’s homepage or another page on your site. However, I’m not a big fan of blanket redirection. So rather than show you any of those – which you can certainly find if that’s what you’re looking for – here are three redirection plugins that take a more nuanced approach.
When it comes to creating and managing redirects, there isn’t much Redirection can’t do. It’s free, available from the WordPress plugin directory, and active on over 500,000 websites. Redirection automatically logs every time a visitor lands on a 404 page so you can easily identify URLs that consistently generate 404 errors and create permanent 301 redirects to address those URLs. Redirection can even create an automatic 301 redirect when a post URL changes so you don’t have to create it manually.
This plugin implements a novel approach to the issue of 404s. The way this plugin works is that all URLs that generate a 404 error code are redirected to the parent URL. This is a little tricky to understand, and an example will help. After installing the plugin, you would create redirection base URLs like this: http://www.yourdomain.com/parent_page/. After setting up that record, any 404 generated that contained that base URL would be redirected to the parent URL. So if someone tried to go to http://www.youdomain.com/parent_page/nonsense-and-whatnot they would be redirected to the parent URL, http://www.yourdomain.com/parent_page/.
Each redirection is logged so that you can create permanent 301 redirects for repeat offenders.
With this plugin you can set up multiple base URLs making it a great option for highly heirarchical WordPress sites that make heavy use of parent and child pages.
Eggplant 301 Redirects is designed to make it easy to create 301 redirects from old URLs to new ones. Bulk redirects can be uploaded in CSV format in situations where you need to redirect a large number of URLs–such as when purchasing a site and overhauling the URL structure. While the free version of Eggplant does all of this well, the real power of this plugin is in the 404 error logging which you don’t get unless you purchase the Pro version.
Any time a visitor lands on a 404 page, something has gone wrong. However, that doesn’t mean that all is lost.
Make the most of a bad situation by fixing broken links, crafting an effective 404 page, and using redirects to permanently fix URLs that generate 404s on a regular basis.
What is your 404 strategy? Do you have a 404 page your particularly proud of? Let us know in the comments.