Help AYAAW keep the lights on. Donate some dough by clicking below. Thanks!
View Homepage on MyAppleSpace
Building Custom 404 Pages
Building and maintaining a website can be a daunting task, especially if you’re going for quality. Not only do you have to put up consistently good content on a regular basis, you also need to be sure you’re making the major search engines happy (SEO). So what does this mean to you? If you want to get anywhere with your online presence you have to play ball Google’s way. Fortunately doing so will probably make your site more user friendly so making Google happy should be a good thing for both you and your site’s visitors.
How do you go about Google happy? We’re glad you asked! Before we get to the nitty gritty, however, we’re going to unequivocally state that nobody here at AYAAW claim to be SEO experts. In fact we’re so far from being experts that if we called an SEO expert collect, he or she wouldn’t accept the call because it would be long, long, long distance.
Having said that one of the many things you as a web developer can do to make Google happy is to customize and enhance your 404 page. A 404 page is simply the error page that your hosting company’s server will default to when a web visitor clicks a link to a page on your site that no longer exists or mistypes the URL into the address bar of their web browser. See our 404 page here.
Now that that’s out of the way, lets get started. Understand that this tutorial directly applies to our hosting company, LunarPages (affiliate link), RapidWeaver and Yummy FTP. If you’re using a different host or FTP program, chances are your specific procedures will be similar.
We have to give credit where credit is due before moving on. John from aoimedia, a regular on the RapidWeaver forums, posted an answer to this thread that basically says the same thing as we’re about to explain below. We just fleshed it out a bit, throwing in the screen shots and the app specific info regarding Yummy FTP.
One more thing: it should go without say that you can click on any image to see a larger version. Still, we’re saying it just so you know.
What you need:
RapidWeaver (of course)
Yummy FTP (or similar)
A website
.htaccess file
Optional:Art Text 2 for creating a nice custom graphic
Start by creating the 404 page in RapidWeaver. We started with a Styled Text+ page but if you haven’t yet bought it (only $5 and you’ll love it) you can also use a stock Styled Text page. Rename the page “404” and set the Page Inspector as shown below. Be sure that you uncheck “Show In Menu” and that you name the page 404.html.
Click for larger image
Click for larger image
Add the content to the page. This is pretty simple: according to Google all you really need is some descriptive text that’s more useful for your visitors then the generic 404 text (shown above). Something as simple as telling your visitor that the link or URL they tried is missing and then giving them a good link, perhaps back to your home page, would suffice. You could also go a little further and jazz it up a bit as we did:
Click for larger image
There’s a lot going on here so lets break it down. First and most important, the 404 page retains the look of our site. This is huge and assures the visitor that they’re still on your website. The next thing you’ll notice is that there is a standard menu bar along the top giving the user a familiar menu and navigational system to find their way around. Google strongly recommends this and by including it you’re just making your site easier to use by your visitors.
The “404” text is still there. This would be optional and you don’t need to include it. Our reason for including it is that “404” is a fairly common sight on the internet so it adds a bit of familiarity. We also made the “404” a clickable link leading back to our Home page. Further down the page you’ll see a paragraph explaining the error. This is where you want to spell things out in plain English (or German, Swedish, whatever) what happened and give your users an option (link) to get back to the content part of your site. We used our own brand of English and included a gratuitous smilie face graphic to ease the despair our visitor might experience when encountering a 404 error. Be creative (or not) but for sure, be informative.
At the bottom of the page, in the Styled Text+ page’s footer, you’ll see a search box. This is a new widget provided by Google that you have access to once you sign up for their Webmaster Tools. Currently “Experimental” (in beta?) the only real benefit it adds is a Google search box that will search your website. In future versions, it should also provide closest match links, alternative links and suggestions based on your sitemap. You do have a sitemap don’t you?
Click for larger image
Once you’re satisfied with your 404 page publish your page/site.
Now fire up YummyFTP. Establish a connection to your server and then check the Invisible File button on Yummy FTP’s tool bar (see image below). Select the directory where you want the .htaccess file to go. This should be the root folder of your website.
Click for larger image
Next click the Add New Empty FIle button and YummyFTP will create a blank empty file. Name the file .htaccess and click the Ok button.
Click for larger image
Select the new .htaccess file (you’ll be able to see it since you checked the Invisible FIle button in the last step) by clicking on it once and then click Yummy FTP’s “Edit with built in editor” button.
Click for larger image
In the drop-down sheet that appears type this code exactly:
ErrorDocument 404 http://www.your-domain.com/404.html
Click for larger image
Substitute “your-domain” with the actual name of your domain and then click the Save button. Yummy FTP will automatically upload the saved .htaccess file to your website and whenever someone types in an incorrect URL or clicks a bad link, they should be directed to your fancy smancy new 404 page.
Now that wasn’t so hard was it?