April 27, 2020
Estimated Post Reading Time ~

How to include custom meta tag headers from AEM Tags

This post explains the approach to include custom meta tag headers from AEM/CQ5 Tags.

Customize the page properties dialog:Customize the page properties dialog to add the field to select custom tags

Copy /libs/foundation/components/page/dialog and /libs/foundation/components/page/tab_basic under custom page rendering component e.g. /apps/training/components/page-content/

Create a node of type cq:widget under tab_basic with the following properties

Name.                 Type.         Value

-----------------------------------------
allowBlank         Boolean     true
fieldLabel          String       Page Type
name                String      ./page-type
namespaces      String[]      page-type
type                 String         tags




Refer https://www.albinsblog.com/2017/03/how-to-customize-page-properties-dialog-dynamic-dropdownlist-aem-cq5-in-touchui-classicui.html for more details on customizing the page properties dialog.

Define new tag namespace & tags:Create new tag namespace(page-type) through http://localhost:4502/tagging



Create required tags under page-type namespace





Override the the head.jsp if the page component is inhering from foundation/components/page. Add required logic in head.jsp to include the custom metatags from AEM tags.
e.g.
<%
%><%@ include file="/libs/foundation/global.jsp"%><%
%><%@ page contentType="text/html; charset=utf-8" import="com.albinsblog.samples.core.TagsUtil,com.day.cq.tagging.*"%><%

TagManager tagManager = resourceResolver.adaptTo(TagManager.class);
String[] pageTypeTags = properties.get("./page-type", String[].class);
String pageTypes = TagsUtil.getTagTitles(tagManager, pageTypeTags);
%><head>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<meta name="page-types" content="<%= pageTypes %>" />
</head>

TagsUtil.java - util class to fetch the tag titles and convert the titles to required formats.

import com.day.cq.tagging.Tag;
import com.day.cq.tagging.TagManager;
public class TagsUtil {
public static String getTagTitles(TagManager tagManager, String[] typeTags) {
StringBuffer typeBuffer = new StringBuffer();
if (typeTags != null) {
for (String typeTagId : typeTags) {
Tag typeTag = tagManager.resolve(typeTagId);
if (typeTag != null) {
String tagPath = typeTag.getTitlePath();
String[] splitTags = tagPath.split(":");
String tagName = splitTags[1];
if (typeTag != null)
typeBuffer.append(tagName + ";"); }
}
if (typeBuffer.length() != 0)
typeBuffer.deleteCharAt(typeBuffer.length() - 1);
}
return typeBuffer.toString();
}
}

Configure required tags in the page properties dialog


The defined meta tag will be added to the page



By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.