How To Create a Custom 404 Page for Your Squarespace Website
Hey, we've all had it happen to us, right? You click on a link, and instead of going to the article or the webpage you were looking for, you end up getting an “Error 404! Page Not Found!” message on your screen.
And what do you do?
You probably click away or click the back button and start searching elsewhere for that content.
Well, if you're a business owner, that is not what you want visitors doing. You want to keep them on your website!
But how?
Make the “Page Not Found” error message work for you, not against you!
In a few simple steps, you can take that 404 error message and make it work in your favor to keep visitors on your website instead of turning them away.
I’ll walk you through the process of how to do this below, but if you prefer watching a tutorial, be sure to view the companion video on my YouTube channel.
What causes a 404 error?
Simply put, a 404 error occurs when a page on a website has been moved, removed, or the URL for that page has changed without implementing a redirect to the new URL.
(note: there will be a post & video about how to do a redirect too. Subscribe so you don’t miss it!)
Most often, you’ll hear the term “broken link” to indicate when this happens.
Is getting 404/Page Not Found message bad for my website?
The error message serves an important purpose, but there are two main reasons why getting this message isn’t ideal for you as a website owner.
Impact on Website Rankings
Generally speaking, and from the folks at Google, a 404 message by itself won’t hurt your rankings. In fact, it wants to see a proper 404 message if that content no longer exists.
However, if the 404 error is coming from a broken link without a 301 redirect, it can potentially have an impact. This is because Google looks favorably upon links back to your content, so if you have a lot of traffic hitting a broken link, it’s not likely to interpret that positively.
So, check your analytics, and if you see a lot of traffic to your 404 page, you want to figure out why and fix it if necessary.
Lost Potential Clients
In my opinion, this is the biggest potential issue for you. Getting an error message like this can frustrate visitors, leaving a bad impression of your site (and also you), and they will most likely leave your site to look for the information someplace else. In a few seconds, you’ve lost an opportunity to invite them into your space to develop a relationship and help them.
And this is precisely what creating a custom 404 page is designed (haha! Little designer pun there for ya!) to address.
Tutorial: How to Create a Custom 404 Page
Step 1. Find the default system 404 Page
If you’re new to Squarespace, or unfamiliar with how and where the default 404 page is, this step is for you!
On the left-hand navigation menu, go to ‘Design’ and then ‘404 Page’.
Here you’ll see the generic, bland, boring default page layout. If you do nothing, this is what visitors will see.
TOTALLY BLAH!
There is nothing of any interest to keep them on this page or your site so let’s fix that!
Step 2. Create Your Custom 404 Page
Go back to the main menu and select ‘Pages’.
Head to the ‘Not Linked’ area and add a blank page.
Give it a name that makes sense like “Custom 404”.
Design your page how you want! The picture below is an example and incorporates some things you may want to consider including on your page.
Infuse the page with your personality and branding.
Use images, GIFs, or video to grab attention.
Animated text is a fun feature you can use in the heading. (I’ve done that here with the text "‘Oops!” having an animated underline effect when you land on the page.)
Use the text to grab their attention and direct them to helpful resources on your site! In my example I’ve used:
Something went wrong!
We can't find the page you're looking for.
Don't run off just yet!
Below that, point them to some popular content so they'll be encouraged to click through and see if they can find what they're looking for or just explore your site further instead of running back to the interwebs to search away.
One last quick tip:
Give 'em the option to reach out and contact you. They can send an email and tell you maybe what link they were looking for that's broken. Some people are nice, and they'll want to help you out and make you aware.
Or they'll maybe reach out and ask you a question!
Step 3. Check Your Mobile Layout!
Once you have your page created and saved, don't forget to check your mobile layout. This is especially true if you are using Fluid Engine editor. If you are, you can make tweaks to the mobile layout. If you’re not, you won’t be able to make any changes. Regardless, looking at the mobile layout is always a good idea before moving on.
Step 4. Set the 404 Page to Point to Your Custom Page
Once you have your page created, go back to ‘Design’ in the main menu and then to ‘404 page’ like we did in step one.
Next, click the down arrow next to where it says ‘system default’.
You’ll see a long list of pages that you can select and of course you want to find your new 404 page and select it.
You should see your new page come up.
If it all looks good to you, go ahead and his ‘Save’.
You’re all set!
Now, if anybody, unfortunately, comes across a broken link or missing content on your website, they'll see your fabulous custom page and hopefully continue perusing your site and find what they're looking for and not click away.
Wrap-Up
I hope you found this tutorial helpful and will create your own custom 404 page soon!
