LWR Sites for Experience Cloud

LWR Sites for Experience Cloud
Get to Know the Template
Pages and Components in the LWR Template
Differences in Behavior
New Publishing Model
Custom URL Paths for Unauthenticated Sites
Lightning Locker
Caching Policy
Head Markup
Accessibility
Template Limitations
Start Building Your LWR Site
Brand Your LWR Site
Create a Multilingual LWR Site
Add Additional Customizations
PDF

Newer Version Available

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

Head Markup

With the Build Your Own (LWR) template, 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/s, then { basePath } returns service/s, 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.