Wakefly BlogThe Challenges of Long Scroll Pages & Single Page Applications (SPA)

The biggest challenge of Long Scroll Pages or Single Page Applications (SPA) in design, is the concept of not foregoing functionality for design. In my experience, when someone historically has chosen the SPA, they have also chosen to push the limits of design capabilities in lieu of maintaining the commonly accepted best practices that allow SEO to simplify the page themes for the spiders. That is until Google made the decision in 2012 to begin allowing a certain type of anchor to begin to cache and thus segment the SPA into manageable segments from an SEO perspective.

The next biggest challenge has been finding developers that understand how to appropriately develop the functionality to allow the segments to cache. As you have probably read in Matt Wiseley’s earlier blog posts (SEO Considerations for Single Page Websites, A Long Scroll Case Study), it is not as simple as it may seem.  The development is very labor-intensive to understand how the .js pulls the information into a scrolling page and allows the design to appear while you still maintain the functionality.  Once you have accomplished that step, you may believe this is as far as you need to go, but one more step is necessary to ensure the SPA has the ability to be tracked by your SEO people. This is done simply by educating your SEO team on how to translate the development when looking in your analytics platform.  The following are the 4 key elements to know in order to optimize your SPA for the search engines.

1. Be sure the developers knew what they were doing.

The developers need to have implemented the JavaScript that calls each segment into the SPA through page segments created by the hashbang (#!), but also have established the JavaScript to create a query string using the escaped fragments substitution (Explained Here by Google Developers) that will allow the segments to cache in the search engines.  The proper implementation of this practically requires the creation of the page twice in order for the segments to existing in a crawlable implementation of .js, but also to assemble those elements into the long scroll page.  Do not anticipate that these are simply modified, anchors. You will find that many developers are not as informed as they should be in the proper implementation of this concept when they attempt this design.

2. Inform the SEO team and the client about how to read the analytics.

Most SEO practitioners will use analytics platforms to look for the performance of pages based on the URL as it appears in the browser. With the use of the Hashbangs to segment the SPA, the SEO team must instead look into the analytics for the post substitution URL.  In other words, when the Hashbang (#!) is used, the browser will still display the URL with the hashbang in place (example: http://www.example.com#!news), but will actually cache the URL as the one using the substituted query parameters (example: http://www.example.com?_escaped_fragment_news).  It is for this reason that the SEO team must look in the analytics platform for the escaped fragment query string in order to get the page metrics for that segment (think UTM parameters, but for the performance of page segments, not campaigns).

3. Update the elements of each segment according to SEO best practices.

If each segment is allowed to cache, then the SEO team needs to adjust each element that would normally be assigned to a page for each segment that is being created.  Clarifying the segment theme is just as important as the work you would normally do to clarify a page, so assign a title, description, and all other code-based attributes that do not require the spiders to make judgment calls on what is appropriate traffic to send to the page.  In other words, treat each segment with the same on-page work that you would do in any other site, but be sure you realize that this is all being done within a .js environment and those limitations are diminishing but are not gone yet.

4. ALWAYS think in order to achieve the best UX.

Remember, the reason we are doing SEO is to drive the best user experience (UX) from search intent through the completion of multi-page site visits, engagement, and conversions. Do not let that get lost in how you deal with the segmentation of the pages.  Having a site that uses a few long scroll pages will only benefit you if you understand that people will still want to find things on your site. They do not want to arrive on the top of a page that doesn’t immediately have what they were looking for in the resolution they land on.

• Be sure to implement design elements that encourage the scroll in whichever directions exist from their arrival on the page. Consider navigation items that follow them along however far they decide to scroll.
• If the site goal is lead generation, be sure the conversion point exists at any given point where your visitor could decide to convert. Utilize CTA buttons and place them at the forefront to increase conversions.
• Internally link using the same concepts as the landing page segmentation. Send the user directly to what they are looking for as opposed to the general page (so pay attention to use the escaped fragment as the link).

If you have any questions regarding the most effective method of leveraging this design trend without losing functionality, reach out to someone who can show you what they know instead of just telling you the buzz words.  I have seen failed attempts at SEO for SPA in every form, from improper implementation of hashbangs as modified anchors inserted via script to the end of any displayed URL, to complete disregard of the functionality by repetitively limiting the content on a long scroll page to what would normally be on a standard webpage.  You will save yourself a lot of headaches and you will likely end up with a usable site for your business and for your visitors in the format you want as opposed to a dysfunctional yet beautiful work of digital art.