This post was promoted from YouMoz. The author’s views are entirely his or her own (excluding an unlikely case of hypnosis) and may not reflect the views of Moz.

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

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.

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

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.

Woj Kwas mentioned this website in this Moz’s Q&A. This website does not fit the technical definition of parallax scrolling but it does use the JQuery /Infinite scrolling technique. FlowerBeaty.com allows the user to scroll through the entire website and through multiple URL’s. It doesn't classify as parallax scrolling since it does not play with layers and velocities. I am mentioning it because it has received some visibility. It is not a parallax scrolling website since it does not have multiple layers that move at different velocities.

This technique is very simple and easy to understand. You start with a SEO web architecture and then place the parallax scrolling design effects on each SEO URL. Wanda Anglin wrote a tutorial on this technique here. I have not been able to find any other tutorials that mention this technique, if you do, please let me know.

xDawson (Yes this is my website, but I have yet to find a perfectly SEOed parallax scrolling website. If you do, please pin it here).

This website accomplished a very strict SEO architecture (definitely over optimized) and placed parallax scrolling on almost every internal URL.

It did accomplish the movement of layers at different velocities however it did not accomplish the “illusion of depth” or the “telling of a story”. Although it does qualify as parallax scrolling, it does not use parallax scrolling as the trend is today.

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.

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”

Do the solutions above solve the parallax scrolling SEO conflict?

I obviously believe they do, but I am interested in hearing the community’s opinion on this issue. I love the parallax scrolling design technique and am a strong believer in making websites beautiful and creative but also SEO-friendly. I hope this collection of SEO parallax websites and tutorials help you learn how to apply both techniques together. And remember, parallax scrolling is just a design technique that can be used on different kinds of web architectures.

In technique #1, the con that you mentioned can be easily resolved by using Analytics event tracking. Once a visitors scrolls through a new section of the site, you can fire a pageview event. The latter will adjust the bounce rate accordingly and will give you a complete picture of your Analytics.

Some people might be confused by this phrasing. Just to be clear, you can tie a pageview in GA to sections of parallax scrolling. You can also use event tracking, but pageviews are the more logical choice IMHO. "Event tracking" can be a lot more than just pageviews. (And at one time, people used page views like this before event tracking existed.)

Both are solutions to this problem - but how you would interpret the data in GA would be rather different.

Great post Carla and much needed. I'm a big fan of parallax but Its concerning the number of sites I have seen implement this without considering the implications that it can have on SEO until its too late!

Actually all Creative work or innovation in web design trends start without keeping in mind the SEO. Once the idea become grounded and implemented in realty the SEO community start thinking the prospect of search engine gain. You must agree with me that when a website is designed and graphics is implemented on a web page the designer do not think about putting a value in Alt tag but it is the SEO community that guide them to do this or they themselves do it.

In the parallax scrolling and 22nd century web design trends the same is applied, hence it becomes the role of Internet Marketing team to apply their skills to mix the innovation with the search engine optimization.

I am so glad you brought this issue up. I recently wrote an article about this specific issue. I suggest in the article that SEO be considered in the web design process based on the kind of client one has. I would really enjoy hearing your opinion on it. Here is an image that kind of summarizes the article.

Thanks for the nice comments. Yeah parallax scrolling is really cool. There is another new technique coming out called Multiplane Design with SVGs and CSS 3D Transforms. I hope when this technique comes into style they remember to keep SEO in mind :)

Hi Carla! Thanks for including our site! We definitely had a long discussion on what to do about the services page but since we aren't actively trying to get inbound traffic based on our services (more referral focused) we decided to go with what you see now.

Great detail Carla, these are so true and best for the game lovers to make their site within a Parallax Scrolling that helps them not to loose the SEO value for their site and if it will work same like you said it will be good to get the best things we need for the website and to attract the customers. Great informative post you have written that helps the SEO to know more about the Parallax Scrolling website.

Hey Carla, it's good to have someone cover the the most critical yet under-appreciated SEO topics these days. Honestly, I haven't seen a lot of SEO experts ranting on this important aspect of Web Design in a while, although we hear a lot of noise about why websites must be mobile-friendly and responsive across a wide range of handheld devices. In fact, this is something I spoke to Moz about on Twitter last week - I asked them when we could expect Moz Blog to go mobile so we can read and comment on this blog on the go without feeling awkward. They said it's on their to-do list but unfortunately, they couldn't say when this would exactly happen. I think even if we have entered the advanced Web Design (i.e Parallax Scrolling) phase, a lot of websites still need to make the important shift to being user-friendly (read mobile-friendly) as this is clearly affecting UX and conversions today. I think I would rather have a website address the issue of mobile-friendliness than Parallax Scrolling. Even websites like SEO.com are yet to address this issue. Thanks for the wonderful article!

very good article! Based on my experience with parallax you have to prepare in advance if you are re-building a website. It's a learning curve and it took me a few tries and a couple of angry customers until everything worked out from an seo point. Key is to build multiple pages and implement social media and of fours the onside seo but don't over do it. A one page parallax site would much more difficult to optimize.

One of the main reasons I initially stayed away from making parallax scrolling sites was due to its one-page design. You make some great points on here, maybe I'll start dabbling in them now. I think Time.com's new redesign perfectly embodies SEO friendly parallax scrolling. As soon as you read one article, it scrolls right into the next one, changing the url and everything.

I took a look at Time's site (haven't been there for awhile) and agree with you that they are changing the URL's dynamically through scroll however they are not using parallax. Parallax scrolling has to do with moving different objects (images, text, etc) at different velocities to provide an illusion of depth.Time does not do this. However, they did implement the "infinity scroll" technique very nicely and as this Google Webmaster Tool's article recommends http://googlewebmastercentral.blogspot.com.ar/2014... Here is a great example of parallax scrolling http://en.wikipedia.org/wiki/File:Parallax_scrolli...

Let me know what you think. We can continue via private messages if you'd like.

What an incredible post! I really like technique #1 and I've implemented it; however, I am really concerned about the likelihood that this approach gets flagged/penalized by search engines as it serves the content differently to the search engine than it does to users? For example, when a user visits the URL that points to a specific section of a longer page, that user is still able to scroll up or down to view the content above or below; however, with this approach, the search engine doesn't see or cache content above or below and only the one specific section. Wouldn't this be against guidelines? What if a human reviewer stumbles onto this? Can you please shed light on this matter?

Hey guys, I have a one page design and I was struck by a thought: Shouldn't it be Google's job to adapt to changes in website design, especially if those changes are 100% design oriented and not intended to hoodwink search engines into favorable results? Although my theme is paginated (I think, the designer says it is, but I'm a bit out of my depth technically to confirm this without exhausting too much time), it strikes me as odd that Google wouldn't adapt and essentially would require designers to conform. Given that the Internet is a visual medium, I feel like Google has in some ways limited the artistic develop of websites (or at least penalized those websites that don't confirm, whether indirectly, unintendedly or otherwise). This is an old post, so feel no pressure to respond! Thanks

Overall a good read, and I was just stumbling to find the best parallax website designs and get on your blog and couldn't resist myself to go through line by line. Businesses wants to create great websites with interactive elements to generate more engagements through.Meanwhile, they wants to optimize the web for higher rank on major search engine. Your post is a good help to boost parallax scrolling website performance.I just finished with a post about top 10 parallax website designs, maybe you would like to check the best inspiration examples: http://bit.ly/2ervAoQ

I have a (infinite scroll) solution that is nearly identical than the one given by Kevin, but it doesn't mention changing the document META fields. Would that be something to consider as well to implement SEO correctly?

Second remark: since the pages that are lazy loaded into the home page exist in my CMS and as a result make up the generated sitemap, what about using the canonical META to prevent duplicate content (eg. mysite.com#news vs. mysite.com/news)?

I have a (infinite scroll) solution that is nearly identical than the one given by Kevin, but it doesn't mention changing the document META fields. Would that be something to consider as well to implement SEO correctly?

Second remark: since the pages that are lazy loaded into the home page exist in my CMS and as a result make up the generated sitemap, what about using the canonical META to prevent duplicate content (eg. mysite.com#news vs. mysite.com/news)?

Like Carla said, you don't really need a manual for implementing this or anything. However, if you want more in-depth views on one of the techniques being used... please have a read at the blog post mentioned in this article.

Wow Carla, nice article!
I think it's pretty obvious that parallax scrolling is a trend on web design right now, but as you said most of the time this sites don't have in mind the SEO factor when developing. Is a great resource you put here with clues on how to proceed when designing or "SEOing" a site with this technique.

Thanks Federico for the kind words. There is a big gap in the industry between web designers and SEO specialist. Template Monster just published another article of mine about this issue http://blog.templatemonster.com/2014/03/25/seo-as-a-part-of-web-design-process/. Web designers design for browsers, screen sizes, UX, and internet speeds but they forget search engines. Glad you enjoyed the article

Thankyou Carla !! .. finally someone understands the pain people like me suffer , who are asked by clients to optimize single page parallax plagued atrocities that are so resource heavy no decently crawler would touch them with 10 foot pole.

stand alone HTML templates do have possibilities if you use the right tags effectively and i do agree with the push fields in jquery , you can additional mark it as simply ID's in the markup and it will develop unique identifiers / URL's for each section.

multipage Parallax sounds good for SEO, but performance wise i agree that would be totally uncool. as would be CMS based parallax themes , they are always poorly optimized for performance with their lousy loading times and other performance issues.

Hi Carla, this is a very helpful post and will share this to my team. We are undergoing a major site redesign and have a number of problems regarding SEO on a parallax design site. This will be very useful.

Very nice article for SEO guys or educate to them who are running with Parallax design, but I saw there are lots of digital marketing, web design firms are using such. then they don't care for search engine? only for visitors they are using.Those guys should keep in mind when developing a parallax scrolling and hope that article will help them to understand how and what should do.

You have identified the exact problem that the industry has at this moment. I talk about this issue all the time in my classes. SEO is not considered part of the web design process by many designers and they do not "design for search engines". More here - http://blog.templatemonster.com/2014/03/25/seo-as-a-part-of-web-design-process/

Great Post Carla; Parallax Scrolling websites provides a greater user experience so as an SEO’s we can’t ignore its importance but it is difficult to Optimize a Parallax Scrolling website for SEO. Thank you for your great suggestions I really like the way you have implanted Parallax Scrolling (from left to right) in your website xdawson.com along with different URL’s for “positioning” “advertising” “web design” etc.

I have not completely investigated the examples you have given (however I did check them). One of the ways to achieve this, as per my suggestion in this post, is to have the content being pulled in dynamically by client-side scripting (read: JavaScript). This has worked for me, and also works for various other sites I have helped with parallax.

By not having the content for the 'inactive' elements inside the HTML, Google will not show it within its cache; and tests have shown that the content will also not be found for these URLs (they will appear for the appropriate URLs).

In my eyes it is a good way of dealing with this, but must be met with caution. If you have a thin website (like my test with only 1 page, 3 URLs and nothing else); Google could throw a strop. If the parallax element of the website is just a part of a greater website, it should all be fine.

Yup..Parallax is the most craziest thing happening nowadays.. And I am sure it can be interactive and compelling for the website visitors. Wordpress do have certain plugins to make the website seo friendly though it will take a reasonable amount of understanding and efforts to maintain the seo value along with excellent one page architecture.

My concern, would it be possible to keep the e commerce websites on Parallax platforms , the ones having thousand of pages. I am not sure if it will be going to work for the ones having cart system. Though nothing is impossible in the online world but still doubtful.

I think parallax scrolling should be used sparingly as a design technique. Regarding ecommerce sites, I do not think parallax scrolling should be used everywhere but it could be used on the homepage or on a "promotion" page.

I am currently in the process of designing my website, i've read some good and bad things about parallax scrolling, but you've provided a lot of great resources which i can read and decide what i am going to do moving forward.