Announcing our new API documentation!
Check it out here
Blog posts

The Web’s Redirect Playbook: From 301s to Client-Side Alternatives

April 3, 2023
4 minutes
redirection-image

A redirect is a tool used by websites for “rerouting” or sending a visitor to an alternative webpage. An example of a redirect would be when you type “example.com” in your web-browser, but are taken to a different website, like “new-example.com.”

URL redirects are an extremely common practice employed by webmasters and content managers to ensure visitors to their website are reaching their desired content.

When would I use a redirect?

  1. A page has been relocated within your site
    Let’s say your website has a page by the path “/t-shirts” – The “t-shirts” page has been a part of your website sitemap for years, and is one of your most frequently visited pages. Suddenly, you need to build out a more general page on your site that has t-shirts, and dress shirts. Your goal is to have the new page be accessible by a shorter, more general path, like “/shirts”. In this situation, you would want to use a URL redirect to ensure that traffic for the page “/t-shirts” is successfully rerouted to the new “/shirts” page of your website. Without a redirect in place, you could run the risk of visitors still accessing the old /t-shirts page, even though you want to drive all traffic to the new /shirts page. Due to the nature of SEO, it’s possible that there are many links throughout the Internet that still point visitors to the old URL, and it is the job of the URL redirect to ensure visitors still make it to the appropriate page.
  2. Your domain name is changing!
    Changing a website’s domain name is a drastic decision which must be handled with the utmost care. Let’s say your website has always been www.abc-brand.com. Due to a rebranding effort, you are changing your brand from “ABC” to “XYZ”, and thus your website’s URL will need to be adjusted to reflect the change. In this scenario, it would be critical that you 301 redirect all traffic requesting “abc-brand.com” to the new and improved “xyz-brand.com”. Furthermore, you would want to ensure that all pages within the abc-brand website are also redirected, like abc-brand.com/my-page being redirected to xyx-brand.com/my-page
  3. You have alternative domains that you wish to serve as “shortcuts” into your website
    It is a common practice for businesses to buy dozens of domain names that:
  • Are spelled similarly to their business name – consider “gogle.com” that redirects to google.com
  • Are variations of their name that visitors may otherwise know them as – consider “joes-tees.com” that redirects to the main business website, “joes-shirts.com”
  • Are shortened, easily typed versions of the primary domain name – consider “shirtsale2019.com” redirecting to “joes-shirts.com”. It is common to find this shorter, more memorable URL variation on physical advertisements because people are more likely to remember them. As such, a URL redirect would be used to reroute the alternative domain name to your primary domain name of your website.

How does a redirect actually work?

When you request a web-page from your browser, there is a server somewhere on the Internet that is receiving your request and responding with the appropriate content. Fundamentally, a redirect occurs when a web-server's response contains a special piece of data (an HTTP response header) instructing the browser to reroute the visitor to an alternative location.

The technical details aside, a browser works by requesting a URL and rendering the page that is returned by the website. If the website wishes the user to be redirected, the server will respond differently than if it was serving a page; it will send an extra piece of data indicating that the visitor should be redirected to a specified location.

Without going into too much of the technical details – a redirect is a behavior performed by a web-browser whenever it receives a response containing a flag (an HTTP header) to do so.

What are the types of redirects available?

301 Redirect

Commonly referred to as a “permanent” redirect.

Indicates to search-engines and web-browsers that the requested page has permanently relocated to a new location.

Note: permanent redirects are often cached by web-browsers like Chrome and Firefox. Therefore, it may be tricky to retroactively update a 301 redirects target location once it has been established. Any visitors who have already received the 301 redirect response for a URL will likely be served a cached response from their web-browser when visiting the same URL again.

Suggestion Only use a 301 redirect when you know that the target location will not change.

Common Uses

  • A 301 redirect is appropriate when a website is changing it’s domain name. In this scenario, the site should be 301 redirecting all traffic for it’s old domain name to the new website URL.
  • Another common use-case for a 301 redirect is for pages within your website that have been permanently moved to a new URL

302 Redirect

Commonly referred to as a “temporary” redirect.

Useful for general-purpose redirects within your website, where you do not want visitor’s to cache the redirect response permanently.

Suggestion Use 302 redirects for pages that have changed URL, but are subject to be updated in the future

Common Uses

  • A page is temporarily being moved to a new URL
  • Conditions where the destination location of the redirect is subject to change
  • Navigating the user away from a page during an error

307 Redirect

Uncommon due to legacy browser support

Used for technical scenarios when a visitor’s HTTP request method should be persisted when they are redirected. For example, if a user submits a form, the browser normally issues a POST request to the form’s action URL. If the server responds with a 302 redirect response, the client’s web-browser would typically issue a GET request when handling the redirect. However, if the server responds with a 307 redirect response, the client’s web-browser will POST request to the redirect destination. Please note, form-data is typically lost when redirecting via POST request.

When do I need a redirect?

The most common use-cases that would require a redirect are:

  1. Changing your domain name
  2. Restructuring website pathing, resulting in URL changes for content within your website
  3. URL shortening – having a shorter, more memorable alternative to your primary domain name.
  4. Sending traffic from additional/alternative domain names (Example: gogle.com redirects to google.com)
  5. Sending traffic from your DNS zone apex / naked domain name to your “www” sub-domain (Example: domain.com 301 redirects to www.domain.com)

Important considerations when redirecting a URL

  1. Ensure your URL supports HTTPS connections! Otherwise you may have visitors who are receiving broken links.
  2. When redirecting a specific path within your website, you may want to match paths based on a pattern or Regular Expression, as opposed to a single path.
  3. Seriously consider whether you should use a 301 or a 302, based on the information above.

An Introduction to HTTP Redirects

A URL redirect is a technique used in web development and SEO to route visitors from one page to another. When a user requests a URL, the server can respond with a redirect status code that points the browser to load a different page instead. There are several types of HTTP redirect status codes, each with a different purpose. This article will explain the five most commonly used redirect types - 301, 302, 303, 307, and 308 - and how to decide which one to use.

301 Permanently Moved

The 301 status code means that a page has moved permanently to a new location. When search engines receive a 301 redirect, they will update their indexes to associate all the relevance and value of the old page with the new redirect destination.

Browser Behavior: When browsers receive a 301 status code, they understand that the requested resource has moved permanently. The browser caches the new URL, and subsequent requests to the old URL will automatically be redirected to the new URL. The browser's address bar will also display the new URL. If the old URL was bookmarked, users accessing the bookmark will be redirected to the new URL.

Using a 301 tells both visitors and search engines that the redirect is permanent and the page has been relocated for good. 301s should be used when a domain name changes or when content is moved to a new URL permanently. Implementing 301 redirects ensures traffic flows to the new location and preserves search engine rankings.

For example, if your website changed domain names from www.oldsite.com to www.newsite.com, you would set up 301 redirects so that oldsite.com pages redirect to their new counterparts on newsite.com. This signals to search engines that the site content has permanently moved to the new domain.

302 Found Temporary Redirect

A 302 Found redirect is used for temporarily moving a webpage rather than permanently.

Browser Behavior: Browsers typically do not cache 302 redirects, ensuring that on subsequent visits, the browser checks the original URL first. The browser's address bar will display the new temporary URL for that session.

Using a 302 means that the change is only temporary and search engines should not update their indexes. 302 redirects are commonly used to point a page to a maintenance or coming soon page while website updates are in progress. They allow you to seamlessly handle temporary URL changes. 302s are also frequently used by URL shortening services to briefly redirect shortened URLs to their destination.

303 See Other

The 303 redirect status code indicates that the response to a GET request can be found at a different URI.

Browser Behavior: The 303 response prompts browsers to look for the requested resource at a different location using a GET request, regardless of the original request type. The address bar will show the URL provided in the 303 response.

303 tells the browser to look for the requested resource at a different location through a GET request. One common use case for 303 redirects is to avoid duplicate content penalties by redirecting old blog post URLs to the current home page. For example, an old blog post URL like www.example.com/blog/post-title could 303 redirect to just the blog home page at www.example.com/blog. This prevents search engines from indexing the old post URLs as duplicate content.

307 Temporary Redirect

A 307 redirect is similar to a 302 in that it indicates the redirect is temporary, but it has one key difference. The 307 status code requires the redirect to preserve the original request method.

Browser Behavior: When a browser receives a 307 redirect, it understands the move is temporary. These redirects are not typically cached, so browsers always refer to the original URL first. The browser's address bar will display the temporary redirected URL for that session.

For example, if the original request was a POST, the redirect destination should still handle it as a POST request rather than a GET. 307 redirects are not frequently used today but can be preferable over 302s in some cases to maintain the original request type.

The main advantage of 307 is that it allows temporary redirects to work seamlessly without changing the request method itself. However, for most common redirect needs, a 302 redirect will work fine and is more widely supported.

308 Permanent Redirect

The 308 redirect status code was introduced more recently to serve as an additional option for permanent redirects. It operates similarly to a 301 in that it indicates a permanent URL move, but it keeps the redirect request method the same while 301 converts it to a GET request. So, if the original request was a POST or PUT, 308 will maintain that method rather than changing it to GET.

Browser Behavior: Receiving a 308, browsers will treat it similarly to a 301, understanding the move is permanent. The browser caches the new URL, and future requests will go directly there. The browser's address bar will display the new permanent URL.

While 308 does have its uses in some cases, 301 remains the standard code for signaling a permanent redirect to search engines. The 308 status can be leveraged however if you need permanent redirects to avoid changing the request method.

Meta Tag Client-Side Redirect

In addition to server-side redirects, you can also implement client-side redirects directly within the HTML code. One way is by using meta tags.

The HTML <meta> tag allows setting the http-equiv attribute to "refresh" and specifying a content value for the redirect URL or wait time in seconds. For example:

<meta http-equiv="refresh" content="0;url=https://example.com">

This meta tag will redirect the page to example.com after a 0-second delay. The content value can also specify a waiting period before redirecting. Client-side meta tag redirects happen entirely within the browser rather than relying on a server response status code.

JavaScript Client-Side Redirect

Another client-side option is to use JavaScript code to redirect the browser window location. For example:

location.replace("https://example.com");

This will immediately redirect the browser to the URL specified. Other JavaScript methods like location.assign() and location.href can also change the window location to achieve a redirect.

JavaScript redirects provide more flexibility and conditional logic compared to meta tags. You could even show a countdown timer before redirecting. However, JavaScript only works if the browser has it enabled.

Choosing the Right Redirect Type

When setting up a redirect, follow this process to choose the appropriate status code:

  1. Determine if the redirect should be permanent or temporary. Permanent URL changes like a domain name change should use 301. Temporary redirects like maintenance pages should use 302 or 307.
  2. For permanent changes, verify the redirect is permanent and does not create duplicate content issues. If so, use a 301 redirect to transfer SEO value to the new URL.
  3. For temporary changes, decide if you need to maintain the original POST request method. If yes, use 307 to avoid changing to a GET request. If not, 302 is a common choice.
  4. For client-side redirects, HTML meta tags provide simple refresh functionality. JavaScript enables more logic but requires browser support.
  5. If redirecting old blog post URLs or outdated pages, use 303 to avoid duplicate content pitfalls and direct users to current content.
  6. Double check there are no crawling issues created such as redirect chains or loops. The redirect should take users seamlessly to the target page.
  7. Implement a 301 redirect as soon as possible after a permanent URL change to maintain search engine visibility.
  8. Set up temporary redirects like 302s to handle short-term URL changes and maintenance needs.
  9. Leverage the flexibility of tools to customize redirect status codes for different use cases.

Conclusion

Understanding the main differences between 301, 302, 303, and 307 redirects is valuable for both effective SEO and smoothly managing websites. Each code signals to browsers and search engines how to handle the redirect optimally. With a robust redirect manager like SiteDetour, you can customize redirects with the right status code for every situation.

Supercharge Your Marketing Efforts Today

Unlock the power of Dynamic QR Codes and streamline your URL Redirect management with SiteDetour.

URL Redirect Link Management