HTML Redirect To New Page with HTML Redirect Meta

HTML redirect has been an age-old technique. If you are not familiar with the concept, then it is about the web page you have visited redirecting you to another page.

For instance, you have visited “page01” on the website, but as soon as you land this page, it is redirected to “page02” instead. Well, the HTML redirect method has several benefits attached to it.

HTML redirect makes it possible for you to redirect a specific page to a new location. In case you want to alter the URL structure of your website, you will find HTML redirect to be useful.

Alternatively, you can redirect your web page to another website using HTML redirect. In short, HTML redirect is highly useful.

Let’s assume that you have moved your website to a new web address. Moreover, you wish to shut down the old website. If you have not redirected the old website links to the new one, your visitors will see 404 Not Found errors. You will be able to avoid such a scenario by redirecting your old links to the latest links where you have the same content. All that you have to do is to implement redirect HTML.

Let’s assume that you want to redirect www.your-old-website.com to www.your-new-webiste.com. Also, it is not about redirecting a single link. You want these changes to be reflected across the website. However, at the same time, you should not forget about the search engines. Search engines must be notified about the change so that they can update accordingly.

So how can we make it happen? However, before we explore that, we need to learn more about HTTP.

Recommended Tutorial

Understand HTTP Response

What really happens when we request a web URL on a browser? Well, there is an interesting process which happens behind the scenes. There is something called Hypertext Transfer Protocol (HTTP), which assists us in the process here. HTTP requests for assets like images, HTML and CSS from a server. Once we have sent a requests, these assets will respond ‘response code HTTP 200 OK’, which simply stands for “I’m available, let’s go!” As far as HTTP response codes are concerned, there are many. Most of us are familiar with the 404 Not Found. Just like website pages respond this way, the assets also can respond.

You should be aware of the fact that HTTP responses are usually categorised under specific 3 digit numbers. So we have status codes like 2XX, 3XX and 4XX, each representing an inevitable response. For instance, all the 2XX errors stand for success. What about 3XX status codes like 301 and 302? Well, 3XX status codes are exclusively for redirects. 302 Found and 301 Moved Permanently are native status codes. Do you need to know about these status codes and what they signify? Not really.

Coming to what we have been doing, we are going to use 301 redirect. Why because proxy servers and some web browsers will catch this. In the process, the old page will be made inaccessible. This is exactly we have been trying to achieve.

Okay, let’s get to business and learn how we can redirect a web page?

HTML Redirect Page

If you are looking for a simple method, then we suggest the Meta Refresh tag to redirect the URL. All that you have to do is to place this HTML redirect meta tag inside the. You may check out the code segment to see how we have achieved this.

<meta http-equiv="refresh" content="0; URL='http://www.your-new-webiste.com'" />

What is the use of the content attribute? We use this to set delay before you redirect to new page. By setting this to zero, you make sure that the HTML auto-redirect is seamless and quick. As you can see, we are not setting a HTTP status code as it is not required. However, we ask you to be careful with the all the closing and opening quotes as it can be really confusing. Make sure that you get it right.

Despite this method being the easiest way to achieve the HTML redirect page, it comes with its cons. You should be aware of the fact that some browsers might not be too welcoming to the Meta refresh tag. In some cases, users will witness a flash right before HTML redirection to a new page. Another thing you must keep in mind that the back button might be disabled in older browsers due to this META tag. In short, it is not at all an ideal solution. For the same reason, it is discouraged more often than not.

So you are looking for a safer alternative to this? Well, we suggest JavaScript. HTML redirect to another page can be implemented quickly with JavaScript.

Recommended Tutorial