Integrate and Check Your Meta Tags for SFRA Storefronts

Learning Objectives

After completing this unit, you'll be able to:

• List the API classes you use to generate meta tags.
  
• Identify the location of meta tags on a page.
  
• List the property and container you use to handle meta tags.
  
• Describe how you check your final meta tags.
  
• Describe how you evaluate your SEO implementation.
  

The instructions and code examples in this unit apply exclusively to Storefront Reference Architecture (SFRA) storefronts. They do not support Storefront Next or PWA Kit storefronts.

In the last two units you learned what meta tags are, and you configured and previewed rules in Business Manager. In this unit, you learn how you can run part of your meta tag generation automatically inside your storefront app. Automating this process keeps your metadata accurate and up to date as your product and content data evolve, and it eliminates human errors that can occur with manual updates.

Because automation requires writing application code, it is primarily a development task. You will work with a developer on this part, but it is important to understand how and why it works so you can effectively design and manage your SEO implementation.

Explore the Salesforce B2C Commerce Meta Tag APIs

Your developer uses the B2C Commerce API to obtain page meta tags that generate from your rules. Here are the API classes that map to each page type.

Your developer uses these classes to handle the metadata on each page with B2C Commerce product and content data. The pageMetaTags property populates meta tags within the HTML head section on a page. B2C Commerce works with these classes inside the dw.web.PageMetaData container and makes the results available during header generation. The content generates from the scope and rules that you set, whether from the current scope context or inherited from a parent scope context.

Explore the Controller Code

Here's the JavaScript code that adds the page meta tags into the dw.web.PageMetaData container, so they're available during header generation.

updatePageMetaTags: function (object)
 {
   if ( object.class === dw.content.Content
       || object.class === dw.system.Site
       || object.class === dw.catalog.Product
       || object.class === dw.catalog.ProductSearchModel
       || object.class === dw.content.ContentSearchModel)
   {
       var pageMetaData = request.pageMetaData;
       pageMetaData.addPageMetaTags(object.pageMetaTags);
   }
 },

Explore the Template Code

The dw.web.PageMetaData container supports a loop approach that creates all your page meta tags in an easy way within a template. Here's the template code.

<iscomment>Rule based page meta tags</iscomment>
<isloop items="${pdict.CurrentPageMetaData.getPageMetaTags()}" var="pageMetaTag">
    <isif condition="${pageMetaTag.title}">
        <title><isprint value="${pageMetaTag.content}"/></title>
    <iselseif condition="${pageMetaTag.name}">
        <meta name="<isprint value="${pageMetaTag.ID}">" content="<isprint value="${pageMetaTag.content}">">
    <iselseif condition="${pageMetaTag.property}">
        <meta property="<isprint value="${pageMetaTag.ID}">" content="<isprint value="${pageMetaTag.content}">">
    </isif>
</isloop>

(The source presents this controller function and template loop as generic examples. It doesn't name a specific cartridge, controller file, or template file.)

Check for Generated Tags and Add Fallback Content

What happens when a page has no generated description? You write fallback content for that case. The method isPageMetaTagSet('description') checks whether a page meta tag generates, and the code prints fallback content when it doesn't. Here's the template code.

<isif condition="${!pdict.CurrentPageMetaData.isPageMetaTagSet('description')}">
    <meta name="description" content="Add here your fallback description!">
</isif>

Now, every page carries a description, whether from a rule or from your fallback text.

Check Your Meta Tags

With the automation in place, you review your storefront and prepare for future content. Here's what you check.

• Confirm that pages and content have title tags and meta descriptions.
  
• Pay attention to headings and how they structure your content. Use HTML tags correctly, so search engines read semantically meaningful code such as h1 and other heading tags. Give each page a single h1 for the primary subject, such as the product name on a PDP. Use h2 and h3 tags to organize supporting content.
  
• Add descriptive alt text to all product images, so crawlers interpret visual content.
  
• Use the robots meta tags to guide search engines on how they access your content.
  
• Search for duplicate content, and add canonical URLs to avoid competing with your own similar content.
  

(These checks come from SEO Best Practices and the canonical URL tag documentation. The source doesn't frame them as a fixed set of "three things.")

Evaluate Your SEO Implementation

Checking your tags is one part of the job. You also evaluate how your site performs for search engines. Several low-cost tools give you a sense of how well your site is prepared for SEO. Quantity doesn't equal quality, and in the end SEO is about driving qualified traffic that results in conversions.

Here's what you do.

• Use the URL Request Analyzer to review how your storefront processes URL requests, and how your configuration opens the corresponding page.
  
• Use Google Webmaster tools to understand how well your site indexes and performs on Google, including crawl information, robots.txt evaluation, top search queries, and potential problems.
  
• Look up how many pages currently are indexed. Enter a site:(domain) search on the relevant search engine, such as site:demandware.com.
  
• Check for spider traps with a text-only browser to see what the spiders see.
  
• Test your 404 error pages with alternate paths. Enter an invalid URL to cause a 404 error.
  

Robots.txt configuration also matters for AI crawlers, such as GPTBot, ClaudeBot, and PerplexityBot. These crawlers request your robots.txt file to determine which pages they access, and many don't run JavaScript. Confirm that key product information, such as names, descriptions, and prices, appears in the server-rendered HTML response.

Create a checklist of the steps that you take when you create content, and add meta tags to that routine. A regular habit keeps your metadata current as your catalog grows.

Wrap It Up

In this unit, you learned how to work with developers to automate meta tag generation using the B2C Commerce API classes within controller and template code. You learned how to verify the metadata implementation by checking page content and evaluating site performance with SEO diagnostic tools.

In this badge, you learned how to optimize a storefront for search engines by defining meta tag rules in Business Manager, automating their generation through APIs, and validating the implementation.

Resources

• Salesforce Help: B2C Commerce API
• Trailhead: Salesforce B2C Commerce for Developers