The value of a customized 404 error page

MacBook, coffee mug, and cactus

Updated on March 19, 2023

A “404” is the error code returned by a server when an accessed URL isn’t found.

It’s one of the most common error codes online. Some sites throw up the default 404 error page. However, others opt to create customized versions.

Reasons for a customized 404 page

There’s a few reasons to customize a 404 page:

To make your 404 page useful (and keep visitors from leaving)

My 404 error page
My 404 error page.

You don’t want visitors to leave just because of a broken (or mistyped) link. Customizing a 404 page beyond your server or theme’s defaults can help visitors at least attempt to find what they want.

Some things a customized 404 page can offer:

  • A link to your home page. This is the recommended minimum item to include.
  • A search bar.
  • A list of recent and/or popular pages or blog posts.
  • An email or contact link to reach the site’s owner.

Keeping a similar look and/or branding to the rest of the site (such as using the site’s navigation bar, etc.) can also help.

In WordPress, many themes will include a basic 404 page template, featuring most or all of the above.

For entertainment purposes

While nobody likes broken links, a 404 page can still try to keep things light for those unfortunate enough to land on it. Such customized pages can include jokes, puns, cartoons, and so forth.

That said, a 404 page should still adhere to the recommendations above and be helpful, or at least include a link to the home page.

Customizing the 404 page in WordPress

In WordPress, most themes will include a 404 page template. Customizing it usually requires either:

  • Edit the WordPress 404 template using PHP, HTML, and/or CSS. If going this route, make sure you’re using a child theme for WordPress, and edit the 404 template there.
  • Some themes (usually premium ones) might offer an option to customize the 404 page.
  • Using a WordPress plugin. I haven’t tried this, but there’s several plugins available that’ll let users customize a 404 page as easily as any other page.

Customized 404 page examples

Some of the bigger sites online have memorable error pages (yes, I typed “memorable” and “error page” in the same sentence).

Google

https://google.com/404

Like Google’s main page, their 404 page is pretty plain: a picture of a robot, a 404 error statement, and a link back to their main page.

Amazon

https://www.amazon.com/404

Amazon’s 404 page features the various dogs of Amazon employees; a different dog appears when the page’s loaded each time.

NPR

http://www.npr.org/templates/story/story.php?storyId=404

NPR’s 404 page includes links to previous NPR stories about famous missing people (Amelia Earhart), mythical places (Atlantis), or things (luggage).

ABC

http://abc.go.com/404

ABC’s 404 page features an appropriate (if now a bit dated) reference to the hit 2000s TV show “Lost.”

If curious, the “go.com” domain that ABC uses is an odd remnant of a late 90s attempt by Disney at creating a portal page to rival those of then-popular sites like Yahoo’s. It failed, but for whatever reason, ABC (and a few other Disney properties) still host their main sites on a go.com domain.

Spotify

https://www.spotify.com/us/404/

Spotify’s 404 page features a vinyl record playing.

Nickelodeon

http://www.nick.com/404/

Nick’s 404 page has a simple error explanation, a link back to the main page, and a graphic of a nervous-looking SpongeBob SquarePants.

Disney Channel

http://disneychannel.disney.com/404

Disney Channel’s 404 page features the Walt Disney Company’s most famous character, Mickey Mouse. Maybe more appropriately, the main Disney site‘s 404 page features Goofy.

Anthony’s Notes

Finally, there’s my site’s 404 page. While my theme includes a basic 404 page, I modified some of the headline text, and added a Creative Commons stock photo.

Anthony Dean

Anthony Dean is the owner of Diverse Tech Geek and Diverse Media Notes.

View all posts by Anthony Dean →

Leave a Reply

Your email address will not be published. Required fields are marked *