What Structured Data Code to Add to Obtain Rich Search Results in Product Pages of Virto Commerce B2B Platform

What could be better for B2B ecommerce when a search result displays products from your ecommerce store with images, ratings, reviews, and other media content featured on the site? It is a dream-like situation for a web store based on a Virto Commerce platform, is it not? Moreover, cards and snippets can also be displayed to help corporate buyers make a quicker choice to visit the web store.

This enhanced look of the links in search results is called rich search results and is supported by various search engines and actively promoted by Google.

Google rich cards

Google rich cards / source: Google

Understanding Structured Data Markup for Rich SEO Results in B2B eCommerce Platform

How can you achieve the highlighting of key information on the page and help search engines understand the purpose of the page as accurately as possible? A special tag format called structured data is used to show a search bot (aka crawler) what content is on the page. Instead of figuring out what a page is about by parsing an entire HTML document, search engine crawlers can simply parse structured data in a moment.

For example, with structured data, you can tell crawlers that the page you are viewing is an ecommerce page, a recipe page, or a blog post. When a search engine knows the subject area of ​​a page, it will show more relevant links to users.

The good news is that, in addition to showing rich content in search results, the pages where the bot encounters structured data tend to rank higher in search results. The higher the ranking of the pages, the more often users go to the site, and this gives the search engine algorithms a reason to rank the site even higher due to the high CTR.

Now that we have no doubt about the usefulness of rich search results, it remains to be seen how to perform page markup in a format that is understandable by every search engine. It is easiest to add the structured data using the JSON-LD format, a piece of code that you can add at the top of the page within <head>…</head> tags to annotate preexisting relevant elements such as prices, product photos and videos, reviews, and responses.

You may ask ‘whose task is it to add the structured data using the JSON-LD format to ecommerce product pages?’ This task is not for ecommerce marketers or sales, but for the developers. It is also important to understand that insertion of the data code is carried out by developers in such a way that it automatically affects all product pages at once (including future ones), of which there may be millions on the B2B commerce portal.

Developers can learn more about structured data using Web.Dev and the Google specification for an ecommerce product page. We continue with the instruction on how to add structured data to product pages in B2B ecommerce portal based on the Virto Commerce platform.

How to Add Structured Data to Virto Commerce Product Pages

The idea of this section is to provide the developer team of any Virto Commerce client with the “how to” instruction with code samples.

There are 3 ways to add the structured data on a product page: using JSON-LD, RDFa, or Microdata. JSON-LD is the modern and most compatible option for seamless integration with the existing markup on a webpage. Follow the steps below to add JSON-LD to your product page (hereinafter, the product page using Virto Commerce B2B demo theme is taken as an example).

First, validate your product page for rich results assessment “as is.” This could be done with the Google Rich Results Test.

Step 1. Test the Existing Product Page Template

In our example procedure, we did this check first and found that the default product page template has a poor test result initially:

check

Step 2. Clean Up the Legacy Code

Let us continue to improve the initial poor result:

1. We have created a B2B theme with the Liquid template language. Find a product template product.liquid placed in /templates/ directory.

2. You need to find and check the next element:

<main class="container pt-4 pb-6" role="main">

If there is a child component: <div class="col" itemscope itemtype="http://schema.org/Product">, delete itemscope and itemtype attributes for that element. Then, delete all child <meta> attributes. It is necessary to leave only one data source for Googlebot (JSON-LD in our case).

See code samples below:

  • Before:
legacy code before
  • After:
legacy code after

Step 3. Add JSON-LD Structured Data

3. For adding JSON-LD to the product page, add next markup to the code, locating it next after <main> element:

adding JSON-LD to the product page

4. On the next step, add <script 'application/ld+json'> element with next content:

add <script 'application/ld+json'>

5. That’s it! Finally, make sure that your product.liquid template includes the following markup:

product.liquid template

6. You can add or remove script properties as product properties for maximizing validity, but the following properties are necessary according to Google documentation:

  • name
  • review or aggregate Rating or offers

7. Reload the product page and make sure that the page is rendered correctly. Open developer tools and find recently added structured data script in the page markup:

recently added structured data script

8. If some properties of a specific product have an empty string as a value, then provide additional product information using Virto Commerce Manager.

Step 4. Retest Product Page Template Again

9. Let us validate the product page again after the above-mentioned corrections:

validate the product page

10. You can preview the search result clicking by PREVIEW RESULTS:

search result

Please consider that the actual appearance of rich search results by Google is not guaranteed because of reasons beyond our control. It depends on many parameters such as your page optimization or search request context and others. The Google Search Preview is not a real search results page - read more here.

Conclusion

Rich search results are important tools to increase CTR and get more visitors to the ecommerce portal.

To exploit the full potential of rich search results for your business, add structured data to your B2B ecommerce product page template code. Such a task is usually carried out by a developer team (or by an implementation partner) on the client's side, considering the specifics of the client’s products and their presentation on the website.

In this post, we showed you how to add structured data to a product page template on a Virto Commerce-based B2B portal.

Here are some additional resources that might be helpful for developers:

Request a 30-minute demo

Oleg Zhuk
Technical Product Owner