What An HTML Redirect Is And How To Set Them Up On Your Website
By Prebuilt Sites Team
July 25, 2022
Whenever you move a page or update a URL, you’ll need to redirect traffic from the old URL to the new one. This way you’re able to tell the user where they can find the information that they’re looking for in an easy and seamless fashion. There are many ways to redirect traffic, and this article walks you through the proper way to set up an HTML redirect on your site. What is HTML redirect? HTML redirects are the simplest way to redirect a URL as they only involve a small modification to the source code of the old HTML page, and can be made easily and quickly. Keep reading for step by step instructions on how to set up an HTML redirect on your website properly. If you have any questions about how to make changes to your website, reach out to us at Prebuilt Sites or The BBS Agency. We’d love to help you out!
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 ensures 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 (also sometimes called a meta refresh or meta redirect) is a way of redirecting one HTML page to another in the HTML source code. An HTML redirect includes instructions in the <head> section of the document that tell the web browser to automatically refresh a different page, with an optional time delay before the refresh occurs.
HTML redirects are the simplest way to redirect a URL. They only involve a small modification to the source code of the old HTML page, and can be made easily and quickly. A HTML redirect will send both human users and search engines to the page you want them to 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.
Redirect HTML Code Example
Now, let’s look at a code example for an HTML redirect to better understand how they work.
Here’s the code for an HTML page that redirects users to hubspot.com after a delay of three seconds. Note that the <meta> tag is placed inside the <head> of the document.
<html>
<head>
<title>Old Page</title>
<meta charset="UTF-8" />
<meta http-equiv="refresh" content="3; URL=https://www.hubspot.com/" />
</head>
<body>
<p>This page has been moved. If you are not redirected within 3 seconds, click <a href="https://www.hubspot.com/">here</a> to go to the HubSpot homepage.</p>
</body>
</html>This code is a good example of how to write an HTML redirect for a couple of 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 go to the new page immediately. It also gives users an out if the HTML refresh does not work due to browser incompatibility — these visitors can simply click 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 situations when you quickly need to direct users from one page to another, HTML redirects come in handy and are a great 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.
Originally published on Hubspot.
