How can I generate dynamic breadcrumb schema mark-up for all products?

Shopify Discussion
1

Hi @malalta , we have generated a code for product page breadcrumbs. Attaching below code for your reference for a product page.

Product page link: https://thefunkydelicstore.com/collections/solids/products/men-custom-red-solids-print-canvas-low-top-shoes-d2062358

BUY MEN'S FLAMING RED SOLIDS PRINT LOW TOP CANVAS SHOES AT TFS

As this code would be dynamic for every product, manually doing independently for all the SKU’s is cumbersome. Could you please help with a logic based code for the above that would do the job dynamically on all the products.

Thanks

2

Hi @malalta Andrew, any help/suggestions would be much appreciated.

Thanks in advance!

3

Luckily the breadcrumb schema is one of the simpler ones - for each step you’ll only need to get 2 things: the name and URL.

The first and last steps are easy – homepage, and current page – so you should be ok figuring these out in your templates (let me know if not).

The middle step(s) are whatever you choose that will make sense to your customers for your store. For example you could do:

  1. Home
  2. Collection
  3. Collection filtered by tag
  4. Product
  5. Product variant

…or something else simpler/more complex.

Once you’ve decided on what works for you, you just need to grab the name + URL for each step (which you can usually get from the {{ product }} object), and then plug it all together.

JSON-LD is almost always the easier way with any schema.org markup …except for breadcrumbs sometimes!

Depending on what template your breadcrumb code is in you may need to think about your logic for the middle steps, and how to get them the data.

However your breadcrumbs are already displaying, so the logic already exists in the template along with the name and URL, so using the Microdata version instead might be a lot easier since half the work has already been done for you. Also, you’re guaranteed your displayed breadcrumbs and schema markup remain in sync, which is often a problem with JSON-LD.

To implement the Microdata version take a look at https://developers.google.com/search/docs/data-types/breadcrumb#microdata and compare it to the JSON-LD version in the tab to the left. All you need to do is use “itemscope” and “itemtype” to replicate the hierarchy of the JSON version, and then “itemprop” and “itemid” to indicate the data.

Since your template doesn’t use a semantic list (

    or
      ) to markup the breadcrumbs, you’ll probably need to wrap some elements in s.

      Then update it in your templates, and check it in Google’s testing tool (or just cut and paste in the snippet you’re working on) until you get the green results you’re after.

      Hope that helps!
      Andrew.

4

Hey Andrew, it looks like this worked. We have implemented it on the store. However, now we are stuck at Schema Mark up for reviews. Could you help here. Thanks in advance!