How can I update data-vocabulary.org schema to schema.org markup?

Technical Q&A
1

I am using the Simple theme and google is not going to accept data-vocabulary schema starting this April. The code in the snippet, “breadcrumb-nav.liquid”, below needs to be updated to schema.org markup. Can someone convert the below markup for me?

{% assign t = template | split: '.' | first  %}
<nav class="breadcrumb-nav small--text-center" aria-label="{{ 'general.breadcrumbs.you_are_here' | t }}">
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="/" itemprop="url" title="{{ 'general.breadcrumbs.home_link_title' | t }}">
      <span itemprop="title">{{ 'general.breadcrumbs.home' | t }}</span>
    </a>
    <span class="breadcrumb-nav__separator" aria-hidden="true">›</span>
  </span>
  {% case t %}
  {% when 'collection' %}
    {% if current_tags %}
      <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        {% assign collection_url = current_tags.first | link_to_remove_tag: current_tags.first | split: 'href="' | last | split: '"' | first %}
        <a href="{{ collection_url }}" itemprop="url">
          <span itemprop="title">{{ collection.title }}</span>
        </a>
        <span class="breadcrumb-nav__separator" aria-hidden="true">›</span>
      </span>
      {{ current_tags.first }}
    {% else %}
      {{ collection.title }}
    {% endif %}
  {% when 'product' %}
    {% if collection %}
      <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="{{ collection.url }}" itemprop="url">
          <span itemprop="title">{{ collection.title }}</span>
        </a>
        <span class="breadcrumb-nav__separator" aria-hidden="true">›</span>
      </span>
    {% endif %}
    {{ product.title }}
  {% when 'blog' %}
    {% if current_tags %}
      <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="{{ blog.url }}" itemprop="url">
          <span itemprop="title">{{ blog.title }}</span>
        </a>
        <span class="breadcrumb-nav__separator" aria-hidden="true">›</span>
      </span>
      {{ current_tags.first }}
    {% else %}
      {{ blog.title }}
    {% endif %}
  {% when 'article' %}
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="{{ blog.url }}" itemprop="url">
        <span itemprop="title">{{ blog.title }}</span>
      </a>
      <span class="breadcrumb-nav__separator" aria-hidden="true">›</span>
    </span>
    {{ article.title }}
  {% when 'page' %}
    {{ page.title }}
  {% else %}
    {{ page_title }}
  {% endcase %}
</nav>
4 Likes
2

Same Isuue, can anybody share your solution?

3

I would also be interested to hear if anyone has a simple solution to this.

4

I’m having the same issue

5

Simple Theme breadcrumb schema fix using json-ld

Disclaimer:
I am NOT a liquid or json-ld coder and offer no guarantee or support
Back up your theme in case it doesn’t work for you
Works for me using ‘Simple Theme’, I doubt it works for others without modification
Not tested for blog or article pages
Takes care of the Breadcrumbs schema only, to fix Product(s) schema errors/warnings see

https://www.schemaapp.com/how-to/remove-shopify-theme-schema-org-microdata/
https://feedarmy.com/kb/shopify-microdata-for-google-shopping/

Steps:

Back up theme
Edit theme code
Under snippets edit ‘breadcrumb-nav.liquid’

Replace all the code with the below code and save

{% assign t = template | split: '.' | first  %}
<nav class="breadcrumb-nav small--text-center" aria-label="{{ 'general.breadcrumbs.you_are_here' | t }}">
     <a href="/" title="{{ 'general.breadcrumbs.home_link_title' | t }}">{{ 'general.breadcrumbs.home' | t }}</a>
     <span class="breadcrumb-nav__separator" aria-hidden="true">›</span>
     {% case t %}
          {% when 'collection' %}
               {% if current_tags %}
                    {% assign collection_url = current_tags.first | link_to_remove_tag: current_tags.first | split: 'href="' | last | split: '"' | first %}
                    <a href="{{ collection_url }}">{{ collection.title }}</a>
                    <span class="breadcrumb-nav__separator" aria-hidden="true">›</span>
                    {{ current_tags.first }}
              {% else %}
                    {{ collection.title }}
              {% endif %}
              <script type="application/ld+json">
                  {  "@context":"http://schema.org",
                     "@type":"BreadcrumbList",
                     "itemListElement":
                       [  
                         {  "@type":"ListItem",
                            "position":1,
                            "item":
                                 {  "@id":"{{ shop.url }}",
                                    "name":"{{ shop.name }}"
                                 }
                          },
                          {  "@type":"ListItem",
                             "position":2,
                             "item":
                                  {  "@id":"{{ collection.url }}",
                                     "name":"{{ collection.title }}"
                                  }
                           }
                        ]
                    }
               </script>
          {% when 'product' %}
               {% if collection %}
                    <a href="{{ collection.url }}" >{{ collection.title }}</a>
                    <span class="breadcrumb-nav__separator" aria-hidden="true">›</span>
               {% endif %}
           {{ product.title }}
          <script type="application/ld+json">
               {  "@context":"http://schema.org",
                  "@type":"BreadcrumbList",
                  "itemListElement":
                       [  
                         {  "@type":"ListItem",
                            "position":1,
                            "item":
                                 {  "@id":"{{ shop.url }}",
                                    "name":"{{ shop.name }}"
                                 }
                          },
                         {% if collection.url %} 
                               {  "@type":"ListItem",
                                  "position":2,
                                  "item":
                                       {  "@id":"{{ collection.url }}",
                                          "name":"{{ collection.title }}"
                                       }
                                },
                        {% endif %}
                        {  "@type":"ListItem",
                           "position":{% if collection.url %}3{% else %}2{% endif %},
                           "item":
                                 {  "@id":"{{ product.url }}",
                                    "name":"{{ product.title }}"
                                 }
                          }
                        ]
                   }
             </script>
          {% when 'blog' %}
               {% if current_tags %}
                   <a href="{{ blog.url }}">{{ blog.title }}</a>
                   <span class="breadcrumb-nav__separator" aria-hidden="true">›</span>
                {{ current_tags.first }}
               {% else %}
                    {{ blog.title }}
               {% endif %}
          {% when 'article' %}
               <a href="{{ blog.url }}" >{{ blog.title }}</a>
               <span class="breadcrumb-nav__separator" aria-hidden="true">›</span>
               {{ article.title }}
          {% when 'page' %}
               {{ page.title }}
              <script type="application/ld+json">
                  {  "@context":"http://schema.org",
                     "@type":"BreadcrumbList",
                     "itemListElement":
                       [  
                         {  "@type":"ListItem",
                            "position":1,
                            "item":
                                 {  "@id":"{{ shop.url }}",
                                    "name":"{{ shop.name }}"
                                 }
                          },
                          {  "@type":"ListItem",
                             "position":2,
                             "item":
                                  {  "@id":"{{ page.url }}",
                                     "name":"{{ page.title }}"
                                  }
                           }
                        ]
                    }
               </script>
          {% else %}
               {{ page_title }}
     {% endcase %}
</nav>

Check your site to see if breadcrumbs looks right on your pages

Goto google’s structured data testing tool > https://search.google.com/structured-data/testing-tool/u/0/#

Copy some of your sites’ urls to test and you should find the breadcrumbs and no errors or warnings

Good Luck

3 Likes
6

Thank you very much!

It works!

7

Hi Pat15

I’ve just tried this on my site and it seems to be working perfectly - thank you so much for your help.

Matt

8

Thank you!

All the errors are gone! I’m using Parallax template

9

Pat15

Just amazing! Thanks so much!

10

yes! it working
Thank you

11

Thank you so much! This was perfect :blush: