Establishing an HTML redirect to a different web page is simple.
In truth, you are able to do it in just some minutes (even if you happen to’re not a technical skilled).
On this information, we’ll stroll you thru precisely the way to arrange redirects utilizing HTML step-by-step. Plus, we’ll share some various redirect strategies which are even higher.
Earlier than we dive in, let’s cowl the fundamentals.
What Is an HTML Redirect?
An HTML redirect is a technique to mechanically ship guests from one URL to a different utilizing a easy HTML tag (referred to as meta refresh), which you’ll add to the <head> part of your HTML.
Right here’s a fast instance of what that tag may appear to be:
<meta http-equiv="refresh" content material="0; URL=https://instance.com/new-page" />
On this instance, the browser will refresh the prevailing web page instantly and redirect the person to the brand new URL (https://instance.com/new-page).
You may use an HTML redirect (additionally referred to as a meta redirect) when:
- Migrating pages: You have moved a web page to a brand new URL and need to mechanically ahead guests to the brand new location
- Merging content material: You need to mix a number of pages into one to forestall these pages from competing with one another and to consolidate site visitors
- Working non permanent campaigns: You are working a short lived promotional web page that shows a countdown (like “Sale begins in 5 minutes!”) and must mechanically redirect customers to a distinct web page when the timer reaches zero
- Working A/B assessments: You need to cut up take a look at completely different variations of a web page by randomly redirecting a portion of your site visitors to a variant web page
- Managing person circulate: You are making a easy splash web page (an introductory display) or interstitial that ought to mechanically ahead guests to the principle content material after just a few seconds
HTML redirects may be useful if you happen to don’t have entry to your server settings. Nevertheless, they’re inferior to server-side redirects, which provide higher efficiency (quicker load instances) and extra management over the redirect course of, together with the flexibility to deal with several types of HTTP status codes.
That mentioned, if you happen to want a fast repair to reroute guests with out modifying server configurations, an HTML redirect may be simply what you want.
The way to Redirect a Web page to One other Web page in HTML
Merely paste the under code into the <head> part of the web page you need to redirect and exchange the “content material” and the “URL” values.
<meta http-equiv="refresh" content material="0; URL=https://instance.com/new-page"/>
Right here’s an outline of the principle parts:
- http-equiv=“refresh” tells the browser to redirect the web page
- content material=“0; specifies what number of seconds to attend earlier than redirecting. Setting this to “0” creates an immediate redirect, whereas another quantity (like “5”) creates a delayed redirect that waits the designated variety of seconds earlier than sending customers to the brand new web page.
- URL=“URL=https://www.yoururl.com/newpage” tells the browser which URL to ship customers to
Simply be sure you’re cautious when selecting between an immediate and a delayed redirect.
Google interprets instant redirects as permanent (that means you don’t plan to make use of the redirected web page once more) and delayed redirects as non permanent.
HTML Redirect Greatest Practices
When implementing an HTML redirect to a brand new web page, observe these finest practices:
- Keep away from redirect chains. By no means redirect to a web page that’s already been redirected. These chains not solely frustrate customers, but additionally hurt your website positioning. As an alternative, all the time redirect to the ultimate vacation spot web page.
- Redirect to related pages. Ship customers to pages that match their doubtless intent. For instance, if a product web page is briefly unavailable, redirect to an analogous product web page reasonably than an unrelated class web page. To assist customers proceed their journeys naturally and cut back your bounce rates.
- Give context. Since HTML redirects require the unique web page to load first, add a quick message telling customers why they’re being redirected like “This assortment has been up to date. Taking you to our newest designs.” This context helps customers perceive what’s occurring and reduces confusion.
- Embody backup hyperlinks. Older browsers won’t help meta refresh tags, so it’s a good suggestion to show a fallback hyperlink with a message like “When you’re not redirected mechanically, click on right here.” This ensures everybody can attain their vacation spot, even when the automated redirect fails.
- Set acceptable timing. When you’re utilizing delayed redirects, make sure that they’re timed sensibly to keep away from dropping customers earlier than the redirect occurs. A five-second delay works effectively for many conditions.
Why to Keep away from HTML Redirects When Attainable
Though HTML redirects may be handy, there are just a few causes to keep away from them if you happen to can:
- Poor person expertise: HTML redirects require the browser to first load the unique web page, course of the meta refresh tag, after which load the vacation spot web page. This double-loading makes your web site really feel sluggish and may frustrate guests.
- website positioning implications: Engines like google must course of each pages, which ends up in slower crawling of your web site. Plus, HTML redirects go alongside much less hyperlink fairness from the unique web page in comparison with different kinds of redirects.
- Inconsistent browser help: Some older browsers may deal with meta refresh tags in a different way and even ignore them. This inconsistency can result in unpredictable habits in your guests.
- Safety issues: Meta refresh redirects are simpler for malicious actors to control in comparison with server-side redirects. They’re generally utilized in phishing attacks, which is why some browsers flag pages with meta refreshes as doubtlessly suspicious.
Higher Alternate options to HTML Redirects
As an alternative of implementing redirects with HTML, think about using extra dependable options like server-side 301 and 302 redirects.
301 and 302 redirects are quicker than HTML redirects, are much less more likely to harm your website positioning efficiency, and have much less influence on the person expertise.
This is what every redirect means and when to make use of them:
301 Redirects
301 redirects are everlasting redirects that inform engines like google a web page has moved perpetually.
Use these redirects when:
- You have completely moved a web page to a brand new URL
- You are transferring to a brand new area
- You are consolidating a number of pages into one web page
With a 301 redirect, you’re telling engines like google the outdated web page now not exists.
With this technique, you go on a lot of the hyperlink fairness from the outdated web page to the brand new web page. And engines like google know to replace the outdated hyperlink with the brand new one within the search outcomes.
302 Redirects
302 redirects are non permanent redirects that inform engines like google a web page has moved for the brief time period.
Use 302 redirects when:
- You are A/B testing completely different web page variations
- You are doing non permanent upkeep on a web page
- You must redirect customers based mostly on their areas or gadgets
- You are working a short-term promotion or marketing campaign
As a result of 302 redirects are solely non permanent, engines like google could not replace search outcomes with the brand new hyperlink.
This implies you should preserve monitor of your 302 redirects and take away them if you now not want them.
Simply Audit Your Redirects
In case your web site has redirects, you’ll desire a fuss-free technique to audit them and ensure they’re working as supposed.
You should use a spreadsheet for monitoring, however spreadsheets may be tedious to handle.
Plus, if you happen to overlook so as to add a redirect to your sheet, you may overlook about it (and overlook to take away it if wanted).
A neater method is to make use of Semrush’s Site Audit software.
To start out, enter your area identify and click on “Begin Audit.”
The software will immediate you to arrange a mission and configure your audit settings. After that, the software will mechanically begin auditing your web site.
As soon as the audit is full, you’ll see an outline report like this.
Then, click on the quantity beside “Redirects.”
Right here, you’ll see a listing of the redirects in your web site, so you can also make positive every web page has the appropriate kind of redirect.
Website Audit additionally helps you see redirect chains.
Right here’s how:
Below the “Points” tab, seek for “redirect chain” and click on on the variety of redirect chains and loops discovered.
Use this report back to establish—after which repair—pages with a number of redirects to offer customers a greater expertise in your web site.
Whenever you use Website Audit, you may be assured that customers all the time find yourself the place they’re alleged to.
