Data-vocabulary Breadcrumb in Google Rich Snippet tool - URL vs HTML

Question

I am new to rich snippet data mark-up and I am experiencing a weird problem with the Google Rich Snippet testing tool. I use the data-vocabulary.org mark-up as proposed by Google.

I'm using an e-commerce platform that uses the language rain as the customization engine, and for all of the products, I load (and visualize) the breadcrumb trail like this:

<div class="breadcrumbs no-underline">
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a itemprop="url" href="{{ '' | url }}" title="{{ 'Home' | t }}">
        <span itemprop="title">{{ 'Vintagious Home' | t }}</span>
      </a>
    </span>
    {% for breadcrumb in page.breadcrumbs %}
    {% if breadcrumb.title != product.title %}
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      > <a title = "{{ breadcrumb.title }}" itemprop="url" href="{{ breadcrumb.url | url }}">
        <span itemprop="title"> {{ breadcrumb.title }}</span>
      </a>
    </span>
    {% endif %}
    {% endfor %}
  </div>

Within my website, this works as intended. See for example this page where the trail is correctly loaded. However, in Google's rich snippet tool, the breadcrumb trail does not load correctly if I load the page directly from the URL. It only recognizes the home page breadcrumb, but misses the other two. (if I leave out the if-statement, Google recognizes the last breadcrumb as well, but skips the middle two in the for-loop)

Rich Snippet Testing Tool - URL Test.

In the page source html of the product page, however, the elements have correct mark-up, and if I put the page source html in Google's tool directly, it works as intended.

Somehow the html-response that Google acquires when crawling the site directly is different from the html-response in my browser. I am puzzled, and cannot find any information on this.

Any help would be much appreciated.

Thank you.

Answer 1

Oh, what wonders it can do to ask questions. I figured it out. The issue was in how the eCommerce website I used had defined page.breadcrumbs.

This was dependent on the actual user's breadcrumb. But if let Google crawl the product page, there are no prior page visits, so there is no breadcrumb. And that explains why the page source html was correct, since I did follow a breadcrumb path.