What is a 404 page?
Whether custom or generic, the infamous 404 error message is nothing new to any website and it will to be found on every one of them at some point. This simple error page appears when a page cannot be found, and this happens when a URL has been changed, a page has been deleted or a link has been spelled wrong.
404 pages can be intrusive, frustrating and unwanted, but that doesn’t always have to be the case. Now, with more responsive and user-friendly websites we are able to have more control. We can change the way these error pages look and feel, and in doing so reduce their bounce rate. These pages no longer have to be places of dismay and sadness – they can be worry-free, worthwhile and useful!
404 errors and SEO
Although frustrating, 404 pages are important for SEO. If a page throws up a 404 when being crawled by a search engine, it won’t get indexed because there’s nothing there. This won’t harm your site’s ranking – Google knows that they’re always going to happen.
The problems begin when you link to a 404 page, especially if it’s on someone else’s website. This will damage your credibility and push you further down the SERPs, so make sure everything is spelled correctly and that you edit broken links if site owners ask you to.
Reduce your bounce rate with a custom 404 page
Bounce rates measure the number of visitors to your website that have arrived, found a page and then left having taken no action. It’s renowned that a 404 page is a big contributor to making visitors leave a website but along with other practices, creating a well-planned and thought-out custom 404 page can help prevent that from ever happening.
For instance, 404 pages must stay loosely within the parameters of your website’s design, colour scheme and brand image. This will help the user clearly see that it’s your website with the issue and not them, hopefully stopping them from leaving.
Preserve your brand identity, decrease bounce rates and even increase conversions by making your 404 page memorable, user-friendly and even fun.
On that note, here are some great ways you can utilise your 404 error pages and ultimately keep your customers right where you want them.
What makes a good 404 page?
A 404 page is known for being lifeless and boring, so turn this into an opportunity and have fun with it. Think outside the box and make your custom 404 page unique and memorable.
Use eye-catching images
Start with the basics. Using something as simple as a striking image or two will help your website’s error page stand out. This example from Dribbble uses vibrant, eye-catching colours, as well as bold fonts and photography that really grab your attention and entice you to explore the entire page. This then helps to open the door to add many more options such as buttons or links, leading them to an alternative (working) page on your website, helping the user forget what just happened.
You want to keep the user on your website for as long as possible but if they are confronted with a 404 page, chances are they will leave. Prevent this from happening by giving the user plenty of alternatives, like links.
Provide links to share the page on social media, to go back to the previous page, to another suggested page or even to a gallery of cute puppies! The possibilities are endless; just make sure they’re not given a reason to take their business elsewhere.
Play with your words
‘Page not Found.’ ‘Sorry, there was an error.’ ‘404 Page not found.’
These are all very generic, standard terms you’d expect to see on a 404 page, but they are blunt, boring and more likely to result in the user wanting to leave. This is another chance to grab the reader’s attention within the first few seconds of the page appearing. Use puns, bold fonts, conversation starters or funny, pop-culture based alerts like this example, featuring a well-known face, on Bluegg.co.uk. Sound can also be used to your advantage, as this example shows.
Experiment with different sized headings, use exciting fonts and add unexpected images to the page. Just because the page has been flagged as an error, it doesn’t mean that it can’t be exciting! Something unique and quirky could be the ticket to stop the user leaning towards closing that all-important tab your website is attached to.
Building this type of 404 page is a more time-consuming and elaborate task, but the results will outweigh the work involved by keeping your visitors engaged indefinitely. HeyZap’s example of a 404 page turns your ‘dead page’ into a space-aged minigame.
Once the game ends, you are greeted with ways to share your score on social media and links to navigate back to their website. All of this has already made you forget you ever found a 404, making it a very impressive and worthwhile way to present your error page.
Google also has an example of this on its Chrome browser’s ‘no internet’ page. This Easter Egg, called ‘T-Rex, Run!’, features a pixelated dinosaur, and all you have to do is press the up key on your keyboard to activate this simple minigame. It’s not an obvious 404 page and has evolved over time with news stories written about the history of it, keeping it in the public eye, making users stay on the page to give it a try when it appears. Why not have a go at the game yourself?
Use movement and animated GIFs
Users are more receptive to video or movement on a web page. A simple graphic like the one used here by Hong Kong-based social media company 9GAG makes for a simple but effective custom 404 page. Animated GIFs are widely used throughout social media and they can make your error page feel more up to date and relatable. Notice how this page also has a call to action to download the app, as well as a link to the homepage in the top left.
Keeping people on your site, especially if they’ve come across a 404 page, can be difficult, but one way to make sure they stick around is to utilise exit intent. If someone is about to leave, a coupon or discount pops up giving them a reason to stay and browse for a little longer, and even convert into a sale. For example, Lands’ End offers 40% off full-price items seconds before you consider closing the window.
How to make a 404 page
This process varies depending on how your website is built. If you’re using WordPress, themes will always have 404 pages built in that you can edit. However, if you’ve made your own theme you’ll need to make a new page and name it 404.php. If you use Elementor in WordPress, creating your 404 page is as easy as dragging and dropping elements where you want them.
But don’t worry if your website isn’t built in WordPress. Just follow these simple steps to make your 404 error page:
- Create your page using HTML or a web page editor
- Name it something obvious like 404.html
- Connect the page to your website how you normally would
- Upload 404.html to the server
- Navigate to your 404 page to make sure everything looks right
- Set up your server so that it points at your 404 page
A custom 404 page is no longer an error
Your 404 pages don’t have to be as mundane or as dull as they are perceived to be – think of them as another great opportunity to engage with your audience. They are another crucial part of your website’s development and although frustrating when they appear, it’s best to embrace the opportunity to use this space in many exciting new ways.
When done correctly, a memorable 404 page will keep visitors distracted from the mistake on your website and will hopefully help to keep your bounce rate down.
Keep track of these practices through Google Analytics to help you learn what’s working and what you can improve on.
We’d love to see the great things you have done with your 404 page, so why not leave a comment below or tweet them to us @TeamTillison?