Menu
InformatiWeb
  • Index
  • Courses
  • Tutorials
  • InformatiWeb Pro

Login

Registration Password lost ?
FR
  • IT
    • Articles
    • Backup
    • BIOS
    • Live CD
    • MultiBoot
    • Security
    • Virtualization
    • Web
    • Windows
  • InformatiWeb
  • Tutorials
  • IT
  • Web
  • Automatically redirect a visitor (client side in HTML or JS or server side via PHP or .htaccess)
  • Web
  • 20 May 2013 at 19:49 UTC
  • Lionel

Automatically redirect a visitor (client side in HTML or JS or server side via PHP or .htaccess)

When you create a website and/or create a new version of it (with new features, for example), you may need to create redirects to redirect visitors to the new address of a page, ...
However, there are different techniques for redirecting a visitor and some techniques are more suitable for some cases than others.
For example, when updating a site, if a page changes its address (url), you will have to redirect visitors using server redirects (with an .htaccess file or by using PHP) to allow search engines to update their search results without the SEO of your website and more precisely your pages being affected.

  1. Server redirection (with an .htaccess file)
    1. Redirection (by keyword)
    2. Redirection (by HTTP code)
    3. Explanations of differences
  2. Server redirection (via PHP)
    1. Refresh page to redirect the visitor to another page
    2. Redirect the visitor by returning a redirect HTTP code
  3. Client-side redirection (via HTML tag)
  4. Client-side redirection (via JavaScript)
    1. Automatic redirect after x seconds on page load
    2. Automatic redirect after x seconds on click

1. Server redirection (with an .htaccess file)

If you hosted your website on Linux web hosting (which is the case in most cases), the web server used by default will be Apache.
To perform server redirects with an Apache web server, you will need to create a ".htaccess" file and use the "Redirect" instruction of the "mod_alias" module.

1.1. Redirection (by keyword)

Among the various possible redirects you :

  • Redirect : if any term below or no HTTP code is specified, the redirect code that will be returned : 302 (temporary redirect)
  • Permanent Redirect : returns a permanent redirect code (301) indicating that the resource has been permanently moved.
  • Redirect Temp : returns a temporary redirect code (302). This is the default behavior.
  • Redirect seeother : returns a code "See Other" (303) indicating that the resource has been replaced by another.
  • Redirect gone : returns a code "Gone" (410) indicating that the resource has been permanently removed. When this code is used, it must not use the URL argument.

Examples :

Apache

Redirect /folder https://www.my_website.com/folder
Redirect permanent /folder https://www.my_website.com/folder
Redirect temp /folder https://www.my_website.com/folder
Redirect seeother /folder https://www.my_website.com/folder
Redirect gone /folder https://www.my_website.com/folder

1.2. Redirection (by HTTP code)

You can also use the HTTP code corresponding to the redirection you want to perform.

Examples :

Apache

Redirect 301 /folder https://www.new_domain.com/folder
Redirect 302 /folder https://www.new_domain.com/folder
Redirect 303 /folder https://www.new_domain.com/folder
Redirect 304 /folder https://www.new_domain.com/folder

Note : for more informations about HTTP codes, go to the "List of HTTP status codes" page of Wikipedia.

1.3. Explanations of differences

If there are several types of redirects, it is simply because they do not all have the same goal.
For example, if you change your web host and address, we recommend that you create a 301 redirect. This will prevent you from losing your ranking in the search engines (including Google) as this redirection redirect visitors and search engines as well. When Google arrive on the old domain, it will replace the old with the new url without making you lose your position in the ranking.
In this case, you create a file in the root of the website on the old host and you indicate this inside ".htaccess".

Apache

Redirect 301 / https://www.new_domain.com/

For more information about server redirects with Apache, we suggest you go read the official Apache documentation at this link.

2. Server redirection (via PHP)

If you used PHP to create your dynamic website, you can create permanent, temporary, 301, 302, ... redirects with its "header" function.
Note that if you use a PHP framework, such as CakePHP, Symfony, ... you will probably find redirection functions in their official documentation.

Warning : this function must be used before any HTML character.
Indeed, if a space was sent before using this function, PHP will display the error : Headers already sent by ...

2.1. Refresh page to redirect the visitor to another page

To refresh the page and redirect the visitor, you must use the Refresh keyword and specify a time in seconds.

PHP

<?php
// Redirection informations
$delay=3; // Time in seconds
$url='/test/'; // Address to redirect the visitor
// Redirection in x seconds
header('Refresh: '.$delay.';url='.$url);
?>

Warning : don't use this type of redirect if you also want to redirect search engines like Google or Bing, for example.

2.2. Redirect the visitor by returning a redirect HTTP code

To create a true redirection, ie by returning a HTTP redirect code, you must first change the "Status" info in the header and then perform the redirect 301, 302 or by another keyword : Location.
Refer to "HTTP/1.1 Specification" for more information on HTTP headers.

Informations :

  • The difference between 301 and 302 is especially in the ranking by Google.
    If Google receives a 301 (permanent redirect), it will replace the old "url" by the news without making you lose your SEO.
    While if it receives a code 302 (temporary redirect), it will continue to index the contents of the old url.
  • If you don't change the info "Status" before performing the redirection, the return code will be 302 (temporary redirect).

PHP

<?php
// We modify the "Status" information
header('Status: 301 Moved Permanently', false, 301);
// We perform the redirection
header('Location: /test/');
?>

3. Client-side redirection (via HTML tag)

If you want to redirect your visitors to another page automatically, you can use meta "Refresh" tag that will allow you to set a delay before forwarding if you wish. However, note that this is a redirect which occurs client side (because it is an HTML tag) and not a server redirection (PHP for example).
This meta tag is inserted between <head> and </head> tags of your page.

HTML

<META http-EQUIV="Refresh" CONTENT="Time; url=https://www.informatiweb.net/">

To configure this redirection, replace Time by the number of seconds to wait before redirecting the visitor and the new address after "url=".

4. Client-side redirection (via JavaScript)

If you want to redirect your visitors to another page automatically, you can use a javascript function that will allow you to set a delay before forwarding if you wish.
However, note that this is a redirect on client side (because javascript is executed on the client side) and not a server redirection.
This script should be placed between the <body> and </body> tag of your webpage.
The advantage of using a javascript redirect is the fact it can be triggered after clicking on a button or any other action made by the visitor.

4.1. Automatic redirect after x seconds on page load

In this case, the countdown starts when the page (on which you insert this code) loading.

If you want to redirect the visitor after x seconds from loading of the page. Simply enter this code into your page.
Note : preferably at the end of the page. Before the </body>.

Javascript

<script type="text/javascript">
var delai=3; // Delay in seconds
var url='/folder/destination_page.php'; // Destination url
setTimeout("document.location.replace(url)", delai + '000');
</script>

4.2. Automatic redirect after x seconds on click

If you want to trigger this redirection after clicking a button or other, we recommend that you place it first in a function. Then simply, to call this function by the desired event.

Here's the function :

Javascript

<script type="text/javascript">
function redirection_js(url,delai){
  setTimeout("document.location.replace('"+url+"')", delai + '000');
}
</script>

And here's how to use it with the click event (or onclick). You can of course use other events like "onmousedown", "onmouseover", ...

To use this function, simply pass the following parameters :
- url : the address to redirect the visitor
- delai : delay in seconds before redirecting

Javascript

<input type="submit" name="my_button" id="my_button" value="Button text" onclick="redirection_js('/folder/destination_page.php','3')" />

Share this tutorial

Partager
Tweet

To see also

  • Adobe Fireworks - Batch process

    Web 6/12/2014

    Adobe Fireworks - Batch process

  • MSN - Continue to use MSN with a third party client

    Web 3/18/2013

    MSN - Continue to use MSN with a third party client

  • Search engine for website

    Web 1/8/2011

    Search engine for website

  • WAMP - Installing WAMP 2.2, 2.4 or 2.5 and its add-ons

    Web 3/2/2013

    WAMP - Installing WAMP 2.2, 2.4 or 2.5 and its add-ons

Comments

You must be logged in to post a comment

Share your opinion

Pinned content

  • Useful softwares
  • Our programs
  • Terms and conditions
  • Share your opinion

InformatiWeb Pro

  • Win. Server administration
  • Linux Administration
  • Virtualization

Contact

  • Guest book
  • Technical support
  • Contact

® InformatiWeb.net 2008-2022 - © Lionel Eppe - All rights reserved.

Total or partial reproduction of this site is prohibited and constitutes an infringement punishable by articles L.335-2 and following of the intellectual property Code.