You’re excited. You just found an interesting link about a talking giraffe on Google. You click on it. You’re now anxiously waiting for the article to pop up. Instead of an article, a message arrives. ‘Page not found’ is what’s displayed on your monitor. You won’t be learning about a talking giraffe today.
HTTP error pages in WordPress can be an eyesore for any web user that experiences them and make your visitor want to rip off their giraffe shirt out of frustration.
However, don’t worry. You can brighten the occasion with customized HTTP error pages in WordPress. Creating a custom error page will leave a visitor fulfilled, returning later, and (hopefully) keep their shirt on.
In this article, I’ll be going over:
- What an HTTP error is.
- What causes them.
- Why you should customize your error pages.
- Types of error pages (and what they mean).
- Using a plugin to customize HTTP error pages/redirecting.
- Why not having a custom error page is bad for SEO.
- How we can help solve some of the HTTP error page madness.
By the time you read this article, you’ll have error pages or redirects that enhance your site instead of one where a user feels like it was an error to visit.
What is an HTTP Error?
I don’t like to assume things, but we’ve probably all seen them:
- 404 error
- An unexpected error has happened, please contact the system administrator.
- Server not found
- This page isn’t working
Have you ever wondered what exactly they are? 404 — what is that? The name of some highway in the desert?
Before we dive into creating custom HTTP error pages, it’s important to understand them.
The HTTP (hypertext transfer protocol) error is the standard response code, in regards to computer network communications.
It indicates that the browser was able to communicate with a server, but the server couldn’t find what was requested.
The error can also be used when the server doesn’t want to disclose whether it has the requested information or not.
Typically, the website hosting server will generate a “404 Not Found” web page when a user attempts to follow a dead or broken link.
404 is by far the most well-known and common error message you’ll find in the World Wide Web. It means, “there’s nothing here.”
It has a history of its own, and you’ll often see it if you click on a broken link or if you mistype something.
So, What’s the 101 on the 404?
There have been rumors circulating on the web over the years that it’s called a 404 error because of a room number.
That’s right. The story goes that room 404 housed the web’s first servers at CERN (the European Organization for Nuclear Research) and that the World Wide Web inventor, Tim Berners-Lee, had an office there and, well, often could not be found.
Though that makes for an interesting story around the campfire, it’s a myth.
The actual reason is that error codes designate numerical ranges in a category. Client errors fell into a 400 range, and that made “404” the code for “not found”.
Other Types of HTTP Error Pages and What They Mean
404 isn’t the only game in town. In fact, the sheer number of error pages might surprise you.
Like a great white shark, most of them you’ll never encounter. However, some are a bit more common.
Here’s a shortlist of some of the more frequent HTTP error pages and what exactly they mean:
301 – A 301 error indicates that the content has moved and won’t be returning to the original location. 301’s are permanent redirects for content. They can be tricky, but luckily we have an article about how to set them up.
400 – This one indicates a bad request. That means either the browser tried to access the content in an incorrect way or it corrupted the request. It can also mean that the syntax wasn’t right. Whatever the case may be, the server doesn’t understand the request and doesn’t know what to do with it.
401 – If you get this error, it means that the content needs authorization. The user tried to access something they can’t (e.g. your WP admin panel). It could just be because you mistyped your login info, or you’ve cached something you shouldn’t have.
500 – This is a general server error. It’s basically saying, “Okay, something happened, but I have no clue what it was.” It’s very vague and indicates that the server doesn’t know how to handle the request.
504 – What’s taking you so long? This error indicates a gateway timeout. It shows that the server waited for data from upstream, but nothing happened. The usual time frame is about thirty seconds. If the gateway doesn’t hear back within about a half a minute, you might get a timeout.
And the list goes on…
If you’d like, there are many more HTTP error codes to explore.
What Causes an HTTP Error?
The big culprit behind triggering an error message is when a web page or content has been moved to a different URL. This frequently happens and is easy to do.
For example, if you have a web page, with a bunch of subpages, and you change the webpage’s URL, it will screw up all of the connected subpages. Uh-oh.
Other reasons for an HTTP error are:
- The page was deleted.
- The URL was written incorrectly or typed in the browser wrong.
- The server that is responsible for the website isn’t running or the connection could be broken.
- The domain entered doesn’t exist anymore.
- The requested domain isn’t able to convert to an IP by the DNS.
How to Fix Them
The most simplistic way is to redirect the page to another one. We’ll be discussing this later on in the article.
You can also correct the link. Hey, errors and typos happen all of the time. This goes with hyperlinks, too. If you go back and fix the error to the URL, you should be in good shape.
Also, restoring deleted pages will do the trick. If it’s a deleted page that’s no longer needed, redirect the user to a relevant page.
Deleted pages still show up on search engines, so it’s important to manage them well. They don’t simply disappear. Instead, you can always redirect or “reopen” them up in some way.
It’s important to catch HTTP errors so you know that you have them. Here are a couple of recommended options for you:
- Google Search Console: When you log into Google Console, you can click Crawl from the dropdown menu. From there, click on Crawl Errors.
- SmartCrawl: Speaking of crawling, our very own free SEO plugin can help with the broken link checker.
Once you have SmartCrawl installed and activated, simply go to the SmartCrawl admin area and the Sitemap section. Then, click on the URL Crawler and it will show any link that is broken.
Also, SmartCrawl can redirect any “dead” pages or however you’d like.
From the admin area, just click on Advanced Tools>URL Redirection.
At this point, you can enter in as many links as you’d like and have them redirected to either a customized error page, homepage, new page — anything!
There are other options out there, like our broken link checker plugin.
The main thing is fixing the problem before you have one. Whatever works best for you to discover broken links, redirect them, or fix the page.
SEO What?
Broken links can be bad for SEO. Google mentions that having 404 errors won’t necessarily harm your SEO but it can harm your user’s experience.
This can result in poor performance, and obviously a high bounce rate.
Search engines are always working on improving the user’s experience, so keep in mind, if it’s bad for the user, it’s probably not going to be great for SEO.
Why Create a Customized HTTP Error Page?
Now that we’re familiar with HTTP error pages, how they happen, and what to do to fix them…
Let’s focus on creating custom error pages, so when the inevitable does happen (type, anyone?), you’ll be ready.
That’s where customization comes into play.
Think about it. Would you rather see this:
Or this:
Or, you might recognize this one:
If you liked the first example the most, well, we might not be able to help you here.
However, if any of the other examples stuck out, then now we’re getting somewhere!
Hopefully, you can see that if you have a 404 error page, it doesn’t have to be drab and boring.
That’s why having a customized 404 error page is important. Though it’s not exactly where a user wants to be, it doesn’t have to turn them off to your site, either. In fact, it can be engaging!
As Amazon and our example above for WPMU DEV demonstrate, it’s easy enough to get creative with error pages and add a useful call to action.
For Amazon… you can meet the dogs of Amazon. How cool is that?
And for us… you get a chance to see Dev Man from behind (it’s a stretch, I know), and you can head back to the home page from there.
Overall, they offer solutions instead of a complete stop, like other generic 404 messages.
Here’s a Toast to Having a Good Host
The backbone of ensuring that you don’t get error pages in the first place is having a good host.
This ensures your site is up-and-running to begin with. It’s also essential to have good speed and performance.
We offer hosting that includes dedicated memory, CPU, and SSD storage resources, which means these resources are independent of any other sites (even other sites hosted with us).
Plus, our hosting is optimized for WordPress, with object and page caching, IPv6 support, and our CDN — which ensures our sites are faster than a speeding bullet (actually, much faster).
This helps with any lag time, waiting, slow page loads, and more that can cause your site to time out and get a 504 error.
Let’s Get Set Up
If some of your goals include keeping a user on your page, having visitors return, keeping your SEO in good standings, and not turning-off users — then a customized HTTP error page is an essential part of your WordPress website.
There are several ways to go about doing this in your theme with code (and we have an article on how to do just that). However, since the arrival of Gutenberg, the simplest way is with a plugin.
T-error-ific Error Page Plugins
Plugins. They can solve almost any problem with WordPress in a snap. And that’s definitely true with creating a customized HTTP error page.
I’ll briefly be going over several free plugins that can help you create, customize, and implement amazing HTTP error pages.
Each one of these has over a 4-star average review, is free, and has over 5K users.
You’ll notice some of them will redirect your page, some won’t. However, each of these has a customization option for an error page.
You’ll discover for yourself what plugin works best for your website.
-
404page
This plugin has over 100K active installations, making the 404page from Peter Raschendorfer one of the most used plugins for creating customized HTTP error pages in WordPress. It ranks up there as well with a solid 5-star average review.
The plugin works with almost any theme, where you’re able to customize the error page to match your voice and style.
It’s extremely simple to use in terms of design, display, and functionality. It’s all achieved in the WordPress page editor under 404 Error Page.
One difference between this and others is it does not create redirects. A correct code 404 is delivered instead.
That tells search engines that the page does not exist and has to be removed from the index. It also doesn’t create additional server requests.
For being one of the most popular HTTP error plugins out there right now, it’s worth checking out for yourself.
-
Custom 404 Pro
The Custom 404 Pro by Kunal Nagar is a simple option that replaces the default 404 page with a custom page from the Pages section in the Admin panel.
You simply choose a custom page, enter a custom URL for 404, and that’s it.
This makes it easy to create your own customized page for 404 errors and create any type of amazing page your heart desires.
With over 9K users and an average 4-star review, it’s not too shabby of an option. It’s frequently updated and has full support on Github.
This plugin is a nice option for ease of use and to have total control of whatever type of 404 page you want to feature on your WordPress site.
-
All 404 Redirect to Homepage
All 404 Redirect to Homepage by Fakhri Alsadi is a simple solution to handle 404 error pages by using 301 redirect.
It solves errors by redirecting all 404 error pages to a home or customized page.
It’s a terrific plugin for a quick solution (redirecting to your homepage) while you work on building a customized 404 page.
This is a popular plugin, with over 200K installations and a solid 4.5-star average review. It’s also updated regularly and has an active support forum.
It features an error rate graph that demonstrates any errors on your website.
You can also enable the 404 redirection status and where to redirect them to with just a simple click of a button on the dashboard.
With the ability to redirect any errors, creating customized error pages, and support, this plugin is a top-notch choice.
-
301 Redirects – Easy Redirect Manager
301 Redirects – Easy Redirect Manager by WebFactory Ltd allows you to create and manage 301 and 302 redirects, which will help your WordPress site improve SEO and the user’s experience.
It features a user-friendly interface, simple installation, and is well organized in terms of setting up.
It’s great for new WordPress sites, repairing links after reorganizing existing content, and for when your site’s content expires and you want to avoid sending visitors to a 404 page.
This plugin has over 80K installs and an awesome 4.5-star average review. It’s also updated on a regular basis.
Some of the features of the 301 Redirects are the options to choose from pages, posts, custom post types, archives, and term archives from the dropdown menu.
You can also set up your own custom destination URL.
It also allows you to retain query strings across redirects, import/export features for bulk redirects management, and simple redirect stats.
It’s perfect for replacing an old site design with a new one, overhauling, or reorganizing your WordPress content, and if you have content that expires and you’d like to redirect users to a different location.
-
Redirection
Redirection by John Godley is the most popular free redirect plugin for WordPress.
You can simply manage 301 redirects, keep tabs on 404 errors, and even redirect if the user is logged in or logged out.
It’s designed to be used on sites with a few redirects to sites with thousands of redirects.
It’s the oldest out of all the plugins (over 10 years!) and has a million installations and a thumbs-up with a 4.5-star average review.
Some of its features include redirects for certain browsers, cookies, HTTP headers, and more; meaning that you can really customize what redirect actions you want to take.
It also has a configurable logging option, which allows you to view all redirects occurring on your site, including information about the visitor, browser used, and the referrer.
With full support and all the features, this plugin is great for any WordPress site and creating HTTP error pages that you can redirect to.
-
404 to 301 – Redirect, Log and Notify 404 Errors
404 to 301 – Redirect, Log and Notify 404 Errors by Joel James is a simple plugin that handles all 404 errors.
It redirects all errors to any page you’d like, using 301 or any other status you’d prefer.
This leaves zero 404 error reports in your webmaster tool dashboard, making you and your WordPress site happy.
This plugin has over 100K installs and a sweet 4.5-star average review.
Some of the features include setting custom redirect for each 404 path, it’s translation ready, enable email notifications, and is known as developer-friendly.
There is full support, regular updates, and very detailed information on what all this plugin has to offer once activated.
Oh, and by the way, the creator of this plugin works for us! Hi, Joel!
Putting It All Together
There was a lot to comb over in this article when it comes to setting up customized HTTP Error pages. So, here’s a quick recap to get your error page error-free (boy, that’s a lot of errors).
You now know what an error page is, the different codes (and what they mean), what causes them, why to fix them, the importance of them, and how to create them with the help of a plugin.
Plus, you want to ensure your site is in good working order with some solid hosting.
You should see what we’ve been up to when it comes to hosting. Check out this post about what we did for Hosting Month! Yes, we’re a bit crazy about it…
And to wrap things up, keep all of these tips in mind:
Redirect: Instead of taking a page down, you redirect to a customized page (or homepage).
Keep Tabs on Your Pages: Remember to check with SmartCrawl or other sources to ensure you don’t have any broken links.
Remember Your Updates: Updating or changing any links? Be sure to ensure they’re not going to break any other links in the process.
Make Your Error Pages Human: On your customized error page, be sure to give them a personalized voice that works well with your brand or image.
Don’t make it generic and also include a call to action (e.g. “Click here to visit our homepage.”).
And Error You Have It
Now, when a user comes across something of interest on your site, but you forgot to redirect the page or re-adjust things, they won’t get the bland 404 messages.
Instead, they’ll be happy, possibly amused. Why? Because you’re prepared.
You created an amazing, entertaining, and informative custom error page that leaves them feeling happy — not disappointed.
Your user knows that you’re on top of your website and will understand.
They won’t be eager to leave and go elsewhere — even if they can’t learn about a talking giraffe.
WIN a Share of $5K
This #HostingMonth!
Subscribe to our blog this #hostingmonth for a chance to win one of 5 prizes of $1,000 WPMU Dev credit! Learn More.
