What Structured Data Code to Add to Obtain Rich Search Results in Product Pages of Virto Commerce B2B Platform
Is there a B2B ecommerce platform, which would display search results of the products from your ecommerce store with images, ratings, reviews, and other media content featured on the site? Such a dream-like situation is possbile for a web store based on a Virto Commerce platform. 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 / 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 make B2B marketplace platform more efficient?’ 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:
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:
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:
4. On the next step, add <script 'application/ld+json'> element with next content:
5. That’s it! Finally, make sure that your product.liquid template includes the following markup:
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:
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:
10. You can preview the search result clicking by PREVIEW RESULTS:
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.
Request a 30-minute demo
