Implement 301 and 302 Redirect in AEM

The focus of this tutorial is to create a custom component that allow end users to select 301 or 302 redirect for individual pages in AEM.

Adobe Experience Manager(AEM) SEO best practices suggest use of 301 or 302 redirect in AEM.

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

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 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 new URL , it always attempts to request both the old location and new location and crawl it.

Note:- In case of 302 redirect browser does not maintain any mapping or cache. So, server recieves hit for both the url’s.

When to use 301 and 302 redirect


AEM 301 Redirect Feature is a good alternative to deleting,moving and deactivating a page. As it transfer the page rank of webpage to 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 redirect is a good alternative.

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

Avoid 400 page not found error in AEM


Use 301 redirect for pages that no longer exists, 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 error.

Lets implement a custom component to allow users to select 301 or 302 redirect in aem.

Implement a custom component to redirect individual pages in AEM:


Lets create a custom component to allow content authors or end users to select which redirect they want to apply on individual page.

Create a Project Structure:

Create a Project structure as shown in previous tutorial.

Your Project Structure should look like below image:

AEM 301 302 Redirect Project Structure

Creating a Redirect Template:

A template is a blueprint for creating any page. Follow below steps to create 301 or 302 redirect Template in AEM.

  • Select Template Folder. Right Click and select create template.
  • Enter below details in create template dialog.
    create redirect template in aem
  • Enter Allowed Path: /content(/.*)?
  • Click Next. Click Finish and Save Changes.

For more details How to create a Template in AEM. Visit  Create a Redirect Template in AEM

Creating a custom Component for Redirect in AEM:

Follow below steps to create redirect component:

  • Select Components Folder. Right Click and select create component.
  • Enter below details in create component dialog.
    create redirect component in aem
  • Click Next. Click Finish and Save Changes.

For more details how to create a component in AEM. Visit Create a component in AEM

Create a dialog to take User input
  • Select components folder. Right click and select Create Dialog.
    • Enter Title : Redirect Configuration Dialog.
    • click Save All.
      create redirect component dialog in aem
  • Go to tab1 panel node and rename title to any suitable name like locale in 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
      create widget in aem
  • Right click locale. Create a Node.
    • Title: items.
    • Type: cq:WidgetCollection .
  • Right click on Items.
  • Create Two nodes. For first Node:
    • Title: redirect
    • Type: cq:Widget
      • Add  below Node properties.
        redirect node page property in aem
  • Create another Node:
    • Title: type.
    • Type: cq:Widget.
      • Add below Node properties.
        redirect type node page property in aem
  • Right click type. Create a Node.
    • Title: options.
    • Type: cq:WidgetCollection.
  • Create two node 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.
          permanent 301 redirect node property
    • Right click on options node. Create a Node.
      • Title: Temporary.
      • Type: nt:unstructured.
        • Add below node properties to Temporary Node.
          temporary 302 redirect node property

Open our default rendering script by name redirect.jsp and replace it with 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 below steps to create a page in AEM:

  • Go to Site Admin.
  • Create a New Folder to maintain readability of 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.
    test 301 302 redirect dialog in aem
  • Activate the page and test the redirect component on publish Environment.

For more details view How to create pages in site admin

 

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.