404 Errors – Custom 404 Page

In the last part of our Reducing the Bounce Rate by looking at 404 pages we are looking into customising the 404 Page. Blogger and WordPress both come with a standard 404 page. The standard 404 page on WordPress is a little more helpful than that on Blogger but both could do with a little bit of work. As we have discovered both users and bots can land on your not found page and if the page isn’t useful then they will bounce right off it again. So if you can keep them on your site for longer exploring and looking more then it will certainly go further towards reducing that bounce rate which will help your SEO.

Easy to follow how to create a custom 404 page without messing with your template files for both Blogger and WordPress users

Reducing your Bounce Rate 404 Errors

  1. Identify where the users land on the 404 page
  2. Identify where the bots come from to your 404 page
  3. Fix the errors that you can
  4. Customising your 404 Page -> You Are Here

NOW – Customise that 404 page to turn it from standard to useful for your site.

How you should customise your 404 Page

Of course, this is entirely up to you but here are a few suggestions

  • Share your popular or cornerstone posts for your site
  • Add a sign-up box for your newsletter
  • A search facility (WordPress includes this as standard)
  • Site-map (WordPress includes this as standard)
  • Search box and link back to your home page or most recent posts

Customise a 404 Page on Blogger

Easy to follow how to create a custom 404 page without messing with your template files for both Blogger and WordPress users

The Not Found or 404 Page on Blogger is the least helpful and that is one of the reasons I am starting with it. It is also the easiest to customise as it’s a setting on Blogger.

In your blogger dashboard go to settings -> Search Preferences -> Custom Page Not Found and click on Edit

Easy to follow how to create a custom 404 page without messing with your template files for both Blogger and WordPress users

Here you are able to enter HTML code to make it more useful.

Taking the suggestion for a search box and a link back to our homepage plus our most popular post we can use HTML to customise it.

Giving Instructions and a Title to the Page

The search box on it’s own is great but what page have people landed on why do they want to use that search box so give a little information.

<h2>Opps we're really sorry that can't be found at the moment </h2>

<p> Why not try searching for what you want on our site</a>[/code]

Adding a Search Box

The code below will add a search box to your 404 Page

<form id="searchThis" action="/search" style="display: inline; margin: 20px auto;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search this blog" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" vinput="" name="q" /> <input id="searchButton" value="Go" type="submit" /></form>

Easy to follow how to create a custom 404 page without messing with your template files for both Blogger and WordPress users

Adding some popular posts or your most common labels

Of course, you can leave it as above but why not add some popular posts of your most common labels that you use on your site. Here’s a little cheat on how to get that html code that I use time and time again. Open a new post or page and write what you want – you can add images etc…. and then when it’s like you want it – click over to the HTML copy it and put it over in your Not Found Page editor and VOILA you have a customised helpful 404 page on Blogger.

Customising your 404 Page on WordPress

Looking at crawl errors and where bots are finding your 404 pages as well as explaining Soft 404's

WordPress is a little more complicated but it can be done – I’m going to walk through a 2 different ways the first uses a plugin – this isn’t my preferred method as I like to use as few plugins as possible on my sites. They can slow the sites down and they open them up to vulnerabilities but they do provide a quick way to customise your page and make it more useful than the standard. The second method is using Thrive Themes which we do here on The Blog Surgery to create your custom 404 page (and show an example how this can be achieved with Lead Pages too). On Rainy Day Mum I have edited the php file. BUT that does involve coding knowledge and accessing the back end of your site through your CPanel or FTP so I wouldn’t advise doing that unless you are familiar with those processes. If you are I have included the link to the official WordPress Codex with information about editing the PHP for you.

Using a Plugin

I tried a few different plugins to find one that was easy to use and didn’t use many of your sites resources e.g. bandwidth as well as being easy to use. The best I found was 404Page Plugin which is FREE and works on you setting up a page on your site and then designating that as your new 404 Page.

Easy to follow how to create a custom 404 page without messing with your template files for both Blogger and WordPress users

Once the plugin is installed go and add a new page in your WordPress Dashboard. Name it something sensible – in WordPress this name “Entry Title” normally appears so to make mine seem friendly I called it “Opps something went wrong”. Then add the text, images etc… that you want to to that page.

One of the things that seemed missing using this was that you couldn’t easily insert a search form so the code below will let you do that – just copy and paste it into your Text Editor where you want it placed and replace yoururl.com with your site domain name. You could also change “Search for what you are looking for” and the “Search This Site” text that appears on your button.

<form method="get" id="searchform" action="http://yoururl.com/?s="/>
<input type="text" size="40" name="s" id="s" value="Search for what you are looking for" onfocus="if(this.value==this.defaultValue)this.value=";" onblur="if(this.value==")this.value=this.defaultValue;"/>
<br>
<input type="submit" id="searchsubmit" value="Search This Site" />
</form>

How the box and the button appear are part of your sites coding so you can change that or keep it consistent as you want.

As it’s a page you could add popular posts, some of your favourite landing pages or that that bring the most traffic or even those pages that you have identified as producing the biggest number of 404 errors on your site for the users.

Easy to follow how to create a custom 404 page without messing with your template files for both Blogger and WordPress users

Thrive Themes or Lead Pages

Easy to follow how to create a custom 404 page without messing with your template files for both Blogger and WordPress users

Both Thrive Themes and Lead Pages provide the facility to create your own Custom 404 pages. They are easy to set up once you have got to know the system but both do have a fee. I have used both here on The Blog Surgery but have decided to focus on just using Thrive Themes as it has more scope for use and it is cheaper. The custom 404 Page that I have set up here is set up in the Thrive Theme editor.

As a Thrive Themes Member I have switched from Genesis to one of the themes provided and use that to create custom landing pages as well as my own 404 page. Using the themes short codes as well as the custom visual editor I have a lot of scope for making the 404 page the most useful I can to anyone that lands on it.

Easy to follow how to create a custom 404 page without messing with your template files for both Blogger and WordPress users

A fellow Kids Activity Blogger Nell of Rhythms of Play uses Lead Pages for her custom 404 page and you can see that a similar idea can be achieved there.

Easy to follow how to create a custom 404 page without messing with your template files for both Blogger and WordPress users

Editing the 404.php page on your site

Easy to follow how to create a custom 404 page without messing with your template files for both Blogger and WordPress users

The last method is the one that I have chosen to do for Rainy Day Mum when I get around to updating the site. It’s on my to do list – you have one of those right the list that never ever ever ends and as one thing gets crossed off it about a 1000 more gets added?

Well when I do get around to it I’m going to code it as php – I want to mimise the number of plugins I use as these can slow down your site and also provide a vunerability to it if they aren’t regularly updated. I also don’t currently use thrive themes on the site so can’t use that at the moment. Instead the php is possible and it’s not as complicated as it sounds I promise. When I do it I may produce a tutorial on how to customise your 404 page but in the mean time you can find out how to do it and all the information about Creating a Custom Error Page in the WordPress Codex.

Share these tips with other bloggers
Cerys Parker

Cerys is the founder of Rainy Day Mum a top UK parenting blog. Prior to having children, she taught digital media and web development. Supporting other bloggers to develop, grow and expand their blogs through actionable tasks that aren't as terrifying as they seem to be!

Click Here to Leave a Comment Below

Leave a Reply: