How to Use pushState( ) with Infinite Scroll to Improve Organic Search Marketing Results

Author’s Note: This post was originally published on the Covario blog in November 2014.

What is the Issue with Infinite Scroll?

For enterprise level websites, true infinite scroll functionality can lead to poor user engagement. Think about how a user can’t get to those footer links when the page keeps loading more content. As a result, vertical infinite scrolling web designs on large scale sites have failed in the past and should be implemented with caution on goal oriented websites. However, infinite scroll presentations are becoming more popular because both designers and users like the mobile-inspired interface. As a result, modified infinite scroll techniques (either horizontal or limited vertical) are often used to present tabular content within one page. You frequently see this type of interface used to present product descriptions, specifications, user reviews, etc. on product description pages or to list products within a category in lieu of paginated lists.

The Challenge to Search Marketers

As search marketers, our challenge is to gain maximum exposure in search results for information presented in this manner while maintaining the user experience. That can be challenging when, for the most part, we’re actually optimizing a single page.

In the past the #! (hash bang) method of URL tagging was used in order to improve search engine indexing. Unfortunately, results have been far from ideal.

Today, standards for HTML5’s pushState( ) can be leveraged for producing more optimal search results. pushState( ) is part of the HTML 5 History API— a set of tools used to manipulate the browser history. The pushState( ) method enables mapping of a state object to a URL. The address bar in the browser is updated to match the specified URL without actually loading the page. In essence, different sections of content are assigned individual URLs that are consequently indexable by search engine spiders. Just like any other individual URL, unique page titles and Meta descriptions can be assigned to each object. Quartz, a digitally native news outlet has implemented infinite scroll with pushState( ) to perfection, presenting not only unique URLs but also unique Meta data.



Guidelines for Building Progressively Enhanced Infinite Scroll

By following the guidelines below, web designers can create infinite scroll websites that seamlessly load new, unique, shareable, and most importantly, crawlable URLs for search engines in the address bar of a browser, while not interfering with the scrolling experience. Here’s how to build an infinite scrolling user experience that’s also optimal for organic search:

  1.  Plan ahead before getting started. Designers, developers, and marketers should meet early on to determine KPIs and timelines. Including all stakeholders from the start is crucial to the ultimate success of the digital content in search.
  2. Start to build the page skeletons:
    • Build the individual pages with progressive enhancement (or graceful degradation) in mind to ensure individual pages can be accessed when JavaScript is disabled.
    • Make sure that each page (or section) can stand alone as a web destination and still present a good user experience.
      • If the user comes directly to this page, can they find the desired content without scrolling?
      • What happens if a user hits the “back” button?
    • Each page, or section, or object, should have unique content that is not repeated on other sections of the page.
  3. Determine search friendly URLs.
    • Each component requires a unique URL, the example below shows a possible combination of URLs for a tabbed product presentation:
    • Test that the content is directly available via the URLs for users without the same cookie set or user history. This makes the URLs referenceable and sharable via copy / paste and on social sharing platforms.
  4. If using infinite scroll for sequential pages, product list pages for example, configure the rel=next and rel=prev values in the <head> section of each URL. Note: pagination values in the <body> are ignored by Google for indexing purposes.infinite-scroll-2 infinite-scroll-3Source:
  5. Implement pushState( ) on the infinite scroll page for any user action that resembles a click or actively turning a page. In addition to updating the URL in the address bar, users will have the ability to use the back button on the browser to view previously loaded pages.
  6. Update your analytics tracking to record a new page view each time the address bar is updated with a new URL. This is an important step that is needed to correctly track page views per visit.
  7. Test. Refine. Restest.
    • Verify that the address updates when users scroll both up and down
    • If using series URLs (?page=123) verify that the UrLs that are out of bounds of the series returns a 404 response.

For details on the technical aspects of the steps listed above and to see a live example, visit Google Webmaster Central Blog. If you would like a deeper understanding of HTML5 pushState( ) and manipulating the browser history, I recommend spending some time at the Mozilla Developer Network.

Final Thoughts

As technology evolves at quicker speeds it’s important that the marketing team also understands evolving opportunities for search. Getting involved in the early stages of design and development of infinite scroll projects will help ensure maximum search engine visibility. The goal for all three groups is the same, to improve the overall user experience. Working together is the first step toward ensuring digital marketing success.