The metadata partial design

Current version: 10.1

You can use the SXA metadata partial design to add components that integrate with external systems such as search engines and social networks. You can also use the metadata partial design to include arbitrary HTML code or JavaScript. For example, you can add browser title meta components. For arbitrary HTML, you can use the HTML Snippet component, Google Tag Manager code, or other tracking code.

Each of your page designs must have at least one metadata partial design, otherwise your editors can not control the title that appears in the browser tab or the icon.

The metadata partial design is different from the regular partial design because it uses a metadata layout (Layouts/Foundation/Experience Accelerator/Presentation/Metadata Layout). This layout is bound to /Views/SXA/Metadata Snippet Layout.cshtml and contains the following placeholders:

  • head

  • body-top

  • body-bottom

Metadata partial html

In the Experience Editor, navigate to <Tenant>/<Site>/Presentation/Partial Designs/Metadata to add or edit metadata components. The following components are available:

Section

Component

Placeholder

Description

Accessibility

Skip Link

body

Lets you configure pages that can be navigated by people with disabilities. For example, to skip navigation and tab straight to the content.

Analytics

Google Analytics

head

Lets you add integration with Google Analytics by providing the Google tracking code.

Compliance

Privacy Warning

body

Lets you add a warning about the website using cookies. You can customize the privacy warning message, select the type, and exclude pages from having cookie warnings.

Forms

Forms Scripts

body

Lets you render scripts required by Sitecore Forms. If you use Sitecore Forms on your website, you must add this component to your metadata partial design.

Generic Meta Rendering

HTML Snippet

head or body

Lets you add custom HTML to the <head> section, directly after the <body> tag or before the closing <body> tag of each page. This can be convenient when you want to embed a third-party component (widget, tracking script, and so on), or when none of the available components suit your custom needs.

SiteMetaData

Browser Title

head

Lets you display the page title in the browser.

CanonicalURL

head

Renders the canonical URL of the page.

Custom

head

Renders the metadata stored within the metadata field of each page.

Favicon

head

Lets you display the icon in the browser's favorites list and tabs.

OpenGraph

head

Lets you render OpenGraph Facebook integration markup on your pages.

Seo

head

Renders your page's keywords and description.

Twitter

head

Lets you render Twitter integration markup on your pages.

Do you have some feedback for us?

If you have suggestions for improving this article,