Home SEO How you can Redirect to a New URL

How you can Redirect to a New URL

0
How you can Redirect to a New URL

[ad_1]

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 beneficial for search engine optimization as a result of search engines like google can have issue crawling and indexing websites that depend on them. 

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

How you can Redirect with JavaScript 

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

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

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. 

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 special 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, resembling a button click on, this is able to redirect the consumer to “https://exampleURL.com/” 

How?

It is advisable 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>
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() modifications 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 circumstances 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 fundamental web page in 10 seconds.");
 setTimeout(perform() {
Redirect();
 }, 10000);
</script>
 </head>
</html>

One other use case may embrace redirecting a consumer based mostly 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.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.substitute.”

Redirect Utilizing the placement.assign() Methodology

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">
 perform Redirect() {
window.location.assign("https://exampleURL.com/");
 }
</script>

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

It’s 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 think about 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 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 high quality. The selection between them is usually a matter of non-public choice and coding type. 

Redirect Utilizing the placement.substitute() Methodology

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

The syntax is:

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

Right here’s what it seems to be like inside a script tag:

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

In contrast to setting a brand new location property or utilizing “window.location.assign()” the substitute technique 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.substitute()” technique embrace:

  • 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 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
  • Kind submission success: Put up-form submission, “window.location.substitute()” 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 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.substitute()” 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 when you can redirect customers to a brand new web page utilizing JavaScript strategies like “window.location.assign()” or “window.location.href”, server-side redirects, resembling HTTP redirects, are sometimes beneficial as a substitute.

Observe: For those who’re simply beginning out or need 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 method it executes and renders JavaScript when crawling and indexing web sites.

Right here’s what that appears like, in line with 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 shortly add essential content material to its search index. JavaScript is handled later as a result of Google wants extra sources to course of it.

Study extraJavaScript search engine optimization: How you can 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 attainable because 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 search engine optimization Workplace 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 choice for server-side redirects, resembling HTTP redirects—which supply higher effectivity, reliability, and SEO (search engine optimization) 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.substitute()” technique, customers can nonetheless use the again button to return to earlier pages.
  • search engine optimization friendliness: HTTP redirects present express directions for search engines like google when pages transfer, which helps preserve a web site’s search engine optimization 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 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 Final Information to Redirects: URL Redirections Defined

How you can 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 it’s good to “hop” by way of a number of URLs earlier than reaching the ultimate one.

For instance, contemplate that you simply initially have a web page with URL A. You then determine 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 may cause points with web site crawling, probably growing the time it takes a web page to load. This might additionally negatively affect your search engine optimization 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:

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 special 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 search engines like google to the meant URL.

To repair redirect loops, determine the “right” web page and make sure the different web page redirects to it. Then, eliminate any further redirects which are inflicting the loop.

Semrush’s Web site Audit device may also help you detect each HTTP and JavaScript redirect chains.

How?

First, create a venture or click on on an current 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 web site’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 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 would possibly nonetheless hyperlink to the outdated web page. 

If that is the case, customers will likely 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” in case you fail to handle the difficulty the primary time.

Here is how this drawback seems:

an example of linking to a page with redirect

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

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 device:

"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” area.

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

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

"Incoming Internal Links" section in Site Audit

To keep away from pointless redirects, all it’s good to do is substitute 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 special URL. It is sometimes used for conditional navigation or consumer interaction-triggered modifications, although it requires the consumer’s browser to allow JavaScript.

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

JavaScript redirects can be utilized with out essentially harming search engine optimization 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 search engines like google through the crawling and indexing course of.

What’s the Greatest Various to a JavaScript Redirect?

The perfect different is to make use of server-side redirect strategies, resembling 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? 

Take a look at these sources:

[ad_2]

LEAVE A REPLY

Please enter your comment!
Please enter your name here