301 Redirect from non-www to www

301 Redirect from non-www to www
Photo by Call Me Fred / Unsplash
Why redirect traffic?

We use redirection for various reasons like URL shortening, security, Geolocation reasons & also SEO purposes so as to not have any duplicate content and redirecting your visitors & bots to a single canonical URL.
(You can read more in depth about canonical URLs from Matt Cutts blog here.)

The following are examples of how these websites redirect to the end URL.

facebook.com   --> www.facebook.com
google.co.uk   --> www.google.co.uk
apple.com      --> www.apple.com
microsoft.com  --> www.microsoft.com

There are a few different kinds of redirects which each have certain use cases which I will describe below.

NOTE THAT IN 99% OF CASES A 301 REDIRECT IS THE BEST USE

301 Moved Permanently

The 301 redirect is a permanent redirect which should be used in almost all instances. It is used if you change your domain name or want to redirect traffic permanently from a specific URL to another URL. This will also pass the link juice (search engine ranking factor) from the old page to the new redirected page. This method allows changing from POST to GET.

Client Request & Server response for the 301 redirect.

GET /index.php HTTP/1.1
Host: example.co.uk

HTTP/1.1 301 Moved Permanently
Location: http://www.example.co.uk/index.html

302 Moved Temporarily (HTTP 1.0) / Found (HTTP 1.1)

The 302 redirect is a temporary redirect (in HTTP 1.0) and found (in HTTP 1.1). No link juice passes to the new URL when using a 302 redirect as it's only temporary, which means that in most cases this method shouldn't be used. This method is superseded by 303 and 307 redirects and the 302 is kept for backwards compatibility in HTTP 1.1. This method allows changing from POST to GET.

Client Request & Server response for the 302 redirect.

GET /index.html HTTP/1.1
Host: example.co.uk

HTTP/1.1 302 Found
Location: http://www.example.co.uk/index.html

303 See Other (HTTP 1.1 Only)

The 303 redirect is a redirection like a 302 for temporary but only supports a GET request even if the original request was a POST. This method is not used in most cases and is NOT supported in the HTTP 1.0 definition.

Client Request & Server response for the 303 redirect.

GET / HTTP/1.1
Host: www.example.com

HTTP/1.1 303 See Other
Location: http://www.example.co.uk/other

307 Temporary Redirect (HTTP 1.1 Only)

The 307 redirect is a temporary redirect in HTTP 1.1 and is one of the successors, along with the 303 to the 302 redirect. Whilst most search engines treat this like a 302 redirect in most scenarios. The main use case of this redirect is when the URL has only moved temporarily like during maintenance. It is generally better practice to use a 302 redirect just for backward compatibility. This method does not allow changing from POST to GET.

Client Request & Server response for the 307 redirect.

GET / HTTP/1.1
Host: www.example.com

HTTP/1.1 307 Temporary Redirect 
Location: http://www.example.co.uk/other

308 Permanent Redirect (HTTP 1.1 Only)

The 308 redirect is the same as a 307 but a permanent redirection rather than a temporary one. The 308 indicates that the target URL has been assigned a new permanent URL and any future references to the old URL should use the new URL. Should you use it? Probably not as its still a draft specification and hasn't been finalised and it's much safer to use a 301 redirect. This method does not allow changing from POST to GET.

Client Request & Server response for the 308 redirect.

GET / HTTP/1.1
Host: www.example.com

HTTP/1.1 308 Permanent Redirect 
Location: http://www.example.co.uk

To be sure visitors and search engines get the desired page then necessary redirects are most likely required, if so be sure to monitor you pages and look for errors due to incorrect syntax in the redirects.

More info regarding 301 redirects from Google Webmasters


How to redirect non-www to www

One of the main reasons for a 301 is for setting your main canonical URL for your website. I cannot stress enough that it is better practice to include the www rather than your naked domain name for this.
Why you ask? Simply because there are a few technical factors such as;

  • Only A records and no CNAMES for root domain, issues arise for mail and name servers otherwise.
  • Cookies can become problematic as they are issued for all sub-domains if you use the naked domain, which also may have some security implications
  • More info regarding why its better to use www can be found on Yes-WWW and Heroku
Using Apache

When using Apache webserver add the following config to the top of the .htaccess file located in the root web directory.

RewriteEngine On
RewriteCond %{HTTP_HOST} ^example.co.uk [NC]
RewriteRule ^(.*)$ http://www.example.co.uk/$1 [L,R=301]
Using Nginx

If using Nginx then add the following config to the server block.

server {
        server_name example.co.uk;
        return 301 $scheme://www.example.co.uk$request_uri;
}
Using IIS

When using Microsofts IIS webserver then the following config needs to be added to the web.config file.

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
       <rule name="Redirect to www" stopProcessing="true">
        <match url=".*" />
        <conditions>
          <add input="{HTTP_HOST}" pattern="^example.co.uk$" />
        </conditions>
        <action type="Redirect" url="http://www.example.co.uk/{R:0}"
 redirectType="Permanent" />
       </rule>
      </rules>
    </rewrite>
  </system.webServer> 
</configuration>
Using Caddy

If your using Caddy webserver, redirects are easy just add the following config to your Caddyfile.

example.co.uk {
  redir http://www.example.co.uk
}
Using HAproxy

The following config is for HAproxy (High Availability Proxy) and should be added to the frontend section.

acl has_www hdr_beg(host) -i www
http-request redirect code 301 location www.%[hdr(host)]%[req.uri] unless has_www