What is a redirect?
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.
What do we do with these out of stock pages?
One of these pages has the following URL:
https://example.com/coffee-pods/exclusive-bundle-pack
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:
https://example.com/coffee-pods/exclusive-bundle-pack
To the new product which has this URL:
https://example.com/coffee-pods/exclusive-morning-bundle-pack
What we need is a redirect!
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
tohttps://example.com
- You want all your URLs to end in a slash so you redirect from
https://example.com/blog/my-great-post
tohttps://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:
Redirect 301 /oldpage.html https://example.com/newpage.html
If you are using WordPress then you can redirect like this:
wp_redirect( "https://example.com/new-page.html", 301 );
If you are using a CDN then you can manage your redirects. For example, Cloudflare can manage these redirects using their dashboard under “Page Rules”.
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
/home /
/blog/my-post.php /blog/my-post
/news /blog
/cuties https://www.petsofnetlify.com
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:
Redirect 302 /oldpage.html https://example.com/newpage.html
The above redirects are server-side redirects. You should use server-side redirects if possible as they have some advantages:
- Faster performance
- Better for SEO
It is possible to do a client-side redirect using JavaScript. In this case, you can use JavaScript on the webpage to send the user to the new URL like this:
location.href = "https://example.com/new-page.html";
That is all the JavaScript you need to create a redirect.
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.
Another reason to avoid JavaScript redirects is because of web crawlers. These web crawlers such as Googlebot are not great at running JavaScript. Although things are improving, it is better for your SEO if you use server-side.
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:
https://example.com/coffee-pods/exclusive-bundle-pack
To the new product which has this URL:
https://example.com/coffee-pods/exclusive-morning-bundle-pack
But then the “Exclusive Morning Bundle Pack” product also is no longer available. Now we need to redirect again to here:
https://example.com/coffee-pods/exclusive-coffee-lover-bundle-pack
This is as a redirect chain and it is hard to manage these chains as they grow.
They also hurt your SEO. Moz states that you lose 10% authority for every redirect:
For every step in a redirect chain, about 10% of authority is lost.
You need to manage these redirects and services like Easyredir can help you do this.
Although they are an extra cost it can be a lifesaver as your site scales.
Wrapping Up, What is a redirect?
We have looked at what is a redirect. You have learned that there are two types of redirect permanent (301) and temporary (302).
Depending on what you are doing you need to choose them appropriately.
Having too many redirects can affect your SEO. For this reason, you need to manage your redirects carefully.
Perform your redirects on the server-side. This is faster for your users and Googlebot will be able to follow the redirects.