Customize SEO tags

Commerce provides the option to modify meta tag patterns, or customize the meta tags on any static page. Meta tags are placed within the code of your web store pages and provide additional information to the search engine. They control how, and suggest what, results get displayed in the search results.

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

Web search engines partly base their rankings of pages on the words that appear in certain HTML tags, particularly <meta> tags and the <title> tag.

A common SEO technique is to list key search terms in those tags in order to raise the ranking of the pages for those terms. While you should avoid “keyword stuffing” – that is, overloading tags with content and keywords that are not helpful for shoppers, especially keywords that have nothing to do with the content of your store – you can customize these tags.

This section includes the following topics:

Tag store pages

Meta title and meta description optimization play a vital role in SEO as both elements are displayed in the search results. The meta title tag is taken into consideration in the ranking process. The meta description is used by Google in Search Engine Results Pages (SERPs) snippets, and may encourage users to click on your page, thereby potentially impacting your click-through rate.

Commerce automatically adds <title>, <meta name="keywords">, and <meta name="description"> tags to the headers of several types of pages on your store.

For each product and collection page in your store, Commerce sets the default values of SEO tags to the following:

<title> tag: The value of the Name property of the product or collection.
<meta name="keywords"> tag: The values of the Name and Parent Collection properties of a product. The values of the Name and Selected Parent properties of a collection.
<meta name="description"> tag: The values of the Name and Description properties of the product or collection.

You can customize the metadata for these tags when you edit a product or collection on the Catalog page in the administration interface. To learn how to customize the metadata that Commerce automatically turns into tags, see Add metadata to products and collections.

For content pages, such as the home page and article pages on your store, Commerce sets the default values of SEO tags to the following:

<title> tag: The value of the Site Name property.
<meta name="keywords"> tag: By default, there is no metadata in this tag.
<meta name="description"> tag: By default, there is no metadata in this tag.

You can customize the metadata for these tags when you edit a layout on the Design page in the administration interface.

Customize URL slugs

A URL slug is the SEO-friendly, human-readable part of product and collection page URLs. Commerce automatically creates a URL slug for each product and collection page that is set to the value of the Name property for the product or collection.

You can customize the URL slug when you edit a product or collection on the Catalog page in the administration interface. For example, you could edit the slug to exclude special characters that can cause problems for robots that index your pages, and re-test to see if the problems reoccur. To learn how to customize a URL slug, see Add metadata to products and collections.

Tag metadata for images

An alt attribute attached to an image file helps search engines understand what the image shows, and rank it in the image search. Images can deliver a significant part of site traffic so it is worthwhile to use descriptive:

file names - rename the file before uploading to the Commerce, for example, red-bag.jpg is better than 3847539.jpg.
alt attribute - a few words describing what the image presents. Alts and title attributes can be customized via a bulk CSV upload.

Commerce automatically adds alt text and title attributes to the <img> tag for each image on a product or collection page on your store.

Search engines index alt text and use it to return images for user queries. Alt text is also used when shoppers cannot view images on the web. For example, a blind shopper’s screen reader reads an image’s alt text when it reaches the image on a category page on your store.
A title is used as a tooltip, or hover text, when a shopper points to the image.

By default, both attributes are set to the value of the Name property for the product or collection. You can customize the alt text and title when you edit a product or collection on the Catalog page in the administration interface. See Add alt text and titles to images for more information.

Add Open Graph tags to product and wish list pages

The Product Social Meta Tags widget automatically adds Open Graph (OG) protocol meta tags to product pages to control the content displayed when a page is shared on Facebook. To learn how to customize the Product Social Meta Tags widget, see Share using email, Facebook, Pinterest, or Twitter and Product Social Meta Tags.

You can add custom tags to the header of any page by creating them in the Additional Meta Tags section of the page layout. To learn how to customize metadata for page tags, see Design Your Store Layout.