Live character counter for title and meta description (SEO - search engine optimization) in AEM

[usablewebb]

I'm working to create a ticket for our AEM developer.

We need a live character counter on the title and meta description field in Page Properties. We don't want to set a hard limit on the page title and meta description length, however, we want to remind AEM authors that Google and most search engines only show about 55 characters of the title tag and 155 characters of the meta description. Is there built-in functionality to implement something like this?

Our developer talked about doing a check when the author saves the dialog, but a live character count would be more efficient.

Also, I know there is a place to add explanatory text for the dialogs as well, but I haven't used AEM since CQ 4.1. Can you remind me where to find this?  

[kautuk_sahni]

Hi 

Please have a look at this community article,

This could act as a reference point to implement what you have asked for:-

Link:- http://letsaem.blogspot.in/2015/12/implement-character-countdown-and.html

// You can create a listener (Classic UI) where you can trigger alert message . For Touch UI refer to http://experience-aem.blogspot.in/2015/02/aem-6-sp2-touch-ui-sample-dialog-ready-event-listener.html

I hope this could be of some help to you.

~kautuk

[Vamsi_Krishna_V · Accepted solution]

Hi,

To implement it we need to add few properties to the text field node on dialog.

Classic UI:

Add MaxLength and MaxLengthText properties to the text field and textarea nodes. you can find description to the properties on bellow link.

https://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html

TouchUI:

Add MaxLength propertie to the text field and textarea nodes. you can find description to the properties on bellow link.

https://docs.adobe.com/docs/en/aem/6-1/ref/granite-ui/api/jcr_root/libs/granite/ui/components/founda...

https://docs.adobe.com/docs/en/aem/6-1/ref/granite-ui/api/jcr_root/libs/granite/ui/components/founda...

Please find bellow screenshots for example.

As per your post I understood that you need to change properties of page components dialog. 

I hope this might help you.

Thanks.