Enforce SEO Friendly Page Name

[Mahedi_Sabuj]

Hi Community Members, 
In alignment with SEO best practices, our objective is to enforce specific constraints on the "Name" field within Page Properties. We intend to restrict authors to utilizing lowercase letters, numbers, and dashes exclusively.

Additionally, our goal is to prevent the inclusion of consecutive dashes within this field. This restriction applies to both automatically generated names and names manually entered for pages. How can we go about achieving this requirement?

[mahi1729]

I am assuming this theory but feel free to point out if there is an issue with my thought process. Hypothetically speaking. This may not be so straight forward but probably may require multiple customizations. Today no matter we create pages using Ui or backend, we may end up going with page manager api. Perhaps to enforce the custom requirements we have, may be we can add a wrapper on top of page manager where custom page manager wraps the actual page manager instance so before we  try creating a page it can probably do the required validation and then act accordingly. But the catch is if you are calling the code directly probably this is straight forward, but if you want your code to get picked up just by doing adapt to call on page manager may be a custom adaptable/adapter implementation is necessary with appropriate ranking set. But if we go through this approach we have to figure out a way to get our custom page manager and then pick the actual internal implementation of page manager, which I can't think of right out of the box. But sounds like doable. But if we manage to get the api viable regardless of the interface we use rules can be enforced. 

[Mahedi_Sabuj · Accepted solution]

I found an implementation using validation property to enforce the validation.

<pagename jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
  fieldLabel="Name"
  name="pageName"
  validation="seo.pagename"/>

(function($, Coral) {
  "use strict";
  var registry = $(window).adaptTo("foundation-registry");
  registry.register("foundation.validation.validator", {
    selector: "[data-validation=seo.pagename]",
    validate: function(element) {
      let value = $(element).val();
      // validate name here 
      if(!valid) {
        return "Error Message";
      }  
    }
  });
})(jQuery, Coral);

[EstebanBustamante]

If the scope is limited to the page name only, I think you could just add a JS validation function that can check the rules you need prior to creating or renaming a page.

See more about validation here (just make sure to target the proper clientlibs group):

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/touch-ui-dialog-regex-vali... 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/custom-validation-for-dial... 

[mahi1729]

Was about to say the same. If the intention is just clientside, a custom clientlib doing validation is good. But since the post mentioned about pages created programmatically as well, I suggested the back end approach