Thursday, 1 December 2016

Implement 301 and 302 Redirect in AEM

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

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 receives 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:

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.

  • 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. 

  • Click Next. Click Finish and Save Changes.

Create a dialog to take User input

  • Select components folder. Right click and select Create Dialog. 

    • Enter Title : Redirect Configuration Dialog. 
    • Click Save All. 

  • 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

    • 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.

    • 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 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.

    • 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 below code.
<%@include file="/libs/wcm/global.jsp" %>
    <% %>
        <%@ page import="," %>
            <% // try to resolve the redirect target in order to the the title
          String path=p roperties.get( "redirectTarget", "/");
          String type=p roperties.get( "type", Integer.toString(HttpServletResponse.SC_MOVED_PERMANENTLY)); 
   // resolve variables in path 
   path=E LEvaluator.evaluate(path, slingRequest, pageContext);
          // check for recursion
          if (!path.equals( "") && !path.equals(currentPage.getPath()) && !path.isEmpty()) {
            SlingSettingsService slingSettings=s ling.getService(SlingSettingsService.class); 
              if (slingSettings.getRunModes().contains( "publish")) { 
                  System.out.println( "This is my path "+path); 
                  response.setHeader( "Location",path); 
            else { 
              Page target=p ageManager.getPage(path); 
              String title=t arget==n ull ? path : target.getTitle(); %>
** This page redirects to<%=x ssAPI.filterHTML(title) %> **

  <% } } %>

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.

  • Activate the page and test the redirect component on publish Environment.

No comments :

Post a comment