Commerce filtering background

In years gone by, I've seen hundreds of poorly implemented filtering systems that have led to: over; under; or no-indexation at all by search engines – believe it or not, the latter may have been the best outcome for some businesses!

The following guide is aimed to help you make the right decisions when it comes to product filters. It outlines Herd’s bespoke approach to Shopify eCommerce filtering (sometimes referred to as faceting). We'll cover how to implement Shopify storefront filtering, but also how to make the most of organic search engine opportunity that product filters can yield when implemented correctly.

Commerce filtering on the surface is simple, but can get more complicated when you start to include SEO factors such as dynamically driven content, avoiding duplicate content, exposing the correct filters to search engines, and avoiding excessive crawl bloat that can arise when search engines have too many filters / filter combinations to crawl.

Here's a list of everything we'll cover to help you boss product filtering once and for all:

1. Collections & product listing pages
2. Collections vs. filtered collections
3. Site architecture for filtering
4. User / keyword research for filter naming
5. Filters & tagging
6. Filters: name value pairs
7. Filter usability
8. Indexation of filters
9. Primary filters
10. Tertiary filters
11. Competing filtered pages
12. Dynamically driven content for filters
13. Setting a schema for filter content
14. Overriding schema driven filter content
15. Filters that yield zero results
16. Filters with pagination
17. Infinite scroll with pagination & filters
18. Filters & internal linking
19. Filters & sitemap.xml
20. Filters & robots.txt
21. Ordering product filtering groups
22. Implementing bespoke SEO product filtering
23. Implementing Shopify storefront filtering

Considerations when building or overhauling your commerce filter system

For a robust commerce filtering system that's optimised for search engines, here everything you'll need to know:

1. Collections & product listing pages

If you're new to Shopify, think of collections as a way of organising products into logical groups. You might have seen collections referred to as product listing pages (PLPs).

To aid the usability of PLPs, filters (or facets) are commonly used in the world of commerce to help users quickly access a subset of products on a given page by interacting with checkboxes, sliders, or similar. These filters are typically to the side of product listings (on desktop), or above a product list (on mobile devices).

2. Collections vs. filtered collections

Do I need a collection, or a filter? It's important to consider whether a Shopify collection should be used, rather than a filter on an existing collection.

A good way to make the distinction is to consider whether a potential group of products would be best expressed as an attribute of a product group, rather than a separate group of products (collection) – e.g., shirts = collection, blue shirts = filter applied to a shirts collection. Keep this in mind when considering new collections, new filters, or both.

Note: Gender throws us a curve ball - should we filter our <shirts> collection using a <gender> filter of: mens, womens, boys, girls etc.? Or would we be better creating unique collections for: mens-shirts, womens-shirts, and so on (removing the need to filter based on gender)?

The answer largely depends on the potential number of products within each collection, and how your visitors expect to be able to navigate your site (starting their journey with gender vs. product).

3. Site architecture for filtering

For any website to be successful, a well structured site architecture (IA) is crucial, not least to make areas of the site easy to explore via your navigation. You'll also want to think about which sections of your site have the potential to create unwanted duplicate filters, and avoid linking to these within your site architecture (see also: competing filtered pages).

4. User / keyword research for filter naming

Before creating any product filters, make sure you've done your homework on how people search for your products. Do you know what the long-tail keyword variations are for each of your product groups?

It might sound obvious, but creating filters / filter group headings willy-nilly without careful consideration as to naming conventions can actually do more harm than good. Take time to choose the right keywords for primary filter and tertiary filter attributes, as well as their potential name value pairs.

5. Filters & tagging

Filtering in Shopify relies on product tagging / vendor settings. Your eCommerce filtering will only be as good as your product inventory management, so spend some time considering how you’ll tag products.

6. Filters: name value pairs

Commerce filtering is typically based on name values pairs that are passed on a URL query string, e.g., /collections/all?filter-name=filter-value. The start of the query string is denoted by the question mark within the URL.

Ensure you've spent time doing your keyword research, before setting filter group titles, filter names, and filter values.

7. Filter usability

First and foremost, all filters should serve a purpose. They should aid the user in narrowing a collection of products to find what they're looking for based on the filter criteria. Some filters should also be usable / crawlable / indexable from a search engine point of view (see indexation of filters below). If a filter has no purpose, doesn't narrow results, or doesn't aid the user, there's a good chance it's redundant.

8. Indexation of filters

Not all filters are created equal. Some will have far more opportunity and search volume, whilst others will have little search volume, but aid usability (useful once you’ve attracted visitors to your site). There's an argument you should restrict indexation of all filters by default, and then expose selected filters based on search opportunity, primary, and tertiary filter type.

To understand the difference between primary and tertiary filters, see below:

9. Primary filters

It's important to make a distinction of what a primary filter may be. Typically, we would expect that any collection with a primary filter applied would be appropriate to include for search engine indexing, and is likely to have user intent / search volume for that filter name / value combination, e.g., "blue shirts".

10. Tertiary filters

Are likely to be filters that are important for usability, but less so from a search engine point of view. A typical example of a tertiary filter may be "price" – here, it's less likely a user would search for "£50 shirts" (tertiary filter) vs. "blue shirts" (primary filter) – if the filter has very little search volume, but is important for users, it's likely you'll want to class it as tertiary filter (sometimes referred to as a secondary filter), and exclude from search engine crawling and indexing.

Tip: primary / tertiary filters may differ based on product type / collection, e.g., "width" for a TV collection may be a suitable primary filter, whereas for a photo frame collection, a better primary filter would be "size", e.g., /collections/tv?width=55 vs. /collections/photo-frames?size=6x4

11. Competing filtered pages

Rolling out filters across your site could inadvertently result in cannibalisation (two or more of your pages competing in search engines for the same search intent). Consider where filter combinations in different areas of your site yield the same, or similar product results pages, e.g., brand collection + filter applied vs. product collection + brand applied - these are not the same from a search engines point of view. They will be treated as unique pages that compete in search results, unless you take the necessary steps to prevent this.

12. Dynamically driven content for filters

To give users the best possible experience when interacting with filters, we would recommend adjusting the resulting page content when interacting with filters. This also gives the best possible signals to search engines regards the contents of a filtered page. Elements of page content that should be adjusted programmatically include the following (examples using a filter of "blue" applied to our men's shirts collection):

• Page title - important for search engines, and driven by the <title> element. E.g., <title>Men's Shirts | Your Brand</title> becomes <title>Blue Shirts for Men | Your Brand</title> OR <title>Men's Blue Shirts | Your Brand</title>
• Meta description – dynamically set your description to help with click through rates from search engines. E.g., <meta name="description" content="Shop our range of men's shirts today. Buy online from Brand Name." /> becomes <meta name="description" content="Shop our range of blue shirts for men today. Buy online from Brand Name." />
• Heading – likely to be the <h1> of your filtered collection, e.g., <h1>Men's Shirts</h1> becomes <h1>Men's Blue Shirts</h1>
• Content spot - giving users and search engines a good idea of what to expect in your filtered collection. E.g., Men's shirts for every occasion, and in every style. From casual to formal, long sleeve or short, we're sure to have what you need in our range of shirts for men. becomes Men's blue shirts for every occasion, and in every style. From casual to formal, long sleeve or short, we're sure to have what you need in our range of blue shirts for men.

Remember a filter schema to set the order of how your collection names and filters are concatenated.

Note: you're likely to need some help from your development team at this point when programmatically setting page elements based on filter selections.

13. Setting a schema for filter content

This is an area that often gets overlooked when filtering and programmatically driving content. A schema allows you to programmatically set the elements of your pages that will change based on what filters are applied. The amount of research required to set default schema's for different collections across large eCommerce websites shouldn't be underestimated.

At the very least, think about the order of precedence for filters and collection names, e.g., <filter> + <collection name=""> vs. <collection name=""> + <filter>. The correct order may be obvious grammatically. If not, take direction from user intent / volumes from search engines to give you a steer.

Tip: take care with dynamically driven content for gender and colour collections / filters, and the order in which they're concatenated. In our example above, <filter> + <collection name="">, resulting in Blue Men's Shirts is sub optimal, and could unintentionally get you into hot water for certain filter colours. A better option here would be: <collection name="">: <filter>, resulting in Men's Shirts: Blue - this could be enhanced further by overriding the default filter schema, where we'd ideally insert the colour filter value between <Men's Shirts> see below.

14. Overriding schema driven filter content

Having a default schema to set the order of filter values in page elements is a great start. As we've seen, it's not always optimal and we may want to override the default schema for: page titles, descriptions, headings, or content spots, replacing with elements that have been hand crafted.

This provides an opportunity to address the gender / colour, collection / filter dilemma above for <collection name="">: <filter>, giving us the opportunity to override with Men's Blue Shirts.

Tip: don't try to override every dynamically driven element with hand crafted content. Instead, prioritise your time and energy on the collection filters that have the most opportunity, or are the most problematic. You'll know which these are based on your filter research.

15. Filters that yield no results

It's important to try and avoid filtered pages that yield very few, or no results. These pages add more URLs for search engines to crawl and index unnecessarily. From a usability point of view, if selecting a filter would yield zero results, it should be removed as an option. If that's not possible, at the very least, display "0" next to the filter option in question.

If a filter would yield very few results, it may be worth adding a meta tag to the resulting page to prevent the "thin" results page from being indexed. Here, a <meta name="robots" content="noindex" /> would be well advised.

16. Filters with pagination

In the interest of reducing duplicate content across your site, remember to remove content spots from paginated pages (beyond page 1) in a collection page series. Assuming you've set a filter schema for content spots, or overridden the content spot for a filtered collection, the same applies - remove the content spot entirely from paginated filter pages in a series from page 2 onwards.

17. Infinite scroll with pagination & filters

In the interests of page speed, you may well have implemented infinite scrolling for your commerce site to load content continuously as the user scrolls down the page, eliminating the need for pagination on the surface.

If you've implemented infinite scrolling, as per John Mueller's recommendations (Google Search Advocate), you'll notice the URL changes as you scroll down the page, adding a 'page=' parameter and rel 'next' / 'prev' are implemented within the <head> tags of the source code. The same rules apply to filtered pages with pagination and avoiding duplicate content in conjunction with infinite scrolling.

18. Filters & internal linking

Filters should be crawlable anchors so they're easy for search engines to follow (where we want them to). To avoid excessive crawling / indexation of filters, consider the point at which concatenated filters yield value from a search point of view. The following can be used as a general rule of thumb, but may vary depending on your products:

• No filters selected – all primary filters should be crawlable / indexable (each primary filter option anchor)
• 1 filter selected - at one filter selected, add a rel="nofollow" to all other filter anchors, with the exception of second level filters that you've decided to expose to search engines
• Exposing 2^nd level filters - based on your filter keyword research, you may have highlighted some specific 2^nd level filters you'd like to expose to search engines for indexation, e.g., <colour> + <material> + <collection name="">, resulting in: Blue Cotton Men's Shirts. Where this is the case, do not add the rel="nofollow" to these anchors
• 2+ filters selected - with two or more filters selected, add a rel="nofollow" to all other filter anchors
• nofollow tertiary filters - for tertiary filters that we'd like to avoid being added to index, add a rel="nofollow" to the tertiary filter group anchors. Remember, tertiary filters are more for usability than to satisfy search intent.

Tip: try to avoid filtering systems that rely heavily on JavaScript, or don't provide html anchors for filter options. A good starting point is to only allow crawling / indexing of primary filters to one level deep.

19. Filters & sitemap.xml

Shopify's sitemap.xml that can be submitted to search engines will not include filtered URLs out-of-the-box. Our seo filter system overcomes this by extending your sitemap_collections_1.xml to request appropriate URLs are indexed by search engines in conjunction with the filter indexation rules you setup earlier.

20. Filters & robots.txt

Historically, it wasn't an option to edit the Shopify robots.txt. This caused issues in terms of indexation of filters beyond 1-level deep due to the Disallow: /collections/*+* rule in the default Shopify robots file.

Thankfully, it's now possible to edit your Shopify robots.txt via the robots.txt.liquid file. You'll need to do this to expose filters for indexation by search engines - remember to do this carefully.

21. Ordering product filtering groups

When you're happy with your filter groups, filters, and naming conventions, a final step is to consider the order in which you displsy your filter groups. A sensible option is to order filter groups based on priority descending, effectively giving preference to your important (primary filters) that have most search opportunity / will be used frequently.

22. Implementing bespoke SEO product filtering

Taking everything you've learnt so far, you should be in a position to rollout a bespoke product filtering system. The actual implementation will require coding experience in Liquid (Shopify's template language), and JavaScript, along with some product inventory management.

Herd use a combination of product tagging

with Metafields in Shopify, incorporating all of the above into a robust, SEO ready solution that allows you to:

 

• Selectively index the filters you need to
• Optimise meta data based on filter selected
• Create bespoke content for filters
• Add custom hero images based on selected filter
• Add filtered URLs to Shopify XML sitemaps
• And more...

Find out more about our bespoke product filtering solution for Shopify.

23. Implementing Shopify storefront filtering

Storefront filtering is a relatively new feature available for Online Store 2.0 themes. Once you've checked your theme supports filtering, you'll be able to harness out-of-box product filtering along with customised search & discovery via Shopify's App.

To implement filtering on your Shopify storefront, you'll need to use a combination of Liquid, and JavaScript. You will need to create form elements that allow users to select the filter criteria, use Liquid to query the Shopify store for products that match the selected criteria, and use JavaScript to update the storefront with the filtered list of products.

Note: at present, you'll be limited to 5 default filters and 20 custom filters using storefront filtering.

Default filters

Default storefront filters are available for product: availability, price, vendor, product type, and tags.

Custom filters

Custom filters can be created from product variant options, or with Metfields. For example, if you sell clothing with different variants for size, then you can add a filter for size.

Our solution takes care of all of the above, leaving you safe in the knowledge that your filtering system is super fast, and optimised for search engine discoverability and indexation.

Final thoughts

Shopify has some great built-in SEO features. That said, keep in mind with all SaaS platforms (including Shopify), you're likely to find nuances. Product filtering has been one of those nuances for quite some time, but with the advent of storefront filtering, things are improving. Now, it's possible to implement robust Shopify product filters, without the need for excessive workarounds or bespoke solutions. Keep the above tips in mind to boss product filters, and you'll be well on your way to growing organic visibility further.

Ready to take the next steps with your SEO? Read our 22 Shopify SEO tips for your store. Need a helping hand? Get in touch with our herd of performance marketing experts to improve your Shopify organic visibility.