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.
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.
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.
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.
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.
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.
This blog post from SEO Buzz provides details of how designer Carla Dawson created the website. Here's a summary of what's involved:
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.
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 schema.org 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.
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.
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.
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