How to enable the authors to override or add new meta tags to the pages?

The custom meta tags in AEM are predefined in components with required values - the values can be dynamically taken from properties or external system in case of eCommerce websites, the authors will not be able to overwrite(the values can be changed but some cases we may required the value should be changed only for meta tags but not in the source) or add new meta tags during the page authoring.

Meta tags in page components:

This post will explain the approach to enable the authoring capability to override the meta tags defined in the page components and also to add new meta tags to the pages.

Enabling the meta tag management(overridden the existing meta tags and add new meta tags ) for author:

Override the Page Proprieties to add additional tab to define meta tags:

Create a node cq:dialog under page component(e.g /apps/weretail/components/structure/page/)

Name : cq:dialog
Type : nt:unstructured

Property

sling:resourceType cq/gui/components/authoring/dialog

Create a node content under /apps/weretail/components/structure/page/cq:dialog

Name : content
Type : nt:unstructured

Create a node items under /apps/weretail/components/structure/page/cq:dialog/content

Name : items
Type : nt:unstructured

Create a node tabs under /apps/weretail/components/structure/page/cq:dialog/content/items

Name : tabs
Type : nt:unstructured

Create a node items under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs

Name : items
Type : nt:unstructured

Create a node metatags under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items

Name : metatags
Type : nt:unstructured

Properties

jcr:title Meta Tags
sling:resourceType granite/ui/components/coral/foundation/fixedcolumns

Create a node items under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags

Name : items
Type : nt:unstructured

Create a node column under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags

Name : column
Type : nt:unstructured

Properties
sling:resourceType granite/ui/components/coral/foundation/container

Create a node items under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags/column

Name : items
Type : nt:unstructured

Create a node overridemetatags under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags/column/items

Name : overridemetatags
Type : nt:unstructured

Properties
composite true
fieldLabel Override Meta tags
sling:resourceType granite/ui/components/coral/foundation/form/multifield

Create a node newmetatags under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags/column/items

Name : newmetatags
Type : nt:unstructured

Properties
composite true
fieldLabel New Meta tags
sling:resourceType granite/ui/components/coral/foundation/form/multifield

Create a node field under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags/column/items/overridemetatags

Name : field
Type : nt:unstructured

Properties
name ./overRideMetadata
sling:resourceType granite/ui/components/coral/foundation/container

Create a node items under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags/column/items/overridemetatags/field

Name : items
Type : nt:unstructured

Create a node metaname under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags/column/items/overridemetatags/field/items

Name : metaname
Type : nt:unstructured

Properties
name ./metaname
fieldLabel Meta tag Name
sling:resourceType granite/ui/components/coral/foundation/form/textfield

Create a node metavalue under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags/column/items/overridemetatags/field/items

Name : metavalue
Type : nt:unstructured

Properties
name ./metavalue
fieldLabel Meta tag Value
sling:resourceType granite/ui/components/coral/foundation/form/textfield

Create a node field under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags/column/items/newmetatags

Name : field
Type : nt:unstructured

Properties
name ./newMetadata
sling:resourceType granite/ui/components/coral/foundation/container

Create a node items under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags/column/items/newmetatags/field

Name : items
Type : nt:unstructured

Create a node metaname under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags/column/items/newmetatags/field/items

Name : metaname
Type : nt:unstructured

Properties
name ./metaname
fieldLabel Meta tag Name
sling:resourceType granite/ui/components/coral/foundation/form/textfield

Create a node metavalue under /apps/weretail/components/structure/page/cq:dialog/content/items/tabs/items/metatags/column/items/newmetatags/field/items

Name : metavalue
Type : nt:unstructured

Properties
name ./metavalue
fieldLabel Meta tag Value
sling:resourceType granite/ui/components/coral/foundation/form/textfield

Define the Sightly POJO class to retrieve the meta tags from page properties:
The below Java class retrieve the overwritten and new meta tags from page properties and expose those values to Sightly as a map.

package com.common.metatags;

import com.adobe.cq.sightly.WCMUsePojo;
import java.util.HashMap;
import javax.jcr.Node;
import javax.jcr.NodeIterator;

public class Sitemetadata extends WCMUsePojo {

private HashMap<String , String> metaOverride =new HashMap<String ,String>() ;
private HashMap<String , String> newMeta =new HashMap<String ,String>() ;

@Override
public void activate() throws Exception {
Node currentNode = getResource().adaptTo(Node.class);
if(currentNode.hasNode("overRideMetadata")){
Node overRideMetadataNode = currentNode.getNode("overRideMetadata");
NodeIterator ni = overRideMetadataNode.getNodes();
while (ni.hasNext()) {
Node child = (Node)ni.nextNode();
metaOverride.put(child.getProperty("metaname").getString(),child.getProperty("metavalue").getString());
}
}

if(currentNode.hasNode("newMetadata")){
Node newMetadataNode = currentNode.getNode("newMetadata");
NodeIterator ni = newMetadataNode.getNodes();
while (ni.hasNext()) {
Node child = (Node)ni.nextNode();
newMeta.put(child.getProperty("metaname").getString(),child.getProperty("metavalue").getString());
}
}
}

public HashMap<String, String> getMetaOverride() {
return metaOverride;
}

public HashMap<String, String> getNewMeta() {
return newMeta;
}
}
Enabling the page component to handle overriding/new meta tags:
Add the below configuration the header file of the AEM page component - change the use class name and the meta tag names(to override) as required.

The below code retrieve the new and overridden meta tags and display to the page. If the meta tag is not overridden then the original(default) value will be displayed to the page

<sly data-sly-use.metaObj="com.common.metatags.Sitemetadata" data-sly-unwrap></sly>

<meta name="title" content="${metaObj.metaOverride['title'] || properties.jcr:title}" />
<meta name="description" content="${metaObj.metaOverride['description'] || properties.jcr:description}" />
<meta name="robots" content="${metaObj.metaOverride['robots'] || 'index'}"/>

<div data-sly-list.keyName="${metaObj.newMeta}" data-sly-unwrap>
<meta name="${keyName}" content="${metaObj.newMeta[keyName]}" />
</div>