Uh-oh!
Something went wrong. Now what do you do to keep visitors who’ve landed on your 404 page from navigating away from your site?
Your WordPress theme likely has a pretty basic 404 page that displays when users try to navigate to a page that doesn’t exist. There’s probably a simple text phrase describing the error and if you’re lucky, your header and footer are included as well.
However, you don’t have to use the default 404 page that comes with your theme – and you shouldn’t. A 404 error page doesn’t have to be a dead end for your user. Instead use your 404 page to entertain, engage, redirect, or even convert your visitor.
In this post, you’ll learn what elements make up the anatomy of a perfect WordPress 404 page, why each element is important, and how to make your own custom 404 page.
The Problem with 404 Errors
Website errors happen from time to time. A 404 error could be caused by a number of simple mistakes:
- You could have a link here or there pointing to a permalink you’ve since edited.
- A visitor could share your latest post on Facebook, but make an error pasting the link.
- You could send out your latest e-news update and make a typo of your own.
The problem isn’t so much that an error has been made, it’s how to keep the visitor engaged with your website when they encounter an error. A great WordPress 404 page could be the key to turning an oversight into an opportunity. Yet, you may be wondering what you need on your site’s 404 page to keep the user engaged.
The Anatomy of a Perfect 404 Page
There’s more than one way to engage a website user. You can use words or imagery to show your personality, but what else could you do? You could also give the user an easy link back to your homepage, ways to connect, or even the ability to search for the information they were expecting to see. Let’s take a look at how a few other websites have worked with these elements to build their 404 pages.
The Copy
The copy for your 404 page should be a message that fits your site and your goals. If your site is serious, maybe your 404 page copy should be too. But if your site is quirky, geeky, or otherwise full of personality, feel free to let that shine through.
Maybe your site is a straightforward, no-nonsense informational site. Fuelly’s 404 page is one example. No witty words or puns here.
South Park Studios’ 404 page, on the other hand, is a different story. This makes a lot of sense, because South Park is very different brand.
This 404 page references a character whose line appears several times in the satirical TV series. It’s easily recognizable for fans of the brand, and it doesn’t hurt that the red text links back to the homepage.
If your website is a place that provides a lot of information to users, like Mozilla’s Firefox, perhaps your 404 page copy should be more detailed and clearly list some options for the user. Mozilla’s 404 page takes this approach:
The Visuals
You may have noticed that it’s not just all about words for these 404 pages. Visuals play a huge role too. Whether it’s a logo, a visual familiar to your users, or an original illustration, a 404 page is a great place to have fun with your imagery.
Knowing their users were fans of geek culture, code hosting repository GitHub created a custom Star Wars parody graphic for their site’s 404 page. They even threw in a parallax effect for good measure.
Did you know that an error page could even be the perfect spot for a custom video? It can. The Internet cartoon series Homestar Runner has several great error pages, including a fun 404 error page. Their ‘System is Down’ error page though really takes the cake, with an audio–visual skit played out between three of the cartoon’s main characters.
The visuals for your 404 error page don’t have to be goofy though. You could use custom photography or film as part of your 404 page, like Spry Group Digital Interactive Agency has:
The Search Box
Words and images (and even videoes) are great elements to include on your 404 page, but these alone won’t help your users access other site content after landing there. One way to help your users move on after a 404 error is to include a search box.
Let’s take another look at that GitHub 404 page. Below the great Star Wars parody graphic, this site includes a search box to help users find “code, projects, or people” on the site.
The Redirect
You’ll also notice that many of these sites’ 404 pages have a link back to the homepage. For Fuelly and South Park, it’s done just as a text link. Other sites, like Spry Group, make a large button. However, for large sites with lots of content, your users may appreciate more options than just a link back to the homepage.
The Delaware Government’s 404 page just about has it all. There’s a menu, several hyperlinks that lead back to the site’s homepage, a search box, a witty text and visual combo, social profile links, and access to a number of site resources and directories.
The Share
Speaking of social, your 404 page can also be a great place to ask your visitors to share your content or connect with your social profiles. The Delaware Government page gives prominent links to its social profiles, but social media giant Twitter turned its 404 page into a major social opportunity.
Visitors who happen upon this page can share one of the ironic 404 tweets, follow the account, or access other Twitter content through the trending topics or search box.
To be sure, there are some pretty fun examples of 404 pages out there, but you don’t have to be a seasoned developer to create your own. You could get all of the benefits of a great 404 page with an easy to use plugin.
The Perfect WordPress 404 Page Plugin
This post hopefully got you thinking about some great ideas you could try for your own 404 page, but you may be wondering how you’ll pull it off.
We don’t want to brag, but SeedProd does have a pretty amazing 404 page plugin for WordPress. It’s easy to set up, fully customizable, and can do all of the things we’ve discussed in this post. Take a look!
The 404 Page Pro for WordPress by SeedProd
SeedProd’s new 404 Page Pro plugin enables you override the default 404 page for your site with a custom 404 page. This plugin lets you create text, imagery (including video), a search box, hyperlinks, and social links to easily display on your 404 page.
Our plugin also features a prominent lead magnet where you can collect email addresses for your newsletter or database. It’s a great feature we didn’t see on many 404 pages out there, but one that could really make a huge difference for your website marketing efforts.
Head over to our 404 plugin product page to learn more and get started with building your own perfect WordPress 404 page.
We’re excited to see how you customize your own 404 pages with the 404 Page Pro plugin. Share your thoughts on the perfect 404 page in the comments below!
The post The Anatomy of the Perfect WordPress 404 Page appeared first on SeedProd.