How to Redirect to a New URL
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 aren’t typically not advisable 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 counsel options.
Set a New window.location.href Property
The usage of “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 enables 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, equivalent to a button click on, this could redirect the consumer to “https://exampleURL.com/”
You must add the code within <script> tags within the <head> of your webpage and add an “occasion handler” to a button.
Here is how you would try this:
window.location.href = "https://exampleURL.com/";
<h2>Redirect to a Webpage</h2>
<p>The location.href methodology 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() operate. The execution of myFunction() modifications 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 fundamental web page in 10 seconds.");
One other use case might embody redirecting a consumer based mostly on the browser they’re utilizing.
<title>Your Web page Title</title>
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";
window.location.href = "http://www.location.com/different";
<!-- Your physique content material goes right here -->
Redirect Utilizing the situation.assign() Technique
You should use “window.location.assign” as a substitute for “window.location.href” for redirects.
The syntax is:
Right here’s what it appears like within a script tag:
From a consumer’s perspective, a redirect utilizing “window.location.assign()” appears the identical as utilizing “window.location.href”.
- 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 look at 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 situation.href property ought to work simply fantastic. The selection between them is usually a matter of non-public desire and coding model.
Redirect Utilizing the situation.change() Technique
Like “window.location.assign()”, “window.location.change()” calls a operate to show a brand new doc on the specified URL.
The syntax is:
Right here’s what it appears like within a script tag:
Not like setting a brand new location property or utilizing “window.location.assign()” the change 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’t 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 could use the “window.location.change()” methodology embody:
- Login redirects: After profitable login, customers are directed to the primary web site content material, and the login web page is deliberately omitted from the browser historical past to forestall unintentional return by means of the “again” button
- Person authentication: To redirect unauthenticated customers to a login web page, blocking “again” button entry to the earlier web page
- Kind submission success: Publish-form submission, “window.location.change()” can navigate customers to a hit web page, stopping type resubmission
- Geolocation: Based mostly on the geolocation of a consumer, 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
Use “window.location.change()” if 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” if 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 intrude with the consumer’s navigation historical past. Not like the “location.change()” methodology, customers can nonetheless use the again button to return to earlier pages.
- website positioning friendliness: HTTP redirects present express directions for engines like google when pages transfer, which helps preserve a web site’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.
Be taught extra: The Ultimate Guide to Redirects: URL Redirections Explained
- Redirect chains and loops
- Linking to pages with redirects
Redirect Chains and Loops
You may 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’s good to “hop” by means 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’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 website crawling, probably rising the time it takes a page to load. This might additionally negatively influence your website positioning 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 seem 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.
Any such redirection is damaged and fails to correctly direct guests or engines like google to the supposed 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 are inflicting the loop.
First, create a project or click on on an present one you wish to take 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 will provide you with 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 subject.
Linking to Pages with Redirects
Suppose you redirect an outdated web page to a brand new one. Some pages in your web site may 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 taking place. Nevertheless, this extra redirect can add as much as a “redirect chain” if you happen to fail to handle the difficulty the primary time.
Here is how this drawback seems:
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:
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 software:
Subsequent, enter your outdated 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.
Below the “Incoming Inside Hyperlinks” part, you’ll discover a checklist of inside hyperlinks that direct to your outdated URL.
To keep away from pointless redirects, all it’s good to do is change the outdated 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: