Create custom meta tag in AEM

Avatar

Avatar
Validate 1
Level 1
lucywang129
Level 1

Likes

0 likes

Total Posts

10 posts

Correct reply

0 solutions
Top badges earned
Validate 1
View profile

Avatar
Validate 1
Level 1
lucywang129
Level 1

Likes

0 likes

Total Posts

10 posts

Correct reply

0 solutions
Top badges earned
Validate 1
View profile
lucywang129
Level 1

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
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

606 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

606 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
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
Ignite 1
MVP
Ankur_Khare
MVP

Likes

159 likes

Total Posts

370 posts

Correct reply

58 solutions
Top badges earned
Ignite 1
Validate 10
Validate 1
Give Back 50
Give Back 5
View profile

Avatar
Ignite 1
MVP
Ankur_Khare
MVP

Likes

159 likes

Total Posts

370 posts

Correct reply

58 solutions
Top badges earned
Ignite 1
Validate 10
Validate 1
Give Back 50
Give Back 5
View profile
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}"/>