Commerce meta renderings

Abstract

Overview of the meta renderings that come with the Commerce renderings.

Storefront pages contain meta renderings, which add metadata to the pages. The renderings are included in the meta partial designs that are used on every page in the Storefront template.

Meta renderings are available in the Toolbox when you edit a meta partial design. This topic describes the renderings accessible from the Commerce Experience Accelerator section in the Toolbox.

In the Experience Editor, the Commerce Metadata partial design looks like the following:

Metadata in the partial designs.

You use the Antiforgery meta rendering to insert the <form> tag with the antiforgery token into a partial design. The antiforgery token is passed to every JavaScript API call that the Commerce renderings make. This prevents cross-site request attacks from being made on the website.

Important

The Commerce renderings are dependent on the Antiforgery meta rendering. You must include the Antiforgery meta rendering on all storefront pages to ensure that the Commerce renderings behave as expected.

In the SXA Storefront template, the Antiforgery meta rendering is included in the <body> of the Commerce Metadata partial design so that it generates the antiforgery token HTML that is required by the site.

On the live storefront, the Antiforgery rendering for the home page appear as follows in the HTML source:

Antiforgery rendering in the HTML source on the live storefront

You use the Metadata meta rendering to inject canonical URLs into the HTML page to improve search engine indexing of categories and products. On the live storefront site, the Metadata meta rendering returns a title and a canonical URL that looks like this:

Metadata meta rendering showing title and canonical URL on the live storefront

Note

The title tag contains the title of the product when on a product page and the name of the category when on a category page.

The Commerce Metadata and the Commerce Metadata Catalog partial designs both contain the Metadata meta rendering. This is to ensure that the correct title, content, and canonical URL are displayed for the catalog.

To include other site metadata such as Twitter integration markup, OpenGraph, Favicon, or custom metadata, you must select the SiteMetaData module when you create a storefront site. By default, the SiteMetaData module contains the SXA CanonicalUrl and the Browser Title components. These components, however, do not output the correct data when the URL is pointing to a catalog item. To correct this so that the rendering displays the right content for regular pages as well as catalog pages, you can:

  • Remove the inheritance on the Metadata for the Commerce Metadata partial design and the Commerce Metadata Catalog Items partial design and add only the SXA metadata components needed.

  • Change the configuration and mapping of partial designs so there is a difference between partial designs in use when traversing catalog data (Commerce Metadata) and regular pages (Metadata).

  • Apply the following personalization rules to the Metadata meta rendering:

    Personalization rule to remove duplicate site metadata

You use the Site Bindings meta rendering to manage site binding attributes and related configurations using the SXA site management features.

After the Site Bindings rendering is added to a page, the metadata information about the site's current bindings is rendered in the HTML output as hidden fields. Client-side scripts can access those hidden fields. The Site Bindings rendering inserts the following fields in the HTML source:

  • SiteVirtualFolder – the current site's virtual folder.

  • SiteRootPath – the current site's root item path.

  • SiteStartPath – the start item for the current site.

  • SiteContentStartPath – the content start item for the current site.

On the live storefront, the Site Bindings meta rendering for a page in the Storefront appears as follows:

Site Bindings meta rendering on the live storefront live.