paint-brush
Understanding Redirects: A Comprehensive Guideby@grezvany13
167 reads

Understanding Redirects: A Comprehensive Guide

by Johan de JongJanuary 20th, 2023
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Redirects are a SEO experts biggest friend but at the same time something that can kill your SEO scores when done wrong. This guide will explain which types of redirects there are, how they work and when to use them properly.
featured image - Understanding Redirects: A Comprehensive Guide
Johan de Jong HackerNoon profile picture


Redirects are an SEO expert’s best friend but at the same time something that can kill your SEO scores when done wrong. This guide will explain which types of redirects there are, how they work and when to use them properly.


What is a redirect?

A redirect is a way to tell a browser or search engine bot that the URI they landed on has moved to another location. This can be permanent, temporary, or just a way to send the visitor to a new location when needed.


For SEO, redirects are usually used in cases like:


  • Change of domain name; for example you've acquired a .com version of your domain and want to use it as the main URL for your website.
  • Changed the location of an existing page/post; for example, all blog articles used to be at /blog/title-of-article but you moved them to /news/title-of-article.
  • Multiple URI's going to the same page/post; most seen in e-commerce where you can access products through multiple URLs.
  • Deletion of locations; it's not bad to remove old and outdated content, but the URL might still have backlinks.

Different types of redirects

As Google explains it, there are 2 types of redirects: temporary (weak) and permanent (strong) redirects. However, it would make more sense to add a third type: ignore (none). This will make sense when you understand the different status codes for redirects.


Redirects are usually indicated with an HTTP Status Code in the 300 range, similar to the 100, 200, 400, and 500 status codes which are used by servers to return the status of the request. Redirection messages may have any code or message as long as it's in the 300 range (so 300 to 399), however, a couple are standardized:

300 Multiple Choice

The request has multiple possible responses and it's up to the browser, bot, or user to decide how to proceed. This shouldn't be used on regular websites since there is no way to handle this automatically, but can be of use in APIs. For example, you try to go to /my-account/ but aren't logged in yet. Instead of returning a 401 unauthorized response, you could offer 2 possible redirects; one to /login/ and one to /register/. Again, not very useful for regular websites, but an API could use this perfectly fine.

301 Moved Permanently

Short and simple, the URL which has been requested has been moved to a different location permanently. Keep in mind that this redirect does not care which method (GET, POST, PUT, DELETE, etc.) was used and should be used for the redirect request. By default, a browser will use the same method (eg. submitting a form to URL 1 with a redirect will correctly submit it to the final URL without a problem). This will let search engines remove the old URL and contents, and start indexing the new location instead.

302 Found

The location has been changed temporarily, but the current URL should still be used (now and in the future). Search engines will keep the current (or actually old) URL and its contents and ignore the redirect itself. In short; simply ignore the redirect (you should, however, show the contents of the new location for now). Browsers will handle it automatically.

303 See Other

Again an 'ignore' response in search engines, because it simply means "you're at the right place, but the final response is somewhere else" and only applies to POST and PUT requests (which search engines don't do). For example, when you're done submitting a form to an URL it can return a 303 to indicate that the thank you page is somewhere else. Browsers will handle this correctly, and is especially useful in APIs.

304 Not Modified

A 304 status means that the result is cached by the browser, and therefore doesn't need to do a full request to the server. This only works when the first request (before it was cached) contains the correct headers to indicate the response is allowed to be cached. This is usually the case for static files (images, scripts, stylesheets). For search engine bots, this has no effect and is (indirectly) ignored, however proper cache headers for static files are very important for SEO since they will indicate the website is optimized for performance.

307 Temporary Redirect

Works the same as a 302 Found response, except that it's more strict when it comes to the method which was used in the original request. For example, when the URL was accessed through a POST, the redirect must be a POST as well. Browsers will do this automatically (also with a 302 response), however, a 307 is a better version and should be used unless technically a 302 is required.

308 Permanent Redirect

The 308 response is a stricter version of the 301 response, where again the request method must match the original request. Search engines will re-index the new location and remove the old one, while browsers will simply redirect directly without any issues.

Alternative redirection methods

Meta refresh

A meta refresh can be handled by the server (response headers) or client (HTML meta tag), and can be used for both a permanent and a temporary redirect. Google Search will handle instant meta refresh redirects as permanent, meaning the refresh rate is set to 0. Delayed meta refresh redirects, so a refresh rate of more than 0 seconds, is handled as a temporary redirect. This should only be used when it's not possible to set proper server redirects with the 300 status codes.


<head>
   <meta http-equiv="Refresh" content="0; URL=https://example.com/">
</head>

Javascript redirect

In Javascript, it's also possible to send a visitor to a new location. There are several use cases for this from a browser perspective, however; for SEO, it's a bad idea to implement. Google Search may see the redirect correctly, but only once the original URL has been crawled fully. So don't rely on this for setting up redirects for an URL, although browsers will handle this as long as Javascript is enabled and no errors occur loading the page.


window.location = "https://example.com/";

Crypto redirects

If none of the above can be implemented a simple link on the original page can tell your visitors they need to visit a new URL for the content. This will not be handled by browsers or search engines at all.


<body>
   <p>This page has been redirected to <a href="https://example.com/">example.com</a>.
</body>

Canonicals

Technically not a redirect, but extremely important for search engines. When you have one piece of content available on multiple locations (multiple domains, different URIs, etc.) it might be flagged as duplicate content, causing an SEO penalty. To resolve this set up a canonical URL to only one location so that all the others are simply seen as alternatives. Search engines will then only return the "master" URL when people search for it, but will still allow the alternative URLs as valid results when searching specifically on the other locations. So it's not a real redirect visible for users, but search engines will know the real URL of the current content is somewhere else.

How to implement a redirect correctly

WordPress

There are multiple plugins for WordPress that allow you to set up redirects.

Redirection is probably the most known plugin to do this. This plugin makes it extremely easy to set up redirects and even automatically creates redirects when changing post/page titles and thus permalinks. It also has the option to set up the redirection in .htaccess or create NGINX rules (depending on the server software and permissions available). And the best thing is, it's completely free.


SEO plugins like Yoast SEO, SEOPress, Rank Math SEO, and many others, also have redirections built in, including a lot of other nice features to improve your website for SEO. Keep in mind though that a paid version may be required to get all the features.

Apache - mod_alias

To set up redirects with Apache, which can be done through server configs, virtual hosts, directories, and .htaccess files that use the mod_alias module, you can use the following examples:


# 301 Permanent redirect:
Redirect permanent "/old" "http://example.com/new"
Redirect 301 "/old" "http://example.com/new"

# 308 Permanent redirect:
Redirect 308 "/old" "http://example.com/new"


# 302 Temporary redirect:
Redirect temp "/two-old" "http://example.com/two-new"
Redirect 302 "/two-old" "http://example.com/two-new"

# 307 Temporary redirect:
Redirect 307 "/old" "http://example.com/new"

Apache - mod_rewrite

Just like mod_alias you can use mod_rewrite to set up redirect in Apache.


RewriteEngine on

# 301 Permanent redirect:
RewriteRule   "^/old$"  "/new"  [R=301]

# 308 Permanent redirect:
RewriteRule   "^/old$"  "/new"  [R=308]


# 302 Temporary redirect:
RewriteRule   "^/old$"  "/new"  [R]
RewriteRule   "^/old$"  "/new"  [R=302]

# 307 Temporary redirect:
RewriteRule   "^/old$"  "/new"  [R=307]

So what is the difference between mod_alias and mod_rewrite?

Normally they work the same at the server level, by taking the incoming URL and returning the "redirected" content, but without actually telling the visitor that this happened. However, mod_rewrite does allow you to actually create a real redirect with the [R] flag, and even specify what kind of redirect it is (eg. [R=301] for a permanent redirect). Additionally, you have way more control over when and how to handle incoming and outgoing requests by using RewriteCond. This will enable using query strings, user agents, and IP addresses to define when the redirect should happen.


So if possible, try to use mod_rewrite, but mod_alias can be used as well if needed.

NGINX

Unlike Apache, it's not possible to have a .htaccess file in your directory to set up redirects, but it is required to set them up in the config file instead.


location = /old {
  # 301 Permanent redirect:
  return 301 $scheme://example.com/new

  # 308 Permanent redirect:
  return 308 $scheme://example.com/new


  # 302 Temporary redirect:
  return 302 $scheme://example.com/new

  # 307 Temporary redirect:
  return 307 $scheme://example.com/new
}



Also published here.