Link redirection

Posted: 5 February 2010 in Javascript
Tags:

The location of documents and web pages can change. It’s a simple fact of life in the life of web developers. So how do you ensure that when a document has moved to a new address it can still be accessed?

1. Change the links from the old address to the new address
This seems evident but it’s not always done. Why? because it’s tedious and not always accurate. How can you be sure you haven’t missed a link?

2. Do a server redirect
The webserver can include an HTTP 301 response header pointing the browser to the new address. This can be achieved in a number of ways through server configuration files, .htaccess for example.

3. Script a redirection
If you have actually moved the document and stopped answering requests at the old address, you can modify the custom 404 page to script the redirection. If people are still accessing the old document, modify the old document itself, let them know it has moved permanently at the old address. This can be done through a simple document:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
        <title>We've moved!</title>
        <meta name="description" content="This page has moved to https://lpicquet.wordpress.com/" />
        <meta name="keywords" content="moved" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <meta http-equiv="refresh" content="4;https://lpicquet.wordpress.com/"/>
        <script>
            function redirect(){
                document.location="https://lpicquet.wordpress.com/";
            }
        </script>
    </head>
    <body onload="setTimeout(redirect,4000);">
        <h1>We've moved!</h1>
        <p>This page has moved to a new location: <a href="https://lpicquet.wordpress.com/">https://lpicquet.wordpress.com/</a>. <br />
            Please update your bookmarks and update your links. You will be redirected in a few seconds.</p>
    </body>
</html>

The first step in the document is the meta header equivalent. It will force your browser to update the location after a period of time. I normally go for 4 seconds. Anything quicker and the user has not had a chance to the read the content of the page and would not appreciate the “flicker” effect. 5 seconds or more and it feels like nothing happens and the user may decide to click the link out of boredom.

The second step in the Javascript. If the document meta header is ignored by the browser, javascript can start the redirection after a period of time. Again, 4 seconds is about right.

The third step is the text and the link letting the user know what’s going on and where they should go, in a polite way. This is useful if Javascript is disabled.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s