Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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>
Same Isuue, can anybody share your solution?
I would also be interested to hear if anyone has a simple solution to this.
I'm having the same issue
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
Thank you very much!
It works!
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
Thank you!
All the errors are gone! I'm using Parallax template
Pat15
Just amazing! Thanks so much!
yes! it working
Thank you
Thank you so much! This was perfect 😊
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024