The important page your website might be missing
In one of my recent posts, 20 Common Web Design Mistakes to Avoid in 2021, I mentioned a mistake that I think many people overlook - having a generic 404 page. But what exactly is a 404 page and what should you include?
What is a 404 page?
A 404 page is the page of your website where visitors land if they go to a URL that no longer exists. This usually happens if you’ve moved, renamed, or deleted pages from your website. It can also happen if a visitor types in the URL incorrectly, the page never existed, or your website server is down.
Most website platforms automatically generate a 404 page with a simple message like “the page you're looking for can't be found."
A generic 404 page like this isn’t the worst thing in the world, but you can get a lot more out of your site if you strategically design this page.
What should I include on my 404 page?
A good 404 page includes a few things:
An on-brand headline letting people know that they’re in the wrong place
A link back to your Home page
1-3 options for where to go next with clear calls-to-action
A search bar for people to find what they were looking for
I've collected some of my favorite examples of 404 pages that might inspire you to get creative and create something that will build upon your website strategy, even when people end up in the wrong place.
Amazon
Amazon’s 404 page is clean and simple. It has an easy to understand message and a search bar. It also makes the page fun by rotating through the different dogs of Amazon.
Apartment Therapy
Apartment Therapy stays on brand with a fun headline and image. Instead of a call-to-action that leads to a specific page, they highlight some popular blog posts, a great choice for this type of website.
Chewy
Chewy’s 404 page it totally on brand with images of the team’s dogs, a search bar, and a button to go back to the homepage. Simple and fun!
ConvertKit
ConvertKit doesn’t get fancy with it’s 404 page, but it is effective. They include a rotation of images of the team’s dogs (I see a theme here) and a link back to the homepage. Since their menu has most links people are looking for, this is a great option to get people moving quickly.
Help Scout
Help Scout uses a cute headline and graphic to match, along with links to learn more and search their help pages.
Kat Schmoyer
In the creative entrepreneur realm, Kat Schmoyer has a simple headline and links to the most popular options in branded colors.
Lego
Lego makes their 404 page really fun with an image and headline that perfectly fit their brand. Their call-to-action leads to their store (the place most people are visiting) and has a search bar. “Everything is STILL AWESOME!”
Lemon and the Sea
The Lemon and the Sea 404 page (yes, I’m a little biased) includes links to my services and my blog, the most visited pages on my website. I also include testimonials as an added element.
Marvel
Marvel’s 404 page changes occasionally, but always features a character image and matching text. I’d like to see a search bar included under the headline, but you can find it in the menu.
Pixar
Just in case you need another reason to love Pixar, their 404 headline is perfect! Again, they don’t include a call-to-action, but you can find all their links in the menu, so they don’t need one here. Plus the white space is very on-brand.
Showit
While Showit’s 404 page design isn’t my favorite, I do love how well they know their audience. The image (from The Office) and text is right up the alley of their customers. Plus they include a search bar!
Systems Saved Me
The Systems Saved Me 404 page is a great example of a simple, effective 404 page for creative entrepreneurs. The image is great, the headline is easy to read, and the calls-to-action highlight the three most important next steps someone might take.
Designing a 404 page in Squarespace
Every website platform has a different method for designing your 404 page, but in Squarespace it’s pretty simple and you aren’t limited by a pre-designed template.
Instead, you can design your custom 404 page just like you would any other page in the Not Linked section of the Pages menu.
Then you can then choose that page as your 404 in Design > Not Found / 404 Page.
