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.
Set a New window.location.href Property
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/”
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:
window.location.href = "https://exampleURL.com/";
<h2>Redirect to a Webpage</h2>
<p>The location.href technique redirects the consumer to a new webpage:</p>
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.
window.location = "https://exampleURL.com/";
doc.write("You will be redirected to the important web page in 10 seconds.");
One other use case might embrace redirecting a consumer primarily based on the browser they’re utilizing.
<title>Your Web page Title</title>
window.onload = perform()
var userAgent = navigator.userAgent.toLowerCase();
window.location.href = "http://www.location.com/chrome";
else if (userAgent.contains('safari'))
window.location.href = "http://www.location.com/safari";
window.location.href = "http://www.location.com/different";
<!-- Your physique content material goes right here -->
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:
Right here’s what it seems like within a script tag:
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:
Right here’s what it seems like within a script tag:
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
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.
Right here’s what that appears like, according to Google:
This was additionally echoed by John Mueller in a June 2022 SEO Office Hours video (11:25).
- 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.
Be taught extra: The Final Information to Redirects: URL Redirections Defined
- 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.
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:
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.
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.
First, create a venture or click on on an current one you wish to have a look at.
Choose the “Points” tab and seek for “redirect chain” by coming into it into the search bar.
Click on on “# redirect chains and loops.”
This offers you a report with all of your website’s redirect chain or loop errors.
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.
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:
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:
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:
Subsequent, enter your previous URL (the one which’s being redirected) into the “Filter by Web page URL” subject.
Press “Enter” to see a report for the URL you simply entered.
Beneath the “Incoming Inner Hyperlinks” part, you’ll discover a record of inner hyperlinks that direct to your previous URL.
To keep away from pointless redirects, all you could do is change the previous hyperlink with the brand new hyperlink.
You’ll have to do that by going to every web page and manually altering the hyperlink.
Take a look at these sources: