There are countless reasons why you may want to redirect the user’s browser from one URL to another.
Maybe you’ve redesigned and restructured your website. And now, you want to point users to the updated URLs of the old pages.
Or maybe you rebranded your business and changed the domain name. Hey, your business might even have gotten bought out by a larger competitor, and you are now merging your websites into one.
And yet, there are only this many ways to redirect a user from one URL to another. Since you’re here, you will be deciding between two of them: server-side 301 redirection and client-side redirection with JavaScript.
Well, let’s just say you came to the right place! Read on because we have it all for you:
- We’ll take a closer look at 301 redirects
- The two ways to set up JavaScript redirects
- And talk about when you should use each of these, especially when it comes to your website’s search engine optimization (SEO)
What Is a 301 Redirect?
A 301 redirect is a server-side HTTP redirect that tells users’ browsers and search engine crawlers that a website, page, or file has permanently moved to a new URL, and that the old URL will no longer be used.
301 redirects can be configured on a server level, in the httpd.conf configuration file of your Apache web server, or at the directory level, in the .htaccess file for the root domain, add-on domain, or directory in question.
For performance reasons, it is better to configure 301 redirects in the httpd.conf file of your Apache web server rather than in an .htaccess file, especially if the structure of your website consists of many folders and is quite complex.
That said, most webmasters are willing to put up with a few added milliseconds in their server’s response time and configure 301 redirects in an .htaccess file regardless. For them, it’s easier to set up the rules in the dedicated text-based configuration file for the directory that they apply to.
Did you know?
301 redirects are only one type of HTTP redirects. In some cases, it is better to set up a temporary 302 redirection. When in doubt, read our no-B.S. guide to the difference between 301 and 302 redirects.
What Is a JavaScript Redirect?
A JavaScript redirect is a client-side redirect that takes the user to a new URL when the function containing the redirect is called.
There are two ways to create a redirect with JavaScript: with window.location.href or window.location.replace. As with many other solutions with multiple options in JavaScript, choosing one or the other depends on what you want to achieve.
The window.location.href option is best used when you want to take the user to a new page because they clicked a button, a link, or some other interactive UI element. The original URL is saved in the browsing history, and the user can return to the previous page if needed.
The window.location.replace option is best if you want to simulate a 301 redirect. The original URL isn’t saved in the browsing history, so the user can’t return to the previous page.
However, JavaScript redirects should only be used as a last resort because search engine crawlers, even though they run JavaScript, may fail to get to the new URL for various reasons. If the goal is to simulate a 301 redirect because you can’t set it up on the server side, consider setting up a meta refresh redirect instead.
301 Redirect or JavaScript Redirect: Which One to Use?
When to Use a 301 Redirect
If you’re restructuring your website, changing the domain name, or merging it with another site, set up a 301 redirect. A 301 redirect is also the one to opt for if you want your website to load only under the HTTPS protocol or with or without www.
A 301 redirect is also the right way to inform search engine crawlers that the website, page, or file in question has permanently moved to a new URL.
This type of redirect is best from an SEO point of view. After 6 months to 1 year of the 301 redirect being active, Google, Bing, and DuckDuckGo will transfer the old page’s backlink equity and page rank to the new one.
When to Use a JavaScript Redirect
If you can’t set up a 301 redirect or a meta refresh redirect, set up a JavaScript redirect with window.location.replace. Use this only as a last resort, as search engine crawlers may not get to the final page and see the new URL.
A JavaScript redirect isn’t necessarily bad for SEO. But it isn’t great either. For example, in an article titled Redirects and Google Search in Google Search Central, Google says:
Only use JavaScript redirects if you can’t do server-side or meta refresh redirects. While Google attempts to render every URL Googlebot crawled, rendering may fail for various reasons.
Google Search Central
Basically, this means that if you set up a JavaScript redirect, there’s a risk that Google might never see it if, for one reason or another beyond your control, the rendering of the content failed.
If you’re developing functionality for your website that requires you to redirect the user from the current page to another page after they click or tap on an element, set up a JavaScript redirect with window.location.href.
In Conclusion
If you’re restructuring your website, moving to a new domain name, or merging with another website, then the best type of redirect to use is a server-side 301 redirect.
If you’re building up functionality that requires you to redirect the user from one URL to another, then the best type of redirect to use is a client-side JavaScript redirect.
Thanks for reading this far! I hope this helped you decide, and do let me know in the comments if you have any more questions!