The other week Shelby Thayer wrote an excellent post titledInstantly Actionable – The 404 Page. Reading through her post got me thinking this is definitely a Web Standard that every site needs to implement properly, but very few take the time to do it. Nobody likes to see an ugly “The page cannot be found” error page. This has to be one of the quickest ways for a visitor to leave a site and has to have a high exit rate on this page, but most people don’t even track this page so they have no way of knowing even this little bit of information. Just for the record since I started tracking this two weeks ago the exit rate is only 29%. Not as bad as I would have thought, but definitely higher than the site as a whole.
I’ll admit we actually didn’t have a proper 404 page for Wofford’s website until reading Shelby’s article and spending the short amount of time to create the page and set it up properly really got me digging into proper standards for a 404 page. I always set them up for my other sites, but IIS and .Net still isn’t my favorite so I don’t quite know it as well. Bottom line is having a page that has the normal look and feel with navigation on your site at least gives your user an easy way to try again.
Also as Shelby mentions setting up the Google Analytics tracking code properly on your site also lets you know what pages users are looking for and not finding. Check out Shelby’s post for details about the tracking code, but above is what the code looks like on Wofford’s 404 page. This can help you find broken links and maybe landing pages that just aren’t there anymore, but people continue to look for through bookmarks or typing in the URL.
Properly Configuring a 404 Page with Apache
This could not be simpler in Apache. Once again go and edit your .htaccess file which is in your root directory and add the following code. You can change the /errors/404.php to whatever is the location of your custom 404 error page.
<IfModule mod_rewrite.c>
RewriteEngine On
ErrorDocument 404 /errors/404.php
</IfModule>
Properly Configuring a 404 Page with IIS
Although it’s not quite as easy to configure a default 404 page in IIS as it is in Apache it’s still extremely easy to do. Once you have created your landing page you simply need to go into IIS right click on site and go to “Properties”. From here look for the Custom Errors Tab and find the 404 Error option and edit it to point to your page you just created.
If this explanation isn’t simple enough here is a little more in depth article about how to setup a 404 page in IIS properly.
Now What and Additional Enhancements
So now you have a custom 404 page setup that just isn’t giving individuals a blown up page, but actual branded look to the rest of your site with your basic navigation structure. Also because you have the Google Analytics code installed properly you are logging this data so you know what people are looking for and not finding. This logging data also tells you where people are coming from if it’s a page on your site so you can update the link. VERY COOL!
A great example of a “well duh moment” that I quickly noticed was users were searching for wofford.edu/admissions. I’m sure at many schools this is a big debate to go with admission being plural or not. Well if someone went to the plural option they were returned with a big ugly 404 error page. With this knowledge it was simple enough to go setup a permanent 301 redirect to forward all this traffic to wofford.edu/admission without the user even realizing they went to the wrong place. Yes you can automate customer service for a website! More about 301 redirects next post though.
Another user friendly step that you can take that I recently discovered is the Google 404 widget. Definitely read this post on the Make your 404 pages more useful on the Official Google Webmaster Central Blog. The widget will allow you to easily offer Google search results for your site and offer suggestions of what the user might have been looking for. All that you need to do is login to your Google Webmaster Tools account then go to Tools -> Enhance 404 pages to grab your customizable code and stick it on your page.
Additional Reads on 404 Pages
- Wikipedia on Custom Error Pages
- The Perfect 404 by A List Apart
- in Google Webmaster Help Center
If you have any other definite reads on 404 leave a comment and I’ll be happy to add if appropriate.
You could always use Google Webmaster Tools to find 404′s. See slides 18-20 here:
https://www.slideshare.net/bradjward/i-can-do-that-with-google
I definitely slid past the last paragraph before posting and it caught my eye as I hit submit. I defer back to the Guru.
@Brad - yeah you can get that information through webmaster tools. But that doesn’t tell you what page they came from on your site. This can be a useful way for your users to tell you where broken links are. Of course if it’s coming from an off site link then this will be null.
Yeah that 404 widget is really nice as it attempts to suggest things and or link to the root directory. It’s always got to be about making your site as user friendly as possible!
I’d like to tout our new 404 page https://www.yu.edu/404 i think apple probably has the best 404 pg i’ve seen.
Thanks for the mention, Kyle. Great in-detail post. I didn’t know about Google’s 404 widget. Very interesting. I’ll definitely have to check that out.
Shelby
This option is pretty nice … you can offer a sitemap or other options, but it also gives visitors an opportunity to immediately send you an email letting you know you have a problem.
https://www.alistapart.com/articles/perfect404/
Oops, I see you link to that above … on additional reads … sry.
Eric,
Sitemap is a good point that I need to update the post to mention. We actually have a link to our sitemap off Wofford’s 404 just because that’s good practice, but i should have mentioned it. As far as sending an email every time your potentially looking at hundreds of emails a day and lots of them will just be junk. I think the Google Analytics approach works a lot better because you can check it once a week, once a month or whatever and it tracks trends, number of hits to certain pages and other things. It might not immediately notify you, but it all gets logged.
We use the google webmaster 404 tool (https://www.uwgb.edu/asdf), but I also added a little bit o’ javascript that sends google analytics the page they came from
pageTracker._trackPageview(“/404.html?page=” + document.location.pathname + document.location.search + “&from=” + document.referrer);
Thanks for the article.
Why is there mod_rewrite stuff? You shoud take out everything but the ErrorDocument directive in the Apache example…