Posted by Carla_Dawson
This post was originally in YouMoz, and was promoted to the main blog because it provides great value and interest to our community. The author’s views are entirely his or her own and may not reflect the views of Moz, Inc.
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
Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don’t have time to hunt down but want to read!