AEM Page Component <head> HTML

Forum|Forum|8 years ago
February 13, 2018
2 replies
7115 views

Are there any officially supported components that allow dynamic addition of <head> HTML such as <meta> tags or similar? Dynamic being an admin user drags a component to a parsys zone that on page load adds HTML to the page's <head> tag?

If not, is it possible from code behind for a page component using a class extending something along the lines of WCMUse or WCMUsePojo via ResourceResolver, SlingScriptHelper, Page, or PageManager to inject/append String (HTML) values to <head> on page load within some part of the component or component parent's life cycle?

Which class if any can be targeted to add String values to <head> for SEO purposes? Or how can this be approached allow an editor/admin to add <head> conditionally to pages via something friendly such as a component with a dialog tab textinput/textarea?

Thank you for any help you can provide!

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

smacdonald2008

Level 10

After checking with our team -

Head tags are a bit tricky, not only for DTM, but all tag managers. Head tags need to be present immediately because the browser loads them very first. Using a tag manager in general to update tags in the head especially meta tags can be problematic. Basically, tag managers aren’t able to get the tag added before the browser reads them. You can read a bit more about it here:

https://forums.adobe.com/message/9834723#9834723

alexanders35940Author

Is there any sort of life cycle hook that triggers/emits before a page renders or something along the lines of a Resource Listener or Filter to intercept a request and modify the response?

Thanks!

joerghoh

Adobe Employee

There is no such API. I could imagine that this approach helps you to implement this requirement:

* write the HTML <head> section but with empty tags

* collect the values for these tags while rendering the page and store it as RequestAttribute

* Implement a Sling Output Rewriter [1] and rewrite the tags in the <head> section with the data store in the Request attribute.

Another (not so nice) approach (instead of using the Rewriter) could be a filter, which renders all output into a temporary buffer (String) and then does a search and replace of certain placeholders.

Jörg

[1] Apache Sling :: Output Rewriting Pipelines (org.apache.sling.rewriter)

D

dylanr46798176

Level 3

Your authors do not have access to the page properties? Because if they do, you might be able to have a "Heading" tab, where an author can simply add some values, which are being displayed in your <head> section of the page, by overlaying the head.html file in a custom page component

alexanders35940Author

Thank you for the suggestion dylanr46798176. Can you describe what do you mean by "overlaying"? Can an individual component have it's own head.html and/or extend the top level head.html content?

Or do you mean having a single instance of a component present on effectively a master template that renders the text/String content of the respective dialog tab page property input that's available on every page?

Looking at an Adobe Marketing Cloud head.html example it looks like it's rendering various <meta> properties by targeting currentPage. If that new property/input for custom <head> code is available on every page it could perhaps be added to head.html such as currentPage.someNewProperty.

Thanks!

D

dylanr46798176

Level 3

Well, when using the power of Sling, you can have the following situation:

Pages beneath the /content/<SITE> path have a sling:resourceType that refers to the component that is used to render the page. You can have your own custom component (e.g. /apps/<SITE>/components/structure/page), that has a sling:resourceSuperType to the component that was originally used to render your pages (e.g. /libs/wcm/foundation/components/page) and have its own custom head.html file. You will have to make sure that the pages beneath the /content/<SITE> path will use your custom component for rendering the page by making the sling:resourceType refer to your custom component.

When the page gets rendered, it will see that the resourceType is /apps/<SITE>/components/structure/page, which has a resourceSuperType to /libs/wcm/foundation/components/page. It will render your page as if it were a /libs/wcm/foundation/components/page component, BUT with the exception of the head.html file, because that is the only file that is beneath the path of /apps/<SITE>/components/structure/page!

Some more info on this feature called "Sling Resource Merger" can be found here:

Using the Sling Resource Merger in AEM

cq5 - How to use/understand AEM Sling Resource Merger, override and Overlay concepts - Stack Overflow

http://www.aemcq5tutorials.com/tutorials/sling-resource-merger-in-aem/

AEM Developer Learning : Sling Resource Merger in AEM 6.3

Dylan