JavaScript Redirects and SEO

What are JavaScript redirects?

JavaScript redirects are one of a few ways of informing users and search engines that a page is available at another URL.
Usually, it’s done using the window.location function.

Redirecting from one page to another is a simple, standard practice that any website owner is well aware of. Whether it’s because you decided to change your URL structure (which you should avoid), or you finally switched over to HTTPS and need to redirect your entire website (which you should do RIGHT NOW), you’ll be using redirection at some point if you have a website.

That being said, there are multiple ways to redirect, and they all have their use cases.

One of those methods is to use JavaScript. But is it a good method from an SEO point of view?

Js redirects are probably not a good idea though.

— Gary 鯨理／경리 Illyes (so official, trust me) (@methode) July 8, 2020

Don’t get discouraged yet. Gary has a reputation for being skeptical of things. To balance it out, here’s John Mueller saying: “We support JavaScript redirects of different types and follow them similar to how we’d follow server-side redirects.”

While JavaScript redirects have a bad rap and may admittedly hurt your standings with Google, they’re a viable method of redirecting your users in rare circumstances.

JavaScript redirects and SEO

Using JavaScript redirects generally goes against the best practices of SEO. Here’s why:

1. From the UX perspective, other methods of redirecting are faster because they’re executed server-side.
2. It’s very unlikely that all ranking signals collected by the search engines are passed to the new URL just like they are when you use a 301 or a 302 redirect.

Dear #seo Twitter, what's your experience with JavaScript redirects?

Does Google pass the ranking signals to the redirected page as it does with server-side redirects?

— Bartosz Góralewicz (@bart_goralewicz) January 22, 2021

1. During the indexing process, Google’s algorithm may decide not to render JavaScript if it doesn’t significantly change the page, which means that your JavaScript redirect might not be executed.
2. A JavaScript redirect may slow down the crawling and indexing of your website by Google – rendering JavaScript is an extra step in the indexing pipeline.

These problems disappear if you use a server-side redirect like a 301.

So why would you ever want to use JavaScript to redirect your users if it isn’t SEO-friendly?

Why use JavaScript to redirect?

Contrary to what you may have heard, using JavaScript is a viable way of redirecting your users to a different page. But it all comes down to the details.

Since JavaScript redirects are executed client-side, you have the option of adding additional logic to redirecting. For instance, you can detect the language your user’s browser is using and redirect them based on that.

One common example of a situation where a JavaScript redirect is a good method is when you require your users to log in on your website. After a successful login attempt, the user is redirected with JavaScript. If the login is unsuccessful, you may display an error message with JavaScript. All it takes to implement that is a simple if statement. Take a look at the following code:

Of course, this is just an example. Don’t try this at home.

But it shows that JavaScript redirection can be a viable choice. You wouldn’t expect Google to crawl your internal pages that are only available after a successful login anyway. Plus, JavaScript lets you add additional logic to the redirection that you wouldn’t be able to add so easily with a server-side redirect.

JavaScript redirect methods

Contrary to the popular 301 and 302 redirects which are handled by the server, JavaScript redirects are executed client-side.

There are actually multiple ways to redirect using JavaScript. The most popular method is to use window.location.replace:

window.location.replace(“https://www.onely.com/blog/”);

You can give it a try in your browser. If you’re using Chrome, press Ctrl + Shift + I to open the Dev Tools, then navigate to Console, and simply paste the line of code above into the console and press Enter.

This will cause the browser to take you to the main page of our blog.

An alternative way is using window.location.href (or simply window.location, although there are minor differences between these two approaches). This is not an actual *method* in JavaScript; rather than that, it’s a property that you can use to store your current URL location. You can redirect the user to a different page by overwriting it like so:

window.location.href = “https://www.onely.com/blog/”;

The result will be the same if you just use it in the console, however, there’s a significant difference between using these two ways of redirecting on an actual page.

Avoid infinite redirect loops

When window.location.replace is executed on a given page, that page is not saved in the session history. So if you enter a page and get redirected, you cannot go back to that page by clicking the back button. You’ll be taken to a page you visited before that.

That’s not the case with window.location.href. Once you click back, the same page unloads yet again, your current URL location is once again overwritten, and you get redirected to the page you just wanted to leave. This is an endless loop. Keep that in mind if you’re thinking of using this redirect method.

Doing it right – 301 and 302 redirects

When a browser sends a request to download a given page, the server may redirect the browser to a different URL address if you instructed it to do that using a 301 or 302 Redirect command. These commands are stored in your server settings or in .htaccess files within your directories (if you’re on Apache).

This method of redirection is preferred by search engines. Google’s documentation is clear:

“If you need to change the URL of a page as it is shown in search engine results, we recommend that you use a server-side 301 redirect. This is the best way to ensure that users and search engines are directed to the correct page. The 301 status code means that a page has permanently moved to a new location.”

Wrapping up

While using a JavaScript redirect is viable in some circumstances, keep these things in mind:

• Most of the time, a server-side redirect like 301 or 302 is a better choice from the SEO perspective. You can be sure that when you use a 301, Google will always follow it, and it will pass all ranking signals to the redirected page.
• Be careful not to create an infinite redirect loop with window.location.href unless it’s absolutely necessary and won’t impact your UX.
• If you’re using JavaScript redirects to confuse Google and send your users to spammy content or malware, don’t. This goes against the Google guidelines.

To sum up, only use JavaScript as a redirection method when you have no other choice.

If you feel like your website’s SEO is holding your business back, contact Onely for a thorough technical SEO site audit.