Blog

404 is the standard error code generated when a user attempts to visit a page that does not exist due to a broken link or some other type of error. It’s an HTTP standard response code a web host uses to indicate a user being able to access a server but the server being unable to find the page the user was requesting. It’s one of the most recognized error codes on the web.

Unedited, these types of pages display nothing but “404 – Page Not Found” error messages when accessed. When a new user attempts to access your site in any way, such as through Google or a link from another site, what do you think he’ll do if he lands on one of these pages? Leave.

New visitors spend less than 15 seconds browsing new web pages before deciding whether or not these pages contain content they need, according to Tony Haile of Chartbeat. You’ve got 15 seconds to impress a new visitor. Do you think a generic “404 – Page Not Found” error message is the way to do that?

So, what can you do? Well, for starters, you can use a tool like Google Search Console to keep an eye on the number of Not Found error codes and broken links your site generates. You can also use Google Analytics to see how many visitors are landing on 404 pages. Most importantly, you can change the language and content on your page to keep a new user on your site even when he lands on one of these pages. Let’s get started.

How to monitor 404 errors

The best way to optimize 404 pages is to make sure visitors and search engines don’t land on them. There are a number of different ways we can monitor 404 errors, and there are a number of different tools we can use. We’re going to talk about Google Search Console, formerly Google Webmaster Tools, and Google Analytics.

Google Search Console monitors your site and lets you know when Googlebot crawlers find what it calls “Not Found” errors, which are typically 404 and 503 HTTP error codes. As for Google Analytics, we can use it to create a custom 404 error report that displays the pages and file paths giving our users 404 error codes. Let’s start with Google Search Console.

Monitoring 404 errors with Google Search Console

You’ll need to verify your site as a property in Google Search Console if you want to monitor 404 errors this way. The easiest ways to do this are using such SEO plugins as All in One SEO Pack and Yoast SEO. Open Google Search Console, and click the Add a Property button. Enter your site’s URL, and click Continue.

You should be taken to a page that asks you to verify your property. Click the Alternate Methods tab, and select the HTML Tag option. If you’re using All in One SEO Pack, go to All in One SEO > General Settings, scroll down until you find the Webmaster Verification settings, and paste the long code inside of the content quotes in the Google Webmaster Tools box. If you’re using Yoast SEO, go to Yoast > General > Webmaster Tools, and paste the long code in the Google Search Console box:

Save your changes in the SEO plugin you’re using, go back to Search Console, and click Verify to add your site as a property. Click on your site from the Search Console Home screen once you’re ready.

The first few things you’ll see are different metrics for your site under a Current Status heading. The first section is a collection of errors Googlebot crawlers found on your site, including Soft 404 errors and Not Found errors. The Not Found errors are where your 404 errors will be.

Click Crawl Errors, and select Not Found. You’ll see a list of pages that have generated 404 response codes:

A Soft 404 in Search Console refers to a broken link that did not return a 404 response code. Make sure to look in the Smartphone and Featured Phone tabs as well.

Monitoring 404 errors with Google Analytics

Search Console is a great tool to use to find pages that generate 404 response codes on your site. It only has one major flaw – it doesn’t report 404 pages visitors have landed on. It only reports 404 pages Googlebot crawlers find. We’ll use Google Analytics for that.

Create a Google and Google Analytics account if you don’t already have these, and add your site. Make sure you’re logged into Google Analytics, and click the link below to generate a custom 404 report inside of the tool. This custom report was created by Ryan Chauvin of Forthea:

https://www.google.com/analytics/web/template?uid=Vwha4sfrRxS2Qg7f6Mokqg

Open a new tab in your browser. Enter your site’s URL in the address bar, and type a few random letters after the final “/” symbol to find your site’s 404 page. Make note of the page title. This will be the first bit of text in the browser tab of your 404 page. This is typically “Page not found,” but yours might be different.

Go back to Google Analytics, and click Edit on the report page. Scroll down until you find the Filters section. Change the “Error 404” text to your 404 page title, and click Save when you’re done:

Now you should see a list of 404 error pages your visitors have come across. Adjust the Date Range in the upper right-hand corner if needed:

How to fix 404 errors

There are two main ways to fix 404 errors inside of WordPress. The best practice is to track every individual 404 error and redirect it to the correct page or similar page. This is what the Redirection plugin allows us to do. The second way is to redirect all 404 errors to the homepage, meaning visitors will be redirected to your site’s homepage if they land on 404 pages.

The Redirection plugin

Redirection is a free WordPress plugin that lets you keep track of 404 errors and turn them into 301 redirects with a few simple clicks. This redirect will allow you to take users to another page on your site when they land on a 404 page. They won’t need to click anything. They’ll simply be redirected to a different page on your site automatically. A 301 redirect is a permanent redirect, and it’s preferred by most search engines.

The way this plugin works is simple. All you need to do is paste the URL for a 404 page you found in Google Search Console, your custom Google Analytics report or even the log of this very plugin into the Source URL box. If you changed the URL for the post, paste the new URL into the Target URL box. If the post or page no longer exists, paste the URL of a similar post or page or paste the URL of your site’s homepage. Click Add Redirection once you’re done.

Redirect 404 errors to the homepage

If your site has way too many 404 errors, as in hundreds or even thousands, you may want to redirect them all to your site’s homepage. Again, it’s better to redirect each individual 404 error, but redirecting them all to the homepage may be worth it if you don’t have the time to redirect hundreds of 404 errors.

Luckily, redirecting 404 errors is simple. You’ll need to add code to the 404.php file of your theme, and it’s highly recommended you use a child theme to do this rather than editing your theme’s parent 404.php file. Check out our post on using child themes. Basically, you’ll need to create a new 404.php file in your child theme’s file system via your FTP client.

Related: https://teslathemes.com/blog/wordpress-child-themes/

Instead of pasting the code from your parent 404.php file, add this to your child 404.php file instead:

<?php header("HTTP/1.1 301 Moved Permanently"); 
header("Location: ".get_bloginfo('url')); exit(); ?>

Click Update File to save your changes. Now all 404 errors should redirect to the homepage.

How to optimize a 404 page

You won’t always be able to redirect a user when he lands on a 404 page. If your 404 page reads nothing but “404 – Page Not Found,” users will leave. Thankfully, there are plenty of things we can add to a 404 page to keep users on our site and decrease the number of bounces 404 pages generate.

In the olden days, you were required to edit your 404.php file to get your navigation menu and sidebar to appear on your 404 page as they used to be very generic – black text on a white background. Thankfully, most theme developers have included well-optimized 404.php files in their themes that keep your site’s navigation menu and sidebar native to your page to give misdirected users somewhere to navigate to, but we can do better.

For starters, I recommend changing the language on your page. “404 – Page Not Found” is a little generic, as if your visitors are communicating directly with the server rather than you. Most theme developers, including TeslaThemes, include what are known as frameworks with themes. The Tesla Framework allows you to edit your theme’s 404 page title without needing to edit your theme’s 404.php file.

Change it to something a little more humanizing, such as “Whoops! I don’t think that page exists 🙁 Try this:” followed by some type of content. Suggestions are below. I recommend only using one of these options. Users may feel overwhelmed and opt to leave if you give them too many options to pick from.

Insert a search bar

A search bar is a great way to let users search for content they were looking for. Enter this bit of code in your 404.php file before the get_sidebar code to insert a very basic search bar on your page:

<h2>Search YourSiteNameHere</h2>
<?php get_search_form(); ?>

The result looks like this:

Just make sure your theme doesn’t already insert a search bar on your 404 page.

Insert an email opt-in page

A 404 page is a great opportunity to capture someone’s attention and gain a new email subscriber. Make sure your opt-in form includes an opt-in incentive, such as a free ebook or 10-day email course. This encourages more people to sign up.

Find the Javascript script for your preferred email form via your email marketing service. This script is typically wrapped in <script></script> tags. Inserting this script inside of the Message box in the 404 Page section of the Tesla Framework is enough to insert an email opt-in form on your 404 page. Otherwise, insert this script in your 404.php file.

Add your site’s page

That is Fizzle.co’s 404 page. It’s plain and simple, and even though the user isn’t able to find the page he wants to navigate to, he can still check out the site’s other pages as they have made it simple for him to decide where to go.

Here’s the simple code I added to the Message box in the Tesla Framework:

<h2>Whoops! I don't think that page exists :( Try one of these:
</h2><br />
<a href="#">Home</a> | <a href="#"> Start Here</a> | <a href="#">Blog</a> | <a href="#">Contact</a>

Replace the hashtags with your page URLs. Here’s the end result:

Add Business Information

If you own an e-commerce shop, are a business owner or a freelancer, consider adding your business information to your 404 page, such as your services, your prices and a link to your Contact page. You can even include a link to your Quote page if you use one.

If you’re a freelancer or an e-commerce store owner, you might even consider highlighting photos of your best products or portfolio items here.

Add contact Information

A great way to add a personal touch is to add your site’s email address or a link to your contact page on your 404 page. Use additional phrases, such as “Experiencing issues? Got a question? Hit me up at youremailaddress@yourdomain.com.”

Examples of 404 Pages

Many sites like to get creative with their 404 pages. Here are a few humorous examples.

Here’s WWE’s 404 page:

Here’s Lego’s 404 page:

And here’s Mike Kus’ 404 page:

Final thoughts

Poorly optimized 404 pages can cause bounce rates to increase, decreasing your likelihood of converting a new visitor every time one lands on one of these pages. Hopefully, you now know a few things you can do to optimize your page, and we hope you take the opportunity to get a little creative with things.

Remember to use the Google Search Console and Google Analytics tools in combination with the Redirection plugin to monitor your 404 pages on a regular basis. It makes the whole process simpler when you take care of things in small pieces rather than large chunks.

Take care!

P.S. Share with us your examples of optimized 404 pages