Solved

How to handle faceted navigation for SEO

jamiemodo25
Tourist
5 0 1

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!

Accepted Solution (1)

KieranR
Shopify Partner
333 27 116

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.

Full time Shopify SEO guy, based in NZ. Sometimes freelance outside the 9-5.

View solution in original post

Replies 8 (8)

KieranR
Shopify Partner
333 27 116

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.

Full time Shopify SEO guy, based in NZ. Sometimes freelance outside the 9-5.
jamiemodo25
Tourist
5 0 1

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:

jamiemodo25_0-1620637248778.png

 

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

KieranR
Shopify Partner
333 27 116

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 %}
tags set
{% endif %}
{% unless current_tags %}
no tags set
{% endunless%}

/collections/collection-name/tag1+tag22tag1tag2tags set
/collections/collection-name  no tags set
/collections/collection-name/tag11tag1tags 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.🙂

Full time Shopify SEO guy, based in NZ. Sometimes freelance outside the 9-5.
jamiemodo25
Tourist
5 0 1

This worked perfectly, thanks! 🙂

jamiemodo25
Tourist
5 0 1

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>

 

 

KieranR
Shopify Partner
333 27 116

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 🙂

Full time Shopify SEO guy, based in NZ. Sometimes freelance outside the 9-5.
jamiemodo25
Tourist
5 0 1

I can't see any change in the code from the first example to the amended version? Where have you input the nofollow attribute?

KieranR
Shopify Partner
333 27 116

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!

Full time Shopify SEO guy, based in NZ. Sometimes freelance outside the 9-5.