Liquid, JavaScript, themes, sales channels
Hi
I've recently inherited a client who has gone through a number of different theme designs/hacks in the past, and the canonical setup on the site isn't operating as it should, by my understanding.
Currently all filter/facet options in the sidebar of a collection page lead to a fully-indexable URL such as .com/collections/name-of-collection/tag_name-of-tag (this structure is exactly as per the site, with a hyphen in the first path and an underscore in the second path). This is generating hundreds of useless or duplicate pages at this third folder path level and they all contain a self-referencing canonical tag. None of them are driving any SEO traffic so I want to either canonicalise back to the parent collection (second folder path) or noindex.
Is there some code that I could add to theme.liquid to achieve this?
Thanks!
Solved! Go to the solution
This is an accepted solution.
See if you can find the canonical in theme.liquid <head> tag. Eg:
<link rel="canonical" href="{{ canonical_url }}" />
Option1: To no-index you could replace it with something like:
{% if template contains 'collection' and current_tags %}
<meta name="robots" content="noindex" />
{% else %}
<link rel="canonical" href="{{ canonical_url }}" />
{% endif %}
Option 2: To canonicalize to the collection you could replace it with:
{% if template contains 'collection' and current_tags %}
<link rel="canonical" href="{{ collection.url }}" />
{% else %}
<link rel="canonical" href="{{ canonical_url }}" />
{% endif %}
Ideally you don't want to have both a noindex AND canonical present as this would be giving Google conflicting info.
That's the general idea anyway - before you go wildly copy/pasting that everuwjere, make sure you backup whatever you have. Also test it's working as expected and adjust if needed, because I haven't tested that fully, but in my head it makes sense.
This is an accepted solution.
See if you can find the canonical in theme.liquid <head> tag. Eg:
<link rel="canonical" href="{{ canonical_url }}" />
Option1: To no-index you could replace it with something like:
{% if template contains 'collection' and current_tags %}
<meta name="robots" content="noindex" />
{% else %}
<link rel="canonical" href="{{ canonical_url }}" />
{% endif %}
Option 2: To canonicalize to the collection you could replace it with:
{% if template contains 'collection' and current_tags %}
<link rel="canonical" href="{{ collection.url }}" />
{% else %}
<link rel="canonical" href="{{ canonical_url }}" />
{% endif %}
Ideally you don't want to have both a noindex AND canonical present as this would be giving Google conflicting info.
That's the general idea anyway - before you go wildly copy/pasting that everuwjere, make sure you backup whatever you have. Also test it's working as expected and adjust if needed, because I haven't tested that fully, but in my head it makes sense.
Hi Kieran
Thanks for your solution. May I ask exactly how the "current_tags" element works? I have other pages on the site, which are SEO-friendly, created using the Product tag Condition:
These are driving a lot of traffic which I don't want to lose. Will your solution also apply canonical/noindex to these pages?
Thanks
current_tags only cares about tag URLs on the front, same for blog tag pages, and collection tag pages. Doesn't matter what collection rules you have in admin.
Just tested this for my own sanity:
Path | {{ current_tags.size }} | {{ current_tags }} | {% if current_tags %} |
/collections/collection-name/tag1+tag2 | 2 | tag1tag2 | tags set |
/collections/collection-name | no tags set | ||
/collections/collection-name/tag1 | 1 | tag1 | tags set |
/ | no tags set |
These are driving a lot of traffic which I don't want to lose. Will your solution also apply canonical/noindex to these pages?
Both code options I gave should only affect collection tag pages. So shouldn't change anything on the normal collection pages at all. But always worth testing the output first on your own site. Also before making changes here - worthwhile checking if any /collection/collection-name/tag pages are getting traffic.🙂
This worked perfectly, thanks! 🙂
Hi @KieranR
Related to this, I would also like to add a rel="nofollow" link element to the tag links in the sidebar of collection pages. I assume I am correct to edit collection-sidebar.liquid however can't find the right place to add the relevant code, is it somewhere in here?
{% for tag in collection.all_tags %}
{% if current_tags contains tag %}
<li class="active close">
{% if block.settings.tag_style == 'buttons' %}
{{ tag | link_to_remove_tag: tag }}
{% else %}
{{ tag | link_to_tag: tag }}
{% endif %}
</li>
From the docs here:
https://shopify.dev/docs/themes/liquid/reference/filters/url-filters#link_to_add_tag
Input:
<!-- collection.tags = ["Mens", "Womens", "Sale"] -->
{% for tag in collection.tags %}
{{ tag | link_to_add_tag: tag }}
{% endfor %}
Output:
<!-- If you're on "/collections/frontpage/mens": -->
<a title="Show products matching tag Mens" href="/collections/frontpage/mens">Mens</a>
<a title="Show products matching tag Womens" href="/collections/frontpage/womens+mens">Womens</a>
<a title="Show products matching tag Sale" href="/collections/frontpage/sale+mens">Sale</a>
One quick and dirty way to do it is by string replacement filters - eg:
<!-- collection.tags = ["Mens", "Womens", "Sale"] -->
{% for tag in collection.tags %}
{{ tag | link_to_add_tag: tag }}
{% endfor %}
Which will hopefully get you:
<!-- If you're on "/collections/frontpage/mens": -->
<a title="Show products matching tag Mens" nofollow href="/collections/frontpage/mens">Mens</a>
<a title="Show products matching tag Womens" nofollow href="/collections/frontpage/womens+mens">Womens</a>
<a title="Show products matching tag Sale" nofollow href="/collections/frontpage/sale+mens">Sale</a>
Worth testing properly, because I haven't, this is just a suggestion 🙂
I can't see any change in the code from the first example to the amended version? Where have you input the nofollow attribute?
Oh weird I wrote it out, must have copy pasted the wrong bit. Meant to do something like this:
<!-- collection.tags = ["Mens", "Womens", "Sale"] -->
{% for tag in collection.tags %}
{{ tag | link_to_add_tag: tag | replace "href", "nofollow href" }}
{% endfor %}
Sidenote: if anyone knows post a 'sample code' block (like above) without sometimes getting a tonne of random whitespace, I'd love to find out!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024