Are Parallax and Infinite Scrolling Hurting Your SEO?

Can 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.

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:

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).

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!

Innovative SEO services

SEO is a patience game; no secret there. We`ll work with you to develop a Search strategy focused on producing increased traffic rankings in as early as 3-months.

A proven Allinclusive. SEO services for measuring, executing, and optimizing for Search Engine success. We say what we do and do what we say.

Our company as Semrush Agency Partner has designed a search engine optimization service that is both ethical and result-driven. We use the latest tools, strategies, and trends to help you move up in the search engines for the right keywords to get noticed by the right audience.

Today, you can schedule a Discovery call with us about your company needs.

Source: