Redirect Web Page Using a.href and meta.refresh

A good url is one that’s easy to pronounce and never changes. Because websites are continuously improved, old addresses must redirect to new ones. This way, new structure can co-exist with old structure, and multiple URLs can point to the same document.

This article explains how to create html redirect pages, for example: http://www.iki.fi/karvinen/htmlredirectpage

Normal "a href" link

Create a normal, valid html page using the template below. Because this is just another plain web page with link, this method is completely foolproof and server independent. Only downside is that user must click the link to move to the new url. Change a.href, a and link.href, optionally also title, h1 and p text. Don’t use “here” or “click here” as link text. Link prefetch allows modern browers to retrieve the page even before redirection occurs.

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
 "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
    <title>Moved...</title>
    <link rel="prefetch" href="http://www.iki.fi/karvinen" />
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Moved...</h1>
<p>Moved to new url <a href="http://www.iki.fi/karvinen">www.iki.fi/karvinen</a>. </p>
</body>
</html>

Meta Refresh

To move a user automatically using only static html, you can use meta refresh tag. Just like the plain link method, using meta refresh is completely independent of server used. On some older browsers, using refresh with very short delay might break the back button, which annoys users.

The refresh tag uses quotes in a weird way, the refresh time in seconds and the new url are in the same quotes:

<meta http-equiv="Refresh" content="3; url=http://www.iki.fi/karvinen" />

Refresh tag should always be used with a normal link on the page too. To use this page, replace meta.url, a.href and a. Optionally, you can also change title, h1 and p.

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
 "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
    <title>Moved...</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <link rel="prefetch" href="http://www.iki.fi/karvinen" />
    <meta http-equiv="Refresh" content="3; url=http://www.iki.fi/karvinen" />
</head>
<body>
<h1>Moved...</h1>
<p>Moved to new url <a href="http://www.iki.fi/karvinen">www.iki.fi/karvinen</a>. You will be automacally redirected in 3 seconds. </p>
</body>
</html>

Create Redirect Pages with HtmlRedirect

View htmlredirect source.

Download htmlredirect using right (context menu) mouse button and “Save as”.

Usage: Create an index.html redirecting to my homepage:

$ htmlredirect http://www.iki.fi/karvinen

Create a folder called “tero” that redirects to my homepage, resulting in easily typeable url without “.html” suffix:

$ htmlredirect tero http://www.iki.fi/karvinen

Other Options: .htaccess

On apache, it is also possible to use the simple mod_redirect or the complex, full featured, all included mod_rewrite.