Creating a Custom 404 Page
In the spirit of full disclosure: This post may contain affiliate links. This means I may earn a commission (at no extra cost to you) if you purchase something using one of my links. This helps cover the expense of running the site while keeping the content 100% free. Note that I only recommend products I believe in. Your support is appreciated!
It happens to the best of us. You type in a URL or follow a link to a page you’re ready to visit, then BAM. You’re hit with a roadblock; the dreaded 404 error page.
What is a 404 page, anyway?
A 404 page is a virtual roadblock of sorts. Website hosting servers typically generate a 404 (or ‘Not Found’) webpage any time a browser attempts to follow a dead or broken link. Sometimes this is due to a moved or deleted page, a mistyped link, or an attempt to visit a page that never existed.
Most standardĀ 404 pagesĀ contain limited information, leaving a visitor feeling disappointed, lost, and without the information they came to your site looking for. Often they’ll leave your website and return to Google to find another source.Ā And that’s never a good thing.
But you can capture the attention (and even the hearts) of your misguided visitors with an engaging 404 page – one that gives them some options, all of which have potential to benefit you and your business. And best of all it’s quick, easy, and free.
How to create a custom 404 page
If you’re not handy with code, you can hire someone to develop a unique 404 page for you, or, if you’re on WordPress.org you can do it yourself for free in about 10 minutes with a plugin.
There are several plugins out there to choose from. After doing some research on my own, I chose the free version of FortyFour.
Why I love this plugin
- It’s $0 (you can upgrade to pro, but for now, the free version has all I need).
- All 404 links visited on your sites are available on Appearance > 404 Page: Logs. Just head over there to see your 404 links and how many times the pages were viewed.
- It’s light-weight, meaning it won’t take up a lot of space or slow the page load time down. It doesn’t load the unnecessary scripts, css, images and other links to 404 page.
- It’s super easy to use. Make changes to your page in minutes, all from one dashboard.
Here’s how to make the magic happen:
1. Get the Plugin
Download and install the free FortyFour plugin.
2. Set it up
On the left sidebar, scroll down to Appearance. In the dropdown you’ll see 404 Page there. Click on it and it’ll open to something that looks something like this:
3. Customize It
You can easily change and edit your copy as you would on any other post or page in this area. For best results, make sure to keep it in line with your brand persona. Be creative. Write something that encourages clicking. You can invite them to visit other pages, take them to your blog, or even send them off to another landing page of your choice. Whatever you decide to write, make it efficient. Just a few sentences will do; You won’t have their attention for long.
*Note that this plugin automatically adds a link that lets visitors click their way to your home page, so there’s no need to include that option in your text.
Scroll down on the same page to customize text appearance and color, link color, etc.
4. Add an image
With this plugin, you’re able to choose between a solid background or an image. I highly recommend opting for the image. AĀ captivating stock image is far more likely to grab and hold your visitors’ attention than a plain backdrop alone. As Kissmetrics puts it, “People no longer want to browse a website ā they want to experience it.”
To help, I curated a big list of free stock images for you. You can find itĀ right here.
Pro tip: Go toĀ Unsplash.com and type ‘add typography’ in the searchbar and you’ll be gifted with plenty of images that have been kind enough to leave space for your text. This won’t work on most other stock image sites.
5. Get ready to share it with the world
You can view your page intermittently as you work by hitting Publish in the upper right hand corner, then clicking View 404 page. This will open to a live preview of what your visitors will see. Make sure to check it on your mobile devices to ensure your image isn’t covering the text, making it impossible to read. To check, simply type the name of your website then not_found, like this: themogulmom.com/not_found.
That’s it! Keep playing around and making changes until you’re thrilled with it.
Here’s what our 404 page looks like today:
A truly great 404 page will help you grab a potential customer’s attention and keep it, preventing lost sales and frustrated visitors.
If you’re hitting a creative 404, check out theseĀ fantastic error pages for inspiration.
Share a link to your new 404 page in the comments. I’d love to see it!
Know someone with a boring 404 page? Share this with them. Letsā make the world a little more exciting. One error page at a time.
Latest posts by Melissa Bolton (see all)
- Feeling Stressed? Make a Mess! - January 15, 2017
- Creating a Custom 404 Page - January 11, 2017
- 6 Books To Read Now To Make You A Better Entrepreneur in 2017 - January 3, 2017