Using vanity URLs

November 11, 2022

1. Introduction

The following video quickly presents the different features related to vanity URL management in Digital Experience Manager.

1.1 What is a vanity URL?

Vanity URLs (also known as Friendly URLs) are additional, customizable and unique web addresses for pages and contents, which are useful for the website visitor to remember a specific page. It is also very important for search engines, as they are used to describe the content of the page. It also make things easier for your marketing campaigns! More details about Vanity URLs are available here.

1.2 Example

The url 
https://www.jahia.com/about-us/news-events/blog 

can be converted into

https://www.jahia.com/blog

1.3 How can Digital Experience Manager help me with vanity URLs?

By default, the URL of a page in Digital Experience Manager is built by using the technical names of the pages, and by following the structure of the site. For instance, if you have a page “About” under the homepage of your site, you will access it with the following URL: http://domainname/home/about.html . The more levels you have in your site, the longer the URL will be. So if you have a page “History” under the About page, then its URL will be: http://domainname/home/about/history.html 

In order to shorten such URL, make them more user friendly, and/or to work on the Search Engine Optimization (SEO), you can manually add custom URLs, vanity URLs, to your page. The only constraint is that the value chosen for theses URLs must be unique on your site. For instance, you can add the following vanity URLs for the “History” page:

  • /history
  • /company-roots
  • /how-it-started

The page will then be available using any of the following URLs:

  • http://domainname/home/about/history.html
  • http://domainname/history
  • http://domainname/company-roots
  • http://domainname/how-it-started

It is also possible to specify a default vanity URL, which will be used in the navigation menus, when creating links, etc.

In a multilingual site

Vanity URLs are also useful for sites available in several languages. Digital Experience Manager prefixes the path of the page with the corresponding language: the French version of the blog page is available using the following URL:
https://www.jahia.com/fr/home/about-us/news--events/blog.html Using vanity URL allows to also translate the URL in the given language: https://www.jahia.com/fr/a-propos/news-evenements/blog

A vanity URL is specific to one and only one language. The unicity of the vanity URL on the site still applies, so you cannot use the same vanity URL for the same page in two different languages. In the previous example, https://www.jahia.com/fr/a-propos/news-evenements/blog, the “/fr/” is part of the Vanity URL, in order to explicitely inform that the page is in French.

1.4Working with Vanity URLs

Vanity URLs can be added on pages (which is the most frequent use case), but also on any content. It is especially useful for contents that can be displayed on their own page, for instance a news.

It is possible to manage vanity URLs from the following interfaces:

  • SEO tab of the Edit engine
  • Vanity URL setting panel

Please note that once a vanity URL has been set on a page in edition mode or using the Vanity URL panel, a publication of the page or the vanity URL itself, is required in order to activate it in the live version of your site.

2. Within the Edit Engine

A specific tab for vanity URLs (called SEO tab) is present when editing a page (or content) via the edit engine:

seo-tab.png

Note that you need the “View seo tab” permission to access this interface.

This interface allows simple operations on vanity URLs. It is too limited for more advanced scenarios, for instance if you want to move some vanity URLs from a page to another, or if you need to publish a vanity URL without publishing the page. For such operations, it is advised to use the Vanity URLs setting panel.

2.1 Add vanity URL

Simply click on the “Add” button then start typing the vanity URL, and click on “Save”:

The vanity URL needs to start with a slash (/) and can only contain letters, digits, dots (.), dashes (-) and no consecutive slashes.

The vanity is then added for the language selected in the edit engine.

2.2 Edit a vanity URL

You can edit an existing vanity URL by clicking on it.

2.3 Make your vanity URL active in the live version of your site

The vanity URL will be effective online once the page (or content) has been published. It is also possible to deactivate a vanity URL, by unselecting the “Active” checkbox. Once deactivated, the vanity URL will not be usable in the live version of your site.

2.4 Delete a vanity URL

To delete a vanity URL, simply click on the ‘-’ button. You will also need to publish the page (or content) in order to stop using the vanity URL in the live version of your site.

3. Vanity URLs setting panel

3.1 Presentation

The Vanity URLs setting panel is available for DX version 7.2.3.0+. It is accessible in the site settings section of the edit mode:

dashboard-1.PNG

It lists all the pages and contents which have at least one vanity URL. By clicking on a page or content you will display all its vanity URLs (called “mappings”):

dashboard-2.PNG

3.1.1 Default vs Live mappings

The “Default mappings” columns shows the vanity URLs as present in edition. The “Live mappings” column shows the vanity URL currently set on the page online.

3.1.2 Status color

If a vanity URL has a green status, it means that it is the same in both edit version and online. In other words, the vanity URL has been published and hasn’t been modified ever since.

The orange status signifies that either the vanity URL has never been published, or that it has been modified since the last publication.

3.1.3 Filter per language

The panel displays by default the vanity URLs in all the available languages of the site. It is possible to only display the vanity URLs of one or several languages, by selecting the desired languages in the language selector:

dashboard-5.PNG

This selector lists the different languages activated on the site.

3.1.4 Filter by keyword

It is possible to filter the pages/contents by searching for part of one of their vanity URL. Then only the vanity URL corresponding to the search terms are displayed, but it is possible to show all the vanity URLs of the page/content by clicking on the “Show all” button:

Note: Unfortunately, it is currently not possible to search by using the page/content title.

3.2 Add a new vanity URL

To add a new vanity URL to an existing page, you first need to expand the page and then click on the ‘+’ button. An interface is then displayed, allowing you to create new vanity URLs:

An error message is displayed when clicking on the save button in the following cases:

  • The vanity URL already exists on another page
  • The vanity URL contains non valid characters (only letters, digits, dots (.), dashes (-) and no consecutive slashes are allowed):

dashboard-6.PNG

You can also make the vanity URLs automatically be available online by checking the option “Automatically publish on save”.

3.3 Edit a vanity URL

The vanity URL becomes editable when clicking on it. It is not possible to save the modification if the vanity URL is not valid (already in use or if it contains non valid characters):

Once edited, the previous value is still the one in use in live, so you will need to publish the vanity URL in order to activate the vanity URL in live.

3.3.1 Changing the language of the vanity URL

To change the language of a vanity URL, click on the current language and select the new one in the drop-down:

dashboard-7.PNG

3.3.2 Activate / Deactivate a vanity URL 
activate.PNG

Deactivating a vanity URL means that the vanity URL will not be usable online once it is published. In other words, the page will not be displayed if a visitor uses the vanity URL in his browser: a “404 Page not found error” page will be displayed instead.
To deactivate a vanity URL, simply use the toggle button. You will then need to publish the vanity URL to deactivate it in live as well:

A deactivated vanity URL appears in grey:

dashboard-3.PNG

In this example “/how-it-started” is deactivated in both edit and live. “/history” has been deactivated in default, but it has not been published yet, so it is still activated in live.

3.3.3 Default vanity URL 
default.PNG

The default vanity URL defines the vanity URL to use in the navigation menus, links, etc. Only one default vanity URL is possible per language and per page/content.

To make a vanity URL the default one, move your mouse over the vanity URL and click on the star:

dashboard-4.PNG

A page can only have one default vanity URL per language. When defining a new vanity URL as the default one, then the property is automatically removed on the other vanity URL:

It is then advised to publish both vanity URLs at the same time. 

3.4 Delete a vanity URL

The deletion of a vanity URL is a two step process:

  1. Deletion in “default” (i.e. in the work version). At this step, the vanity URL is still functioning in live
  2. Deletion in live: the vanity URL does not work in live anymore

To delete a vanity URL, you just need to move your cursor on the vanity URL and then click on the delete button

trash.PNG
 A confirmation window is then displayed.

Warning: This operation cannot be undone. Once this operation is performed, you cannot “undelete” the vanity URL. 

If the vanity URL has never been published, then it does not appear any more in the dashboard.
If the vanity URL has been previously published, then it is still functioning in live until you delete the live version. Note that publishing the page from the edit mode, will also delete the vanity URL in live.

Warning: It is only possible to delete all the vanity URL for a page in live. Individual deletion in live is not supported.
Advice: If you want to move the vanity URL from one page to another, it is then advised to use the “move” feature, instead of deleting the vanity URL.

3.5 Move a vanity URL

It is possible to move a vanity URL in the edit mode (i.e. in “default”) from a source page to a destination page. The vanity URL will point to the source page until the move of the vanity URL is published or until the publication of the destination page.
In order to move a vanity URL, just move your cursor on the vanity URL and then click on the move button 

move.PNG
. You will then be able to either select a page by browsing the site page tree, or you can directly enter the path of the destination page or content:

 

3.6 Publish a vanity URL

A new vanity URL, or an existing one which has been modified or moved need to be published in order to be activated in live mode. To do so, just click on the publication button 

publication.PNG
 and confirm the publication.

 

3.7 Operations on several vanity URLs

It is possible to perform the same operations on several vanity URLs previously selected:

  • Delete
  • Move
  • Publish

It is possible to select vanity URLs from different pages, by selecting the checkbox next to a mapping. The top checkbox allows you to select or unselect all the vanity URLs of a page.
When one or several vanity URLs is/are selected, then the available operations are displayed at the top of the screen:

dashboard-9.PNG

3.8 Installation instructions (for administrators)

The module is available on the store for DX 7.2.3.0 under the name “Site Settings - SEO - Package”. Once downloaded and started, you will need to enable it on your site. 

The permission “Site admin vanity URLs” is necessary to access this panel. It is granted by default to site administrators.
The current “Vanity URL dashboard” can be hidden by removing the permission “Site admin urlmapping”.
Please note that this new vanity URL panel will replace the current “Vanity URL dashboard” in a future release of Digital Experience Manager.