Redirect Old HTML page to a New HTML page using RewriteRule in mod_rewrite

Posted in Tutorials

If your webhost server is running Apache, then you can use the Apache module mod_rewrite to redirect traffic from one web page (say old.html) to another web page (new.html).

This means that if a visitor happens to go to your web page old.html, your webserver will automatically redirect that visitor to your new.html page. This is often useful when you want to replace a old page with a new page and want to change the filename (or web URL) as well.

In this tutorial, we are going to use the RewriteRule directive in mod_rewrite module to redirect requests of this page old.html …

to this new.html page …

Note that both pages are within the example sub-directory of public root.

You will need to edit the .htaccess file that is in the public root of your website (not within the example folder). Yes, this filename starts with a dot. If your public root folder does not have this file, you can create this file using a text editor.

At the bottom of this file, put the following code …

After saving the file, the rule should be in effect immediately.

The line “RewriteEngine on” turns on the rewrite engine if it happens that the server does not have it turned on. Note for the two URLs in the second RewriteRule line, we are using relative URLs relative to the public root (or where the .htaccess file is). You can use absolute URLs if you want (such as http://learnwebtutorials.com/example/old.html). But then you have to create the rule for both the non-www version as well as the www version (as in http://www.learnwebtutorials.com/example/old.html).

Let’s test this code out by navigating to the example/old.html page …

See that the browser displays the new page but the address bar is still showing the old address of the old page. Typically, we would not want to do this.

Using the Redirect Flag

We would like for the server to redirect to the new page and show the new web address in the browser as well. To do this, simply add “[R]” at the end of the RewriteRule statement as shown…

This is a “flag” for the “RewriteRule” to force an external “redirect” back to the current host.

Now when you put in the old URL in the browser, it should redirect and show the new page with the new URL …

Is this a temporary or permanent redirect? If it is permanent, then you should specify a return code of 301, which indicates “Moved Permanently” [reference]. For example…

Otherwise without it, it would be treated as a 302 “Moved Temporarily”. Using the 301 tells search engines that the page has moved and to readjust their index. Therefore it is the best way to preserve your existing traffic.

You can see this return status by using the Net panel of Firebug (with “Persist” and “All” enabled)…

Better Still

This was a simple example. The RewriteRule can get very complex and has many options (see reference at apache.org). There are a wide variety of server configurations. This example should work in the most typical cases. But depending on your particular server or configuration or other factors, it may not work. If not, try the following.

There are many ways to do redirection, many people do it the following way …

The ^ and $ are used for pattern matching of the old URL.   The ^ indicates the beginning of the URL string.  And the $ indicates the end of the URL string.  The \ is an “escape” character to indicates to have the next character (the dot) be treated as a literal dot and not as a pattern matching wildcard character.

Note that we also added the RewriteBase directive. According to apache documentation, the RewriteBase directive “explicitly sets the base URL for per-directory rewrite” and “If your webserver’s URLs are not directly related to physical file paths, you will need to use RewriteBase in every .htaccess file where you want to use RewriteRule directives.”

The “L” flag means that this is the “last” rewrite rule and to stop rewrite process. The “NC” means “no case” to indicate not to worry about the upper or lower case when doing the pattern matching.

Note that in the above screenshot, we are using an absolute URL in the destination parameter.

WordPress Considerations

If you are using WordPress, WordPress has its own directives in the .htaccess files. Make sure to place your RewriteRule statement after the WordPress statements as in …

If you place it before, then it may not work.

References:

• RewriteRule directive in Apache.org documentation
• Redirection Cheatsheet
• URL Redirecting – YourHTMLSource.com

---