A JavaScript redirect makes use of the programming language JavaScript (JS) to ship customers from one URL to a different. 

You should use a JS redirect to redirect customers to a affirmation web page after they submit a type or to supply fallback redirection if a web page will get deleted, for instance.

However they don’t seem to be typically not really helpful for search engine marketing as a result of engines like google can have problem crawling and indexing websites that depend on them. 

On this article, we’ll talk about making a redirect with JS and counsel options.

Tips on how to Redirect with JavaScript 

There are three predominant methods to redirect to a different URL with JavaScript

  1. window.location.href
  2. location.assign()
  3. location.change()

Set a New window.location.href Property

You should use the window.location.href property in JavaScript to get or set the URL of the present webpage. 

Using “window.location.href” for redirection simulates the motion of clicking on a hyperlink. It provides a brand new entry to the browser’s session historical past. This permits customers to make use of the “again” button to return to the earlier web page.

To redirect a consumer to a distinct URL, you possibly can assign a brand new URL to this property. 

The syntax is:

window.location.href = ‘https://exampleURL.com/’;

When tied to a consumer interaction-triggered change, similar to a button click on, this might redirect the consumer to “https://exampleURL.com/” 

How?

It is advisable add the code inside <script> tags inside the <head> of your webpage and add an “occasion handler” to a button.

This is how you may do this:

<html>
<head>
<script>
perform myFunction() {
window.location.href = "https://exampleURL.com/";
}
</script>
</head>
<physique>
<h2>Redirect to a Webpage</h2>
<p>The location.href technique redirects the consumer to a new webpage:</p>
<button onclick="myFunction()">Redirect</button>
</physique>
</html>

When the consumer clicks the “Redirect” button, it triggers the onclick occasion handler, which calls the myFunction() perform. The execution of myFunction() adjustments the worth of “location.href” to “https://exampleURL.com/”, which instructs the browser to navigate to that URL. 

Let’s run via two different use instances for JavaScript redirects.

The instance beneath demonstrates utilizing setTimeout() for a JavaScript redirect. 

It is a built-in JavaScript perform that permits you to run one other perform after a sure period of time (10 seconds within the instance beneath).

<html>
 <head>
<script sort="textual content/JavaScript">
 perform Redirect() {
window.location = "https://exampleURL.com/";
 }
 doc.write("You will be redirected to the predominant web page in 10 seconds.");
 setTimeout(perform() {
Redirect();
 }, 10000);
</script>
 </head>
</html>

One other use case may embrace redirecting a consumer primarily based on the browser they’re utilizing.

<html>
<head>
<title>Your Web page Title</title>
<script sort="textual content/javascript">
window.onload = perform() {
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.consists of('chrome')) {
window.location.href = "http://www.location.com/chrome";
} else if (userAgent.consists of('safari')) {
window.location.href = "http://www.location.com/safari";
} else {
window.location.href = "http://www.location.com/different";
}
}
</script>
</head>
<physique>
<!-- Your physique content material goes right here -->
</physique>
</html>

High tip: Keep away from creating JavaScript redirects within the header with out tying them to consumer actions to forestall potential redirect loops (extra on this later). To stop customers from utilizing the “again” button, use “window.location.change.”

Redirect Utilizing the placement.assign() Technique

You should use “window.location.assign” as a substitute for “window.location.href” for redirects. 

The syntax is:

window.location.assign(‘https://www.exampleURL.com/’);

Right here’s what it appears like inside a script tag:

<script sort="textual content/JavaScript">
 perform Redirect() {
window.location.assign("https://exampleURL.com/");
 }
</script>

From a consumer’s perspective, a redirect utilizing “window.location.assign()” appears the identical as utilizing “window.location.href”.

It’s because: 

  • They each create a brand new entry within the shopping session historical past (much like clicking on a hyperlink)
  • They each allow customers to return and think about the earlier web page

Equally to “window.location.href,” it directs the browser to load the required URL and add this new web page to the session historical past—permitting customers to make use of the browser’s “again” button to return to the earlier web page.

Nonetheless, “window.location.assign()” calls a perform to show the web page situated on the specified URL. Relying in your browser, this may be slower than merely setting a brand new href property utilizing “window.location.href”. 

However basically, each “window.location.assign()” and altering the placement.href property ought to work simply tremendous. The selection between them is usually a matter of private desire and coding fashion. 

Redirect Utilizing the placement.change() Technique

Like “window.location.assign()”, “window.location.change()” calls a perform to show a brand new doc on the specified URL. 

The syntax is:

window.location.change('https://www.exampleURL.com/');

Right here’s what it appears like inside a script tag:

<script sort="textual content/JavaScript">
 perform Redirect() {
window.location.change("https://exampleURL.com/");
 }
</script>

In contrast to setting a brand new location property or utilizing “window.location.assign()” the change technique doesn’t create a brand new entry in your session historical past. 

As an alternative, it replaces the present entry. That means customers can not click on the “again” button and return to the earlier, pre-redirect web page. 

Why would you need to do that?

Examples of the place you could use the “window.location.change()” technique embrace:

  • Login redirects: After profitable login, customers are directed to the primary website content material, and the login web page is deliberately omitted from the browser historical past to forestall unintentional return via the “again” button
  • Consumer authentication: To redirect unauthenticated customers to a login web page, blocking “again” button entry to the earlier web page
  • Type submission success: Publish-form submission, “window.location.change()” can navigate customers to a hit web page, stopping type resubmission
  • Geolocation: Primarily based on the geolocation of a consumer, you possibly can redirect them to a model of your website that is extra appropriate for his or her location, like a website that is translated to their language

To recap:

Use “window.location.change()” once you don’t need the consumer to have the ability to return to the unique web page utilizing the “again” button.

Use “window.location.assign()” or “window.location.href” once you need the consumer to have the ability to return to the unique web page utilizing the “again” button.

However whilst you can redirect customers to a brand new web page utilizing JavaScript strategies like “window.location.assign()” or “window.location.href”, server-side redirects, similar to HTTP redirects, are sometimes really helpful as a substitute.

Word: In the event you’re simply beginning out or need to apply JavaScript, you possibly can go to an internet site like W3Schools, which gives an interactive W3Schools Tryit Editor for JavaScript, HTML, CSS, and extra:

W3Schools Tryit Editor

How Google Understands and Processes JavaScript Redirects

Google processes JavaScript redirects the identical means it executes and renders JavaScript when crawling and indexing web sites.

Right here’s what that appears like, according to Google:

an image showing how Google processes JavaScript redirects

Google’s net crawler, Googlebot, initially indexes a webpage’s HTML content material. It locations any detected JavaScript, together with redirects, right into a “Render Queue” for later processing.

This two-step course of helps Google rapidly add essential content material to its search index. JavaScript is handled later as a result of Google wants extra assets to course of it.

Study extraJavaScript SEO: How to Optimize JS for Search Engines

However, regardless of being able to dealing with JavaScript redirects, Google advises you to avoid using them if attainable on account of their excessive useful resource consumption and processing time.

Google advises you to avoid using JavaScript redirects

This was additionally echoed by John Mueller in a June 2022 SEO Office Hours video (11:25).

Youtube video thumbnail

So JavaScript-triggered consumer actions, like a redirect after a button or hyperlink click on, could go unnoticed. Therefore Google’s preference for server-side redirects, similar to HTTP redirects—which supply higher effectivity, reliability, and search engine optimization (search engine marketing) advantages.

HTTP redirects have a number of benefits over JavaScript redirects, together with:

  • Constant navigation historical past: HTTP redirects do not intervene with the consumer’s navigation historical past. In contrast to the “location.change()” technique, customers can nonetheless use the again button to return to earlier pages.
  • search engine marketing friendliness: HTTP redirects present specific directions for engines like google when pages transfer, which helps keep a website’s SEO ranking. For instance, not like a JS redirect, a 301 redirect tells engines like google that content material has completely moved to a brand new URL. 
  • Efficiency: HTTP redirects happen on the server stage earlier than the content material is distributed to the browser, which may make them quicker than JavaScript redirects and enhance your page speed
  • Reliability: Customers could select to disable JavaScript for safety and privateness causes. HTTP redirects will work even when a consumer has JavaScript disabled, making them extra dependable.

Study extra: The Ultimate Guide to Redirects: URL Redirections Explained

Tips on how to Determine JavaScript and HTTP Redirect Points

When working with JavaScript and HTTP redirects, the commonest points you would possibly encounter embrace:

  • Redirect chains and loops
  • Linking to pages with redirects

Redirect Chains and Loops

You would possibly create a redirect chain or loop with out realizing it when coping with redirects.

What’s a redirect chain?

A redirect chain is when you could “hop” via a number of URLs earlier than reaching the ultimate one.

For instance, take into account that you just initially have a web page with URL A. You then resolve to redirect URL A to a brand new URL B. At some later level, you select to redirect URL B to URL C.

On this case, you’ve got created a redirect chain from URL A to URL B to URL C. 

and image showing "What is a redirect chain?"

Google can comfortably deal with as much as 10 redirect “hops.”

However too many redirect chains may cause points with website crawling, presumably growing the time it takes a page to load. This might additionally negatively affect your search engine marketing rating and annoy your customers.

To resolve this drawback, redirect URL A to URL C (bypassing URL B).

Right here’s what the redirect chain ought to appear like:

an example of what the redirect chain should look like

What’s a redirect loop?

A redirect loop occurs when a URL redirects to a distinct URL, after which that second URL redirects again to the primary one, making a unending cycle of redirects.

For instance:

and image titled "What is a redirect loop?"

This sort of redirection is damaged and fails to correctly direct guests or engines like google to the supposed URL.

To repair redirect loops, establish the “right” web page and make sure the different web page redirects to it. Then, do away with any additional redirects which are inflicting the loop.

Semrush’s Site Audit tool may also help you detect each HTTP and JavaScript redirect chains.

How?

First, create a project or click on on an present one you need to take a look at.

a created "petco.com" project in Semrush's Site Audit tool

Choose the “Points” tab and seek for “redirect chain” by coming into it into the search bar.

search for “redirect chain” in Site Audit tool

Click on on “# redirect chains and loops.” 

This offers you a report with all of your website’s redirect chain or loop errors.

"3 redirect chains and loops” shown for "petco.com" project in Site Audit

The report consists of particulars such because the web page URL with the redirect hyperlink, the kind of redirect, and the “size” of the chain or loop.

List of redirect chains and loops in Site Audit

You’ll be able to then signal into your content material administration system (CMS) and repair every challenge.

Linking to Pages with Redirects

Suppose you redirect an outdated web page to a brand new one. Some pages in your website would possibly nonetheless hyperlink to the outdated web page. 

If that is the case, customers shall be directed to your outdated hyperlink, and from there, they are going to be redirected to the brand new URL.

Customers won’t even discover this occurring. Nonetheless, this extra redirect can add as much as a “redirect chain” if you happen to fail to deal with the problem the primary time.

This is how this drawback seems:

an example of linking to a page with redirect

Updating the outdated inside hyperlinks to hyperlink on to your new web page’s URL is finest.

That is the way it ought to look:

an example of linking to a page with new URL

However how will you discover hyperlinks pointing to redirects?

You are able to do this by going to the “Crawled Pages” tab of the Web site Audit software:

"Crawled Pages" tab of the Site Audit tool

Subsequent, enter your outdated URL (the one which’s being redirected) into the “Filter by Web page URL” discipline.

entering the new URL into the "Filter by Page URL" field

Press “Enter” to see a report for the URL you simply entered.

Crawled Pages report for one URL

Beneath the “Incoming Inside Hyperlinks” part, you’ll discover a checklist of inside hyperlinks that direct to your outdated URL.

"Incoming Internal Links" section in Site Audit

To keep away from pointless redirects, all you could do is change the outdated hyperlink with the brand new hyperlink. 

How?

You’ll have to do that by going to every web page and manually altering the hyperlink. 

JavaScript Redirect FAQs

What Is a JavaScript Redirect?

A JavaScript redirect is a technique that makes use of JavaScript to direct a browser from the present webpage to a distinct URL. It is sometimes used for conditional navigation or consumer interaction-triggered adjustments, although it requires the consumer’s browser to allow JavaScript.

Are Redirects with JavaScript Good or Dangerous For search engine marketing?

JavaScript redirects can be utilized with out essentially harming search engine marketing however are typically much less favored than server-side redirects. This is because of their dependence on JavaScript being enabled on the consumer’s browser and their potential to be neglected by engines like google in the course of the crawling and indexing course of.

What’s the Greatest Various to a JavaScript Redirect?

The very best different is to make use of server-side redirect strategies, similar to 301 redirects, that do not depend on JavaScript and supply specific directions that engines like google higher perceive. 

Need to study extra about JavaScript and redirects? 

Try these assets:

admin

Author admin

More posts by admin

Leave a Reply