Live character counter for title and meta description (SEO - search engine optimization) in AEM | Community
Skip to main content
usablewebb
usablewebb
September 7, 2016
Solved

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

  • September 7, 2016
  • 2 replies
  • 2774 views

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?  

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

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/foundation/form/textfield/index.html

https://docs.adobe.com/docs/en/aem/6-1/ref/granite-ui/api/jcr_root/libs/granite/ui/components/foundation/form/textarea/index.html

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.

2 replies

kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
September 14, 2016

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

Kautuk Sahni
Vamsi_Krishna_V
Vamsi_Krishna_VAccepted solution
September 15, 2016

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/foundation/form/textfield/index.html

https://docs.adobe.com/docs/en/aem/6-1/ref/granite-ui/api/jcr_root/libs/granite/ui/components/foundation/form/textarea/index.html

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.

Terms & ConditionsAccessibility statement

Loading footer...