Easy methods to Redirect to a New URL

By 4 months ago

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

You need to 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 aren’t usually not really helpful for website positioning 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 recommend options.

Easy methods to Redirect with JavaScript 

There are three important 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 need to 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’ll be able to 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, akin to a button click on, this could redirect the consumer to “https://exampleURL.com/” 

How?

You should add the code within <script> tags within the <head> of your webpage and add an “occasion handler” to a button.

This is how you might try 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 by way of two different use instances for JavaScript redirects.

The instance under 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 under).

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

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

<html>
<head>
<title>Your Web page Title</title>
<script kind="textual content/javascript">
window.onload = perform() 
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.contains('chrome')) 
window.location.href = "http://www.location.com/chrome";
 else if (userAgent.contains('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>

Prime 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() Methodology

You need to use “window.location.assign” as an alternative choice to “window.location.href” for redirects. 

The syntax is:

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

Right here’s what it seems like within a script tag:

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

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

It is because: 

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

Equally to “window.location.href,” it directs the browser to load the desired 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 positioned 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 wonderful. The selection between them is generally a matter of private choice and coding fashion. 

Redirect Utilizing the placement.change() Methodology

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 seems like within a script tag:

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

Not like 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 wish to do that?

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

  • Login redirects: After profitable login, customers are directed to the principle website content material, and the login web page is deliberately omitted from the browser historical past to forestall unintentional return by way of the “again” button
  • Person 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’ll be able to 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()” whenever 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” whenever 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, akin to HTTP redirects, are usually really helpful as a substitute.

Notice: In case you’re simply beginning out or wish to apply JavaScript, you’ll be able to go to an internet site like W3Schools, which affords 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 internet 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 sources to course of it.

Be taught extra: JavaScript website positioning: Easy methods to Optimize JS for Search Engines

However, regardless of being able to dealing with JavaScript redirects, Google advises you to avoid using them if doable resulting from 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, akin to HTTP redirects—which supply larger effectivity, reliability, and search engine marketing (website positioning) 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. Not like the “location.change()” technique, customers can nonetheless use the again button to return to earlier pages.
  • website positioning friendliness: HTTP redirects present specific directions for engines like google when pages transfer, which helps preserve a website’s website positioning rating. For instance, in contrast to 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 might make them quicker than JavaScript redirects and enhance your web page velocity
  • 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.

Be taught extra: The Final Information to Redirects: URL Redirections Defined

Easy methods to Establish JavaScript and HTTP Redirect Points

When working with JavaScript and HTTP redirects, the most typical 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” by way of a number of URLs earlier than reaching the ultimate one.

For instance, think about 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 have 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 could cause points with web site crawling, probably growing the time it takes a web page to load. This might additionally negatively affect your website positioning rating and annoy your customers.

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

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

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 endless cycle of redirects.

For instance:

and image titled "What is a redirect loop?"

Such a redirection is damaged and fails to correctly direct guests or engines like google to the meant URL.

To repair redirect loops, determine the “appropriate” web page and make sure the different web page redirects to it. Then, eliminate any additional redirects which might be inflicting the loop.

Semrush’s Website Audit device will help you detect each HTTP and JavaScript redirect chains.

How?

First, create a venture or click on on an current one you wish to have 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 contains 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 possibly can then signal into your content material administration system (CMS) and repair every problem.

Linking to Pages with Redirects

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

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

Customers may not even discover this taking place. Nonetheless, this extra redirect can add as much as a “redirect chain” in case you fail to deal with the problem the primary time.

This is how this downside seems:

an example of linking to a page with redirect

Updating the previous inner 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 Website Audit device:

"Crawled Pages" tab of the Site Audit tool

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

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 Inner Hyperlinks” part, you’ll discover a record of inner hyperlinks that direct to your previous URL.

"Incoming Internal Links" section in Site Audit

To keep away from pointless redirects, all you could do is change the previous 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 usually 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 Unhealthy For website positioning?

JavaScript redirects can be utilized with out essentially harming website positioning however are usually 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?

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

Wish to be taught extra about JavaScript and redirects? 

Take a look at these sources:

Tags: ,