A JavaScript redirect makes use of the programming language JavaScript (JS) to ship customers from one URL to a different.
You should utilize a JS redirect to redirect customers to a affirmation web page after they submit a type or to offer fallback redirection if a web page will get deleted, for instance.
However they don’t seem to be usually not advisable for search engine optimisation as a result of search engines like google can have issue crawling and indexing websites that depend on them.
On this article, we’ll talk about making a redirect with JS and recommend alternate options.
Find out how to Redirect with JavaScript
There are three important methods to redirect to a different URL with JavaScript:
- window.location.href
- location.assign()
- location.exchange()
Set a New window.location.href Property
You should utilize 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 person to a unique 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 person interaction-triggered change, akin to a button click on, this is able to redirect the person to “https://exampleURL.com/”
How?
You have to add the code inside <script> tags inside the <head> of your webpage and add an “occasion handler” to a button.
Here is how you would do this:
<html>
<head>
<script>
operate myFunction() {
window.location.href = "https://exampleURL.com/";
}
</script>
</head>
<physique>
<h2>Redirect to a Webpage</h2>
<p>The location.href methodology redirects the person to a new webpage:</p>
<button onclick="myFunction()">Redirect</button>
</physique>
</html>
When the person clicks the “Redirect” button, it triggers the onclick occasion handler, which calls the myFunction() operate. 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 circumstances for JavaScript redirects.
The instance beneath demonstrates utilizing setTimeout() for a JavaScript redirect.
It is a built-in JavaScript operate that permits you to run one other operate after a sure period of time (10 seconds within the instance beneath).
<html>
<head>
<script kind="textual content/JavaScript">
operate Redirect() {
window.location = "https://exampleURL.com/";
}
doc.write("You will be redirected to the important web page in 10 seconds.");
setTimeout(operate() {
Redirect();
}, 10000);
</script>
</head>
</html>
One other use case might embrace redirecting a person based mostly on the browser they’re utilizing.
<html>
<head>
<title>Your Web page Title</title>
<script kind="textual content/javascript">
window.onload = operate() {
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>
Prime tip: Keep away from creating JavaScript redirects within the header with out tying them to person actions to forestall potential redirect loops (extra on this later). To stop customers from utilizing the “again” button, use “window.location.exchange.”
Redirect Utilizing the placement.assign() Technique
You should utilize “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 to be like inside a script tag:
<script kind="textual content/JavaScript">
operate Redirect() {
window.location.assign("https://exampleURL.com/");
}
</script>
From a person’s perspective, a redirect utilizing “window.location.assign()” seems to be the identical as utilizing “window.location.href”.
It is because:
- They each create a brand new entry within the looking session historical past (just like clicking on a hyperlink)
- They each allow customers to return and consider 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.
Nevertheless, “window.location.assign()” calls a operate 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 on the whole, each “window.location.assign()” and altering the placement.href property ought to work simply high-quality. The selection between them is generally a matter of non-public choice and coding model.
Redirect Utilizing the placement.exchange() Technique
Like “window.location.assign()”, “window.location.exchange()” calls a operate to show a brand new doc on the specified URL.
The syntax is:
window.location.exchange('https://www.exampleURL.com/');
Right here’s what it seems to be like inside a script tag:
<script kind="textual content/JavaScript">
operate Redirect() {
window.location.exchange("https://exampleURL.com/");
}
</script>
In contrast to setting a brand new location property or utilizing “window.location.assign()” the exchange methodology doesn’t create a brand new entry in your session historical past.
As an alternative, it replaces the present entry. Which 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 might use the “window.location.exchange()” methodology embrace:
- Login redirects: After profitable login, customers are directed to the principle web site content material, and the login web page is deliberately omitted from the browser historical past to forestall unintended 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.exchange()” can navigate customers to a hit web page, stopping type resubmission
- Geolocation: Based mostly on the geolocation of a person, you’ll be able to redirect them to a model of your web site that is extra appropriate for his or her location, like a web site that is translated to their language
To recap:
Use “window.location.exchange()” once you don’t need the person 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 person 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 advisable as an alternative.
Observe: In the event you’re simply beginning out or need to observe 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:
How Google Understands and Processes JavaScript Redirects
Google processes JavaScript redirects the identical approach it executes and renders JavaScript when crawling and indexing web sites.
Right here’s what that appears like, in keeping with Google:
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 shortly add essential content material to its search index. JavaScript is handled later as a result of Google wants extra assets to course of it.
Be taught extra: JavaScript search engine optimisation: Find out how to Optimize JS for Search Engines
However, regardless of being able to dealing with JavaScript redirects, Google advises you to keep away from utilizing them if doable as a result of their excessive useful resource consumption and processing time.
This was additionally echoed by John Mueller in a June 2022 search engine optimisation Workplace Hours video (11:25).
So JavaScript-triggered person actions, like a redirect after a button or hyperlink click on, might go unnoticed. Therefore Google’s choice for server-side redirects, akin to HTTP redirects—which provide better effectivity, reliability, and search engine marketing (search engine optimisation) advantages.
HTTP redirects have a number of benefits over JavaScript redirects, together with:
- Constant navigation historical past: HTTP redirects do not intervene with the person’s navigation historical past. In contrast to the “location.exchange()” methodology, customers can nonetheless use the again button to return to earlier pages.
- search engine optimisation friendliness: HTTP redirects present express directions for search engines like google when pages transfer, which helps keep a web site’s search engine optimisation rating. For instance, not like a JS redirect, a 301 redirect tells search engines like google that content material has completely moved to a brand new URL.
- Efficiency: HTTP redirects happen on the server degree earlier than the content material is distributed to the browser, which may make them sooner than JavaScript redirects and enhance your web page pace
- Reliability: Customers might select to disable JavaScript for safety and privateness causes. HTTP redirects will work even when a person has JavaScript disabled, making them extra dependable.
Be taught extra: The Final Information to Redirects: URL Redirections Defined
Find out 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 it is advisable to “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.
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 impression your search engine optimisation 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 to be:
What’s a redirect loop?
A redirect loop occurs when a URL redirects to a unique URL, after which that second URL redirects again to the primary one, making a unending cycle of redirects.
For instance:
This kind of redirection is damaged and fails to correctly direct guests or search 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, eliminate any additional redirects which might be inflicting the loop.
Semrush’s Web site Audit device can assist you detect each HTTP and JavaScript redirect chains.
How?
First, create a venture or click on on an current one you need to have a look at.
Choose the “Points” tab and seek for “redirect chain” by getting into it into the search bar.
Click on on “# redirect chains and loops.”
This offers you a report with all of your web site’s redirect chain or loop errors.
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.
You possibly can then signal into your content material administration system (CMS) and repair every concern.
Linking to Pages with Redirects
Suppose you redirect an previous web page to a brand new one. Some pages in your web site would possibly nonetheless hyperlink to the previous web page.
If that is the case, customers might 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. Nevertheless, this extra redirect can add as much as a “redirect chain” if you happen to fail to deal with the difficulty the primary time.
Here is how this drawback seems:
Updating the previous inner hyperlinks to hyperlink on to your new web page’s URL is greatest.
That is the way it ought to look:
However how are you going to discover hyperlinks pointing to redirects?
You are able to do this by going to the “Crawled Pages” tab of the Web site Audit device:
Subsequent, enter your previous URL (the one which’s being redirected) into the “Filter by Web page URL” area.
Press “Enter” to see a report for the URL you simply entered.
Beneath the “Incoming Inner Hyperlinks” part, you’ll discover a listing of inner hyperlinks that direct to your previous URL.
To keep away from pointless redirects, all it is advisable to do is exchange 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 unique URL. It is usually used for conditional navigation or person interaction-triggered adjustments, although it requires the person’s browser to allow JavaScript.
Are Redirects with JavaScript Good or Dangerous For search engine optimisation?
JavaScript redirects can be utilized with out essentially harming search engine optimisation however are usually much less favored than server-side redirects. This is because of their dependence on JavaScript being enabled on the person’s browser and their potential to be neglected by search 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 various is to make use of server-side redirect strategies, akin to 301 redirects, that do not depend on JavaScript and supply express directions that search engines like google higher perceive.
Need to study extra about JavaScript and redirects?
Try these assets:
