Howto make Friendly URLs

Thinking and Making has a good article called: Friendly URLs improve usability and user experience. I've always been a big fan of the friendly urls, when I see a site that uses friendly URL's I get a sense of elegance, and cleanliness.

I like to use mod_rewrite with Apache (there are a number of alternatives to mod_rewrite for IIS).

Suppose you have a script called news.cfm that takes an id in the url - a typical url might be /news.cfm?id=123. Now suppose we want url's like /news/123 - you can do that like this inside your VirtualHost:

RewriteEngine On
RewriteRule /news/([0-9]+) /news.cfm?id=$1 [PT,L]

The first part of the RewriteRule is the pattern to match, this is a regular expression. The main pattern we are looking for is the id which appears after /news/. This is simply an integer so we can use [0-9]+ to match the integer. The + means that there are one or more numbers (you could use a * to mean zero or more).

You will notice that in our RewriteRule we have put this pattern in parenthesis, this allows us to use it in the url we are rewriting to (the second part of the RewriteRule) - it's called a backreference. We can refer to the back reference using $1, if you have more than one back reference use $2, etc.

The third part of the RewriteRule are some options that you may or may not need. The PT stands for pass through - it tells apache to pass the new url into other modules. This is usually needed if your depending on other modules, for instance in ColdFusion you need to pass info through to the ColdFusion apache module.

Finally the L means that if the rule matches don't check any other rules. It is usually a good idea to include this to save processing.

The article also mentions that its a good idea to rewrite url's that users may try and guess. So suppose your Apple, and you just released tiger, some people may try going to apple.com/tiger instead of apple.com/macosx. To redirect in this case you want to do a permanent redirect using the 301 HTTP status code.

RewriteRule /tiger.* /macosx/ [R=301,L]

We simply use the option R=301, this tells your browser, and other clients that /tiger should be /macosx/, your browser will make the request for /macosx/ instead, and that is the address you will see in the location bar.

I picked this example because Apple actually does redirect /tiger to /macosx/

One final note, it is usually a good practice to use the ^ character to match the beginning of the url pattern, and a $ to match the end of the url. Back to our first rule, we might use the following pattern instead: ^/news/([0-9]+)$. If you were using the first pattern, it may also match something like /foo/news/123 instead of just /news/123.