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
      Thank you so much. This is working. Not 100% yet. But at least I got the flow working.
      Terms & ConditionsAccessibility statement

      Loading footer...