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
Each of those categories has multiple actual values: The color might be
green, etc. The material might be
Implementing this in a way that
wood in the material section is a link
/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
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.
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.
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.
- The pattern used is called PRG: Post, Redirect, Get. For this to
work properly, it is important that the redirect code is
302. This prevents the “Do you want to submit this form again?” dialog in the browser. Check out the source code.
- The code is not production ready. This is a proof of concept.
- This implementation disregards a few features that might be important
for a real live store:
- No sharable URLs: The user stays on the same URL all the time and sharing it with a friend would not share the current filter state. This is coupled with maybe wanting certain important filter combinations to be found and indexed by search engines.
- No support for the back button: Clicking it shows a different filter combination, but doesn’t actually change it in the session.
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.