We’ve all been to a website before and have been greeted with the dreaded ‘Error 404 - this page is not found’ before. Today we’re going to take you through how to create your own custom error 404 pages, explain what the heck error 404 even means, why having a custom 404 page is a great idea. Plus we’ve even thrown in some top tips on how to create a 404 page that converts!
What is an Error 404 page?
An error 404 page is a page that appears when a user navigates to a page that doesn’t exist. Let’s say for example someone types in your url and add ‘/about-us’ thinking that it will take them to your about page, and your about url is actually ‘/about’ then they’ll be greeted with your error 404 page, as the url they’ve entered doesn’t exist, and can’t be found.
The more common scenario with an error 404 page is when someone clicks on a broken link to your website. It could be an archived blog post link that’s no longer live, a page that you’ve deleted or changed the url for, and just a human error when someone is copying and pasting your website link.
Why should I have a custom Error 404 page?
If users navigate directly to your site and land on an error 404 page, then they’re likely to bounce.(Bounce in web terms means they to leave the site.)
If your error 404 is your first impression with your user, then we want to make sure that even though the page they’ve landed on doesn’t exist, you can still encourage them to navigate through your site, browse your products or read your content. By adding your brand and personality to your 404 page, you’re more likely to keep your users browsing.
So, what’s on my Squarespace Error 404 page as default?
Squarespace kindly automatically creates a 404 page for you, but it’s pretty dull. It’s just text and tells users that they can either click back to the homepage or search for something on your site. Yes, that’s useful information to have, but it’s not making me want to browse. Not very compelling huh? Don’t worry, we’ve got you covered…
What should I put on my customised error 404 page?
6 Things to Put on Your Custom 404 page
Here are six things that you can put on your customise error 404 page to make it more compelling to your users, and to keep them on your site!
Change the Tone of Voice, Make it Less Robotic and More Human
Instead of the classic ‘error 404 - page not found’ message which sounds very computer-generated (I always read that in a robot voice for some reason, and you will too, sorry…), you could say something along the lines of ‘Whoops! This is embarrassing, don’t go just yet!’
Add in a Search Bar For Navigating Around Your Site
Squarespace allows you to add a search bar to any page now, which is really helpful. Rather than asking the user to ‘click here to search’ as the template has, we can actually embed a search bar directly onto the 404 page so they can search through your website content without having to leave the 404 page at all, pretty neat huh?
Scroll down to see how to add in a search bar onto your 404 page.
Link To Your Popular Content
If you know that a lot of your web visitors comes to your website to read your blog, or to shop a certain type of product, put links to those pieces of content/products on your 404 page. If the user has landed on your 404 page, you now have the power to influence where they go next…
If you’re an e-commerce website you could have links to the different types of products you sell, i.e Shoes, T-Shirts, Dress, if you’re a service-based business you could link through to the different services you offer, i.e. Branding, Website Design, Social Media Strategy, and if you’re a blogger, you can direct users to your 3 most popular blog posts, or your latest 3 blog posts.
We can use your 404 page to establish your biz and brand!
Add a Way For Users To Contact You
Some visitors will be coming directly to your site to get in touch with you! If they’re greeted with the error 404 page, this is a chance they will leave the site out of frustration.
So let’s make it super easy for them to get in touch with you. You can either add your email address and phone number, or add a contact form onto your 404 page.
Keep Your Content on Brand
You should design this page with the same thought and consideration that you design any other page on your website, as this page is doing a lot of hard work to keep your users engaged.
Luckily, Squarespace’s style editor makes it super easy for us to use consistent fonts and colours throughout the site, but don’t just throw it all together without a thought, which leads us nicely onto our last point...
Don’t Overcrowd It
I know what we’ve said above seems like a lot, but if you think about the design of the page, and the hierarchy of the items, then we can keep the page short, sweet and to the point.
At Squarebase we think the ideal hierarchical structure of a 404 page is:
Humanised headline i.e. ‘Whoops, we can’t find what you were looking for!’
Search bar (allowing users to find the page they wanted)
Link to popular content or products (allowing users to browse and learn more about you)
Contact (allowing users to easily get in touch)
Now you’re armed with all the things you need to create the page, we’ll take you through how to actually construct a custom 404 page on your Squarespace website.
How to Create a Custom 404 Page in Squarespace 7.1
Please note these screen recordings are from Squarespace 7.1, if you are using Squarespace 7.0 the process is slightly different.
Squarespace allows us to create our own custom 404 page. First, we just need to create a new page, we’re going to start with a blank page so we can build our own, but you can create yours from one of their page templates if you want!
We’re now going to move this page into our not-linked section of the panel, as we don’t want the error 404 page to appear in the main navigation.
Adding our human text
Then we’ll add in our text by going to edit, and adding in a text section, and typing!
Add in a Search Bar
To add in a search bar you all you need to do is add a content block, and search for ‘search’ in the search bar (that’s a whole lotta searches!) and voila!
You can choose whether to allow users to only search a specific blog / shop, or the whole site. You can also decide whether you want the search previews to be in light or dark mode by selecting from the drop-down.
Use a Summary Block To Add in Popular Content
You can now add in a summary blog with links to your popular blog posts or products.
Click the plus, to create a section on your page, select > From Blank. Then add a summary block, we’ve gone with a carousel summary block, but you can choose whichever one takes your fancy. You can then select from which source you want to display content, whether it’s a blog or a shop.
Add in a form or contact details
You can add these in my simply adding in a button saying email us and selecting ‘mail’ as the function. Or alternatively, you could add a contact form.
We think contact forms take up quite a bit of real estate on your 404 page, and a contact/email button does the job just fine whilst keeping the 404 page neat and not overcrowded!
Tidy It Up
Now we’ve added all the elements in, it’s always worth having a quick tidy up. We’ve just re-organised the page a little bit so it has more personality and is clearer and even easier for people to navigate through the site.
Pushing Your Custom 404 Page Live
Once you’re happy with your 404 page, you’ve checked the links and it’s looking and feeling more attractive, we can switch out our old dull page.
You do this by going to Design > 404 page > selecting your Error 404 page.
Last Thing - Hide Your 404 Page From SEO Indexing
As we’ve built a custom 404 page, you might get a notification from Google (once you’ve verified your site with Google Search console) saying you have a ‘Soft 404’ alert.
Google can get a bit confused, as we’ve allowed the page to be ‘indexable’ by not switching off the ‘hide page from search results’ tabs in the page settings.
To make sure this doesn’t happen, we simply need to go into the page settings by clicking the cog > SEO > Hide Page from Search Results and switch the toggle over. Easy peasy!
Et voila!
And there you have it - how to create your very own compelling, custom 404 page in Squarespace! If you have any questions about our process, please feel free to ask in the comments on on social media and we’d be happy to help.
