How To Use Faceted Navigation To Improve Ecommerce UX (2024)

Ecommerce shoppers want quick finds, not endless scrolling through product pages. If search queries are a frustrating slog, sales are at risk. Faceted navigation makes the hunt for products powerful and easy, but be warned—it can also hurt if your search engine optimization is not implemented carefully.

Here’s how faceted navigation works, its SEO challenges, and how to check for and fix problems. We’ll look at best practices for implementing faceted navigation to boost web traffic and improve the customer experience.

What is faceted navigation?

Faceted navigation, or faceted search, is a website system that lets users refine and filter search results or product listings based on multiple criteria (i.e., facets) within a parent category.

Parent categories help users set relevant parameters for product search, like “Women’s clothing” or “Laptops.” From there, faceted navigation lets users drill down with specific filters to find the items they’re looking for based on brand, size, color, price, and other attributes.

Faceted navigation is a popular search customization technique, especially for large product catalogs. Imagine how hard it would be to find the right laptop from a big-box retailer without the ability to filter the search by brand, screen size, processor speed, hard drive size, price range, and connection options. The options can feel limitless. With faceted navigation, the customer can apply filters that adjust results on the fly.

Amazon, for example, places faceted navigation options prominently on its website, typically on the left-hand side of the search results page. This makes faceted navigation readily accessible to shoppers. Check out these great examples of successful ecommerce brands to see how you can implement faceted navigation on your own ecommerce website.

How does faceted navigation work?

To implement faceted navigation, the store owner selects facets for inclusion in a searchable database to refine searches. The site administrator then assigns these facets to product listings, which appear on the product search page.

For example, a white running shoe from New Balance, size 8, priced at $120, would have these facets and values assigned: Color: White, Size: 8, Brand: New Balance, Price Range: $80–$100. Another shoe type, like a Timberland tan hiking shoe, size 13, would have different facet values assigned.

When facet refinements are added to the search, they’re appended as URL parameters. Multiple parameters are tacked on to the core URLs as the customer adds many filtering options. For example, a URL for athletic apparel may include parameters like:

    https://www.kickscrew.com/collections/nike?sizes=10.5&sizes=10&genders=MENS

In some implementations, a new URL is created, e.g.:

    https://store.com/collections/nike/mens/xl/black/

When the customer applies filters, faceted navigation dynamically updates the content on the same webpage, reflecting the customer’s filtered selections. Although the URL may update to reflect the filters, the underlying webpage remains unchanged.

Benefits of faceted navigation

Faceted navigation lets shoppers choose options to customize a search to get to desired products quickly. Specifically, faceted navigation does the following:

  • Improves usability. With faceted navigation, customers save time finding what they want, weeding out unwanted categories and options. More engaged shoppers result in higher conversion rates.
  • Exposes customers to more product types. You can use facets to expose customers to brands and options they may not have noticed. Think of it as adding a bit of serendipity to the shopping experience.
  • Makes large websites easier to scale. By adding filter options to the existing framework, you can seamlessly integrate new product categories, eliminating the need for a complete redesign of the navigation menu as the product catalog expands.

Problems faceted navigation can cause

  1. Redundant content
  2. Diluted links
  3. Crawl budget waste

Faceted navigation can have unintended negative consequences for SEO. Each problem leads to the next in an adverse chain reaction. Here’s more on how this happens:

1. Redundant content

Faceted navigation can offer almost endless combinations of options to refine a product search—but this strength can also be a weakness. Excessive URL variations from many combinations of filters can hinder search engines and SEO efforts. Multiple pages with similar content can reduce website traffic, as Google may not view these pages as very informative. From a search engine perspective, they are considered useless URLs.

If faceted navigation tends to create multiple pages with duplicate page content, it can hurt SEO. Multiple URLs with similar content pointing to the same keywords confuse search engines. They struggle to pick the “best” page to rank, weakening your website’s performance for targeted keywords.

2. Diluted links

When faceted navigation creates URLs with duplicate versions of page content for specific filter choices, all the links for these pages can cause SEO issues. Search engines might spread their indexing efforts too thinly across these internal links, making it difficult for any page to accumulate enough relevance and authority to rank well in search results.

3. Crawl budget waste

A search engine’s time and resources are limited when crawling your website. Poor faceted navigation implementations can lead to a URL link being produced for each conceivable facet combination. In this case, search engine crawlers can get trapped crawling your site, resulting in the highest-value site pages being overlooked and, consequently, poor organic search performance.

How to check faceted navigation for problems

  1. Understand how faceted navigation is implemented
  2. Analyze organic search traffic to high-value pages
  3. Investigate crawl waste

Here’s how to assess whether faceted navigation works to the advantage of your important pages:

1. Understand how faceted navigation is implemented

Work with your site administrator to understand how your site implements faceted navigation. Are facets used solely for category pages or other site areas, like a blog? Are facets appended to the category page URLs consistently and orderly, such as brands first, pricing second, and so on? Is there a cap on the number of facets users can add? Can users enter a keyword in the search field to add a facet?

Without limits, your site may be overburdened with faceted pages.

2. Analyze organic search traffic to high-value pages

Use Google Analytics to identify your most valuable pages—the ones attracting the most organic traffic. Key reports like Search Terms and Search Results Pages reveal user queries and behaviors on product listings. Focus on metrics such as bounce rate, time on page, and conversions to gauge user engagement. Check if there’s a Search Facets report to see which filters users apply most and how these influence conversions.

Analyze URLs that aren’t driving traffic. The Index Coverage Report in Google Search Console compared with organic traffic reporting in Google Analytics can help you gain a better understanding of which URLs Google is crawling but not necessarily prioritizing for indexing and organic traffic.

3. Investigate crawl waste

Look for negative signals like duplicate content, page-not-found errors, and infinite URLs with endless variations. These can overburden search engines and lead to crawl waste.

To do this, go to Google search and enter “site:” followed by your domain name. If the number of search results is significantly larger than the actual pages found in your content management system (CMS) or XML sitemap, then faceted filters could be the culprit and should be investigated. They could be spawning excessive URL variants.

You can use Google Search Console to assess which URLs Google is indexing. On the Google Search Console dashboard, in the left-hand menu, click on Indexing, then select Coverage. Look for the Valid category, which shows URLs that are successfully indexed and can appear in search results.

Upload an XML sitemap to Google Search Console and compare two URL types: “Indexed, not submitted in sitemap” versus “Submitted and indexed.” The “Indexed, not submitted in sitemap” number shows how many unwanted pages are getting indexed. Other problem indicators can appear when you filter for excluded URLs, known as “crawled – currently not indexed” URLs.

Tips for implementing faceted navigation

Each best practice for effective faceted navigation is guided by two goals: grasping how users search your site and understanding how search engines crawl and interpret your URLs: 

Manage facet and filter options

When a customer refines faceted search with different combinations of options and then navigates to another page on your site, faceted navigation should remember their chosen filters to avoid re-selecting everything.

Manage this with URL parameters that reflect the filter options or browser cookies—small bits of data stored on the user’s device that remember user preferences across sessions. You should not rely solely upon these session IDs, which temporarily store user actions and data and are typically reset or deleted once the session ends. Instead, use faceted navigation as part of the website’s interface. It provides a consistent and structured approach to searching and filtering products, available to all users across all sessions.

Facets like brand and price are normally implemented across all categories, but other special facets should only be applied to particular product categories. For example, room types (living room, dining room, etc.) pertain to the furniture category but not apparel. Compare facet options on competitor sites and common keyword searches to develop the right mix of appropriate facets and filters.

If customers enter text to search for products, those user-generated values can hurt your search ranking if the values show up as URL parameters. Instead of this kind of free-for-all filtering, you might display predefined facet options like “red,” “black,” and “blue,” etc. to prevent the number of URLs from endlessly propagating, which makes the website harder to crawl.

Add subjective facet types

Thinking creatively about how customers browse can lead to discoveries of facet types that are less about the objective characteristics of products. For example, you might add thematic filters so customers can slice across the product catalog more subjectively.

A good example would be adding seasonal options (e.g., summer, winter), holidays, home life, work, etc. It’s a more casual way to browse the store. Facets for customer reviews and rankings are also possible, especially if the product has enough. 

Optimize facet display options

Where should facets appear? The most common location is vertically, down the left side of the page.

There are several ways to display facet filters, including links, checkboxes, dropdowns, sliders, and input fields.

For example, a checkbox may be appropriate for a product category and brand name, whereas a slider might be appropriate for a price range. Collapsible menu options let users expand and retract facet menus to taste for a more streamlined, less distracting user experience. A multi-option select feature can save them the hassle of repeated searches.

Customers can get annoyed when they select a filter option and nothing appears. To avoid frustration, boldface the available facet options and gray out any no-result facets.

Decide how to sort the facet values logically. For example, with brands, an alphabetical sort order makes sense, but for price and size facets, sort in ascending or descending order. 

Decide how facet values appear

Customers’ facet values should be distinguishable from unselected values. Here are various approaches:

  • Inline. The selected value displayed inside the facet itself. For example, boldfaced with a checkbox beside it.
  • Breadbox. Selected facet values are displayed in a rectangular “breadbox” region. The facet is presented alongside its value, such as “Holidays: Halloween” and “Size: XL.”
  • Breadcrumb trail. Selected facet values are strewn along a horizontal path. As the customer chooses more facets, they are appended to the trail along with an X symbol to permit the removal of each value from the trail.
  • Integrated faceted breadcrumb. This works a lot like the breadcrumb trail, but each breadcrumb value can be changed using a drop-down list.

Use standard encoding for faceted URLs

When faceted navigation filters are applied, additional information (parameters) is appended to the URL in the address bar.

There’s a well-defined way to encode characters within URLs to permit consistent interpretation by web browsers and search engines. Character encoding permits letters (a-z, A-Z), numbers (0-9), hyphens (-), underscores (_), periods (.), and a few symbols like colon (:), equal sign (=), and question mark (?).

Restricted characters like spaces and special characters must be encoded using the percentage sign % and a two-digit hexadecimal code (a base-16 numbering system). For example, the code for a space is %20. While URL encoding is a common practice, keeping URLs human-readable as possible is generally recommended to improve user experience and SEO.

Non-standard encoding of the faceted navigation URLs can make it difficult for search engines to understand the structure and meaning of the URL. This might take the form of non-standard special characters or custom delimiters to separate filter values within a parameter.

If search engines can’t interpret the URLs generated by faceted navigation, they might not index your pages or understand the relationship between different filtered variations, hindering your site’s SEO.

Tips for preventing and fixing faceted navigation problems

After understanding how faceted navigation affects SEO, consider these tips for improving your web pages’ indexing properties.

Use no-index tags

A no-index meta tag tells search engine bots which pages not to include in their index. Say you want the facet page with scented candles included in the index, but you don’t want to index a more granular facet such as “Under $20.” You can add a no-index tag to the page header like this: .

Although bots literally won’t index the page (a good thing), they’ll still crawl it, which can waste your crawl budget, which won’t help with reducing link equity dilution.

Customize the robots.txt file

You can mitigate crawl sprawl by disallowing some sections of your site. Add a “disallow” instruction to the robots.txt file that bots consider before crawling the site. It’s relatively easy to edit a robots.txt file, but remember that bots are not obligated to follow these rules.

Use canonical tags

Canonical tags appear within the head section of a webpage’s HTML code, not directly displayed to the user. A canonical tag tells Google that a set of similar pages has only one preferred version of the page. These canonical URLs are a good way to consolidate link equity, but don’t do much to solve the crawl budget waste problem. Plus, a search engine might disregard canonical tags, so they should be accompanied by other approaches.

Implement AJAX client-side navigation

AJAX (Asynchronous JavaScript and XML) is a set of web development techniques that lets web pages update content without reloading the entire page, making for a more responsive browsing experience. AJAX uses client-side Javascript that doesn’t generate a new URL for filtered facets when a user visits a page and selects more than one filter. This cuts down on internal linking.

Index long-tail keyword searches

Search demand can reveal long-tail queries, those more needle-in-a-haystack searches with lower search volume but higher conversion rates. Use an SEO analytics tool to identify popular keyword search terms, then select matching facet pages and make them indexable URLs.

The exact approach varies depending on how faceted navigation is implemented on your website. Keep the end goal in mind: you want to understand the most popular terms people search using long-tail keywords and how search engines crawl and index the resulting pages.

Faceted navigation FAQ

What is an example of a faceted search?

The Kicks Crew storefront offers a streamlined browsing experience. When selecting the Nike collection, users can use multiple filters—like product categories, genders, sizes, types, price ranges, colors, and release years—on the sidebar. Each selection, such as “Mens” under gender, allows for further refinement of facets by size, type of footwear, and price, dynamically updating the product list with each specification.

What challenge does faceted navigation present for SEO?

Faceted navigation is a boon for customers, but it also presents some SEO challenges, including duplicate content pages that can sap overall SEO strength, wasted crawl budget where search engines spend too much time crawling duplicate pages instead of the most vital content, and internal links that dilute link equity, where backlinks are spread among too many unwanted URLs.

What is the difference between faceted search and filtering?

Faceted search allows users to refine search results on an ecommerce site by applying multiple attributes like brand, price, and color. Filtering, while similar, typically involves narrowing down existing lists or categories on an ecommerce site without starting from a search query.

Source

Leave a Reply

Your email address will not be published. Required fields are marked *