What’s the first thing you do when you change your phone number?
That’s right, you let your contacts know of that change.
Similarly, when you change the URL of a page on your website, it’s crucial to let Google know. Otherwise, the page may be removed from the index, or you’ll end up with plenty of users landing on a 404 page when they click on your website’s link on Google.
And how to do that, you ask?
Using redirects, of course!
The thing about redirects is that they come in different shapes and forms, and one kind that’s usually controversial (SEO-wise) is JavaScript redirects. We say controversial because it’s not obvious whether it’s SEO-friendly or not.
So, are JavaScript redirects SEO-friendly? Let’s find out.
Are JavaScript redirects SEO-friendly? First, what are redirects?
Simply put, redirects are a way to send users and search engines to a different URL than the one they originally requested. You may need to do that in one of the following scenarios:
- You’re changing the domain name of your website
- You need to merge or split content on your website
- Your company is rebranding and you need to reflect the new brand in the URLs of different pages
- You want to include a new keyword in the URL for SEO purposes
- You removed a page but don’t want your users to land on a 404 page
Types of redirects
There are several types of redirects, including:
HTTP status code redirects
HTTP status code redirects are server-side redirects. That means that they’re processed by the server and that they instruct the browser to load the new URL directly (as opposed to loading the old page first and then asking the browser to open the new URL, which is the case for client-side redirects). Server-side redirects can be easily cached by the browser, improving performance and reducing server load.
These redirects are well known amongst webmasters, mainly because they’re effortless to set up, especially if you’re using WordPress.
There are several types of HTTP, or server-side, redirects, but the most notable (and known) ones are 301 and 302 redirects.
301 redirect
A 301 redirect is a permanent redirect. It tells Google and other search engines that the original URL has been permanently moved to the new location.
This type of redirect is the most SEO-friendly, as it passes along most of the link equity (or link juice) from the original URL to the new one.
302 redirect
A 302 redirect is a temporary redirect that indicates that the original URL has been moved temporarily to the new location.
This type of redirect does not pass along link equity and is not recommended for long-term use.
JavaScript redirects
JavaScript redirects are less known amongst marketers and webmasters, mainly because setting them up requires implementing – hey, surprise! – JS code.
This type of redirect is executed on the client side, rather than the server side like a 301 or 302 redirect.
Which type is better?
So, what’s the difference between the two types?
Well, as mentioned, HTTP redirects are server-side, whereas JavaScript redirects are executed on the client side.
That basically means that Google can spot that there’s an HTTP redirect (301 or 302) as soon as it opens a page and follow along immediately. If there’s a JavaScript redirect in place, though, Google will first have to load the page’s code, go over it, and then only display the new page once it finds the code snippet of the redirect.
The keyword here is “display” because although an HTTP redirect sends the user or the search engine to the new page, a JavaScript redirect only displays the entirety of the new page’s content within the old page’s window. In other words, there’s an extra step in the middle. That’s why it’s generally recommended to use an HTTP status code redirect unless it’s totally necessary to use JavaScript, which is the case in the following situations:
- You don’t have access to your server configuration or .htaccess file
- You’re performing additional checks or validation before redirecting using HTTP status code redirection
- It’s being done as part of an A/B test
In simpler terms
To better explain what we just said, think of redirects as doors. On the left, we have an HTTP redirect, which tells Google from the get-go that the URL for the page has changed and that the Googlebot should head to the new URL.
If you implement a JavaScript redirect, on the other hand, you’ll first invite the Googlebot in and then show it the new page’s content on the living room’s TV.
In conclusion, Javascript redirects are slower and can affect the page’s performance. That’s why HTTP status code redirects are recommended. The question remains, though, are JavaScript redirects SEO-friendly?
Are JavaScript redirects SEO-friendly?
While JavaScript redirects can be useful in certain situations, they can also have negative impacts on SEO. The evidence is mainly anecdotal, though.
That’s because, as mentioned, search engines may not always be able to follow and index JavaScript redirects in the same way they can with server-side redirects. That’s according to John Mueller himself.
Even Google’s Search Central documentation states that you should only use JavaScript redirects if you can’t do server-side redirects.
Want even more proof that you should prioritise other redirection methods?
Well, in direct response to a thread around internationalisation and redirects on Twitter, Google’s Gary Illyes has publicly stated that JavaScript redirects “are probably not a good idea though.”
So, what we recommend is this: if you can use another type of redirect, do it. That said, if that’s your only mean of redirection, using a JavaScript redirect is better than not redirecting at all. You’ll have to send constant signals to encourage Google to check the new page by following the below recommendations.
How to implement a JavaScript redirect
Okay, despite what we just said, you still want (or have to) use a JavaScript redirect. So, now you’re wondering how to do it in the most SEO-friendly manner.
Well, to do so, we recommend using the function [window.location.replace()]
Here’s an example of a JavaScript redirect to our homepage using that function:
<html>
<head>
<script>
window.location.replace("https://rockstarmarketing.co.uk/");
</script>
</head>
</html>Using this function has the benefit of not adding the current URL to the visitor’s navigation history, as opposed to the popular JavaScript redirect [window.location.href], which can get the user stuck in a back-button loop. That’s because if the href method is used and the current page’s location is added to the navigation history, when the user clicks back, the browser will redirect them back to the same page they were just trying to leave. That will result in a UX redirect loop/trap, and force the user to close the tab after having such a negative experience with the website.
How to add that code to WordPress
To add that code to any page you want to redirect, you’ll have to install the “Insert Headers and Footers” WordPress plugin.
Next, open the plugin’s settings from the WP dashboard’s left menu.
Finally, insert the code there. Voila!
How to redirect safely
When you use a redirect, search engines will follow it to the new URL and index the new page instead of the original one. That can result in the original page being removed from the search engine’s index, which can negatively impact its rankings. That’s why you should tread carefully when it comes to redirection.
Here are the best practices when it comes to using JavaScript redirects on your website:
Use an HTTP 301 redirect whenever it’s possible
If you must redirect a page to a new URL you can probably do so using HTTP instead of Js. If that’s the case, go with that option. After all, as mentioned, it’s generally best to use a 301 redirect to pass along as much authority as possible.
So, how to do that?
Well, the process is super easy thanks to WordPress plugins like Redirection, 301 Redirects, and any of the popular SEO plugins (Yoast, All-In-One SEO, Rank Math, etc.), all of which allow you to change the URL of any page.
Use the appropriate redirection type
As mentioned above, it is generally recommended to use a 301 redirect for permanent redirects. That’s because it passes along the most link authority.
Avoid chain redirects
Chain redirects occur when one redirect leads to another redirect, which leads to another, and so on. This can create confusion for search engines and result in a loss of link authority.
When redirecting a page, it’s essential to avoid chain redirects. Instead, redirect directly from the original URL to the final destination.
Remember to update your internal links
If you are redirecting a page that is linked to from other pages on your website, it’s important to update those internal links to point to the new URL. That will help search engines crawl and index your website more efficiently and avoid any potential crawl errors.
If you can’t use a HTTP redirect and need to use a Js one, consider using rel=”canonical” tags. That will help search engines understand the relationship between the original and redirected pages.
This can help prevent the original page from being removed from the search engine’s index and may help preserve some of its link juice.
Add the new page to the XML sitemap
If you do need to use JavaScript redirects, remember to include the redirect target in your XML sitemap.
0 Comments