Create custom meta tag in AEM

Avatar

Avatar

lucywang129

Avatar

lucywang129

lucywang129

19-05-2020

Hello everyone, 

 

I am trying to create a meta tag field for the content manager to manually enter the information. This is for SEO purposes. The tag I am trying to create is og (open graph) tag. I am very new to AEM development. I was wondering if anyone has any ideas on how I should go about it. Thank you. 

 

Lucy

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

BrianKasingli

MVP

Avatar

BrianKasingli

MVP

BrianKasingli
MVP

19-05-2020

@lucywang129,

Assuming that your basepage component has a resourceSuperType of the WCM Core v2 Page Component, you can simply overwrite head.html, and include new meta tag fields such as Facebook OpenGraph, Twitter, Linkedin, etc... to be server-side rendered, apart of the page. 

Steps can be followed for the solution:


   1. Overlay the head.html script, https://github.com/adobe/aem-core-wcm-components/blob/master/content/src/content/jcr_root/apps/core/..., with:

 

<meta property="og:type" content="${properties.ogType}"/>
<meta property="og:url" content="${currentPage.path}"/>
<meta property="og:title" content="${properties.pageTitle}"/>
<meta property="og:description" content="${properties.description}"/>​

 

 

   2. Add a new tab in page properties to allow the content authors to configure these settings on the page properties. When extending the WCM Core v2 Page Component, you can utilise the Sling Resource Merger to add a new " SEO" tabs to the existing page properties touch UI dialogue.

3. Configure the page with the new page properties and test. 

 

 

Answers (1)

Answers (1)

Avatar

Avatar

Ankur_Khare

MVP

Avatar

Ankur_Khare

MVP

Ankur_Khare
MVP

19-05-2020

Add a field in page properties for og tag-

And in your page component head.html include meta tag like this-

<meta property="og:title" content="${properties.ogtag}"/>