Highlighted

Let author add tags to the head section of html page

FernandoUchiyam

11-10-2018

Hello,

I am looking for what is the best approach to let the author add meta tags (or even custom js and css scripts) to the HEAD html section of an Adobe AEM page.

What are the possibilities?

Thank you.

Replies

Highlighted

Jörg_Hoh

Employee

11-10-2018

with meta-tags do you mean "tags" (as the feature provided by AEM ootb) or a more free form field? When you add tags in the page properties, they are typically added to the HTML head section (depending on your templates, but that's a very common approach also used in the examples).

Regarding custom JS and CSS: You can do it (add a free-text form into the page properties and insert it at the right place into your page. Having this is typically a sign of bad planning and bad design. From a pratical point of view it's often misused, and you end up with broken styles and debugging issues you haven't coded, but someone found "cool". I wouldn't implement this.

Highlighted

raj_mandalapu

12-10-2018

I would design something like this

Meta Tags :

The meta tags are content authorable and we don't know how many meta tags the content author would add, so it is good practice to create a separate tab called SEO or meta tags in the page properties and add a multifield control

  • The multifield control should have two fields one is for key and another one is for values
  • In the head.html you can iterate this multifield and render it as meta tags

Another advantage is you can configure this at the local page level and inherit to child pages without re-authoring on child pages

CSS and JavaScript :

It is not good practice to keep JavaScript or CSS directly in the page properties, instead of that what you can do is place all your CSS and js files in the client libs and load those in the page properties

You can keep path field in the page properties and let the author or superuser allow him to choose the clientlibs to load for particular page o or a particular site.

  • Inside head.html read the path filed and load clientlibs
  • The advantage with this is you can have better control when there are multiple websites and each site follows its own theme