In this post, we are going to look at what is a HTTP redirect.
We are going to learn:
It is important to understand redirects. As you build your website there will be times when you need to remove pages. You don't want to lose the traffic and you can use redirects to send this traffic to another page.
Let's take a look.
What is a redirect
As an example, we are going to pretend that we run a very popular e-commerce store selling coffee.
Our store is so popular that we have sold out of some products. Not only that but these products are no longer being made.
Now we have a few options to deal with this. Currently, the page is of no use to customers as they can't buy this product anymore.
You and the team want to improve the customer experience and do the best for your SEO. You don't want to lose traffic.
You call a meeting to brainstorm some ideas and you come up with a few options:
We could add other products that are similar on the page
We could remove the product which will remove the page
We could leave it and do nothing
We could send users who visit the page to a similar product
Ruling out doing nothing, you have three options. You want to make sure the customer finds a product they can buy.
You don't like the idea of removing the page completely. It was a very popular product that has many incoming links. These incoming links have taken time to build and you don't want to throw away this hard work. These links are also in search engines such as Google and Bing.
You could add similar products to the page but this still puts the work on the customer adding an extra click. You want to make the sale of these coffee pods as easy as possible and help guide their choice.
You want to make it as easy as possible to buy.
After much debate, you choose to explore the last option and send the customer to a similar product.
In this case, you need to send users who visit the page at this URL:
This is exactly what a redirect is. A way of sending users who visit one page to another page or one URL to another URL.
Why do I need to redirect?
There are many reasons why you may end up needing to redirect URLs when running a site.
We have already had a look at one when running our e-commerce store. But, Steve I don't run an e-commerce store.
That's ok, there are many other reasons why your site might need to redirect. Here are a few reasons:
A job advert that has closed
An event that has finished
An out of date blog post such as “best cameras for 2010”
You change domain names and need to migrate over
You change the structure of your site and need to redirect pages
There are also a few technical reasons you may want to redirect:
You want all your web traffic to be over HTTPS so you redirect HTTP traffic to HTTPS
You want all your URLs to be non-www so you redirect https://www.example.com to https://example.com
You want all your URLs to end in a slash so you redirect from https://example.com/blog/my-great-post to https://example.com/blog/my-great-post/
So now you know what is a redirect and you know why you need redirects, let's look at how you redirect a page.
How do I set up a redirect?
Before we jump into how, there is one more thing we need to cover. That is that there are two types of redirects.
Temporary and permanent.
They have special numbers associated with them:
301 is a permanent redirect
302 is a temporary redirect.
These are HTTP status codes and they are special codes that tell browsers what to do.
When a browser sees the HTTP status code 301 it knows that the URL is no longer in use. It will follow the redirection to the new URL. As it's a 301 redirect the browser also knows that this is permanent that won't change.
When do you perform a 301 redirect?
When we were running the e-commerce coffee store we had a product with no stock and it was no longer made. In this case, it is never going to be back in stock. So we would choose to redirect permanently to another product that is in stock.
We would perform a 301 redirect.
How do I perform a 301 redirect?
There are many ways you can do this and a lot will depend on your web server set up.
If you are using the Apache HTTP Server, you would create a redirect using this configuration:
Lastly, if you are using a static site generator then you would perform a 301 redirect using your web server. Here is an example, of how Netlify handles redirects:
# Redirects from what the browser requests to what we serve
These are all permanent redirects.
How do I perform a 302 redirect?
If you need to redirect for only a short time then this is a temporary redirect. For example in our store, it may be that the product is out of stock and will be back in stock in the next few months. We know that it will come back, so we temporarily redirect the page.
In this case, we would do a redirection using the 302 HTTP status code. This is as simple as replacing the 301 with a 302. Here is an example, of the Apache HTTP Server configuration:
You should not do this because this is much slower than a server-side redirect. It is slower as the browser needs to download the whole web page before the redirection starts. This is a slow user experience that you can avoid if you use server-side redirects.
By now you should have a good understanding of redirects and when you may use a 301 or 302 redirect. There is one more thing to cover on the subject of redirects. That is managing many redirects.
Managing many redirects
It can get complicated when you have many redirects.
This can be especially true when you take our e-commerce example. What if you redirect from: