How to Use JavaScript to Redirect a URL – Semrush

If you’re building or maintaining a website, chances are that at some point you’ll need to redirect your users to a new direction. For example, you may have moved to a new domain, purchased a second domain, or moved an existing page to a different part of your site.

In some cases, this is achieved at the server level, with HTTP redirects via .htaccess or Nginx.

Server-side redirects have the advantage of using 3xx HTTP status codes. These status codes tell the user agent (such as search engine crawlers) why the redirect was set up, which can be useful for SEO. For example, an HTTP 301 redirect indicates that the page in question was permanently moved to a new location.

In contrast, JavaScript redirects are client-side, meaning they tell the browser to retrieve content from a different location. You may want to use a client-side redirect such as JavaScript if:

You

• do not have access to your server settings or .htaccess file

You

• want to link the redirect to a specified user event or action

You

• are running an A/B test

You

• need additional checks or validations before redirecting You
• have other needs that cannot be easily handled with an HTTP

redirect Below are three of the most common ways to create a redirect link in JavaScript using the location object, which is an entity that contains information about the current URL.

Set a new window.location.href property The simplest and most common way to use JavaScript to redirect to a URL is to set the location property to a new URL using window.location.href.

The JavaScript code looks like this:

On its own,

window.location.href is a property

that indicates which URL is currently being viewed.

By setting a new value (an equal sign, followed by your new destination URL in single quotes), you’re telling the browser to load that new URL, similar to what would happen if a user clicked on a link.

Using “window.location.href” to redirect adds a new entry to the current session history, which means that if the user clicks the “Back” button, they can still return to the source page

.

This method tends to be a bit faster than calling a function, which is what happens in the other two methods described below. However, the speed may vary depending on the browser you are using to perform the test. It also tends to be supported by more browsers, compared to other methods. (A “function” is a block of code in JavaScript that completes a designated task. Typically, this task involves taking an input and returning an output.)

Redirect

using the location.assign() method

From a user’s perspective, a redirect using “window.location.assign()” looks the same as setting a new href property, as in the previous example. This is because

: Both

• create a new entry in your session history (similar to clicking a link

)

• Both allow users to go back and view the previous page

Here’s what it looks like:

Despite the similarities, “location.assign()” is different from “location.href” in some important ways.

Location.assign() calls a function to display the document located at the specified URL. Depending on your browser, this may be slower than simply setting a new href property.

It can also be considered a safer option than setting a new href property, because if the target link is broken or not secure, the function will launch a DOMException. In JavaScript, a DOMException is an error message that can occur when calling a function or accessing a property.

Redirect using location.replace() method Like “location.assign()”, “window.location.replace()” calls a function to display a new document located at the specified URL.

It looks like this:

Unlike setting a new location property or using

“location.assign()”,

the replace method does not create a new entry in the session history.

Instead, it replaces the current entry, which means users can’t click the Back button and return to the page before the redirect. As such, this method is ideal if you want to use JavaScript to prevent users from seeing the page you’re directing them from.

This method has similar strengths and weaknesses to location.assign(),

in that it:It does not allow you to redirect to

• unsafe or broken links, and will instead launch a DOMException when you try to use one
• May be slower than setting a new window.location.href property
• Requires HTTPS if you want to redirect to a new domain

Use Site Audit to identify problems

If you’re implementing redirects on your site in any way, it’s best to routinely audit your site with a tool like Site Audit. While Site Audit cannot render JavaScript, it can identify a variety of checks related

to redirection, including:

Missing or canonical
• redirect strings and loops
• to the HTTP version’s HTTPS home page
• Temporary or permanent redirects (which are not necessarily a problem if used correctly)

Redirects of any kind can be useful for your site, but it’s important to implement them correctly to avoid technical SEO issues.

If you’re just starting out or want to practice JavaScript, you can visit a website like W3Schools, which offers an interactive “TryIt Editor” for JavaScript, HTML, CSS, and more

:

Final Thoughts: Always Review Your Work

Used effectively, redirects (JavaScript and otherwise) can have a huge impact on the user experience on your website, guiding users to content most relevant to their needs.

However, developing and maintaining a website is a complicated process, and mistakes can be costly

.

If you want your users to have the best experience possible, it’s crucial that you review your work rigorously. Site Audit can facilitate this process by automating your site checks, identifying the most critical issues affecting your site’s performance and user experience, and providing tips on how to fix them.