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
Solved! Go to Solution.
Views
Replies
Total Likes
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.
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}"/>
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies