Managing URL Patterns for Multilingual Websites

Multilingual modules allow users to configure languages and how page languages are chosen and apply languages to the project entities. Managing URL patterns is one of the main features that will be provided to be controlled and updated by Administrators.

Multilingual Websites URL Patterns Options

Multilingual websites have further options for URL/path aliases. This section shows how URL patterns for multilingual websites in Varbase can be configured.

There are three ways to implement that:

1. Native Language URL Patterns.

2. Base-Language Only URL Patterns.

3. Transliterated URL Patterns.

In Varbase, URL aliases will be automatically generated regarding specified tokens, ex: [node:title] for landing pages.

To test that follow the steps below:

1. Navigate to Manage \ Add content \ Landing page (with layout builder).

2. Fill in the Title field, ex: About Us.

3. Check the URL alias option in the settings.

Title Field in Content Creation Page

Result: URL aliases are checked to be automatically generated using a token, and in this case, the node title is the token. So the URL alias for the page will be /node-title, ex: /about-us.

Automatically Generated URL Alias

Patterns for each entity/content type on the site can be seen here, for example, the Hierarchical paths for Landing pages (Layout Builder) label is responsible for the URL pattern for the Landing page (Layout Builder) content type, the default pattern for this content type consists of two tokens [node:menu-link:parents:join-path]/[node:title]. The first token will grab the parent item for the page specified when providing a menu link, the second token will grab the title of the page being edited.

In case no parent item is provided, the first token will be ignored.

To show another example with hierarchy, we will create a landing page and add it as a child for a parent in the menu.

1. Navigate to Manage \ Add content \ Landing page (with layout builder).

2. Fill the Title field, ex: Our Team.

3. Check the Menu settings option.

4. Fill in a menu link title and select a parent for this landing page.

5. Now, check the URL alias value.

Menu Settings Options

Result: URL alias will be /parent-name/node-title, ex: /about-us/our-team.

Automatically Generated Hierarchical URL Alias

Hint: Patterns can be added/updated by clicking on Configure URL alias patterns or by navigating to Administration \ Configuration \ Search and Metadata \ URL aliases \ Patterns. To learn more about configuring URL aliases, check the following documentation.

Starting With Multilingual URLs

Extending the Needed Modules

First, we need to extend the needed multilingual modules - In Varbase we have them by default.

1. Navigate to Manage \ Extend.

2. Scroll down for the Multilingual section.

3. Verify that the following modules are enabled:

   • Configuration Translation

   • Content Translation

   • Interface Translation

   • Language

4. Along with that, we need to enable the following module - filter for “language” for faster results:

   • Varbase Internationalization

Multilingual Modules

Varbase Internationalization Module

Hint: Typically developers will enable those modules during installation. For further information click here.

Checking the Available Languages

1. Navigate to Configuration \ Regional and Language \ Languages.

2. List tab will show the available languages and the default language for the website with the ability to add new languages as well.

3. The Detection and selection tab has URL settings to configure the language URL pattern to be a prefix or a domain.

4. Click on Configure next to URL under the Detection and selection tab.

List of Available Languages

Option1 - URL prefix

When the option of “URL prefix” is selected you will find that the language prefixes are following the domain name, ex: https://{domain}/en for the English language, and https://{domain}/ar for the Arabic language.

URL Prefix Configuration

Option2 - Domain

When the option of “Domain” is selected, you will be able to add different domain names for different languages with no language prefix, ex: https://english-version.com.

URL Domain Configuration

Hint: “URL prefix” option is selected by default in Varbase.

Translating Entities

The same entity can be translated to different languages regarding the selected settings that were explained earlier.

We can select a content entity to translate to check the URL alias for the translated node.

1. Navigate to Manage \ Content.

2. Select a landing page and click on edit.

3. Switch to the translate tab.

4. Add a translation for the selected page.

5. Click on Save.

Checking Available Translations of an Entity

Creating a Translation of an Entity

URL aliases for the translated pages can be applied in different ways as mentioned before, and we will go through them in detail.

Hint: All created entities should have specific language (not neutral), so the translate option could be displayed for those entities.

1. Native Language URL Patterns

This option will make the URL have the text of the native language of the page, this will allow the URL to have non-ASCII characters, it can include characters from any language.

To have the native language URL pattern enabled, the Transliterate prior to creating aliases option should be disabled, this can be done by following the steps below:

1. Navigate to Administration \ Configuration \ Search and Metadata \ URL aliases \ Settings.

2. Uncheck the option Transliterate prior to creating aliases.

3. Save the configurations for the URL aliases setting.

URL Aliases Settings - Transliterate prior to creating aliases

When creating/translating content, the URL to that content will include the characters of the language of that content title.

Hint: In Varbase, this is the default option for multilingual URL patterns. So no need to update anything there.

Example:

https://www.unicef.org/ website is using “Native Language URL Patterns” so the URL alias will change regarding the selected language for the same page. So for “What to Do” page as an example, the URL aliases would be:

• https://www.unicef.org/what-we-do for the English version

• https://www.unicef.org/fr/ce-que-nous-faisons for the French version

UUICEF Website - English Version

UNICEF Website - French Version

Pros & Cons

Pros:

• Fully automated. No need to write manually a specific URL. It will be auto-generated from the page/content title or whatever you specify as a token for the URL.

• There's an SEO aspect for keywords in URL (you need citation here).

Cons:

• Copying/pasting or sharing non-ASCII characters makes it encoded and not easy to share.

2. Base-Language Only URL Patterns

This option will force the source (default) language URL aliases to be applied to all languages, so if you want the English version then the default language should be English, however, if the default language was not the English language then the URL alias patterns will follow the source language. The only thing that will be changed is the language identifier that can be either a prefix or a domain as explained earlier.

To configure Base-Language only URL patterns, we need to change the tokens that were used in the added URL aliases by following the steps below:

1. Navigate to Administration \ configuration \ Search and Metadata \ URL aliases \ Patterns.

2. Select an existing pattern to edit, or you can add a new one.

3. Click on Browse available tokens.

4. Search for Translation source node section.

5. Then copy the correct token from there.

Tokens for landing pages URL alias patterns are using the translated language token by default, however, if we need them to keep using the default language’s aliases we need to update the tokens for landing pages as below:

Token	Native language URL pattern	Base-language only pattern
Menu token	[node:menu-link:parents:join-path]	[node:source:menu-link:parents:join-path]
Node title token	[node:title]	[node:source:title]

Landing Page Base-Language Only URL Pattern

Save the configurations and check the URL for any landing page in order to check that it was applied correctly.

Base-Language Only URL Pattern Example Result

Example:

https://www.vardot.com/ website is using “Base-Language Only URL Patterns” for URL aliases, so when we navigate to any page then change the language, the URL alias will stay the same as the source language - which is English in this case- and only the language identifier will change, so as an example we can check “About Us” page:

• https://www.vardot.com/en/about-us is the English version.

• https://www.vardot.com/ar-jo/about-us is the Arabic version.

Vardot's Website - English Language URL

Vardot's Website - Arabic Language URL

Pros & Cons

Pros:

1. Maintains one URL structure, the only difference is the language code/prefix in the URL.

2. English-language (or Latin characters) URLs are neatly shared, with no encoding.

3. Fully automated - but only if your base language (original language) is always the same.

Cons:

1. You always need a base language (original translation).

2. You will have to manually write the URL pattern - in case a page did not have a base language that matches your pattern.

Example:

	English Version	French Version
English (source)	example.com/en/about-us	example.com/fr/about-us
French (source)	Needs to be manually edited to get example.com/fr/contact-us	example.com/fr/nous-contacter

3. Transliterated URL Patterns

This option will convert the translated non-Latin characters to US ASCII characters, so the URL, in this case, will not contain non-English letters.

Transliterated URL alias is a global option for all patterns, which can be configured by selecting the option from settings.

1. Navigate to Administration \ configuration \ Search and Metadata \ URL aliases \ Settings.

2. Select Transliterate prior to creating aliases option.

Transliterate prior to creating aliases Option

Example:

If a landing page with the title of “About Us” was created then translated to “من نحن” in Arabic, the URL alias for both pages will be as below:

• /en/about-us for the English version.

• /ar/mn-nhn for the Arabic version.

Arabic Example of a Transliterated URL

English URL of a Transliterated URL