Newer Version Available

This content describes an older version of this product. View Latest

Create a Multilingual LWR Site

Deliver content to your site visitors in the languages that they prefer, and reach new audiences in new languages. You can translate your LWR site into languages that Salesforce supports and offer your site in up to 20 languages.

On standard components that come with an LWR template, you can translate text values in component properties such as text, URLs, and alt text fields. You can also translate text contained in components such as Rich Content Editor, HTML Editor, and Text Block. And you can translate SEO page properties, including title, description, and head tags.

For custom Lightning web components that you include in your site, you can make a String property translatable by defining it as translatable="true" in the component’s js-meta.xml file. For example:

You can translate the content in these text fields directly in the component property editors in Experience Builder. Or, you can export your site content for translation, and the properties that you marked as translatable are included in the export file.

If you add a datasource attribute to a property—for example, to create a picklist—you can’t define that property as translatable=“true”.

Note

Add the standard Language Selector component to your site so your visitors can select which language to view on your site.

Component panel in Experience Builder, highlighting the Language Selector component

When your site visitors select a language, the URL for your site updates to indicate which language they���re viewing. For example, if your site URL is https://www.UniversalTelco.my.site.com and you add a French translation to your site, the URL for the translated version is https://www.UniversalTelco.my.site.com/fr.

If you prefer to use different logic to identify languages in your site URL, or you want a different language-selector design, create your own Lightning web component.

Note

Limitations to Multilingual LWR Sites

There are some limitations to keep in mind.

  • Some base Lightning components don’t support localization and aren’t compatible with multilingual sites.
  • You can’t use the Google Cloud Translation API with LWR sites.
  • LWR sites offer limited support for right-to-left languages in standard components. For the best customer experience in these languages, use custom Lightning web components.
  • Multilingual LWR sites aren’t fully optimized for search engine optimization (SEO). Links to your site translations aren’t included in the head markup of your site pages and therefore can be less discoverable by search engines.
  • In rare cases, the URL for a translation of your site inadvertently conflicts with other site URLs. For example, the URL for a translation can end up identical to the URL for a particular page on your original site. Or, it can end up identical to the URL for the home page on another one of your sites. In the first case, the URL that leads to the translated site takes precedence over the URL that leads to the page on your original site. In the second case, the URL that leads to your other site takes precedence over the URLs that lead to your translation or to a specific page.

    To see how your site visitors can experience this URL conflict, let’s look at some sample URLs.

    Say you have a site at https://UniversalTelco.my.site.com, and you have a page on the site for your franchisees at https://UniversalTelco.my.site.com/fr. The main URL for your site ends with .com, and the URL that leads to the franchisees page ends with /fr.

    Then you translate your site into French. When you publish the French translation, the main URL for your site is followed by the part of the URL that identifies the language, /fr. So the URL for the French translation of your site is also https://www.UniversalTelco.my.site.com/fr. When users enter this URL in a browser, they land on the home page of your French translation, not on the franchisees page.

    Now let’s say you set up a new site at https://UniversalTelco.my.site.com/fr for a sale that you’re running in the city of Framingham. Again, the main URL for your site ends with .com, and the URL for your sale site ends with /fr. In this case, when users enter https://UniversalTelco.my.site.com/fr into a browser, they land on the page for your sale site, not on your French translation or the franchisees page.

    To avoid these URL conflicts, change the URL for the franchisees page to end with something different, such as /franchisees. And change the URL for the sale page to end with something different, such as /framingham.