SMX Overtime: 3 steps to make e-commerce faceted pages crawlable and optimizable

SMX Overtime is part of our SMX speaker series from SMX presenters who answer questions from attendees on a variety of topics.

Last month I spoke at SMX West in San Jose, CA with Tony Verre, vice president of e-commerce at The Integer Group, about refining and optimizing search on e-commerce sites. At the end of my presentation, “SEO For e-commerce category, product detail pages,” there were a number of questions from session attendees but this is one I wanted to follow up with because the answer is not so simple:

Q: I agree that additional unique content should be added to faceted/filtered pages, but most e-commerce platforms do not allow for this out of the box because these pages do not technically exist from a CMS perspective. What solutions have you used or seen other companies use to solve this problem?

A: The only way to add unique, crawlable content to AJAX-generated category pages created by faceted navigation is to develop custom code. There is no one-size-fits-all solution because every e-commerce site is implemented differently, even when they sit on the same e-commerce platform. These three steps, however, will set you and your developer on the right path to create a solution for your unique site.

1. Make Your Faceted Navigation Links Crawlable

Google only recognizes links created with an anchor tag and an href attribute paired with a URL as actual links in its initial crawl, like this:

<a href=“https://SampleURL.com”>Anchor Text Here</a>

Any links created with a span or div tag – or any other way other than an anchor tag with an href and URL – will not be immediately crawlable. If your links aren’t crawlable, the other two steps will not help you.

2. Use pushState to Make Faceted Pages Indexable

Before you optimize a faceted navigation page, which technically doesn’t exist in your content management system, you need to give it a URL that search engines can index. Without a unique URL, there’s no individual page for the search engines to rank for each individual faceted navigation page. Use pushState to change the URL that the address bar displays when the page loads, which gives the search bots a unique URL to index that includes user-friendly keyword optimization.

For example, let’s say that SampleJewelryStore.com as a category on its site for rings, and offers a filter for “gemstones.” That filter includes facets for diamonds, rubies, sapphires, and pearls. When a customer chooses the diamond facet, and the product selection narrows to show only diamond rings, pushState would fire to insert the URL https://SampleJewelryStore.com/rings/diamonds/ into the address bar.

Formally called window.history.pushState(), this JavaScript function is part of the ‘HTML5 History API’. It consists of a single line of code with three simple parameters: window.history.pushState(data, title, url). 

With pushState you get the usability benefits of quick AJAX filtering, as well as the crawlable URLs that search engines need in order to rank your content organically. In addition, because it doesn’t require any additional server calls or page loads, there is no extra page load time.

Opinions expressed in this article are those of the guest author and not necessarily Search Engine Land. Staff authors are listed here.

About The Author

Jill Brown

Jill Kocher Brown is a 14-year SEO consultant, author, speaker, and editor. She loves data-driven decisions, scalable SEO strategies, e-commerce and technical SEO. A veteran of five agencies and in-house twice, Jill can be found these days at digital marketing agency JumpFly, Inc., where she's pioneering the SEO practice.