How to Set Up an HTML Redirect on Your Website
If you make frequent updates to your business website, you’re probably familiar with redirecting. A redirect essentially tells the user’s browser, “Hey, the content you’re looking for isn’t at this URL. But don’t worry, we’ll send you to the right place.”
While it’s best to avoid redirecting when possible, most site owners usually need to at some point, whether it’s relocating a page, rearranging website structure, moving domains, or updating URLs from HTTP to HTTPs. Proper redirecting ensure that both visitors and search engines don’t run into dead-end 404 pages, which can hurt your user experience and SEO rankings in one blow.
Whatever your reasons for redirection, there are a few ways to go about it. In this post, you’ll learn one common method, the HTML redirect. We’ll discuss what an HTML redirect is and how to add them to your website, even if you don’t have in-depth knowledge of HTML. We’ll also look at some alternative methods for better accessibility. Let’s get started.
What is an HTML redirect?
An HTML redirect (likewise in some cases called a meta refresh or meta redirect) is an approach to redirecting one HTML page to one more in the HTML source code. An HTML redirect remembers directions for thesection of the document that tells the web browser to automatically refresh an alternate page, with an optional time delay before the refresh happens.
HTML redirects are the easiest method for redirecting a URL. They just include a little change to the source code of the old HTML page, and can be made effectively and rapidly. An HTML redirect will send both human users and search engines to the page you believe that they should see.
Additionally, an HTML redirect lets you set a delay time (in seconds) before the user or search engine bot is sent to the new page. This delay comes in handy if you want to display a brief message before the redirection occurs.
How to Redirect to Another Page in HTML
To redirect one HTML page to another page, you need to add a <meta> tag inside the <head> section of the old HTML page. The <head> section of an HTML document contains metadata that is useful for the browser, but invisible to users viewing the page.
The syntax for this <meta> tag is as follows:
<meta http-equiv="refresh" content="delay_time; URL=new_website_url" />
In an HTML redirect, the <meta> tag contains two attributes, http-equiv and content. The value of http-equiv is always refresh — this tells the browser that you want to automatically refresh the page.
Next, the content attribute takes two values:
- delay_time is a numeric value that sets the delay before the browser loads the new web page. For instance, a value of 3 would make the browser wait three seconds on the old page before redirecting.
- new_website_url is the URL of the web page you want to redirect to.
Be sure to place these two values for content inside one pair of double quotes, separated by a semicolon. Otherwise, the redirect will not work.
If you want to instantly send users to the new web pages, simply set your delay time to 0. However, there may be instances when you want to set a delay before redirecting. The most common reason is to inform users that the current page no longer exists and that they will be redirected soon. This message usually includes a link to send users to the new page if they are not redirected within a set amount of time.
If a visitor is using an older web browser, it’s also possible that the <meta> tag will not be read properly and the redirect will not occur. If this happens, setting a delay allows the user to click the hyperlink on the old page and be sent to the new page.
This video explains all of these steps in more detail.
Redirect HTML Code Example
Here’s the code for an HTML page that redirects users to theduranetworks.com after a delay of three seconds. Note that the <meta> tag is placed inside the <head> of the document.
<!DOCTYPE html>
<html>
<head>
<title>Old Page</title>
<meta charset="UTF-8" />
<meta http-equiv="refresh" content="3; URL=https://www.theduranetworks.com/" />
</head>
<body>
<p>This page has been moved. If you are not redirected within 3 seconds, click <a href="https://www.theduranetworks.com/">here</a> to go to the Dura Networks homepage.</p>
</body>
</html>
This code is a genuine example of how to write an HTML redirect for two or three reasons. First, the delay is short enough to not cause too much disruption to the user experience while still providing most users enough time to read the message on-screen
Second, the message gives users the option to promptly go to the new page. It additionally gives users an out if the HTML refresh doesn’t work because of browser incompatibility — these visitors can basically tap the anchor link to go to the new page.
HTML Redirect Issues and Alternatives
While HTML redirects are the simplest way to implement a redirect, they also present accessibility issues. Some older browsers will not render the <meta> tag properly, which results in the old page flashing on-screen before the new page loads (even if you set a delay longer than 0), or the page not refreshing at all.
If you foresee this being a problem for many users, you can set the delay time to 0 and, in case the browser does not automatically load the new page, include an anchor link to the new page in the <body> section as shown in the example above.
To avoid these problems, consider using another redirect method on your website. The most common redirect method today is an HTTP redirect. HTTP redirects are configured on the server hosting the website, and can be either a 301 (permanent) redirect or a 302 (temporary) redirect.
See our guide to setting up 301 redirects for more help here — your process will depend on what specific technologies you use to power your website. For example, if you run a WordPress website, your best bet is to use a WordPress redirect plugin, which will take care of the back-end stuff for you and allows you to manage and track all redirects on your site from your dashboard.
JavaScript redirects are another common alternative, although this requires some knowledge of JavaScript programming and likely more trial-and-error to get right. To learn more about JavaScript redirects, you can refer to this beginner’s tutorial.
HTML Redirects: Send users to the right place.
For circumstances when you rapidly need to direct users starting with one page then onto the next, HTML redirects prove to be useful and are an extraordinary tool for any website owner to have in their back pocket.
However, this kind of redirect probably shouldn’t be your go-to every time. It’s often better for all users to implement a standard HTTP 301 (permanent) redirect. When in doubt, reach out to your platform support team to get their opinion on what’s best for your users and your SEO.
Facebook
Twitter
LinkedIn
Pinterest
Telegram
Reddit