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
