Manage SEO content

Commerce enables you to manage the SEO content within your store by providing configurable title and meta descriptions, headings, category and product descriptions, accessible content, and product variants.

This section applies to both OSF and Storefront Classic. This section applies to Open Storefront Framework (OSF) and Storefront Classic.

Generate title/meta description

Commerce provides auto generated title and meta descriptions for the display name, brand name, and body content of your store. You can configure patterns based on default or custom fields for each page type, with each static page displaying a preview of how your page snippet will look in search results.

Duplication of SEO tags, where the same title or meta tag value is propagated across pages of a given type, should be avoided. It is good practice to customize your homepage title and meta description as title tags are taken into account in organic rankings. Whilst meta descriptions suggest to Google what should be displayed in an organic snippet. To optimize your meta descriptions you should highlight product features for a higher click through rate.

Headings

Commerce supports unique heading tags (H1-H6) on each page type. The heading tag default settings are:
  • <h1> - product/category name or page title
  • <h2> - your product or category description field value
  • <h3> - inside the main unique body content; not to be used for repetitive site-wide widgets
  • <h4> - <h6> tags are used in the remaining site-wide page elements (such as reviews, similar products, etc.)

When planning heading tags for your Commerce site, keep in mind the following points:

  • place primary keywords inside H1 headings, secondary keywords are allocated in H2 headings.
  • H1-H2 tags with the highest importance should be unique. Therefore, it is advisable to make key headings different from the page title. In particular, H1-H2 tags should be planned out for the homepage, product, category, and static article pages.
  • customize the H1-H6 placements directly within in the widget source code.
  • avoid constraining heading placements with CSS styling.
  • ensure heading tags do not make any changes in page layouts.

Category/product descriptions

Each category or single product page should have a unique description as it is recommended to tailor your site copy without duplication from the product details. For example, category descriptions can be placed at the bottom of the page to achieve usability on mobile and for the benefit of SEO.

Content accessible to web crawlers

To aid accessibility on mobile devices, ensure your most relevant content is instantly visible once a user lands on a page. Copy hidden under a “see more” link, or beneath tabs, must be present in the prerendered version of the page.

To view the DOM of a prerendered page:
  1. Open Chrome Developer Tools and navigate to the Network tab.
  2. Switch the User-Agent to Googlebot and reload the page.
  3. Click on the Elements tab. You will see the prerendered version of DOM. Note: If you use onClick or onScroll events to load additional content on the page, it will not be included in the prerendered version of DOM.
  4. Search the DOM to check if the content has loaded. Note: If you use video or images, it is recommended to always provide captions, ALT/TITLE attributes and transcriptions for video content.

Product variants

Multiple variants of the same product should be published under one URL page to avoid duplicate content issues. This is the case when there is little that differentiates the product - such as color, size, pattern, etc. It is also recommended to use drop downs and selectors to help shoppers pick their product features on a single product page. Sizes are most often implemented as a drop down with a URL that does not change, or with a parameter added to create a URL canonicalized to the primary product URL.

For instances when a product type may be perceived as two different items, products can be submitted as separate indexable URLs, especially if a shopper is more likely to use the variation of the product in their searches. For example, a product such as an eyeshadow with two unique variant names would be two different items. In this case, each variant = unique indexable URL. You may want to consider the number of potentially duplicate product variants that can result from adding separate indexable URLs for each variant.