There is someone, right now, lost on your site going to a 404 page. This person might be a potential donor, interested in finding more information but they have landed on your page not found. Pause for a minute and think – are you confident that what they are seeing is helping them?
While a generic 404 page that a developer put in place as default is fine, it also isn’t great. Especially as you realize you have missed an opportunity to show your brand voice and how you like to speak with your supporters. What if you tried to deliver a 11 out of 10 star experience on this page?
This article will help map out how you can go from fine to fantastic. Now read on and try not to stress about that lost donor on your site right now…
What is a 404 page
A 404 page is a web page that users view when they enter an undiscovered or incorrect URL in their browser. The error codes 401 and 404 constitute the 400-series of HTTP status codes and tend to indicate an immediate problem with the requested page. Basically, your server doesn’t have the page or content that the user requested.
404s, 301s, 302s
A 301 redirect is a permanent redirect, while a 302 redirect is a temporary redirect. The difference is that a 301 redirect will pass all of the PageRank of the original URL to the new URL, while a 302 redirect will not.
When a visitor visits a page that has a 301 redirect, and then clicks on a link on that page, the visitor will be sent to the new location. But if a visitor clicks on a link on a page with a 302 redirect, the visitor will not be sent to the new location and the visitor’s browser will display a “Bad Gateway” error.
The 4 Things to include on your 404 page
- Clear communication of the 404 so that it is clear in under 3 seconds. If you can’t get your point across in 3 seconds then you need to simplify. There is no reason for anyone to spend more than a few seconds on an informationless 404 page, because the likelihood of them finding what they are looking for has all but disappeared. Recognizing that if your site got them there, it is unlikely they will find what they were looking for while staring at a blank 404 page, drives the necessity of communicating where else they might go or what else they might do instead.
- Site Search is probably the easiest thing in the world to add a dedicated site search box to your 404 page, so that if they do know what it was they were looking for, why not give them an easy way to find it. This encourages people who may not have visited your site previously, and drives the conversion of people back onto your main website.
- Recommended links based on data rather than just editorial decision. Note that Google Analytics can show you the top search terms on your site which may be super helpful for improving your 404 page narrative. What users are looking for can often differ from what the marketing or communications team wants them to look for.
- Show your brand to answer why is there no content!? This is an opportunity to deliver honest that also that makes people smile because they are probably surprised, possibly frustrated not to find what they are looking for. This is also where your brand voice (helpful, fun, interesting, etc) can come out to deepen a relationship with the audience.
The 4 things NOT to include in your 404 page
- A list of random articles the editorial team wants to promote
- Ads or pushes to buy/donate
- A large header that pushes down the information that the page doesn’t exist
- A bunch of social share buttons – these sometimes get added automatically and clearly don’t belong on a Oops page.
Examples of nonprofit 404 pages
Donate Life America
Site: https://www.donatelife.net/404
- Clear comms: Somewhat, the text doesn’t explicitly say the page is a 404.
- Site search: Yes with recommendations for getting accurate results.
- Recommended links: No.
- Brand answer: Yes, the copy actually feels human and not like an automated page.
Habitat For Humanity
Site: https://www.habitat.org/thisisnotreal
- Clear comms: yes, above fold
- Site search: yes, in header
- Recommended links: yup
- Brand answer: good imagery, concise answer
Oregon Tilth
Site: https://tilth.org/womp
- Clear comms: yes, but pushed down by large header which could slow comprehension
- Site search: yes
- Recommended links: not beyond the homepage
- Brand answer: concise and apologetic
Kiva
Site: https://www.kiva.org/ASDF
- Clear comms: Pretty close. The title explains what happened without including the 404.
- Site search: Yes.
- Recommended links: Yes.
- Brand answer: Not quite. The copy is concise but doesn’t include any branded messaging.
FreeCodeCamp
Site: https://www.freecodecamp.org/fakesite
- Clear comms: yes, above the fold in brand style
- Site search: yes in the top left header
- Recommended links: yes, point toward curriculum
- Brand answer: yes, shown in the style of site and a fun quote
ProCon.org
Site: https://www.procon.org/asdf
- Clear comms: yes
- Site search: yes, in the header and body of the page
- Recommended links: yes
- Brand answer: yes, concise and focused on articles
Big Brothers Big Sisters of America
Site: https://www.bbbs.org/404
- Clear comms: yes, the above fold clearly
- Site search: yes
- Recommended links: yes
- Brand answer: concise, article imagery shows a little bit of brand
Why do we call it a “404 page”? A Quick Funny History
Based on internet lore, the 404 error message goes back to the 1980s when a group of scientists at CERN (Switzerland) were working on the World Wide Web. The database was located in the office on the fourth floor of a building — room 404 (you see where this is going…).
The folks there had to manually find requested files and send them over the network to the person who made the request. When problems with not finding some these files came began to increase, the people that made the bad request were were sent standard message: “Room 404: file not found”.
This then evolved and was adopted into HTML standards in the late 90’s to the 404 Page we all know and love.