Every now and then, an eCommerce client comes along to Impression with a more unusual technical SEO related issue, something that goes beyond the remit of standard SEO auditing.
Not only does this contribute to the “no-two-days-are-the-same” agency ethos, it also allows for more interesting topics to be shared on our blog. Sharing is caring, after all.
Our co-founder, Aaron Dicks, did exactly this back in February 2016 when he and I solved the query of creating custom canonical tags via Magento for a large online retailer of ours. He rounded this off with a detailed write-up on our last year.
Fast forward to 2017 and an equally as interesting topic has again arisen, this time from another national eCommerce brand; how to use pagination and AJAX for a more SEO-friendly approach to infinite scroll.
This particular client implemented infinite scroll throughout the entirety of their category pages, and at first glance, why not? Infinite scroll can be great for usability as it avoids the user scrolling through endless paginated component pages which may serve to disrupt their journey.
However, the problem in this instance was not how the user was perceiving the infinite scroll, rather, how Googlebot was perceiving it.
In the context of infinite scroll itself, Google has even published some documentation on how to best integrate the functionality into your site for better Googlebot interpretation.
What was our objective?
Put simply, to improve crawl efficiency and the distribution of link equity.
Even before finding errors regarding infinite scroll, our client was an avid user of “nofollow” tags across their internal linking structures – 14K nofollow links, to be precise.
By simply removing these tags thus changing them to “follow”, we were immediately able to visualise more internal link equity flowing through the site.
Once we worked with their developer to solve the “nofollow” issue, we came across further crawl efficiency problems with OnPage.org reporting 4.5K pages with no internal links.
Once the Element Panel opens, head to the top-right of the window and select the three vertical dots. From there, you need to click Settings on the drop down menu.
(Remember, this is isolated to one category page alone; multiplying the issue to all their category pages results in several internal links not being visible to Googlebot.)
Uncrawlable links mean diluted link equity which, in turn, means weakened crawl efficiency – sad times for Impression SEOs and our clients alike! ?
At this juncture, we needed to work on implementing an SEO-friendly infinite scroll solution. Here’s how we did it.
Step 1 – we implemented HTML pagination
Our first step involved implementing conventional HTML pagination, including the logic to build the component pages.
Once the pagination was built, we tied all the component pages together using Google’s rel=”next” and rel=”prev” directive to clearly outline the relationship between all paginated content. Further documentation on rel=”next” and rel=”prev” and Google’s general recommendations on pagination can be found here.
As a final piece of house cleaning, we also added self-referential canonical tags to all component pages.
Step 2 – Implement pushState
From there, we implemented a “listen” event to where the user would scroll to the end of (what would effectively be) page 1.
At this point, page 2’s products were pulled in while using HTML5 to push the new paginated URLs to the browser address bar. To determine whether this has been correctly installed, you will be able to visibly see the URLs change in your browser window, i.e. /category-page/page/2, /category-page/page/3.
To round-off the implementation, we also needed to consider tracking this behaviour via Google Analytics. Here, we used GA push a virtual pageview to the paginated URLs, as below:
ga('send', 'pageview', location.pathname+”/page/2/”);
John Mueller assembled a useful example of how all this fits together here: http://scrollsample.appspot.com/items
What’s left is a fluid user experience and an implementation that’s SEO-friendly, allowing all your content to be crawled regardless of where it lies within the infinite scroll.
If you’re a business owner whose site uses slightly more advanced functionality and you’re wondering how this impacts your SEO, feel free to get in touch with Impression’s technical SEO team today.