Status code 301 & its impact on Search Engine.

Introduction

This article will focus on one of the important concepts of web page redirection and why 301 is important and also we will cover how we can make use of react to help us with the redirection.

What is 301?

A 301 redirect is a way of sending website visitors to a new URL. 301 is the HTTP response status code.
To know more about 301 you can check here.

Why 301 is important?

Let's understand this with a basic example.
Suppose we have a page www.mysite.com/hello-worldand we have created a similar page www.mysite.com/hello-world-new exactly with the same content.
We would like to turn off our old page www.mysite.com/hello-world and we don't want search engines to list our old page in search results.

Our old pagehello-world, here we make an API call to get components for the page. Example API to get some information for our page: www.mysite.com/api/details/winter-shirts

Below is sample API response:

In the API response, we have a key redirectPage which tells us to redirect the user to some new page.

We have API resolver and there is a check if(header.redirectPage){} then open up a new page and as per sample API, our condition is true and the user will be redirected to the new URL.

What is the impact on SEO?

By doing the above exercise, we will have an impact on SEO, as per the above implementation, we will redirect our page, but our search bots will always hit the old page.

We don't want this to happen anymore because www.mysite.com/hello-worldis an old page, since our search bots are not informed that the page has been moved to the new address and it will always show the old page on the search results.

How can we fix it?

Let's take the help from301status, 301is a server response code.
301 status code will inform our search engine bots to understand www.mysite.com/hello-world is permanently moved and the search results need to update with the new addresswww.mysite.com/hello-world-new.

There are various ways to solve this issue

You can change settings on the server where you list down your site urls and return 301 status code for the old page.

On javascript, we can't really do a lot, as we know 301 is server sent code but we can make use of rel=canonical tag.

The canonical tag is an HTML element that helps search bots prevent duplicate content issues.
As we know we have two pages hello-world and new-hello-world with similar content the canonical tag will inform the bot that similar URLs are actually one and we can do this by adding a simple line of code in the head.

<link rel="canonical" href="www.mysite.com/hello-world-new"/>

Also if you have a react app and is server-side rendered we can make use of react-router.

react-router gives you the power of <Redirect /> .

The <Redirect/> job is to navigate the page to a new location. To know more on the same you can check the redirect

Ok, let’s update our code

Now we have added a path for the new page and this will redirect our page to the new address.
But the server will still respond with status code as302 which means the page has temporarily moved to a new URL.

Now let’s see how we can set the status as 301 with <Redirect /> .

If you can see we have set the status as 301, and now we will always receive status code as 301 which will inform our search bots that the old page has been permanently moved.
In this way, we can make use of react to helps us on redirection and solve our SEO issue.

Note: Always make sure when you trying to redirect an old page to the newer make sure you receive the status as 301.

I hope you enjoyed reading this article.

Thank you.

P.S. 👋 Hi, I’m Aatif! If you liked this, follow me on twitter and share the story with your developer friends