Understanding 301 Redirection with its Implementation

Redirection in Computer Science is an essential beneficial service that helps website owners and administrators point their associated domains and subdomains to specific destination URLs when required. Redirection is performed when a specific web-based application is no longer using its original domain for data serving. All users linking to it need to be automatically informed about this inevitable change. So, in this case, Redirection comes into focus. This functionality helps domain administrators to preserve the relevance of the incoming relations to their domain or websites. So in this article, we will be understanding Redirection, 301 Redirection with its Duration, and performing a live demonstration of 301 URL Redirection.

• URL Redirection: Explaining Redirection in simple words means establishing the relationship or visitor internet traffic to a newly created URL in place of an old URL. The famous protocols in networking HTTP, HTTPS redirect code is a method for yielding users and search engine features from one URL address to another URL address if a Web-based application on the internet’s Redirection points your previous or old address to a new address then, its a Redirection. When a visitor visits or access the old URL of a web-based application, the server takes the visitor to the newly created web page, which is set for Redirection in the configuration file by the Website Owner or Administrator. One may ask that, ‘Why do we need Redirection’? So the answer is pretty simple: the primary purpose or needs to perform Redirection is to transfer or migrate some critical or almost every content to a new web page from an old web page. We can use Redirection to delete old web pages permanently and can be used to change domain names and merge websites with another company server.
• Status Codes: While browsing on the internet, you must have encountered error messages or error codes like 404. That’s an error, and many more, so these error messages are known as Status Codes. So these status codes are standard response codes that are returned from the web application server as per the request done by the user. These status codes also provide data or messages about the status of our requested query. Codes recognize the cause of the issue when the web application page responds appropriately to the request. In communication, every HTTP/HTTPS Protocol response message packet contains a status code in its first line, which indicates the result of the request query.

Error Message with Status Code 404

In Data Communication, there are fives groups of status codes that are divided according to the code’s first digit:

1. 1xx (Information stating codes):  100,101,102,103
2. 2xx (Request Successful stating codes): 200,201, 202, 203,  204,205 206,  207, 208, 226
3. 3xx ( Redirection message stating codes): 300,301,302,303,304,305,306,307,308
4. 4xx ( Error Message Stating code): 400, 401, 402, 403, 404, 405, 406, 407, 408, 409, 410, 411, 412, 413, 414, 415, 416, 417, 418, 421, 422, 423, 424, 425, 426, 427, 428, 429, 431, 451
5. 5xx (Server Encountered error stating codes): 500,501,502,503,504,505,506,507,508,510,511

• 301 (Moved Permanently) Status Code: As stated above, 3xx status codes are reserved for the Redirection alerts, so in this influential group, we have one of the codes, which is 301, also known as the Moved Permanently States code.  This code redirects the old URL address to a newly created or URL specified in the Location header or message packet. The visitors have to use this freshly specified URL rather than the original or old one. The target or the final resource is assigned to a unique or new permanent URL, and any future updates to this URL are used on the newly created URL. 301 Redirection is simply a permanent redirection that transfers the visitors to the redirected page from the old page URL. According to the Redirection aspect, 301 is the best methodology and best reliable for implementing redirects on any web application. To preserve the Current Search engine feature or functionality, 301 Redirection is used. We have to implement 301 redirections manually in the .htaccess configuration file.

Let’s understand about 301 redirections in detail.

1. Duration of 301 redirection: Most probably Moved Permanently or 301 Redirections redirect the specified domain or subdomain for approximately a year or sometimes more than a year. You need to check frequently if visitors are being transferred to your newly created URL( after a year). .htaccess plays an important role in direction. If you want to remove the redirection, you can modify the .htaccess file and remove the redirection, so afterward, the website won’t forward users to the new URL anymore.

Understanding 301 redirection via diagram:

301 Redirect from Old Page to New Page

From the above figure, the old page of the domain is redirected or moved permanently to the new page due to some internal application issue.

2. When to Perform 301 Redirection: 301 redirects are commonly used when:

1. Domain owner wants to change a page’s URL.
2. Domain owner wants to connect pages about the same topic.
3. Domain owners have to change a subfolder’s URL (e.g., https://geeksforgeeks.org/old-directory/ to https://geeksforgeeks.org/new-directory/).
4. Domain owners have moved a subdomain to a subfolder (e.g., https://demo.geeksforgeeks.org to https://geeksforgeeks.org/demo/).
5. Domain owners have to change domain names (e.g., geeksforgeeks.org to geeksforgeeks.in).
6. Domain owners have to switch from HTTP to HTTPS (e.g., http://geeksforgeeks.org to https://geeksforgeeks.org).

3. Technique to Implement 301 Redirection using .htaccess configuration file: htaccess is a configuration file for use on web servers running the Apache Web Server software. This file is actually responsible for Redirection.

Now let’s see the steps to be followed to implement 301 redirections: 

• Create a .htaccess file, open notepad, name, and save the file as .htaccess (no extension to specify for file).
• If .htaccess already exists on your server, then modify it and re-upload it.
• Place the following code in your .htaccess configuration file.

redirect 301 /old/old_page.html http://www.demoexample.com/new_page_redirection.html

• If the .htaccess file already has lines of code in it, skip a line, then add the above code.
• Save the .htaccess file.
• Upload this file to the main or root folder of your server.
• Examine it by typing in the old address to the page you’ve changed. The server should instantly take you to the new location.
• Note: Don’t add “http://www” to the first part of the statement – place the path from the top level of your site to the page. Also, assure that you devise a single space between these elements:
• redirect 301 (the instruction that the page has moved)
• /old/old_page.html (the original folder path and filename)
• http://www.demoexample.com/new_page_redirection.html (new path and filename)

Example: In the below example, we are going to perform 301 Redirection. For this demonstration, we are hosting our files on LocalHost, i.e. XAMPP Server.

We have created two web pages named: 

1. OLD_PAGE.html
2. NEW_PAGE_REDIRECTED.html

1. OLD_PAGE.html: In the OLD_PAGE.html web page, we will redirect this page to NEM_PAGE_REDIRECTED.html by adding the 301 Redirection code in the .htaccess file. .htaccess file is the configuration file for a web-based application. .htaccess file can manage all the internal structures through this file. The OLD_PAGE.html is the webpage that web application will redirect to another web page. When any user enters the OLD_PAGE.html URL, they will be automatically redirected to the New redirected page.

Filename: OLD_PAGE.html

HTML

<!DOCTYPE html>
<html>
   <head>
      <title>OLD PAGE</title>
   </head>
   <body>
      <h2>WELCOME TO OLD PAGE</h2>

<p>THIS IS THE PAGE WHICH WE ARE GOING TO REDIRECT TO ANOTHER PAGE</p>


   </body>
</html>

Output:

Fig 1 . THIS IS OLD_PAGE.html OUTPUT

2. NEW_PAGE_REDIRECTED.html: To perform the redirection, we need the destination webpage from which our users will be sent from the old page to the new page. So our destination page or New Redirected page is NEW_PAGE_REDIRECTED.html. If the user enters the OLD_PAGE.html URL, then he will automatically switch to NEW_PAGE_REDIRECTED.html URL.

Filename: NEW_PAGE_REDIRECTED.html

HTML

<!DOCTYPE html>
<html>
   <head>
      <title>THIS IS NEW PAGE [REDIRECTED PAGE]</title>
   </head>
   <body>
      <h2>THIS IS THE NEW PAGE WHICH HAVE CAME FROM OLD_PAGE REDIRECTION</h2>

<p>WE ARE IN OLD PAGE</p>


   </body>
</html>

Output:

Fig 2. THIS IS NEW_PAGE_REDIRECTED.html OUTPUT 

3. .htaccess file for Redirection(Configuration file): As We stated above, .htaccess is the file responsible for any internal structure of any type of Redirection Feature. So owners should handle this file carefully. In this file, we need to add the code of the 301 Redirection. The code is just one line code in which we need to specify the old page and the new redirection page URL. This single line code is responsible for the 301 Redirection in the web-based application. As per the need, you can redirect number of various pages only you need to add the code in .htaccess file.

Note: 

1. Make sure the file should be saved as .htaccess without extension. As in Geeksforgeeks Code Embed Editor there is no empty extension facility , I have added the source code in the HTML section but at your side you need to save it without any extension.

2. The # Added sentences are only for Readers Understanding, no need to add this lines while performing practical at your side.

.htaccess

HTML

#.htaccess file content
#OLD_PAGE.html will be Redirected to NEW_PAGE_REDIRECTED.html Page Automatically
redirect 301 /OLD_PAGE.html http://localhost:8081/NEW_PAGE_REDIRECTED.html

Output:

Video 1. OUTPUT VIDEO (LIVE DEMONSTRATION)

 Explanation: As we enters the OLD_PAGE.html URL in the address bar the Web Application is automatically taking us to the other URL, and this Other URL is of NEW_PAGE_REDIRECTED.html page. So this is due to the 301 Redirection Code which is Written in the .htaccess file. Although copying the http://localhost:8081/OLD_PAGE.html link and pasting it to new tab will always redirect us to  http://localhost:8081/NEW_PAGE_REDIRECTED.html Page, till we remove the Redirection Code from .htaccess file. You can see in above output, I was trying to open http://localhost:8081/OLD_PAGE.html but as we have done redirection we were redirect to http://localhost:8081/NEW_PAGE_REDIRECTED.html.

This redirection will be lasting till the owner removes the redirection command from the .htaccess file.