Parallax Scrolling is one of the latest trends in web design, yet most parallax scrolling websites are not SEO-friendly. I have observed this trend on sites like Awwwards, theFWA and many more. I have also observed that there are many articles that say parallax scrolling is not ideal for search engines. Parallax Scrolling is a design technique and it is ideal for search engines if you know how to apply it. I have collected a list of great tutorials and real SEO-friendly parallax websites to help the community learn how to use both techniques together. There appears to be lots of confusion in the community and I want to clear it up.

Parallax Scrolling – its origins and definition

Parallax Scrolling was originally created for the video game industry as a “special effects” technique to give the audience an illusion of depth. According to Wikipedia, parallax scrolling is

Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth

Creative Bloq

One big web design trend of the moment is parallax scrolling, which involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page. It can sometimes be overwhelming, but when used sparingly it can provide a nice, subtle element of depth.

Observations

  • It is defined as a design technique or trend.
  • The definition of parallax scrolling talks about a technique that tries to accomplish 3D-like effects.
  • It talks about moving layers at different velocities
  • It does not talk about one page web design or web structure.

Parallax scrolling and web design – current industry trends

Parallax Scrolling is in style these days. The trend began in 2011 when Ian Coyle created the very first parallax website for Nike “Nike Better World” on 2011. Here are several articles mentioning web design trends for 2014 and they all mention parallax scrolling. Also note that the trend was strong in 2013.

Most parallax scrolling websites are not SEO friendly

I claim above that most parallax scrolling websites are not SEO-friendly. Where do I get the data to make this claim?Note just because most are not SEO-friendly does not mean they cannot be SEO-friendly.

Here are several samples

Most of these examples of parallax scrolling websites have one-page web architectures. Since most web designers apply parallax scrolling to one-page web design, there is a misconception in the industry that parallax scrolling is restricted to one page.

Ok ok…so how does one do a parallax scrolling website that is SEO-friendly?

How to create a parallax scrolling website for search engines?

Before designing a website with parallax scrolling and for search engines it is important to keep in mind the following things;

  • Parallax Scrolling is a design technique that moves different layers of content, images or backgrounds at different speeds.
  • Regular onsite SEO requirements like schema, address in footer, etc. still apply. Remember, start with an SEO architecture, and then apply the design to the architecture.
  • Parallax Scrolling is not ideal for mobile version. It makes the website to heavy. Remove parallax scrolling for mobile views.

There are three main techniques. Here are some real examples of parallax scrolling websites that are SEO-friendly or almost SEO-friendly.

Technique #1 – “One page” web design with parallax scrolling using Jquery

iProspect’s Senior SEO specialist Kevin Ellen created the following tutorial - Parallax Scrolling and SEO How to use JQuery to SEO your website.

This technique addresses the issue of one page web designs that use parallax scrolling and basically tweaks it for search engines. I am mentioning this technique first since there are so many one page parallax scrolling websites on the market. Please note that Kevin’s sample “Parallax SEO” site is not really parallax since it does not move different items at different velocities, however I am mentioning it because his technique can easily be applied to most one page parallax scrolling websites on the market.

Google Webmaster recently published this article Infinite Scroll Search Friendly. It addresses the same issue that Kevin did in his article but with more detail. I highly recommend reading both. You should be able to fix any one page parallax scrolling website with both these sources.

The solution’s use the help of jQuery’s ‘pushState’s’ functionality. This allows a parallax scrolling page to be ‘cut’ into various sections which can be identified in the SERPs, each with their unique URL and meta data. As a result, one single page to be indexed multiple times, for different content.

Pros – It is a good fix for an existing one page parallax scrolling website that needs to SEOed. It is a good technique for small websites that are not interested in hard core analytics.

Cons – Bad for analytics. I suspect bounce rates may be higher on these kinds of sites as scrolling through the website may occur rather quickly and to a software program it would appear as a quick enter-exit per URL.

Technique #2 – Multipage parallax scrolling website on SEO architecture

Pros – Good for analytics in that each URL has its own content, easy to implement

Cons – Loading times can be a problem with this technique as too much parallax scrolling may make browser loading time longer than it should be. It may be a bit too “interactive”. Designing each for each URL can be expensive and keeps the design rigid.

Recommendations - Use parallax scrolling sparingly throughout the website instead of on every URL. Reduces loading time and makes the website more natural. It also will reduce design expenses and lets the website be a bit more flexible.

Technique #3 – Parallax Scrolling on homepage and regular SEO architecture

Another technique is to place parallax scrolling on the homepage and then include other URL’s that are SEO-friendly, but do not have parallax scrolling.

Pros – Keeps the website light and flexible. It is easy to design and more affordable than technique #1.

Cons – Not maximizing creativity or making the website super “interactive”