Usage and best practices of Page Properties Dialog Fields in AEM

Maybe when you read the topic "page properties dialog", you might think that this is a simple one and I know every field but it's not so true. There are many fields in page properties dialog also that has a deep meaning in itself. So Today in this blog I am going to discuss OOTB Fields available in page Properties of dialog, their use cases, and best practices.

Title Fields in Page Properties Dialog

Let’s start with so many title related fields(title, page Title, Navigation Title) available in
Page Properties. Every field has its own meaning and best practice to use.

Title: The title of the page is shown in various locations. For example, the Websites tab list and the Sites card/list views in AEM Console. To show title in websites tab, you need to put it in <title> tag in html of the page. This is a mandatory field. the title can be accessed in HTL directly using :${currentPage.title}

Page Title: A title to be used on the page. Typically used by title components. If empty the Title will be used.Page Title can be access it in HTL directly using : ${currentPage.pageTitle}

Navigation Title: If you want to specify a different title to show in Navigation so use it if this is empty then Title can be used.You can access it in HTL directly using : ${currentPage.navigationTitle}


Add caption

Hide in Navigation: Indicates whether the page is shown or hidden in the page navigation of the resulting site. You can use this value in your logic to show/hide the particular page in Navigation Component.

On-Time: The date and time at which the published page will be activated. When published this page will be kept dormant until the specified time.
Leave these fields empty for pages you want to publish immediately (the normal scenario).

Off Time: The time at which the published page will be deactivated. Again leave these fields empty for immediate action.

Please follow the link to see how redirect works.

Alias: If you go through the dictionary meaning of alias it means “used to indicate that a named person is also known or more familiar under another specified name”.So this meaning best suited to this widget because here you can use a different "page name" using this property.

The property may be set on any resource to indicate an alias name for the resource. So maybe your page is like "/content/we-retail/en/men.html" (here men is the page name) right now and you put alias for the page “men” as “sports-men”, so you can access the same page with this URL also /content/we-retail/en/sports-men.html.

Note: alias won’t work in publish instance until you provide jcr:read permission for “/” for anonymous user. You just need to select root but you can deselect permission inside (like apps, etc, etc ) root, because when you use sling:alias this particular logic (shown in the image below ) internally runs and if the anonymous user doesn't have read access of “/” then it won’t work in publish.

Add caption

This is how alias works.


Vanity URL
A vanity URL is a unique web address that is branded for marketing purposes. Vanity URLs are a type of custom URL that exists to help users remember and find a specific page of your website. Therefore your vanity URLs should be easy to remember, use, and share.

So you can add n number of vanity URLs for a particular page. So usually vanity URLs are used to share a page link on Social Networks like Facebook, LinkedIn, and Pin Interest. Using this field if you click on Vanity URL the URL will remain the same but the content will be displayed of that page for which you created vanity URL.

Caution: Vanity URLs:
Do not support regex patterns. Must be unique so you should take care that the value is not already used by another page. Redirect Vanity URL The idea of vanity URLs is to show shortened URLs on marketing places but when users click on the link it should be redirected to the actual website. So it means 301 Redirect. So when you want 301 redirects of vanity URL to the actual page you can check this configuration. As per the best SEO practice, vanity URLs should have 301 redirects.

For Example: if in LinkedIn, you put a youtube url, it automatically converts into some vanity url( unique LinkedIn url) and when you click it redirects you to the actual link.

Design
In AEM, there are few things which used to store in design path like all the values of design dialog components. The allowedComponents for a particular parsys etc. If you don't provide a design path it will get saved under the default path.

/etc/designs/default/jcr:content/page-component-name
But as per the best practice always specify design path for every website at the root level and the rest of the pages will follow the root design path.

How to create a Design Path
To create a design Path, Go to miscadmin.
Go to Tools->Designs.
Create a Page using the Design Page Template.
Click On Create.

Add caption


This is how your design path will get created and you can choose it from page properties. Allowed Templates Author can also configure which templates should be visible under which pages. You can configure template paths here. Regex will also work here.

Click 'Add Field' to add a template or a list of templates to be allowed as child pages. Each value in the list must be an absolute path to a template or use '/.*' to allow all templates below this path.