Integrate and Check Your Meta Tags

Learning Objectives

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

• List the API classes you can use to generate meta tags.
• Describe where on a page you add meta tags.
• List the property and container you use to handle meta tags.
• List three things you should do to check your final meta tags.

Automate Meta Tag Generation

Brandon wants to automate part of his meta tag generation process, and that means adding it to his storefront application code. Automation is a great idea because it eliminates problems that people can introduce with a manual process and adds another set of eyes to review the resulting metadata.

Modifying the storefront application is a development task, so once again, Brandon turns to Vijay Lahiri, the Cloud Kicks developer. 

Vijay makes his changes in a sandbox, then uploads the code to a staging instance. From there, he (or the admin) replicates the code into the development and production instances.

Although Brandon doesn’t add code to an application, he wants to learn how it’s done and why, so he has a complete picture of how to implement SEO as changes occur with his storefront data. He takes a look at the Salesforce B2C Commerce for Developers module to refresh his knowledge of B2C Commerce development terminology.

B2C Commerce APIs

Vijay uses the Salesforce B2C Commerce API to integrate meta tags into his storefront application.

Here are the API classes he uses.

Vijay uses these classes to handle the metadata on each page with B2C Commerce product and content data. He uses the pageMetaTags property to populate meta tags within the HTML head section on a page.

B2C Commerce uses these classes within the dw.web.PageMetaData container, and makes the results available during page generation. B2C Commerce generates the meta tag content based on the scope meta tag context and rules, whether from the current scope context or inherited from a parent scope context. 

Vijay’s code includes a controller and a template. He takes a look at the Salesforce Reference Architecture (SFRA) base cartridge, which includes the Page.js controller and the htmlHead.isml (common/layout) template to understand how to handle page metadata and meta tags.

Controller Code

Here’s an example of the JavaScript code that Vijay uses to update meta tags.

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);
}
},

Template Code

The dw.web.PageMetaData container (API) makes the connection between the js file and the isml file. It supports a loop approach, easily creating all page meta tags within a B2C Commerce template, as shown in this example.

<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>

Check and Fallback Code

Vijay uses this template code to check if page meta tags are generated and perform fallback behavior.

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

Check Your Meta Tags

With Vijay’s help, Brandon is ready to review his new meta tags and prepare for the future.

Here’s what they review.

• Check whether all pages and content have title tags and meta descriptions.
• Pay attention to headings and how they structure your content.
• Make sure all images have alt text.
• Use the robot meta tags to guide search engines on how they should access your content.
• Search for duplicate pages, and use canonical tags to avoid cannibalizing your own content with duplicate or similar content.
• Create a checklist of the steps that you need to take when you create new content, and add meta tags to that routine.

Let’s Wrap It Up

In this unit, you learned how you can add meta tag processing code to your application and how to check your final tags and prepare for future changes. Earlier in this module, you explored meta tag rules and learned how to create them in Business Manager. It’s time to take the final quiz and earn an awesome new badge.

Resources

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