A 404 webpage is returned whenever a user mistypes a URL, follows an errant link, or lands on a page that has moved or been deleted.
This type of page is only returned in the event of an error, so there’s little point in putting effort into your website’s 404 offering, right? Won’t users just hit the back button if they see a 404 page, whether they were on your website immediately prior?
Well, the answers to those two questions are no and not necessarily.
Companies who take the time to fill out their website’s 404 page can demonstrate the three following characteristics:
- Their personality
- Their level of creativity
- Attention to detail
Filling out your website’s 404 page signals to your existing and prospective customers that you’re thorough and that you care about your website’s user experience. There’s also some strategy involved in how you attempt to direct visitors from your 404 page. And ultimately, there’s SEO value in how you handle your 301 redirects and when the 404 page actually appears. If numbers like 404 and 301 don’t really ring a bell, learn about all of the HTTP response codes in this comprehensive list from Mozilla.
In this post, we’ll take a look at:
- Why 404 pages appear
- How to lay out your website’s 404 page
- Some top examples of 404 pages across the internet
- When to redirect 404s and when it’s OK to leave them be
Why 404 Errors Happen
Ideally, a user would never land on a 404 when trying to access any area or any file of your website. But it’s going to happen eventually. Your domain doesn’t cover every imaginable combination of letters, numbers and symbols past your .com (or whichever top-level domain extension you use), so 404s are bound to happen every once in a while, no matter how well you cover your bases with 301 redirects.
404 pages aren’t the end of the world. Someone either just flubbed a character or two in manually trying to reach a page on your site, or maybe another website or social media user tried to link to your site but errantly copied the URL. Anyone who tries to follow a faulty link will land on a 404 under your domain.
Thankfully, Google doesn’t penalize your site for returning a 404 page here or there. But if you have an inordinate amount of 404 errors on your hands, then you have a problem. Running a site-wide crawl and then 301 redirecting any broken links will fix that issue right up for you.
Besides deleting a page entirely or slightly tweaking an existing URL, 404s can also happen when you move your entire website to a new domain. You need to 301 redirect every single old URL to the equivalent version on the new site. Links to your old address will get broken if you don’t redirect them to the new domain. Think of it like forwarding your snail mail to a new address.
404 Page Optimization
While you don’t want the search engines to index your website’s 404 page, your objective here is to entice users toward another section of your site.
Besides some snappy graphics and language that makes it clear that there’s a problem with the URL, your 404 page should also maintain the same menu layout as the rest of your site. This includes an easily identifiable button (usually your logo) that takes the user to your homepage.
Here are those strategies in action, as seen on our 404 page:
Our error page also includes a search field so users can type in a term if they’ve deliberately landed on our website expecting to read about a certain topic.
Google itself has a few suggestions for creating 404 pages, including the idea of adding links to your most popular pages, blog posts, etc.
Adjusting URLs and Redirecting
And finally, when it comes to optimization, there are two steps you should take that don’t deal with the 404 on-page content itself, but instead concern URLs.
First, cover your bases by directing any logical misspellings of your site’s main URLs to the correct address. What this means is if you have a Services overview page, your URL will probably will look like “www.example.com/services/.” If somebody just types in “service” at the end of that string, you should have them redirected to your Services page, rather than returning a 404 for such an innocent mistake.
Another example is if your About page is structured as “www.example.com/about-us/,” make sure you have “www.example.com/about/” redirect to the correct URL. Take time to do this for every major page of your site, rather than leaving your 404 page as catch-all for common misspellings or variations of primary URLs.
Second, although your 404 page will show up for every errant URL related to your domain, make sure it actually shows up if a user searches for it directly, such as if they type in “www.example.com/404/.” You’d be surprised how many websites with even the best 404 pages have failed to get this right.
Speaking of the best 404 pages, let’s look at some shining examples across the web that may give you a little inspiration on how to flesh out your website’s error page.
Awesome 404 Page Examples
You can tell that many companies and individual website owners have fun with their 404 pages. As I mentioned earlier, it’s a chance to show off your creativity and even the personality of your business. It’s also just one more place where you can reiterate your brand strategy, as you can see in our 404 example above.
While no 404 page category has been created yet for either The Webby Awards or the American Advertising Awards (fka the ADDYs), there seems to be a healthy competition on the internet for who can serve up the greatest 404.
Beware that if you try to use copyrighted material on your 404 page, you may get sued or at least asked to remove the content in question. Two sites on this TIME “Web’s Best Error Pages” list from 2014 have found out the hard way, as you’ll no longer see images from “Dumb and Dumber” and “Jurassic Park” if you click on the links provided in the TIME article.
Here are some exemplary static and interactive 404 pages that you can find across the internet currently:
Stellar Static 404 Pages
Universally recognized ketchup-maker Heinz could probably use an update of its website, but its error page has been catching eyeballs for years, and is still top of the line. Not only does Heinz feature its iconic ketchup bottle in a metaphorical way, but the page is optimized in a manner that lets visitors easily navigate toward other parts of the overall site.
When you land on this page, it’s readily apparent which site it belongs to. The broken heart image easily ties into eHarmony’s overall brand. The page also gives you clear options on where to go next.
Awesome. Mashable’s toe-ripping-through-a-sock image on its 404 page is unforgettable. A search field is also provided and the main navigation is right at the top. This media company certainly put much more effort into its 404 page than most other national news-related sites have cared to.
CSS-Tricks is an online community for web developers, and its 404 page plays right into its audience. The only problem here is the page offers no links to the rest of the site, or anywhere else, for that matter. Great image, though. If you look at the meta title, it explains the concept of this 404 page: “You’ve ripped a hole in the fabric of the internet. Love, Chris from CSS-Tricks.”
Impressive Interactive and Non-Static Pages
There’s a lot to see but not a lot to do on BlueDaniel.com, home of Daniel Karcher Film Design Studios. The homepage is just one full-browser video with audio and no clickable buttons or text. The 404 page, however, is as great as any you’ll find. It takes place in a subway station and has a moving passenger train. The motion image features posters for the TV series “LOST” and film “The Missing,” and a subway sign that reads, “Please proceed to the main level.”
Online itinerary maker Tripomatic can also make a case for best 404 page on the web. This page features a full-browser scene of a sun and moon setting over a desert landscape. The scene goes from dawn to twilight to dusk, and it loops endlessly. The website’s navigation is not featured, but there is a large button to go to the homepage.
Can’t find a page on BlueFountainMedia.com (a digital marketing agency)? No problem. Just play “Pacman” instead, as featured on the website’s popular error page. The average time on page must be insane for this creative offering.
Hot Dot Productions, a digital artistry firm, offers an error page that features a large “404” made out of tiny, pulsating dots. The page interacts with your browser as well, changing your vantage point of the manic dots.
Email service provider MailChimp serves up a 404 page that features its recognizable mascot in an eerie forest setting. Fog slowly creeps across the frame, adding to the uneasiness. If this scene creeps you out too much, you can easily access MailChimp’s navigation at the top or search the site using the field right above the green-looking monkey.
This error page is currently the best thing about Tinsanity.net, which has no content at the moment and a homepage that only links to two other sites. This 404 page features a panicked cup-and-straw beverage that skips frantically across the screen. There’s also some (very loud) audio to go with it.
When to Redirect 404s
Some websites are coded in a way that any time a visitor prompts a 404 error code, he or she is redirected to the homepage. This is known as a global 404 redirect. Although this seems like a viable way to keep visitors on your site when a 404 is served, it actually frustrates many users. They might think it’s a glitch, or because they came to your website looking for specific information, showing your homepage instead does nothing for them.
Instead of employing a global redirect, just take the time to spruce up your 404 page and run a site crawl to help you mitigate how many times users are receiving this error code. If some of the 404s keep coming from in house (meaning you have a navigational or other internal link that is broken), make sure you fix the error right away.
But What if I Have Backlinks to a 404 Page?
A backlink audit will tell you if other websites are still linking to a deleted or moved page within your domain. For a refresher on backlinks and to see which tools you can use to run this type of audit, click here.
If any external sites are linking to what is now a 404 page on yours, you should be choosy about which links you want to keep. If the page has simply been moved, you can 301 redirect the broken link to the new address, but it’s actually better to contact someone affiliated with the site linking to you and provide them with the new URL for the link. Links that pass through a 301 in order to reach their destination lose a little bit of power in Google’s eyes.
The above tactic should only apply if it’s a link you want to keep. If a low-quality site is linking to what is now a 404 page on your site, it’s actually not detrimental to your SEO to let the link stay as is. Backlinks from highly authoritative sites are the ones you want to uphold. Low-quality inbound links that produce a 404 error can remain in limbo.
If you’ve deleted a page that still has a link you’d like to keep, try to find the most relevant content on your site to redirect it to, or you may even want to create a new page that features the information that inspired the link in the first place. From there, you’ll either 301 redirect the link to the new page you’ve created, or you’ll reach out to the webmaster of the other site to give them the URL for your new content.
Have Fun with It
Spend some time and have a little fun with fleshing out your 404 page. Granted, you don’t want your site to return a 404 response too often, but it’s not catastrophic to have it show up once in a while. Plus, some users might get a kick out of how much creativity you put into it.
If you’d like a custom 404 page built for your website or if you need help with redirecting 404s and seeing how often they’re showing up for your visitors, contact the digital marketing and design experts at Eminent SEO today by calling 800.871.4130.
