Using the “meta-refresh” technique for redirecting to a new URL is bad, but sometimes there’s no other way to go. Here’s how to make it work.
What are meta tags?
Meta tags are placed in the head section of an HTML document, and give information about the page itself. They are the focus of SEO, because they are used to provide information to search engines and web crawlers about the page.
A special type of meta tag, called http-refresh, can be used to mimic a few of the HTTP messages passed between server and client, namely Content-Type, pragma, Expires, and refresh. The latter can be used to redirect to a new website.
Redirecting with a meta tag
Here’s what the meta tag looks like.
<meta http-equiv="Refresh" content="0;url=http://www.example.com/" >
Note that the content of the http-equiv attribute is not case sensitive, meaning that http-equiv=”Refresh”, http-equiv=”refresh” and http-equiv=”REFRESH” will all work.
Also, make sure you don’t forget the url attribute - Firefox and Safari will work without it, but Internet Explorer will not, which you may not notice if you work on a Mac!
Some people suggest doing the redirect with JavaScript, but I don’t see the point of that. I don’t know any browsers who ignore http-refresh redirects, whereas JavaScript can be disabled.
HTML 3.2 meta refresh example
Here’s an example of a complete page using meta refresh. Note the link within the page itself - this is a safety mechanism should a browser fail to follow the redirect link, and also provides search engines with a link they can index.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"
"http://www.w3.org/MarkUp/Wilbur/HTML32.dtd">
<html>
<head>
<title>www.example.com - redirect</title>
<meta content="0;url=http://www.example.com/" http-equiv="Refresh" >
</head>
<body>
<p>This website has moved. If you are not redirected automatically, click on the following link: <a href="http://www.example.com/" rel="home">www.example.com</a> </p>
</body>
</html>
If you are curious about the rel=”home” in the link, it is a rel-home microformat. Microformats is one of the mechanism used to add semantic meaning to web page, to help computers understand what the text is about.
XHTML 1.0 meta refresh example
The same example, but translated into XHTML 1.0. The only differences are the DOCTYPE at the top, and the fact the meta tag is closed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>www.example.com - redirect</title>
<meta content="0;url=http://www.example.com/" http-equiv="Refresh" />
</head>
<body>
<p>This website has moved. If you are not redirected automatically, click on the following link: <a href="http://www.example.com/" rel="home">www.example.com</a> </p>
</body>
</html>
Meta refresh - only use if you HAVE to.
Some user agents support the use of meta to refresh the current page after a specified number of seconds, with the option of replacing it by a different URI. Authors should not use this technique to forward users to different pages, as this
makes the page inaccessible to some users. Instead, automatic page forwarding should be done using server-side redirects.
W3C
The W3C discourages the use of meta refresh, and for good reasons. First of all, it isn’t part of any HTML or XHTML standards, meaning that the W3C cannot ensure it will work in the future.
Secondly, it doesn’t work well with the back button in old browsers, and there is no saying how well browsers on mobile phones etc. will cope with it.
But the main reason has to do, again, with semantics. HTTP provides different messages to tell web browsers and search engines why the page is being redirected, whether it is a temporary redirect or a permanent one, but the meta refresh method doesn’t allow that.
When to use meta refresh
I use meta refresh to redirect from my old site (goto.fritz.net) to the current one, for the simple reason that the owners of the fritz.net domains would not provide me with access to their server other than uploading static HTML files to it. In such cases, there just isn’t another option.
Redirecting using .htaccess on Apache
If you do have scripting access to the server, and your server runs Apache, then you can simply use the .htaccess file for redirecting.
.htaccess contains directive that an Apache web server uses for controlling access to a website. If you’d like to know more, here is a fairly good .htaccess tutorial.
