Create custom meta tag in AEM

[#1]

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

[lucywang129 · Accepted solution]

@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. 

[lucywang129 · Accepted solution]

Thank you so much. This is working. Not 100% yet. But at least I got the flow working.

[lucywang129 · Accepted solution]

@ 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.

[lucywang129]

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}"/>

[lucywang129]

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.

[Ankur_Khare]

then dont add it in page properties rather do it like this- <meta property="og:title" content="${construct it through page title as per your need}"/>

What i meant by this is-

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

In this way you don't need to do it manually rather it will automatically pick from page title across the site.