So, you want to implement JavaScript redirects, but you’re unsure how they work?

Yes, they are more challenging to implement than standard redirects.

Ideally, you should use 301s, 302s, or 307-based redirects for implementation. This is the usual best practice.

But…what if you don’t have that level of access? What if you have a problem with creating standard redirects in such a way that would be beneficial to the site as a whole?

This is where using JavaScript redirects comes in.

They are not a best practice that you should be using exclusively, however.

But there are some situations where you just cannot avoid using a JavaScript redirect.

The following is a basic primer on JavaScript redirects, when to use them, how to use them, and best practices you must use when utilizing these types of redirects for SEO.

What Are JavaScript Redirects?

JavaScript redirects, essentially, are one of several methods of informing users and web crawlers that a page is available in another location.

They are often used to inform users about changes in the URL structure, but they can be used for just about anything.

Most modern websites use these types of redirects to redirect to HTTPS versions of web pages.

Then, whenever somebody visits the original URL, the browser loads the JavaScript file and executes whatever code is inside of it. If the script includes instructions to open a different URL, it does this automatically.

Doing redirects in this manner is useful in several ways.

For instance, you can switch URLs without manually updating every single URL on your site. In addition, JavaScript redirects can make it easier for search engines to find your own content.

A Quick Overview Of Redirect Types

There are several basic redirect types, all of which are beneficial depending on your situation.

Server-side Redirects

Ideally, most redirects will be server-side redirects.

These types of redirects originate on the server, and this is where the server decides which location to redirect the user or search engine to when a page loads. And the server does this by returning a 3xx HTTP status code.

For SEO reasons, you will likely use server-side redirects most of the time. Client-side redirects have some drawbacks, and they are usually suitable for more specific situations.

Client-side Redirects

Client-side redirects are those where the browser is what decides the location of where to send the user to. You should not have to use these unless you’re in a situation where you don’t have any other option to do so.

Meta Refresh Redirects

The meta refresh redirect gets a bad rap and has a terrible reputation within the SEO community.

And for good reason: they are not supported by all browsers, and they can be confusing for the user. Instead, Google recommends using a server-side 301 redirect instead of any meta refresh redirects.

JavaScript Redirects

JavaScript redirects, however, utilize the JavaScript language to send instructions to the browser to redirect users to another URL. There is a prevailing belief that JavaScript redirects cause problems for SEO.

Although Google does have good JavaScript rendering capabilities these days, JavaScript can still present issues. This is true for other types of platforms also, such as Spotify and other ecommerce platforms.

If, however, you’re in a situation where you can only use a JavaScript redirect as your only choice, then you can only use JavaScript.

Also, Google’s Gary Illyes has stated as recently as 2020 that JavaScript Redirects “are probably not a good idea.”

Js redirects are probably not a good idea though.

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

Best Practices For SEO-Friendly JavaScript Redirects

Regardless of whether you are using traditional redirects or JavaScript redirects, there are several best practices you must follow in order to not mess things up for SEO.

These best practices include avoiding redirect chains and redirect loops.

What’s the difference?

Avoid Redirect Chains

A redirect chain is a long chain of redirect hops, referring to any situation where you have more than 1 redirect in a chain.

Example of a redirect chain:

Redirect 1 > redirect 2 > redirect 3 > redirect 4 > redirect 5

Why are these bad? Google can only process up to three redirects, although they have been known to process more.

Google’s John Mueller recommends less than 5 hops per redirect.

“It doesn’t matter. The only thing I’d watch out for is that you have less than 5 hops for URLs that are frequently crawled. With multiple hops, the main effect is that it’s a bit slower for users. Search engines just follow the redirect chain (for Google: up to 5 hops in the chain per crawl attempt).”

Ideally, webmasters will want to aim for no more than one hop.

What happens when you add another hop? It slows down the user experience. And more than five introduce significant confusion when it comes to Googlebot being able to understand your site at all.

Repairing redirect chains can take a lot of work, depending on their complexity and how you set them up.

But, the main principle driving the repair of redirect chains is: Just make sure that you complete two steps.

First, remove the additional hops in the redirect so that it’s under five hops.

Second, implement a redirect that redirects the former URLs

Avoid Redirect Loops

Redirect loops, by comparison, are essentially an infinite loop of redirects. These loops happen when you redirect a URL to itself. Or, you accidentally redirect a URL within a redirect chain to a URL that occurs earlier in the chain.

Example of a redirect loop: Redirect 1 > redirect 2 > redirect 3 > redirect 2

This is why oversight of website redirects and URLs are so important: You don’t want a situation where you implement a redirect only to find out 3 months down the line that the redirect you created months ago was the cause of issues because it created a redirect loop.

There are several reasons why these loops are disastrous:

Regarding users, redirect loops remove all access to a specific resource located on a URL and will end up causing the browser to display a “this page has too many redirects” error.

For search engines, redirect loops can be a significant waste of your crawl budget. They also create confusion for bots.

This creates what’s referred to as a crawler trap, and the crawler cannot get out of the trap easily unless it’s manually pointed somewhere else.

Fixing redirect loops is pretty easy: All you have to do is remove the redirect causing the chain’s loop and replace it with a 200 OK functioning URL.

Want To Use JavaScript Redirects For SEO? Not So Fast…

Be cautious about creating JavaScript redirects because they might not be the best solution for redirects, depending on what you have access to.

They should not be your go-to solution when you have access to other redirects because these other types of redirects are preferred.

But, if they are the only option, you may not be shooting yourself in the foot.

More resources: 

Featured Image: RoseRodionova/Shutterstock