PageResource.com - Web Development Tutorials

The Meta Refresh

How to redirect your viewers automatically
If your page has moved, or you have a need to redirect your visitors automatically, you can use a meta refresh to send them the page of your choice. Be careful when using this, though, especially on your main page. Some search engines are trained to look for a meta refresh that leads from a page stuffed with keywords to the real page, redirecting the user so quickly that they never see the keyword-loaded page. Thus, if you refresh too quickly (in some cases anything less than 10 seconds is too quickly) you stand the chance of having the page pulled from the listings. Of course, if it is not your main page, you probably won't need to worry about that.

So, how is it done? Well, here is the code that will do it:

<html>
<head>
<meta http-equiv="refresh" content="2;url=http://www.yoursite.com/newpage.htm" />
<title>Page has moved</title>
</head>
<body>
whatever you want to write
</body>
</html>

If you want to see a working example, click the link below:

Refresh Example Page

Notice that the refresh tag comes before your title tag. The content=" " command does two things. It tells the browser how many seconds to wait before executing the refresh, and then what URL it should be redirected to. Be careful when you write this... the quote marks are around the entire content=" " command, not around the number of seconds or url individually. They are separated by a single semicolon (;).

Of course, you are allowed to write whatever you need in your body section. So, if you have a user with a really old browser, you may add a manual link to the new page inside the body section of your page:

<html>
<head>
<meta http-equiv="refresh" content="2;url=http://www.yoursite.com/newpage.htm" />
<title>Page has moved</title>
</head>
<body>
This page has moved. If your browser does not automatically redirect you in a few seconds, click <a href="http://www.yoursite.com/newpage.htm">here</a> to go to the new page.
</body>
</html>

Well, that does it for the meta refresh. So, let's move on to the next section: The Blue Dash in Linked Images.


Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy