Are Parallax and Infinite Scrolling Hurting Your SEO?

, August 6, 2014

Integrating SEO in Parallax and Infinite Scroll WebsiteCan you imagine a car without a steering wheel or a stereo without speakers?

That’s what many parallax and infinite scrolling websites are like when they are designed without Search Engine Optimization (SEO) in mind. They are incomplete.

That’s why I’ve developed this little guide for integrating your SEO to your parallax or infinite scroll one-page site. You can skip the painful learning curve, avoid the trial and error, and hopefully skip over all the frustrating challenges.

But before we start, let’s clear up some technical terms so we’re all on the same page.

What are Parallax and Infinite Scrolling Techniques?

Parallax Scrolling Technique is a special scrolling technique used in web design to make the background images move slower than the content in the foreground, thus giving the users a 3D type feel. This technique is considered one of the hottest trends in web design right now.

Infinite Scroll Technique is essentially pre-fetching content from a subsequent page and adding it directly to the user’s current active page. Google has published a detailed support blog post for advanced webmasters that highlights search-friendly recommendations when using the infinite scroll technique.

google-infinite-scroll-page-image
 

According to Google, ”infinite scroll page is made “search-friendly” when converted to a paginated series — each component page has a similar <title> with rel=next/prev values declared in the <head>.”

3 Main SEO Challenges of One-Page Parallax Design and Infinite Scrolling Techniques

1. On-site optimization is restricted to only one page. A website designed as a long scrolling one-page site has unfortunately only one meta title, one meta description, one set of structured data markups and one H1 headline; thus, less opportunities to rank for multiple pages and keywords on the search engines results pages.

This will negatively impact the rankings of the site. Search engines rely on the metadata and the keywords contained on the pages’ content to return the proper information about it on the search results pages (SERPs). In one sentence: the more pages you have, the more opportunity your site has to be found on the search results pages for different targeted keywords.

2. You can only optimize the page for one main keyword. Search engines prefer when each page of your site focuses on a specific main keyword (topic) so their bots can crawl each page and determine what the page is about.

3. Page load time can be affected significantly on parallax-designed sites. Since 2010, search engines added “site speed” to their long list of ranking factors that can affect a site’s performance on the SERPs. The longer the page load time, the lower the site ranking on the SERPs.

Solution Based on a Combination Approach

This solution is mainly based on a progressively enhanced, Ajax-based approach. The idea is that the different “sub-pages” (meaning the sections of the long scrolling page) are loaded dynamically via Ajax when the users reach it by scrolling the page or get to it by clicking on a navigation element. At the same time, the URL address on the widow browser is “changed” in such a way that the new “sub-page” has a new, unique URL.

So how can we accomplish this?

Divide your homepage into multiple sub-pages by dividing the content of the long scrolling one-page into different sections that each represents an existing HTML file (page).

Example: A homepage with three different sections related to three different existing HTML files (pages). These pages should be keywords-optimized with their own metadata and structured markups etc.

  • Keep the URLs to those sub-pages on your homepage then make use of Ajax scripts and clearly-labeled navigation elements to dynamically fire up the URLs in the users’ browser when they get to the specific section that representing the sub-page.
  • Make good use of the rel=canonical tag to avoid duplicate content between the sub-pages’ sections on the long scrolling one-page and the page file from where the content of these sub-pages is being called from.

JavaScript and jQuery Tutorial

Here is a tutorial on how to design a one-page homepage with parallax scrolling technique with respect to best search engine optimization (SEO) practices.

Using this solution offers more flexibility in terms of design and on-site optimization. That’s why I consider it as my preferred solution right now.

Part 1. Slicing your homepage into multiple sub-pages and calling their content

1. Decide which sections of the homepage design will have its own URLs by dividing the page’s content appropriately. Imagine having one page with multiple sub-pages on it looking like panels (sections).

2. Add and “turn on” jQuery in your index file by adding the following code between the tags in your index.html file:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>

3. Create and add an ID to the content snippet on the page file that you want to load from the homepage (index.html) using jQuery tags:

For example: <p id=”servicepage”>Content that should be displayed on the long scrolling “One-Page” Design Goes Here</p>

4. Now what we have to do is tell jQuery to load the content of the sub-page (e.g. service.html). To do that, you have to add the following code before the closing tag on your index.html page:

$(‘#servicepage’).load(‘service.html’, function() { //alert(‘Load was performed.’); });

Basically, the code above will insert the content of your service.html file that you specified between your paragraph tags <p id=”servicepage”></p>.

Part 2. Changing the URLs of the sub-pages in your users’ browsers window

To accomplish this, you will have to add some JavaScript code to your one-page scrolling site that:

1. Ties a listener to the main navigation element that scrolls down to a specific section (sub-page).

2. Detects when a given section (sub-page) gains prominence in the visible window, and update the browser history when it happens.

3. Listen for the URL changing, when the page is (re)loading or when the users hit the forward/back buttons. When this happens, you should use a script to trigger the appropriate section view.

Important: Google and Bing have both indicated that the pushState() JavaScript method is the preferred way to indicate that an Ajax load should be indexed and treated as a unique page.

Also, on the Bing Webmaster Blog: “This pushState function allows web developers to change the entire display URL — with the exception of the domain, port and scheme (http://) portions — using JavaScript. It also allows web developers to modify the page title and the session history information. This ability is a game changer for AJAX SEO.”

Technical Considerations

If your users have JavaScript disabled, they should still click through to the sub-pages. You can even make these pages dynamic, so elements like the header and footer are shown only if the page is not accessed via an Ajax call.

Implementation Results

Once you implement and integrate all the coding necessary and restructured your URLs accordingly, you should end up with separate files for different content of your site. All these files are SEO-optimized for a specific keyword you want to rank for, and they have their unique live URL address, metadata and structured markups, etc.

Remind me again why we have to keep the sub-pages URLs live? Well, because we can optimize the file with metadata and structured markup that the search engines can display on their SERPs. And when users find the URL on the search engines and click, they should get to the specific part where the content is sectioned in the main long scrolling one-page.

By implementing this you’ll be able to use the one-page parallax and infinite scrolling design, and at the same time still have multiple pages in a form of sub-pages inside the main one-page site design. Thus, you’ll have multiple URLs and be able to use specific keywords in multiple headings and metadata throughout your site.

Case Study of a Well SEO-Optimized One-Page Parallax Scrolling Site

Here is a really good example of what can be achieved when this technique is well-implemented:

1- Visit the following website at http://flowerbeauty.com/ (Drew Barrymore’s Makeup line).

Case Study: SEO in Parallax Design One-Page Website
 

2- Look what happens to the URL on the browser when you start scrolling down or if you click on the top horizontal menu, and mainly when you scroll down.

3- Just copy one URL, open a new browser window and paste it in the address bar … What happens? Well, you’ll land directly on the specific section that’s related to that specific URL.

4- Now, open Google.com and paste this in the search box: site: http://flowerbeauty.com/

Look how each sub-page has its unique meta title and description. They could obviously optimize the metadata to make them catchier and keywords-optimized. But at least they did a great job with their SEO structure, and they built a nicely designed one-oage scrolling site!

UX & SEO: Let’s Be Realistic

Design and SEO techniques constantly evolve alongside the users’ online behaviors and search engine capabilities. So keep in mind there are a number of pre-built jQuery libraries that allow for the different functionality described on the tutorial above, which is why you have to do your own due diligence in this regard.

Conclusion

That does it for this advanced SEO post. Congratulations — You just learned a simple technique to properly integrate SEO into a parallax or infinite scroll design site!

However, a word of warning: just knowing how to integrate SEO into your new, trendily designed site isn’t going to increase organic traffic to it. You need to take action on what you just learned. So, I strongly encourage you to return to this article as often as needed, review the steps and then start implementing them right away. The sooner you take action, the sooner you’ll get higher rankings and increased potential revenue for your business!

Any tips, questions or comments you’d like to add? Let me know below!

 


 

Amel Mehenaoui is an Inbound Marketing Strategist who “eats, breathes and dreams” advanced SEO on a daily basis! Her passion is to share her expert tips and advice about digital marketing on her SEO blog, which is dedicated to helping small business owners, entrepreneurs and professionals expend their knowledge of web marketing to grow their profits and expertise. Follow her on Twitter.

  • Abby Bird

    Great post. We have been wondering about this very thing for our site http://www.BurdandCo.com. Thanks for all the info. I especially appreciate the example of a website “done right.” It helps make it more clear. -Matt and Abby

    • http://www.SeoAbout.com Amel Mehenaoui

      You’re welcome Abby. I’m happy to see that you found the information useful. Showing a “done right” website is really essential when we want to explain how we can reach a harmony and balance between technical SEO and a website designed with Parallax technique…it makes it clear that indeed technical SEO can co-exist in harmony with Design!
      Thanks for your comment.

  • Martin Day

    Search engine guidelines generally state that the objective should be to build websites that improve the visitor experience. This article shows a case in point where that advice is found to be wanting because SEO dictates that the best user experience may be detrimental to their search ranking. What needs to change is not the way websites are built but the way search engines determine quality.

    Bounce rate has always been a nonsensical indicator as to a websites quality, you can have a website that has a well thought out design where the information the visitor wants is displayed prominently on the first page, and another where the visitor has to hunt through several pages to find the information, why should the former be penalised for having a higher bounce rate?

    Now scrolling websites are fashionable the metrics that were used to determine quality that were already suspect are even more suspect now.

    • http://www.SeoAbout.com Amel Mehenaoui

      I agree with you Martin on the fact that what needs to change is the way search engines determine quality. But the good news is that they are constantly improving the ranking factors to make that happen. Search Engines are putting the emphasis more and more on the users’ experience. So from our end we should make sure that our website is built on a solid SEO structure.

      Despite all the Algorithm changes and updates, there are in fact some key fundamental SEO pillars that are very essential to implement in order to get a well built site, no matter what technical design we decide to go with.

      So to summarize: we have to find the right balance to make both the users (UX) and the search engines (SEO) very happy and content. My tutorial was aiming, in a humble way, to accomplish just that.

      Martin, the Bounce rate indicator always depends on the goal of your page. So I do agree that on your example, where the information the visitor wants is displayed prominently on the first page, this page should not be “penalized” for higher bounce rate. But did you know that you can actually make changes and adjust, yourself, the bounce rate of your website by adding some script to your Google Analytics tracking code?
      When making the changes in the customized GA tracking code of that specific page, the bounce rate will only be triggered when for example they spend less than 1or 2 minute on that page (using setTimeout() method). I can’t go in more details in here, since it will require an entire advanced Blog post just for the Bounce Rate topic! But at least now you know that you can adjust the bounce rate for your one long scrolling page.

  • http://truestorieswithgill.com Gill Andrews

    This article is a perfect example on how complicated things can be explained simple and clear! Although I’m only remotely related to web development, I absolutely get the point and the main steps. I’m sure it will be beneficial to a lot of people who maybe even had no idea that long pages can be SEO-ed this way.

    • http://www.SeoAbout.com Amel Mehenaoui

      Making the technical steps as simple as possible was my main goal with this article. So, Gill the fact that you absolutely got the point and the main step even though you’re not a web developer shows that I indeed reached my goal! Thanks for your feedback. You just made my day