Web Page Redirection

Introduction

When copying the code from these pages remember to paste them first into a text only editor such as Notepad and then copy and paste from there into your webpage. This is so that all the text formatting codes can be removed from the copied text. Remember that your HTML editor must be in code or HTML view when you paste the code into it. If you are using a template driven HTML editor then the code must be pasted into an HTML and not a text box. JavaScript must be enabled in your browser for the effects generated by it to be seen.

It is sometimes extremely useful to redirect your visitors from one page to another. You may have redesigned your pages, or entire site. You may have even moved your site to a new host or server.

The advantage of using a redirect script is that your visitors aren't faced with a obsolete page and can be moved to the new page without taking any further action. The disadvantage is that some search engines do not like redirect scripts at all, and may downgrade your page rank, especially if a delay is used. Some methods also affect the browser history which makes it impossible for them to use the back button or for you to use it in other scripts.

301 vs 302 Redirects

To understand how redirects affect your search engine page ranking you should realize there are several types, the main ones being 301 and 302. A 301 redirect is a permanent redirect, that is the original page is never expected to return and the page being redirected to is now the permanent page for the content it carries. A 302 redirect is a temporary redirect, the original page may be reinstated at a later date.

Search engines are fairly secretive about how they rank pages. It's a little paradoxical but if everyone knew exactly to be #1 in Google's search listings then there could still be only be one #1, but more importantly then every scammer and spammer around would use the information to their advantage - which is one reason why the algorithms they use got so complex in the first place.

It used to be that a page redirected to by any form of redirect would lose the page rank, page authority, traffic value, and other values known collectively as link juice, SEO juice, and link equity, from the original, redirecting page.

Things changed slightly when it became known that 301 and 302 redirects were being treated differently. 301 redirects would keep the link equity, 302 redirects would not.

Server-side redirects in the web server configuration files were easy for the search engines to fathom. Those have to be designated as 301 or 302. The on-page redirects were different and Google and some other search engines decided that redirects with a time-delay would be treated as 302 redirects, and those without would be treated as 301 redirects.

In 2016 there was another change. To increase the adoption of HTTPS over HTTP, John Mueller, Google's Senior Webmaster Trends Analyst announced (Internet Archive) that it did not matter which type of redirect was used to redorect to the new HTTPS pages as there were no penalties for using 302 redirects instead of 301 ones. A little later Gary Illyes, also a Google Webmaster Trends Analyst said that "30x redirects don't lose PageRank anymore." Most people have taken this to mean that any 301 or 302 redirect, for any purpose, not just HTTP to HTTPS, are treated the same.

Remember though that the above only applies to Google and that page rank is only a part of the link equity, so the best advice is still to use 301 server-side redirects where possible.

Client-side vs Server-side

Server-side redirects are generally better than client-side ones which are generally used when the web editor does not have access to the server configuration files. Server-side redirects are better in that they are transparent to the page visitor, transfer more link equity from the redirecting to the redirected page and are imperceptably faster.

Server-side redirects are handled as soon as the page is requested. The client-side meta tag method requires that at least the head section of the page has to be downloaded to the page visitors' browser. JavaScript methods require the entire page be downloaded.

Client-side redirects are technically not redirects at all, but refreshing the browser with a new page. There is no mechanism I know of to tell whether they are 301, 302 or other type of redirect.

Client Side

None of these client-side methods can return as server-side code such as 301, 302 etc.

The simplest method is probably a meta tag in the <head> section of a web page and takes the form...

<meta http-equiv="refresh" content="time_in_seconds; url=URL_to_redirect_to">

time_in_seconds can be any value you like. A value of 0 will cause immediate redirection.

The code on the demonstration page is...

<meta http-equiv="Refresh" content="30; url=redirection.htm">

It will be beneficial to your visitors if you put some sort of text on the page to explain why they are being redirected. It also helps if you put a HTML link on the page and the URL of the page they are being redirected to. The HTML link will help search engines find your new page and the URL will help people who have automatic redirection in their browsers turned off.

You can also use an element's onclick property to trigger Document Object Model (DOM) events or run code, usually JavaScript, on a page.

There is something a little odd about window.location.href, window.location, location.href, and location. The ones without .href refer to objects, while the ones with .href refer to strings. The reason they all work is that the DOM knows what to do when a URL string is assigned to an object. So, for the purposes of this page they are all equal!

The following buttons will all take you to this page's demonstration page!

The code for all the buttons is similar to...

<button onclick="window.location.href='redirect-demo.htm'">text</button>

location has other methods that can be used. One of them is .assign

<button onclick="location.assign('redirect-demo.htm')">location.assign()</button>

Another is .replace. This behaves differently to the other methods on this page in that it replaces the browser history with the new URL and that means the visitor cannot use the back button to navigate back to the original page.

<button onclick="location.replace('redirect-demo.htm')">location.replace()</button>

It is possible to use JavaScript or other code to introduce a timed delay to the redirect. This example uses an inline script:

<button onclick="setTimeout(function(){location='redirect-demo.htm'},2000);">Timed location</button>

Server Side

This section is mostly concerned with Apache web server as that is the one I am most familiar with. There are two methods of rewriting URLs and redirection in Apache. One method is using mod_rewrites and the one I use most often - using the Redirect directive for single pages or RedirectMatch for groups of pages using regex. I use that method as I think it is easier to understand.

The main reson I use them is because years ago, when I started this website, I used non-descrptive file names for the pages and because of the size of the site I can't be sure I can find and change all the links. The other reason is that people may have old pages bookmarked and as the old pages no longer exist, need them to be redirected to the new pages.

Here's a line from my httpd-vhosts.conf for this site:

Redirect 301 /bristol/bmapug1.htm /bristol/pugsley.htm

This defines a permanent (301) redirect from my old page at http://brisray.com/bristol/bmapug1.htm to the current page at http://brisray.com/bristol/pugsley.htm

Here's another line from the configuration file for this site:

RedirectMatch 301 /bristol/bcastle([1-6]).htm /bristol/castle$1.htm

What this does is match any of the old pages numbered between 1 and 6 at bcastlex.htm and redirect them to the corresponding page at castlex.htm. For example, http://brisray.com//bristol/bcastle2.htm is redirected to http://brisray.com/bristol/castle2.htm

Matthew Edgar asks an interesting question in his article Do Redirects Impact Your Website’s Speed?. He concludes that redirect chains have a notable impact on speed, especially after 3-5 redirect hops; that more than 50,000 redirect directives in the configuration files will negatively impact page loading speed but if you have less than that then there are better ways of improving page laod speed other than trying to reduce the number of redirects.

Content management systems (CMSs) such as WordPress and Drupal have their own modules for automatically handling redirects when a page or path is changed.

Redirect Loops

Care must be taken that redirect loops are not created. This is where for example pagea redirects to pageb, which redirects back to pagea and so on. Modern browsers will detect the problem and rather than hang the browser will display an error message. Content management systems such as Drupal can also detect if they contain a redirect loop problem in their pages.

Apache has a default limit of 10 internal redirects and nested subrequests before it gives the warning "Request exceeded the limit of 10 internal redirects." The limit can set using the LimitInternalRecursion directive. Before simply raising the limit, it is best to find the cause of that many redirects and cure that.

Sometimes this is more of a visitor problem rather then a web editor's and can be solved by clearing their coookies and browser history.