Implementing 301 and 302 Redirect in AEM

The focus of this tutorial is to create a custom component that allows end-users to select 301 or 302 redirects for individual pages in AEM.
Adobe Experience Manager(AEM) SEO best practices suggest the use of 301 or 302 redirect in AEM.

I have tried to cover below topics in details in this tutorial:

• What is the difference between 301 and 302 redirect in AEM?
• When to use 301 and 302 redirect.
• How to avoid 400 pages not found an error in AEM.
• Implement a custom component to allow users to configure a redirect for individual pages.

Difference Between 301 and 302 Redirect
Status code 301 means that this webpage no longer exists, the engine search for location header in response pick the new URL and replace the indexed URL with the new one and also transfer page rank.

Note: In the case of 301 redirect browser cache the mapping of new url with old url.

Status code 302 tells the crawlers or browser to redirect this webpage temporarily to the new location and crawl both of the pages. The old webpage URL still exists in the search engine database and when we make hit to a new URL, it always attempts to request both the old location and new location and crawl it.

Note: In the case of a 302 redirect browser does not maintain any mapping or cache. So, the server receives a hit for both the URLs.
When to use 301 and 302 redirect

AEM 301 Redirect Feature is a good alternative to deleting, moving and deactivating a page. As it transfers the page rank of the webpage to a new page hence improving SEO and search engine result.

AEM 302 Redirect Feature is Preferred: If in your application, you need to change any page url frequently(generally in case of promotional sale pages) then using 302 redirects is a good alternative.

Note: Do not use AEM redirect feature very frequently as it messes up your entire project hierarchy.

Avoid 400 pages not found an error in AEM
Use 301 redirects for pages that no longer exist, so that search engine map this new url and cache it. Now search engine will redirect all your old bookmarks to this new url instead of giving 400 errors.

Let's implement a custom component to allow users to select 301 or 302 redirects in AEM.

Implement a custom component to redirect individual pages in AEM:
Let's create a custom component to allow content authors or end-users to select which redirect they want to apply on an individual page.
Create a Project Structure:

Your Project Structure should look like below image:

Creating a Redirect Template:
A template is a blueprint for creating any page. Follow the below steps to create 301 or 302 redirect Templates in AEM.
Select the Template Folder. Right, Click and select create a template.
Enter the below details in create template dialog.

Enter Allowed Path: /content(/.*)?
Click Next. Click Finish and Save Changes.

Creating a Custom Component for Redirect in AEM:
Follow the below steps to create the redirect component:
Select Components Folder. Right, Click and select create the component.
Enter the below details in create component dialog.

Click Next. Click Finish and Save Changes.

Create a dialog to take User input
Select the components folder. Right-click and select Create Dialog.
Enter Title: Redirect Configuration Dialog.
Click Save All.


Go to the tab1 panel node and rename the title to any suitable name like locale in the current example.
Right-click tab1. Create a Node.
Title: items.
Type: cq:widgetCollection .
Right-click on Items. Create a node.
Title: locale
Type: cq:widget

Right click locale. Create a Node.
Title: items.
Type: cq:WidgetCollection .
Right, click on Items.

Create Two nodes. For the first Node:
Title: redirect
Type: cq:widget
Add below Node properties.

Create another Node:
Title: type.
Type: cq:widget.
Add below Node properties.

Right click type. Create a Node.
Title: options.
Type: cq:WidgetCollection.

Create two nodes of type nt:unstructured to take user input.
Right-click on options node. Create a Node.
Title: Permanent.
Type: nt:unstructured
Add below node properties to Permanent Node.

Right-click on options node. Create a Node.
Title: Temporary.
Type: nt:unstructured.
Add below node properties to Temporary Node.


Open our default rendering script by name redirect.jsp and replace it with the below code.

<%@include file="/libs/wcm/global.jsp"%>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<cq:include path="firstComponent" resourceType="foundation/components/parsys"/><%
%><%@ page import="com.day.cq.wcm.foundation.ELEvaluator,
org.apache.sling.settings.SlingSettingsService"%><%

// try to resolve the redirect target in order to the the title
String path = properties.get("redirectTarget", "/");
String type = properties.get("type", Integer.toString(HttpServletResponse.SC_MOVED_PERMANENTLY));
// resolve variables in path
path = ELEvaluator.evaluate(path, slingRequest, pageContext);

// check for recursion
if (!path.equals("") && !path.equals(currentPage.getPath()) && !path.isEmpty()) {
SlingSettingsService slingSettings = sling.getService(SlingSettingsService.class);
if (slingSettings.getRunModes().contains("publish")) {
response.setStatus(Integer.valueOf(Integer.parseInt(type)));
System.out.println("This is my path "+path);
response.setHeader("Location",path);
return;
} else {
Page target = pageManager.getPage(path);
String title = target == null ? path : target.getTitle();
%><p class="cq-redirect-notice">** This page redirects to <a href="<%= path %>"><%= xssAPI.filterHTML(title) %></a> **</p><%

}
}
%>

Creating Pages in site admin:
Webpages on which components are placed are created under site admin. Follow the below steps to create a page in AEM:
Go to Site Admin.
Create a New Folder to maintain the readability of the Project.
From Top Bar Select New –> New Page.
Enter Page Name
Select Template(Redirect Template)
Double click on Page and add Redirect component to our Page.

Activate the page and test the redirect component on publishing Environment.