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
The web design industry defines parallax scrolling as
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.
- Designing A Website For 2014
- Website Design Trends In 2014: Clean And Simple Rules
- Web Design Trends to Watch in 2014
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
- 20 Best Websites with Parallax Scrolling of 2013
- 35 great examples of parallax scrolling websites
- Awwwards Parallax Websites
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.
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.
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.
Technique #2 – Multipage parallax scrolling website on SEO architecture
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.
This website placed parallax scrolling on its homepage and on one internal page. Notice the homepage and the services page have parallax scrolling.
Pros – Good for analytics and easy to design and implement
Cons - Does not have a 100% SEO Architecture. Notice the Services page did not divide up the topics of SEO, PPC, SMM, and Content Marketing onto unique URL’s with unique title and meta descriptions.
Recommendations – Divide up the content on the services page or use Jquery fix (see technique #2). Add unique titles and meta descriptions.
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”
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.
This article was co-authored with Kevin Ellen from iProspect UK. You can find more information about Kevin here. https://twitter.com/Kevin_Ellen and uk.linkedin.com/in/kevinellen
Hi Carla,
Very informative article, thank you for the 3 techniques.
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.
Hi BruLee ( Sorry I do not see your name on your profile)
Thanks for correcting me. I know a little Google analytics so I appreciate the information
Cheers
Carla
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 article! Awesome post!
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!
I like parallax scrolling but only few people utilize this in a good way. Most of the websites I opened with parallax scrolling hangs a lot. Only few sites work well.
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.
Hats off to you for this post.
Regards
Sasha
Hi Sasha,
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.
https://blog.templatemonster.com/wp-content/uploads/2014/03/Recommended-Web-Architectures-based-on-Client-Type-SEO-Copy.jpg
Here is the actual article. https://blog.templatemonster.com/2014/03/25/seo-as-a-part-of-web-design-process/
If you want we can continue the discussion over PM (private message) or email.
Thanks..
Thanks Carla for the article (I never knew the name for this technique until now). I kept thinking about Angry Birds while reading it...
Hi Kevin,
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 :)
Yeah, interesting idea. But actually - should not rather want them to _not_ keep SEO in mind? ;-)
Hi, Carla. Nicely organized post. I think you have something for everyone depending on what their tradeoffs are for SEO, speed, usability, etc. There are always tradeoffs!
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.
Hi Dana,
Thanks for sharing your site with me last year on my last Moz post. I totally understand you when you say you weren't actively trying to get inbound traffic. Too many RFQ can be a problem too.
Thanks
Carla
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.
Have a look this Parallax website.. ibseotech.com/
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!
Thanks for the good article. :-)
My question is... has anyone developed software program that is WYSIWYG to design Parallax Scrolling websites?
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.
Very Nice post....!! Looking for the same solutions since a long time that how to apply things effectively for parallax scrolling sites. This post help me alot and many doubts clear after reading this
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.
Hi Ryan,
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 https://googlewebmastercentral.blogspot.com.ar/2014... Here is a great example of parallax scrolling https://en.wikipedia.org/wiki/File:Parallax_scrolli...
Let me know what you think. We can continue via private messages if you'd like.
Thanks
Carla
Hi Carla,
Very helpful info, becouse i'm about to begin SEO for Parallax scrolling website.
Thank you for posting :)
Thanks Carla, I really enjoyed this post along with your other contributions on Parallax sites. This will definitely come in handy as we seem to be getting involved in a lot of these projects now.
Hi Chris,
Thanks for the nice comments Please feel free to contact me if you need help with any parallax scrolling SEO issues.
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?
Thanks and keep up the AMAZING work. I love what you do!
Hi there,
Great article. I always wanted to have a parallax website, but wonder how to tackle with SEO. You article really helped me in this regard.
Thanks for sharing your professional experience.
relly a nyc post covers my doubt
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: https://bit.ly/2ervAoQ
I know this is a little old, but it still makes good sense. Thanks.
Hello, I need an info.
If the site page is in parallex design, how will the site links show on Google search?
As site links has certain algorithm with the right site structure/navigation.
So if the site links are the objective, is it feasible to have parallex site/pages.
Thanks in anticipation.
Good article that most industry "experts" don't venture into...
Thank you for this nice article, Carla.
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)?
Thank you.
Thank you for this nice article, Carla.
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)?
Thank you.
Nice post. There's a lot of parallax websites right now and its very important knowing how to optimize them.
Thanks for collecting some of the web's greatest resources for parallax scrolling and SEO, Carla. This is a good post to bookmark!
excellent information Carla. Great post!
Do You have some kind of "manual" how to do seo for that type of websites? Step by step?
Hi Krzysztof,
Unfortunately I did not create a manual but I really don't think you need one. The tutorials are pretty clear. Regarding my site, you can find more info on how to do a multipage parallax scrolling SEO site within this article https://moz.com/ugc/website-design-wars-seo-agencies-vs-web-design-agencies-worldwide-trends. Please read the information below this header " Our Guidelines for accomplishing great design and SEO".
If you need anymore help, please feel free to send me a private message via MOZ.
Thanks
Carla
Hi Krzysztof,
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.
If you have any questions after that, I am more than happy to help!
Cheers,
Kevin
Thanks, I'll do that.
Great article Carla. Thank you!
Great post Carla, very timely. Now my takeaway is that Parallax is not without its trade-offs.
If anyone things this is not so, please chime and let me/us know of your solution
Hi Vadim,
Thanks for the nice comments. Yes I do agree that parallax scrolling has some issues but so does almost every design technique. Responsive Web Design isn't perfect and so forth.
Thanks Carla for this article and for all the information you're putting out there in the web!
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 and keep writting about desing and SEO!
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 https://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
Thanks everyone for the nice comments.
Carla
Very interesting post, interactive sites of any kind are always a tough nut to crack for SEO. Will definitely look further into the resources provided. Thanks for the insight.
Hi Simon,
Thanks for the kind words. If your looking into other resources about SEO and Interactive sites, I think you might enjoy my other Youmoz post. It addressess that issue https://moz.com/ugc/website-design-wars-seo-agencies-vs-web-design-agencies-worldwide-trends
Thanks Carla
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 Waqas,
I am glad you enjoy the post. I agree that most CMS based parallax themes are poor optimized. Our site is custom but it was built with Wordpress.
Thanks Carla
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.
Awesome Article Carla. This article come out at the right time. Because I want to make my website in parallax scrolling technique. Thank you.
Hi Carla,
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.
Hi Manoj,
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 - https://blog.templatemonster.com/2014/03/25/seo-as-a-part-of-web-design-process/
Great Post.It is very useful to learn Search engine optimization to get more traffic in websites...
Really enjoyed the article, Carla! Kevin certainly knows his stuff :)
Hi Nick,
Thanks for the kind words. Yes Kevin definately knows his stuff!!
Very Interesting article. I also read this post a few weeks: https://www.egcgroup.com/blog/thinking-parallax-think-on-this/
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 just looked at this website https://flowerbeauty.com at the start when I checked the way URL’s changes while scrolling down I found this approach amazing to optimize Parallax scrolling websites for SEO. But as in your discussing here https://moz.com/community/q/parallax-websites-good-for-seo it creates Lots of duplicate content issue because a same page is accessing from different url’s.
But when I check the Google Cache of each URL not the full pages are in Google Index only the page relevant to face or lips is indexed.
https://webcache.googleusercontent.com/search?q=cache%3Ahttp%3A//flowerbeauty.com/
https://webcache.googleusercontent.com/search?q=cache%3Ahttp%3A//flowerbeauty.com/face/
https://webcache.googleusercontent.com/search?q=cache%3Ahttp%3A//flowerbeauty.com/lips/
How they do that and is this a good technique to use or not?
Thanks,
Hi Nouman,
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.
Cheers,
Kevin
HI Kevin,
Thanks for your detailed answer :)
Carla! You simply covered a great SEO topic here. It's good to find it.
Great post...Had to read almost 4 articles to understand what you were saying, still very nice!!
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.
Hi Parvesh
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.
Thanks Carla
Thanks Carla
Parallax surely has certain restrictions but i think with the time passing, it should be more advance and user centric.
Great Stuff. All the techniques are very informative and helpful.
Awesome post Carla,
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.
Thank you!