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.
Js redirects are probably not a good idea though.
— Gary 鯨理／경리 Illyes (@methode) July 8, 2020
- From the UX perspective, other methods of redirecting are faster because they’re executed server-side.
- 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.
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
These problems disappear if you use a server-side redirect like a 301.
Of course, this is just an example. Don’t try this at home.
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.
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.”
- 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.