Customized 404 Search Pages, Without the Monopolist
June 3rd, 2008Just today, I saw an article that was talking about Microsoft’s intention to update those all-too-familiar “HTTP 404 - Not Found” pages that we all see from time to time while touring the web.
According to the article, Microsoft will be updating their websites to offer a Windows Live Search capability on any 404 page which is generated - so that users may quickly resume their quest for the elusive information they are seeking.
In fact, Microsoft is even releasing a Web Page Error Toolkit to enable developers on MS IIS servers to integrate this functionality into their own websites. (According to the article, the toolkit allows for configuration of the web search engine, to be fair.)
From the picture in the article, it actually appears that the Microsoft solution automatically provides search results - or are those placement ads? That’s one way to ensure your search engine usage rates rise, no? Anything to trump Google, I suppose.
So, in the interest of equal time, here I will go over how I use a simple setting in the Apache web server to achieve nearly the same results, and how you can integrate Google Adsense for Search to become a gazillionaire like me.
Of course, this behavior is not in any way revolutionary, or remotely new for that matter - this is a function that I and many developers have been utilizing in Apache-hosted sites for years. As a matter of fact, it is one of the more simple usability updates you can make to a site you host, and it keeps visitors from leaving in frustration over a typo’d link or moved directory, which happen more often than we developers like to admit.
So, how do we implement our own customized 404 error page (or any of the myriad other errors that can come up), complete with search functionality to help our misrouted visitor find the proverbial cheese?
Let’s create a Google Search Page
Most of the heavy lifting here will be done by Google Adsense, after logging into your account you will want to choose Adsense Setup - Adsense for Search. There aren’t too many options, mainly you need to choose if the search should extend to the entire web or not, and some color choices which will be completely dependent on your theme.
At the end of the process, Google will create a code block which you can insert to your pages. This code will create a Google search form with the settings you specified.
Now, let’s create a simple HTML page which will house our Search form, while gently breaking the news to our visitor that we were unable to fulfill their request. But, we don’t stop there; also, we provide our visitor with some choices as to where to go next.
Generally, in addition to the search form, you will want to include links to the website home page, as well as a site map or index if one is available. Also, it is very helpful for many users if you also give them a few ‘pointers’ on how to successfully search for the information.
Consider the following (the code for this ultra-simple search dialog is below):
404 Error - Page Not Found
Your Request Could Not Be Completed
The Document or Resource that you were looking for could not be found, it could be that you mistyped a URL or followed an outdated or incorrect link.
Where to go from here
- Check the URL if you typed it yourself.
- Visit the Site Index to find what you are looking for.
- Visit the Home Page, or use the navigation links to the right.
- Search for what you were looking for below:
Okay, so now we have a simple, generic search page that we can provide to our users who have lost their way. Save this file as ⁄not_found.html, for example.
Enter .htaccess
Perhaps one of the most mythologized and misunderstood configuration files in all computing, the Apache .htaccess file is where all of the magic happens.
Open up the .htaccess file in the root directory of your webserver (often www or public_html) with a regular text editor such as Notepad, or Kate, and add the following line:
ErrorDocument 404 http://www.yoursite.com/not_found.html
Now, whenever Apache receives a request it cannot fulfill due to a 404 error, it will instead send your visitor to your fresh new Search page. Really, that’s it.
Try it out, head on over to www.shopholbrook.com/gobbledygook for an example of how a user-friendly site can provide their visitors with the capability to solve their own problems.
Look Ma, No Monopolist!
(This was a 15 minute quick lesson, look for more information at sites such as A List Apart for further discussion and ideas.)
Code Listing:
<h2>404 Error - Page Not Found<⁄h2>
<h4>Your Request Could Not Be Completed<⁄h4>
<p><em>The Document or Resource that you were looking for could not be found,
it could be that you mistyped a URL or followed an outdated or incorrect link.<⁄em><⁄p>
<h4>Where to go from here<⁄h4><ol>
<li>Check the URL if you typed it yourself.<⁄li>
<li>Visit the <a href="⁄sitemap.php">Site Index<⁄a> to find what you are looking for.<⁄li><li>Visit the <a href="⁄">Home Page<⁄a>, or use the navigation links to the right.<⁄li>
<li>Search for what you were looking for below:
<form method="get" action="http:⁄⁄www.google.com⁄custom">
<fieldset>
<legend>Google Search<⁄legend>~!!!HERE IS WHERE THE GOOGLE SEARCH CODE GOES!!!~
<dl>
<em>A few ways to find what you are looking for faster:<⁄em>
<dt>Search on a specific site<⁄dt><dd>Add "site:<website address>"
to your search query. <br ⁄>
For example: "<em>edu-nix site:wikipedia.org<⁄em>"<⁄dd>
<dt>Search for a specific file type<⁄dt><dd>Add "filetype:<file extension>"
to your search query.<br ⁄>
For example: "<em>edu-nix filetype:pdf<⁄em>"<⁄dd>
<⁄dl><⁄fieldset>
<⁄form><⁄li>
<⁄ol>