LWR Sites for Experience Cloud

LWR Sites for Experience Cloud
Get to Know the LWR Templates
Pages and Components
Differences in Behavior
New Publishing Model
Custom URL Paths
Lightning Web Security
Caching Policy
Head Markup
Accessibility
LWR Template Limitations
Start Building Your LWR Site
Brand Your LWR Site
Create a Multilingual LWR Site
Add More Customizations
Manage Data in LWR Sites
Experience Delivery (Beta)
PDF

Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Head Markup in LWR Sites

With LWR sites in Experience Cloud, you have complete control over the head markup included on the page. Now, when you open the Head Markup window, you can access this default markup.
1<meta charset="UTF-8" />
2<meta name="viewport" content="width=device-width, initial-scale=1" />
3<title>Welcome to LWC Communities!</title>
4
5<link rel="stylesheet" href="{ basePath }/assets/styles/styles.css?{ versionKey }" />
6
7<!-- webruntime-branding-shared stylesheets -->
8<link rel="stylesheet" href="{ basePath }/assets/styles/salesforce-lightning-design-system.min.css?{ versionKey }" />
9<link rel="stylesheet" href="{ basePath }/assets/styles/dxp-site-spacing-styling-hooks.min.css?{ versionKey }" />
10<link rel="stylesheet" href="{ basePath }/assets/styles/dxp-styling-hooks.min.css?{ versionKey }" />
11<link rel="stylesheet" href="{ basePath }/assets/styles/dxp-slds-extensions.min.css?{ versionKey }" />
12<!-- webruntime-branding-shared stylesheets -->

In Aura sites, this markup isn’t exposed in the Head Markup window, but with LWR sites, you can edit:

  • The meta charset tag, which specifies the character set to use. This specification is a best practice.
  • The title tag, which controls the default title of your site that appears in the browser tab.
  • Links to the default style sheets that control the site’s appearance. One link is for Salesforce Lightning Design System (SLDS) and the others are internal style sheets used by the base template. Although you can’t edit the style sheets directly, you can remove them.

You can also use this section to include global JavaScript from third-party libraries using the <x-oasis-script> privileged script tag.

Tip

You can use the { basePath } and { versionKey } variable references in your head markup as you want. For example, if your site URL is https://site.acme.com/service, then { basePath } returns service, which allows you to reference relative URLs.

{ versionKey } is a unique id that’s used to refer to a current published state, which you can use for caching and performance purposes. Every time the site is republished, the versionKey changes.