How to Set Up an HTML Redirect (+ Alternatives)

5 months ago 141
ARTICLE AD BOX

Setting up an HTML redirect to different leafage is easy.

In fact, you tin bash it successful conscionable a fewer minutes (even if you're not a method expert).

In this guide, we’ll locomotion you done precisely however to acceptable up redirects utilizing HTML measurement by step. Plus, we'll stock immoderate alternate redirect methods that are adjacent better.

Before we dive in, let's screen the basics.

What Is an HTML Redirect?

An HTML redirect is simply a mode to automatically nonstop visitors from 1 URL to different utilizing a elemental HTML tag (called meta refresh), which you tin adhd to the <head> conception of your HTML.

Here’s a speedy illustration of what that tag mightiness look like:

<meta http-equiv="refresh" content="0; URL=https://example.com/new-page" />

In this example, the browser volition refresh the existing leafage instantly and redirect the idiosyncratic to the caller URL (https://example.com/new-page).

You mightiness usage an HTML redirect (also called a meta redirect) when:

  • Migrating pages: You've moved a leafage to a caller URL and privation to automatically guardant visitors to the caller location 
  • Merging content: You privation to harvester aggregate pages into 1 to forestall those pages from competing with each different and to consolidate traffic
  • Running impermanent campaigns: You're moving a impermanent promotional leafage that displays a countdown (like "Sale starts successful 5 minutes!") and needs to automatically redirect users to a antithetic leafage erstwhile the timer reaches zero
  • Running A/B tests: You privation to divided trial antithetic versions of a leafage by randomly redirecting a information of your postulation to a variant page
  • Managing idiosyncratic flow: You're creating a elemental splash leafage (an introductory screen) oregon interstitial that should automatically guardant visitors to the main contented aft a fewer seconds

HTML redirects tin beryllium useful if you don’t person entree to your server settings. However, they're not arsenic bully arsenic server-side redirects, which connection amended show (faster load times) and much power implicit the redirect process, including the quality to grip antithetic types of HTTP presumption codes.

That said, if you request a speedy hole to reroute visitors without modifying server configurations, an HTML redirect tin beryllium conscionable what you need.

How to Redirect a Page to Another Page successful HTML

Simply paste the beneath codification into the <head> conception of the leafage you privation to redirect and regenerate the “content” and the “URL” values.

<meta http-equiv="refresh" content="0; URL=https://example.com/new-page"/>

Here’s an overview of the main components:

  • http-equiv=“refresh” tells the browser to redirect the page
  • content=“0; specifies however galore seconds to hold earlier redirecting. Setting this to "0" creates an instant redirect, portion immoderate different fig (like "5") creates a delayed redirect that waits the designated fig of seconds earlier sending users to the caller page.
  • URL=“URL=https://www.yoururl.com/newpage” tells the browser which URL to nonstop users to

Just marque definite you’re cautious erstwhile choosing betwixt an instant and a delayed redirect. 

Google interprets instant redirects arsenic permanent (meaning you don’t program to usage the redirected leafage again) and delayed redirects arsenic temporary.

HTML Redirect Best Practices

When implementing an HTML redirect to a caller page, travel these champion practices: 

  • Avoid redirect chains. Never redirect to a leafage that’s already been redirected. These chains not lone frustrate users, but besides harm your SEO. Instead, ever redirect to the last destination page.
  • Redirect to applicable pages. Send users to pages that lucifer their apt intent. For example, if a merchandise leafage is temporarily unavailable, redirect to a akin merchandise leafage alternatively than an unrelated class page. To assistance users proceed their journeys people and trim your bounce rates.
  • Give context. Since HTML redirects necessitate the archetypal leafage to load first, adhd a little connection telling users wherefore they’re being redirected similar "This postulation has been updated. Taking you to our latest designs." This discourse helps users recognize what's happening and reduces confusion.
  • Include backup links. Older browsers mightiness not enactment meta refresh tags, truthful it’s a bully thought to show a fallback nexus with a connection similar "If you’re not redirected automatically, click here." This ensures everyone tin scope their destination, adjacent if the automatic redirect fails.
  • Set due timing. If you’re utilizing delayed redirects, marque definite they’re timed sensibly to debar losing users earlier the redirect happens. A five-second hold works good for astir situations. 

Why to Avoid HTML Redirects When Possible

Although HTML redirects tin beryllium convenient, determination are a fewer reasons to debar them if you can:

  • Poor idiosyncratic experience: HTML redirects necessitate the browser to archetypal load the archetypal page, process the meta refresh tag, and past load the destination page. This double-loading makes your tract consciousness sluggish and tin frustrate visitors.
  • SEO implications: Search engines request to process some pages, which leads to slower crawling of your site. Plus, HTML redirects walk on little nexus equity from the archetypal leafage compared to different types of redirects.
  • Inconsistent browser support: Some older browsers mightiness grip meta refresh tags otherwise oregon adjacent disregard them. This inconsistency tin pb to unpredictable behaviour for your visitors.
  • Security concerns: Meta refresh redirects are easier for malicious actors to manipulate compared to server-side redirects. They're commonly utilized successful phishing attacks, which is wherefore immoderate browsers emblem pages with meta refreshes arsenic perchance suspicious.

Better Alternatives to HTML Redirects

Instead of implementing redirects with HTML, see utilizing much reliable alternatives similar server-side 301 and 302 redirects.

301 and 302 redirects are faster than HTML redirects, are little apt to wounded your SEO performance, and person little interaction connected the idiosyncratic experience. 

Here's what each redirect means and erstwhile to usage them:

301 Redirects

301 redirects are imperishable redirects that archer hunt engines a leafage has moved forever.

Use these redirects when:

  • You've permanently moved a leafage to a caller URL
  • You're moving to a caller domain
  • You're consolidating aggregate pages into 1 page
A deleted leafage   is 301 redirected to the caller   page.

With a 301 redirect, you’re telling hunt engines the aged leafage nary longer exists. 

With this method, you walk connected overmuch of the nexus equity from the aged leafage to the caller page. And hunt engines cognize to update the aged nexus with the caller 1 successful the hunt results.

302 Redirects

302 redirects are impermanent redirects that archer hunt engines a leafage has moved for the abbreviated term.

Use 302 redirects when:

  • You're A/B investigating antithetic leafage versions
  • You're doing impermanent attraction connected a page
  • You request to redirect users based connected their locations oregon devices
  • You're moving a short-term promotion oregon campaign

Because 302 redirects are lone temporary, hunt engines whitethorn not update hunt results with the caller link.

This means you request to support way of your 302 redirects and region them erstwhile you nary longer request them.

Easily Audit Your Redirects

If your tract has redirects, you’ll privation a fuss-free mode to audit them and marque definite they’re moving arsenic intended.

You tin usage a spreadsheet for tracking, but spreadsheets tin beryllium tedious to manage.

Plus, if you hide to adhd a redirect to your sheet, you mightiness hide astir it (and hide to region it if needed).

An easier mode is to usage Semrush’s Site Audit tool.

To start, participate your domain sanction and click “Start Audit.” 

An illustration  domain is entered into the tool.

The instrumentality volition punctual you to acceptable up a task and configure your audit settings. After that, the instrumentality volition automatically commencement auditing your website.

Once the audit is complete, you’ll spot an overview study similar this. 

Then, click the fig beside “Redirects.”

Under Crawled Pages, redirects are listed with a blue, hyperlinked number.

Here, you’ll spot a database of the redirects connected your site, truthful you tin marque definite each leafage has the close benignant of redirect.

A database  of leafage   URLs has a 301 redirect presumption    code.

Site Audit besides helps you spot redirect chains.

Here’s how:

Under the "Issues" tab, hunt for "redirect chain" and click connected the fig of redirect chains and loops found.

For this example, 10 redirect chains and loops were discovered during the tract  audit.

Use this study to identify—and past fix—pages with aggregate redirects to springiness users a amended acquisition connected your site.

The study  lists leafage   URL with redirect link, the archetypal   redirect URL, the last  destination URL, and more.

When you usage Site Audit, you tin beryllium assured that users ever extremity up wherever they’re expected to.