Parallax Scrolling And SEO: A Difficult Relationship, But They Can Coexist.

By Stephen Beale


Mar 25, 2014


Parallax scrolling is one of the hottest web-design trends in recent years, enabling a unique form of visual storytelling in which users control the action. But parallax websites also have a reputation for being incompatible with search-engine optimization (SEO). Part of this is deserved, because many of these sites don't play well with search algorithms. But SEO is not impossible with parallax sites – it's just a challenge, and one that can be overcome. The key is to recognize the issues that prevent many sites from being SEO-friendly and plan accordingly.


What is parallax scrolling? It's a website-design technique in which some elements move faster or slower than others as the user scrolls the page. The effect can be subtle, creating a simple impression of depth, or it can be dramatic, moving new content on and off the page as you scroll. The scrolling can be vertical or horizontal. Because the effects are created largely in JavaScript, it doesn't require a plug-in.


One of the first parallax sites to gain widespread attention was Nike Better World, created in 2011 by Portland, OR designer Ian Coyle. The New York Times provided another showcase for the technique in "Snow Fall," a 2012 online feature about an avalanche in Washington State's Cascades mountain range. These days, do a Google search for "parallax scrolling" and you'll find numerous galleries of websites that use the technique, from this promo for "Life of Pi" to this one touting the Lexus LS.


Parallax Scrolling And SEO


Parallax Scrolling And SEO



The Single-Page Conundrum.


Why is parallax scrolling supposed to be bad for SEO? The biggest issue is the misperception that parallax sites are limited to a single page.

Consider these generally accepted guidelines for constructing optimized websites:


  • The home page should link to separate content-rich pages for each major category on the site.
  • Each page should have a unique title that indicates the topic, plus a unique "description" meta tag summarizing the contents. It should also have an appropriate number of relevant keywords.
  • Each page should have a URL that contains words reflecting the topic.
  • Each page should structure the content in a logical manner, with appropriate use of heading tags ( <h1>, <h2>, etc.).


Most sites that use parallax effects toss this out the window, cramming many pages' worth of text and images into a single page. Some designers see this as an advantage, because it allows users to view the content without clicking through multiple links. But you pay a price because fewer pages are exposed to search engines. This translates into fewer keywords, URLs, heading tags, etc. conveying the topics covered on the site.


However, nothing requires you to use a single-page approach. Parallax scrolling is simply a technique, and as we'll see, it works equally well on multiple, optimized pages within a larger website.


Even if you choose to build a single-page site, you can still make it SEO-compatible. Web developer Dave Mello of Newfangled suggests using JavaScript to load blocks of content dynamically. Each block appears to the search engine as a separate URL. You can see the results here. As you scroll, note how the URL changes in the address bar.


SEO strategist Kevin Elle of iProspect suggests another JavaScript technique that produces a similar  result, at least from an SEO standpoint. His example doesn't actually use parallax effects, but it provides another illustration that a single-page website design is not necessarily incompatible with SEO – it's just a matter of employing a good workaround.



Other Issues With Parallax Scrolling.


Single-page architecture is the major culprit in keeping parallax sites from being SEO friendly. But many of these sites have other issues that can affect search ranking as well as their general usability.



Slow Performance.

One big problem with many parallax sites is that they take too long to load. This results from packing so much content onto a page and relying heavily on JavaScript. One way to address the issue is to load content dynamically, as in the Newfangled technique described above. You can also improve performance by employing parallax scrolling more judiciously within a multi-page architecture. When you create a website, you should be sure that each graphic is optimized for maximum download speed and that you're not using more elements than necessary. That should be standard practice in website design regardless of the techniques you use.



Browser Compatibility.

Parallax effects that work fine in Chrome or Safari may not render correctly in Firefox or Internet Explorer. You may have to tweak the JavaScript code, or add browser-specific properties to your CSS. And because many effects require HTML5 and CSS3, you may need workarounds for older browsers. As always, it will be important to test your site thoroughly in the leading browsers to ensure that it's a smooth and rewarding user experience across the board.



Mobile Sites.

Parallax scrolling poses special challenges for mobile devices. You have to account for the smaller screen size, and performance issues are magnified because smartphones and tablets tend to have limited bandwidth and processing power. Many parallax sites simply don't work on these devices.


Your best strategy here may be to create a separate mobile website that foregoes parallax scrolling and conveys the information in a more mobile-friendly way. Be sure to follow Google's recommendations for smartphone optimized websites. Many of the standard SEO principles apply, but you also have to be careful to avoid common mobile-specific mistakes such as unplayable video, faulty redirects and content that loads too slowly.


If you're determined to use parallax scrolling in a mobile environment, be prepared to make compromises. You'll have to use a JavaScript library such as skrollr that works on mobile devices, and optimize images and other design elements for the smaller screens. Just as with desktop sites, you're free to create mobile sites with multiple pages. But you should test the site thoroughly on a range of Android, iOS and Windows 8 devices to ensure that it offers a good user experience.


Mobile devices pose special challenges for parallax scrolling



How To Optimize Your Parallax Site.


I've already noted a couple of ways to create optimized single-page sites. But from an SEO standpoint, you're still better off using parallax scrolling within a larger multi-page site. That was the approach taken by xDawson, a digital marketing firm in Argentina.


How To Optimize Your Parallax Site. 

This blog post from SEO Buzz provides details of how designer Carla Dawson created the website. Here's a summary of what's involved:


Site Architecture.

She began with an optimized site architecture in which the home page links to major topic pages. In keeping with good design practices, the structure is flat, with all content just a click away from the home page. Each page has a descriptive title and URL, and is populated with relevant keywords.



This page provides a good example of how the scrolling works. It consists of three layers. One contains a sky background that doesn't move. Another contains a graffiti wall that moves horizontally at 400px per scroll. Content appears on the third layer, which moves at half the speed of the wall: 200px per scroll. Some content is hidden until you scroll, but it's all exposed to the search engine.


How To Optimize Your Parallax Site.



Users navigate through each page by clicking on the right and left arrows at the bottom. It seems obvious, but some designers of parallax sites overlook the need to provide strong visual clues about the site's "scrollability." You can also navigate via the scroll wheel on a mouse. Menus provide access to other pages on the site, and you can expand the footer for additional links.



The footer provides access to a blog, XML sitemap and client list. The sitemap is crucial because it improves the way search engines crawl the site. Addresses on the bottom contain markup to ensure that they're properly read by search engines. For example, the following HTML code identifies "Seru 152" (on the right) as a street address:


<span itemprop="streetAddress" class=schema-value">seru152</span>


Dawson notes that rebuilding the site with parallax scrolling did not hurt search rankings or traffic. It also passed muster with analytic tools and SEO experts. Her site is not necessarily the flashiest example of parallax scrolling, but clearly demonstrates that the technique is fully SEO compatible.



Mixed Approach.


Rather than committing entirely to parallax scrolling, you can try using it on specific pages within a website design. This gives your site the best of both worlds: The parallax "wow factor" where it really counts, plus optimized content pages where the effect doesn't make a big difference. For example, Spotify and Brazilian apparel maker Biamar use the effect just on their home pages. Biamar's home page links to a blog, and these tend to do well in search rankings because they have frequently updated content.


Mixed Approach.


Mixed Approach.


Also taking this approach is Marbury Creative Group, a design firm in Duluth, Ga. The home page invites you to scroll through what's essentially an ad about the agency's creative abilities. Links at the top take you to content pages with additional info about the agency.



Offsite Optimization.


An SEO strategy has two components: Onsite and offsite optimization (sometimes referred to as "on-page" and "off-page"). Onsite optimization refers to the way your site is built: Using the architecture, keywords, internal links, content and other elements to maximize search placement. Offsite optimization refers to activities away from your site that improve its popularity. The primary driver here is the way other sites link to yours: number of incoming links, the quality of sites that link to you, types of links, etc.


As we've seen, onsite optimization is where parallax scrolling has the biggest impact. It's also the part of optimization over which you have the greatest control. However, SEO author/consultant Michael Fleischner estimates that offsite optimization accounts for 70 percent or more of search-engine placement. Parallax scrolling can also have an impact here – both positive and negative – even if it's not so direct.


On the plus side, parallax scrolling has an undeniable "cool" factor. The sites can be a lot of fun, engaging users and enticing them to view the content. If they have a rewarding experience on your site, they're more likely to link to it and share it on social media, which can improve your search rankings. But you're less likely to find "link love" if the site loads slowly, doesn't work properly in all browsers or is difficult to navigate. All are potential obstacles when designing parallax sites, but as noted above, they're not insurmountable.



Is It For You?


Like any design technique, parallax scrolling can be overused and abused, and we're already seeing signs of a backlash. For example, Newfangled project manager Page Laubheimer compares it derisively to Flash. He cautions that if you design a website with parallax effects, it could look dated within a year or two.


The key is to use the technique where it makes sense. Parallax scrolling is especially well-suited for presenting content in a linear fashion: storytelling, product showcases, creative portfolios and the like. But some website designers take it too far, loading their pages with scrolling objects just because they can. If you think it will fulfill your goals and enable a better user experience, give it a try. If not, consider a different approach.


Just don't be too concerned about search engine optimization. Yes, it's a challenge. But if you take the right steps and incorporate SEO at the outset, you can create a website that looks great and holds its own in search rankings.


Have you created any parallax sites? What do you think of the ones shown here? Does it have staying power, or is it a passing fad? Feel free to discuss below.

Brought to You by Webydo.

See how Webydo fits into your design workflow and business.

Request A Live Demo

Blog Menu

Subscribe to our blog:

//The disqus (comments) addition
comments powered by Disqus