SfC Home > Web Design >
Explanation of how to Redirect to Another Web Page - Succeed in Web Design. Also refer META tags, JavaScript, URL, HTML, code, disabled, manual link, Ron Kurtus, School for Champions. Copyright © Restrictions
Redirect to Another Web Page
by Ron Kurtus (27 November 2008)
There are situations where you may want to send the user to another page or website. This typically happens when the present page is no longer being used or has had its URL change.
You can automatically redirect the user either through a META tag or through JavaScript. Since it is possible that the user may have one or the other disabled, a manual link may be preferred.
Questions you may have include:
- How does using a META tag work in redirecting?
- What JavaScript code is used to redirect?
- What are factors in using a manual link?
This lesson will answer those questions. There is a mini-quiz near the end of the lesson.
Redirect with META tag
You can redirect the user to another page or website with a META tag in the HEAD section of your HTML code.
<META HTTP-EQUIV="Refresh"
CONTENT="5; URL=new_page.htm">
This code will refresh the page and send it to the new page in 5 seconds. You can use any number of seconds from 0 (zero) up. The URL can also be a website, such as URL=http://www.other_site.com/new_page.htm. Note that the quotation marks for CONTENT include both the time and the URL.
Can cause problems
A major problem with this technique is that it "breaks" the BACK button in most browsers. In other words, if the user clicks BACK, he or she will return to the old_page.htm and be automatically redirected to the new_page.htm.
For reasons of good user experience, it is not recommended to redirect with the META tag.
Redirect with JavaScript
You can also redirect by using JavaScript code in the HEAD or the BODY of your HTML code.
<script language="JavaScript">
<!-- setTimeout('Redirect()',4000); function Redirect()
{ location.href = '../new_page.htm';
} // -->
</script>
The 4000 is in milliseconds. 4000 ms = 4 seconds. You can have the location set as another website instead of a page within the existing site. Note that even setting 'Redirect()',1); will take long enough for the page to be displayed before the redirect takes hold.
Problem
The problem with using JavaScript is that some websites and some users have JavaScript disabled. Although the percentage is only about 6%, you still need to take that into consideration.
Using a manual redirect
Since the META redirect is not advised for usability reasons and the fact that some users may have JavaScript disabled, using a manual link to redirect your page is advisable.
Having automatic and manual is wasted effort
Some websites use one of the automatic methods but also include the option to manually use the link. In my experience, I have never waited the indicated time to automatically go to the new page and instead simply clicked on the link. So it seems like a wasted effort.
Consider search engines
One thing to consider on your redirect page is the <TITLE> and using the <H1> tag. Often the search engine will list your old page according to what you have as your title in the <HEAD> section, as well as your first <H1> tag.
I've found that my old page often lists higher in Google than my new page, probably because there are more links to the old page. Instead of leaving the <TITLE> blank or saying that the page moved as the title, I keep the original title.
A sample redirect material I use is:
Old Page has moved
to
www.school-for-champions.com/web/new_page.htm
Sorry for the inconvenience
December 2007
This conveys the needed information and performs the task effectively.
Summary
Redirect is sending the user to another page or website. This typically happens when the present page is no longer being used or has had a name change. You can redirect the user either through a META tag or JavaScript. However, using the META tag is discouraged, and it is possible that the user may have JavaScript disabled. Using a manual redirect link is probably the best. It also can help in your search engine ranking.
Consider all possibilities in your web design
Resources
The following resources provide information on this subject:
Websites
Books
Top-rated
books on Website Design
Mini-quiz to check your understanding
If you got all three correct, you are on your way to becoming a Champion in Web Design. If you had problems, you had better look over the material again.
What do you think?
Do you have any questions, comments, or opinions on this subject? If so, send an email with your feedback. We will try to get back to you as soon as possible.
Share link
Feel free to establish a link from your website to pages in this site.
Or use our form to send this link to yourself or a friend.
Students and researchers
The Web address of this page is
www.school-for-champions.com/web/redirect_page.htm.
Please include it as a reference in your report, document, or thesis.
Where can you go from here?
Redirect to Another Web Page