pagespeed.io

Searchfilter Demo for Complex E-Commerce Applications

This is a proof of concept for creating a filter functionality on a website, without generating thousands of low-value documents that confuse search engine bots.

Instead of having anchor tags (<a>) that link to a new URL when selecting a filter, this approach submits a form, saves the new filter state to the user’s session, and then redirects back.

Example at a Furniture Store

Category URL: /tables
Filter categories: color, material, style, size, price

Each of those categories has multiple actual values: The color might be red, green, etc. The material might be stone, wood, or glass.

Implementing this in a way that wood in the material section is a link to /tables/material/wood, which itself has all the possible filter links again, leads to a huge number of combinations. Chose a color and style and you will end up on /tables/material/wood/color/red/style/modern. And this doesn’t even account for the order that filters were clicked in or the possibility of selecting more than one value at the same time.

Search engine bots have to follow all those links to all those documents. And they will give up.

A Solution

▸ Take a look at the demo here.

Clicking any of the filter values adds it to the current selection without leaving the page. The text to the right of each filter value shows the next state if this filter is clicked. At the top you will see the current filter state.

Important Notes

The source code for the demo can be found here: github.com/pagespeed-io/searchfilter. Note that it has been slightly modified to be integrated into the pagespeed.io domain. The code on GitHub is a standalone version.

So this demo isn’t complete. What does do however is show a path to a better implementation for your own store. The limitations above can be solved by a great UI and other custom features implemented on top of the PRG pattern.