Create custom meta tag in AEM | Community
Skip to main content
L
lucywang129
Level 2
May 19, 2020
Solved

Create custom meta tag in AEM

  • May 19, 2020
  • 2 replies
  • 15754 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by BrianKasingli

@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/wcm/components/page/v2/page/head.html, 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. 

 

 

2 replies

Ankur_Khare
Community Advisor
Ankur_KhareCommunity Advisor
Community Advisor
May 19, 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}"/>

    L
    lucywang129Author
    Level 2
    May 19, 2020
    Thank you for the reply. Do I add "og tag in page properties" through author? I have mutiples sites on one AEM instance. I want to add it once and apply to all the sites. Any ideas? Thanks.
    BrianKasingli
    Community Advisor and Adobe Champion
    BrianKasingliCommunity Advisor and Adobe ChampionAccepted solution
    Community Advisor and Adobe Champion
    May 19, 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/wcm/components/page/v2/page/head.html, 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. 

     

     

      L
      lucywang129Author
      Level 2
      May 20, 2020
      @ Briankasingli, I got both the meta tag and page properties UI working. The data is also flowing in between. Now, I want to make it dynamic meaning... There will be only two fields in my UI. One for Og property name where the content manager can add og type, URL, description, image etc. Another field will the actual content. There will be an "ADD" button which will allow the content manager to add one or more og tags. Do you have any ideas how this might be done. I am thinking of writing a java script to dynamically add tags. However, I am not sure how the script will talk to the page properties UI to retrieve the data. Or if there is an better way of doing this. Any idea would be greatly appreciated.
      Terms & ConditionsAccessibility statement

      Loading footer...