What is a 404 page?
A 404 page is also known as an error page or a “page not found” page, which happens when the requested link cannot be found, or returns no information.
Why do they appear?
404 pages can appear due to many reasons, it can be either the visitor’s or website’s fault.
Usually a 404 error appears due to the requested URL content being removed or moved to another URL. Sometimes it can even be due to human error, such as a typo or an invalid link.
How to avoid 404 errors on your website
Now we know what they are and why they appear, let’s try to avoid these from happening on your sites to keep your visitors engaged.
Add 301 Redirects
This is the most effective way to ensure outdated links are going to the right place.
A lot of Content Management Systems come with the ability to add 301 Redirects if you’re an admin, if not, there’s likely a plugin you can add to create this functionality.
It’s best practise to do this as even though links are updated on the site, search engines (such as Google) will still have a link to the previous URL until the site is reindexed.
What if I want to do it myself?
Some FTP knowledge is required
We advise using the CMS option if it’s available, but if you’re going to install an additional plugin, perhaps trying the below might be less strain on the site. If you’re feeling confident, try the below:
You’ll need access to the .htaccess file, it can be found at web route folder of your website (typically at the top if you’re looking at the folders alphabetically). If you can’t see this folder, it’s likely that your website hosts have hidden this. This isn’t unusual, as changes to this file can stop the website from functioning correctly.
Redirect 301 /old-page/ http://www.yoursite.com/new-page/
Update http://www.yoursite.com to your domain, or the redirect location. If this is on the same domain, you can remove the domain completely for simplified code.
Update links
Even though we have a 301 Redirect in place now, we still need to get the old links updated on the site.
If your website is quite large, I’d personally advise running a database Search & Replace, as this is where the links are likely stored if you’re using a CMS – this will save you lots of time running through each page. This looks through the entire site (such as pages / posts / comments) for anywhere that has the /old-page/ defined and update it with our new link that we can define.
I’d then advise we run through the FTP, again running a Search & Replace. This will change anywhere in the raw code that has the old link defined.
Make sure you aren’t updating the .htaccess file
Use hooks instead of raw code
This may seem quite scary, but don’t worry – we’ll run through this together. Each page has its own location in the database, as its own stored fields (such as title and URL). Instead of adding /new-page/ to the code, we can retrieve the correct URL from the database (which will always be up to date).
For example, with WordPress, we can use: get_the_permalink( 123 )
This will retrieve the link URL of the post with the ID of 123, ensuring it’s right every time. This is why at DigRex, we avoid using traditional page builders.
Designing a 404 page
Even though we, as website owners, can do everything within our power to avoid 404 pages, they can still appear due to user error, or curious cats, who want to see what you’ve come up with.
Thus, we must be prepared and setup a nice 404 page for these people to visit should something go wrong. Here are some tips for a 404 page.
Make it fun
This is probably the best advise we can give; an error page is not what the visitor wants to see – it can be annoying for them and potentially make them click off. This is where a positive experience turns it around.
The visitor has landed on the error page, what’s to keep them on your site? Some fun, something that’s going to make them smirk, have a giggle, or interact with. It’s going to make them forget about the error altogether – keeping them from clicking away.
Keep it on brand
This is your website’s 404 error, it should be tailored to you and what you do, but also keeping to the styles of your site. If you’re using abstract shapes, add some big abstract shapes that define the page – perhaps moving around slightly.
For example, our 404 page has a dinosaur coming out of the page (using a page tear), following styles that we have throughout the website.
Don’t overcomplicate it
Keep is simple, it’s a page to inform the user that there is nothing on the link they’ve ended up on.
The purpose of this page is to direct them back to the site and working links, nothing more. The content can change but the purpose is the same.
Things to consider adding
Whilst ensuring the page is simple, here are some extra things you might want to consider adding.
Search box
If your website has a search function, adding the box here allows the user to find the right page with the correct link.
Things to check
You can add a list of common errors that the user should check. Such as:
- Spelling errors
- Case sensitive URL’s
Add a home link
The visitor has arrived on this page, give them a button to get out of it. Usually it’s best to send the visitor back to the homepage.
