Working with an htaccess file can be a bear. Sometimes it feels like a game of guess and check. And other times, you’re ready to pull out your hair if you see another 500 error. Yeah, you know the one I’m talking about!
Fear not! Today I’m going to take you through a guided tour of an example htaccess file. We’ll look at 6 different ways you can use an htaccess file to improve your website.
By the end of this post you’ll feel confident modifying an htaccess file. And you’ll be avoiding those 500 errors like the plague! :D
1. Rewriting URLs
This is one common use for an htaccess file. When I migrated my old blog to the Randomtype blog, I had a lot of pages that I needed to redirect to new urls.
Most of my Rewrite rules were a change to the domain name, so that when someone hit my old url: http://www.thepursuitofquality.com they’d get redirected to: http://randomtype.ca/blog/
Here’s an example of a simple rule to do that:
RewriteRule ^about$ http://randomtype.ca/about-us/ [R=301]
This rule takes my old about page, and redirects to the randomtype about-us page. How about something more complicated:
RewriteRule ^img/(.*)$ http://randomtype.ca/cms/assets/$1 [R=301]
This rule takes a url like http://www.thepursuitofquality.com/img/image-name.png and redirects to the randomtype image location: http://randomtype.ca/cms/assets/image-name.png
In the first part of the rule, the brackets (.*) “copies” anything after the img/ and “pastes” it into the $1 variable in the second part of the rule. This is known as a regular expression. It’s a topic too large for this post.
Now there’s a tricky bit at the end of both rewrites, the [R=301]. That simply means that all redirects are done with an HTTP status of 301, meaning that the page is a permanent redirect.
The examples I gave allow you to change domain names for a url, but you can also rewrite urls on your own site. Let’s say you wanted to strip the html extension off of all of your blog posts. One way to do that is with a Rewrite:
RewriteRule ^blog/(.*)\.html$ /blog/$1 [L,R=301]
This is just the start of the RewriteRule. There are more advanced usages for it, and in a previous post on the htaccess file, I explained how WordPress uses the htaccess file to create pretty permalinks. There’s more details about RewriteRule there!
I’ve included all these examples (and a few more) in a downloadable htaccess example file at the end of this post.
2. Redirecting URLs
This sounds similar to Rewriting rules and they mostly are. There are two types of redirects to look at: Redirect and RedirectMatch.
Redirect is like a 1 for 1 match. If the first part matches, redirect to the second part.
One way Randomtype has used a Redirect on our own site was to redirect some incorrect links to correct links on our site. About a year ago we received a couple of links that were going to 404 pages. Kind of odd. Since we were receiving traffic from them, we simply fixed them up with a Redirect to go to the correct url.
Redirect permanent ^/blog/incorrect-url http://randomtype.ca/blog/correct-url
This rule says that any page loaded for http://randomtype.ca/blog/incorrect-url should be redirected permanently to http://randomtype.ca/blog/correct-url. Very simple.
RedirectMatch is a bit closer to the RewriteRule in that it allows you to use regular expressions to do matching. I’ve used it when making large URL changes.
For example we used to have a topics section on our site. It was removed, so any links going to the topics page would get a 404. I setup the below RedirectMatch rule to fix that.
RedirectMatch permanent /topics(/(.*))? http://randomtype.ca/
This rule takes any url that starts with /topics and redirects to the randomtype homepage. While not ideal, getting a page you weren’t looking for is better than getting a 404 page you weren’t looking for!
3. Ditch Ugly Directory Pages
Ever landed on a page like this?
That’s a directory listing, and it’s the fastest way to get someone to click the back button and more than likely, leave your site entirely. You don’t want that do you? You want juicy traffic, gobbling all the fresh tasties you have in store! ;)
Disabling the Directory Page is as simple as adding the following line to your htaccess file:
Opitions -Indexes
4. Speed Up your Website?
Who likes a fast website. Everyone does! How about a quick and easy way to speed up your website?
That’s where proper HTTP headers can come in handy. I won’t bore you with the details of how cache expiry works, the gist of what you need to know is that you can tell a browser to hang on to certain files for a longer period of time. When a browser doesn’t have to re-download a file from your site your page loads faster. Cha Ching!
Here’s an example for all of your png images:
ExpiresByType image/png A86400
This line is going to cause all png images to have an expiry date of 1 day from when they were download. It works on file types which is what the image/png part is. But how’d we get one day?
# 60 secs * 60 mins * 24 hours * 1 day = 86400
You can setup an expiry of 1 day, 1 week, 1 month, even 1 year. The A in front of the number means it’s based on when the browser downloaded the file. Make sure that’s always there when you’re making your own htaccess.
But HOLD ON one second. You can do very bad things when setting this up wrong!
Let’s say you set the expiry for 3 years on a picture of you. An eternity in internet years!
But then you realize it’s time for a new picture.
You delete the old picture, and save the new picture with the same name. But guess what happens when you refresh the page? The old image will still be on your site! That’s because the new image has the same name as the old image, so your browser won’t download the new image. You and anyone else that downloaded that original image will have it for 3 years because of the expiry!
But don’t worry. You can simply rename the file to a new name to get your browser to download the new image. Rename profile to good-profile-picture and you’re AOK.
5. Speed It Up even More?
Want another htaccess trick to speed your site up? Then you’ll want to look at compression. Compression works on file types just like ExpiresByType. Here’s an example command:
AddOutputFilterByType DEFLATE text/html
This line is going to compress any file type of text/html that gets requested by a browser. Some files can be compressed by up to 75% of their original file size, which can be a big win for your site. Use the htaccess example file linked at the end of the post for more filetypes.
6. Easy Error Messages
The htaccess file allows for handy error redirects. In the off chance that someone requests a page that doesn’t exist, you can redirect them to your error page instead of an ugly generic page.
On Randomtype all of our 404 errors go to a nice custom 404 page that has been setup:
You can set that type of scenario up like this:
ErrorDocument 404 http://randomtype.ca/404
Another handy usage for the custom error message was on my old blog. When I setup redirects to randomtype.ca I didn’t want to lose any users on the old site if an error occurred, so I redirected all traffic from the old domain to the new domain. That looked like this:
ErrorDocument 404 http://randomtype.ca/
Goodies!
As previously mentioned, that big green link will download a handy htaccess example that you can refer to when building your own htaccess file. There’s a couple more goodies in there that I didn’t mention in the post for making extra sure you don’t get a pesky 500 error! :D
Download the example .htaccess file!
If there’s anything that I missed or you’re not sure about leave a comment!
