If you’re building or maintaining a website, chances are that at some point you’ll need to redirect your users to a new direction. For example, you may have moved to a new domain, purchased a second domain, or moved an existing page to a different part of your site.
In some cases, this is achieved at the server level, with HTTP redirects via .htaccess or Nginx.
Server-side redirects have the advantage of using 3xx HTTP status codes. These status codes tell the user agent (such as search engine crawlers) why the redirect was set up, which can be useful for SEO. For example, an HTTP 301 redirect indicates that the page in question was permanently moved to a new location.
- do not have access to your server settings or .htaccess file
- want to link the redirect to a specified user event or action
- are running an A/B test
- need additional checks or validations before redirecting You
- have other needs that cannot be easily handled with an HTTP
On its own,
window.location.href is a property
that indicates which URL is currently being viewed.
By setting a new value (an equal sign, followed by your new destination URL in single quotes), you’re telling the browser to load that new URL, similar to what would happen if a user clicked on a link.
Using “window.location.href” to redirect adds a new entry to the current session history, which means that if the user clicks the “Back” button, they can still return to the source page
using the location.assign() method
From a user’s perspective, a redirect using “window.location.assign()” looks the same as setting a new href property, as in the previous example. This is because
- create a new entry in your session history (similar to clicking a link
- Both allow users to go back and view the previous page
Here’s what it looks like:
Despite the similarities, “location.assign()” is different from “location.href” in some important ways.
Location.assign() calls a function to display the document located at the specified URL. Depending on your browser, this may be slower than simply setting a new href property.
Redirect using location.replace() method Like “location.assign()”, “window.location.replace()” calls a function to display a new document located at the specified URL.
It looks like this:
Unlike setting a new location property or using
the replace method does not create a new entry in the session history.
This method has similar strengths and weaknesses to location.assign(),
in that it:It does not allow you to redirect to
- unsafe or broken links, and will instead launch a DOMException when you try to use one
- May be slower than setting a new window.location.href property
- Requires HTTPS if you want to redirect to a new domain
Use Site Audit to identify problems
to redirection, including:
- Missing or canonical
- redirect strings and loops
- to the HTTP version’s HTTPS home page
- Temporary or permanent redirects (which are not necessarily a problem if used correctly)
Redirects of any kind can be useful for your site, but it’s important to implement them correctly to avoid technical SEO issues.
Final Thoughts: Always Review Your Work
However, developing and maintaining a website is a complicated process, and mistakes can be costly
If you want your users to have the best experience possible, it’s crucial that you review your work rigorously. Site Audit can facilitate this process by automating your site checks, identifying the most critical issues affecting your site’s performance and user experience, and providing tips on how to fix them.