New Shopify Certification now available: Liquid Storefronts for Theme Developers

Updating data-vocabulary.org entries to schema.org in collection-template.liquid

CampanulaDesign
Tourist
7 0 3

I've been receiving notices from Google that the data-vocabulary.org has been deprecated for my wife's website. I am a C#.net programmer so I'm not completely dim, but to be honest, the whole Shopify system is a little mystifying to me and I don't want to mess this up.

I have three files that seem to be the cause of the Google warnings - they are collection-banner-template.liquid, collection-sub-collections.template.liquid, and collection-template.liquid.

I didn't do a character to character comparison, but it looks to me like all three files have the exact same code that refernces data-vocabulary.org

 

Here is that code:

      <div class="breadcrumb eight columns alpha">
        {% if section.settings.collection_breadcrumb %}
          <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{{ shop.url }}" title="{{ shop.name | escape }}" itemprop="url"><span itemprop="title">{{ 'general.breadcrumbs.home' | t }}</span></a></span>
          <span class="icon-right-arrow"></span>
          <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{{ collection.url }}" title="{{ collection.title | escape }}" itemprop="url"><span itemprop="title">{{ collection.title }}</span></a></span>

          {% if current_tags %}
            {% for tag in current_tags %}
              <span class="icon-right-arrow"></span>
              <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/collections/{% if collection.handle != blank %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handleize }}" title="{{ tag | escape }}" itemprop="url"><span itemprop="title">{{ tag }}</span></a></span>
            {% endfor %}
          {% endif %}

          {% if paginate.pages != 0 %}
            <span class="icon-right-arrow"></span> {{ 'general.breadcrumbs.page' | t: current_page: paginate.current_page, pages: paginate.pages }}
          {% endif %}
        {% else %}
          &nbsp;
        {% endif %}
      </div>

From what I can tell on this site here: https://webmasters.googleblog.com/2020/01/data-vocabulary.html , I need to convert this to schema.org but in the example on the page I referenced, I notice that it seems to be converting the <div> tags to <ol> (ordered list?) tags and I just don't want to mess this up. From the notices, it looks like I've got until April to get it right. 

 

First and primarily, can anyone just translate the above code to use schema.org for me? I'd really appreciate it. I think I could do it from the page I referenced, but I'm not even sure how to test it to make sure it works.

Secondly, I'm not entirely certain how themes work. Shouldn't whoever made this theme have a fix for this kind of thing? Clearly everyone who uses this theme (Responsive) should need to make this change to get Breadcrumbs to work properly... so is there a place to get the latest code for a theme you're using or are you on your own to make these kinds of changes once you've adopted and customized your website?

 

Thanks in advance,

 

Alan Denke

Campanula Design Studio
 

Replies 7 (7)
Charsiu
Shopify Partner
6 0 0

Following this as I am experiencing the same issue!

 

KiLLeRRaT
Tourist
7 0 1

Subscribe.

 

 

KiLLeRRaT
Tourist
7 0 1
skysetter
Visitor
2 0 0

I'm also getting this breadcrumb schema.org error on 114 pages of my website which google states will downgrade my website in search.  I'm an end user and not a programmer in any way.  I can lookup and find things in the programing and make directed changes but beyond that I don't know what I'm doing.   My question is, is this error website template related or is it on the shopify end in product entry?  I ask because I don't know if I should be asking my template creator to correct the error or shopify?  Anyone have advice for me?

skysetter
Visitor
2 0 0

Also, if I just remove the breadcrumbs in my template will that correct the problem?  I do like seeing the breadcrumbs at the top of my product pages but if removing them corrects the error I guess I can do without them.  Help?

ER1
Shopify Partner
2 0 1

We have similar problem, but google detected the deprecated issue mostly in our webpages. Heres what i did. You can get idea how to fix yours by comparing the tags.

<div class="breadcrumb clearfix">
    <ol itemscope itemtype="http://schema.org/BreadcrumbList">  
    <li itemprop="itemListElement" itemscope
        itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="{{ shop.url }}" title="{{ shop.name | escape }}" itemprop="url">
        <span itemprop="name">Homepage</span></a>
        <meta itemprop="position" content="1"/> 
        
    </li>  
    <li itemprop="itemListElement" itemscope
        itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="{{ page.url }}" title="{{ page.title }}" itemprop="url">
        <span itemprop="name">Info page</span></a>
        <meta itemprop="position" content="2"/>    
    </li>
    </ol>    
</div>

You can also check your collection page for errors after the update via google testing tool. 

https://search.google.com/structured-data/testing-tool

 

Our original breadcrumb code

          <div class="breadcrumb clearfix">
            <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{{ shop.url }}" title="{{ shop.name | escape }}" itemprop="url"><span itemprop="title">{{ 'general.breadcrumbs.home' | t }}</span></a></span>
            <span class="arrow-space"></span>
            <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
              <a href="{{ page.url }}" title="{{ page.title }}" itemprop="url"><span itemprop="title">{{ page.title }}</span></a>
            </span>              
          </div>

 

Matthew_Harper1
Excursionist
32 0 18

Has anyone managed to find a solution to this? Thanks.