Redirect a Web Page

Web Page redirection, also called URL forwarding or URL redirection, is a World Wide Web technique for making a web page available under more than one URL address. For example, a user visits "example.com/page-1" in their browser and they are redirected to "example.com/page-2" instead. The redirected page is often on the same website, or it can be on a different web site or a web server. There are four main kinds of redirects: 301, 302, HTML Redirect and JavaScript Redirect.


  1. 301, "Moved Permanently"
  2. 302, "Found" or "Moved Temporarily"
  3. HTML Redirect
  4. JavaScript Redirect

301, "Moved Permanently"

The HTTP response status code 301 Moved Permanently is used for permanent URL redirection, meaning current links or records using the URL that the response is received for should be updated. The 301 response from the Web server should always include an alternative URL to which redirection should occur. If it does, a Web browser will immediately retry the alternative URL. This is the best way to ensure that users and search engines are directed to the correct page. The 301 status code means that a page has permanently moved to a new location.

302, "Found" or "Moved Temporarily"

The 302 status code indicates that the resource you are requesting has redirected to another resource. With a 302 "Found" or "Moved Temporarily" redirect, the server redirects the user to the new destination despite the original location still being used for requests.

HTML Redirect

Meta Refresh redirect is a client side redirect and is not 301 permanent redirect. This is the simplest way to redirect to another URL is with the HTML Meta Refresh tag. We can place this meta tag inside the < head > at the top of any HTML page like this:

<head> <meta http-equiv="refresh" content="0; url=http://example.com/" /> </head>

The content attribute is the delay before the browser redirects to the new page, so here it set to 0 seconds. It is important that the time-out is set to zero, to avoid that content is displayed before the new page is loaded. The page containing the redirect code should only contain information related to the redirect.

Full Source

<html> <head> <title>HTML Page Redirection</title> <meta http-equiv="refresh" content="0; URL='http://www.example.com/'" /> </head> <body> This page has moved to example.com </body> </html>

Redirecting Pages in HTML 5

The above code will work in the HTML 5 also.

Javascript URL redirection

How do I redirect with Javascript?

You can redirect a web page to another page in a number of ways including JavaScript redirects, server-side redirects, HTML meta refresh redirects etc. You can redirect a web page via JavaScript using a number of methods. Almost all Javascript redirect methods are related to window.location object, which is a property of the Window object, because it control over what page is loaded into the browser rests in the JavaScript property window.location property.

window.location = "http://net-informations.com/faq"

The above Javascript code redirect the current page to http://net-informations.com/faq page.

Full Source

<!DOCTYPE html> <html> <head> <script> function newPageLocation() { window.location="http://net-informations.com"; } </script> </head> <body> <input type="button" value="Go to new page" onclick="newPageLocation()"> </body> </html>

Redirect to current URL with URL parameters

The following Javascript code show how to pass parameter while in page redirection

<script type="text/javascript"> function showUser(username) { window.location = '/user_detail?username='+username; } </script> <input type="button" name="theButton" value="Detail" onclick="showUser('username');">

Difference between window.location and location.href

Both are different, window.location is an object containing the property while location.href which is a string. The window.location is an object that holds all information about current document location (host, href, port, protocol etc.). The location.href is shorthand for window.location.href, and this is only string with full url to current website. The location object's toString() value is the same as the href property, so they are identical if used as strings. Setting window.location is the same as setting window.location.href.

<script language="javascript" type="text/javascript"> window.location.href = "http://www.example.com"; </script>

The above Javascript code sets the new href (URL) for the current window.

URL Redirection on page load

If you want to redirect your web page to other webpage while on page load, you can use the following code. The following program shows a message for 3 second and redirected to new page location.

<html> <head> <script type="text/javascript"> function redirectPage() { window.location="http://net-informations.com"; } </script> </head> <body onLoad="setTimeout('redirectPage()', 3000)"> <h1>Please wait....this page will redirect to new page....</h1> </body> </html>

Back to Home Page

There are situations that if someone wants to redirect back to home page then he can use the following javascript code.

<script language="javascript" type="text/javascript"> window.location = window.location.host </script>

There are some other ways to page redirection in Javascript

<script language="javascript" type="|ext/javascript"> window.history.back(-1); </script>

This is the same as clicking the "Back button" in your browser, or history.go(-1).

<script language="javascript" type="text/javascript"> window.navigate(”about.jsp”); </script>

How to redirect your website to its mobile version

Detecting and Redirecting Mobile Users

There are situations that you want to redirect your website to its mobile version. For example, if someone visits example.com on their phone, you'll need a way to redirect them to m.example.com (in case, if the mobile version of your site created on a subdomain called "m"). The following Javascript code will help you to redirect to your mobile version.

<script type="text/javascript"> if (screen.width <= 699) { document.location = "mobile/mobilepage.html"; } </script>

Note: Normally mobile phones typically have a small screen width, so you should redirect visitors to your mobile site if they have a screen width of less than or equal to 699 pixels.

For iPhones and iPods

<script language=javascript> if ((navigator.userAgent.match(/iPhone/i)) (navigator.userAgent.match(/iPod/i))) { location.replace("http://example.com/iphone.html"); } </script>

The above code only detects iPhone and iPod. The downside of a JavaScript approach is that not all mobile phones support it and people can always turn off JavaScript in their browsers.

Search Engine Optimization and URL redirection

Search Engine Optimization

Normally, Search engines use the 301 status code to transfer the page rank from the old URL to the new URL. The Javascript redirection return http response status code: 200 OK. So Javascript redirection is not search engine friendly redirection and it is better to use some other redirection methods that return status code: 301 Moved Permanently. For example, If you want to notify the search engines (SEO) about your URL forwarding, you should add the rel="canonical" meta tag to your website head part because search engines don't analyze javascript to check the redirection.

<link rel="canonical" href="http://net-informations.com/" />

What is the difference between canonical and 301 redirects ?

When you use 301 redirect, you show to Search Engine that current page is permanently moved to another location.

Cannonical is used to prevent penalties by Search Engine for duplicate content. When you use it, the current page exists but shows to Search Engine that is "copy" of another "master page" . From the following example you will get a clear idea about this.

http://example.com/demo-1.html

http://example.com/category-1/demo-1.html

http://example.com/category-1/subcategory-1/demo-1.html

The above 3 url are same and exact content. Normaly Search Engines doesn't like the duplicate content and give penalties too. So in this case you should put in every single page a rel canonical tag to the "master" page. For example we will chose "http://example.com/category-1/subcategory-1/demo-1.html".

<link rel="canonical" href="http://example.com/category-1/subcategory-1/demo-1.html">

NEXT.....How to Download YouTube Videos