The Perils Of Parallax Design For SEO

First it was Flash, then AJAX, and now…. parallax design. As SEOs, we often find ourselves butting heads with Web designers over website design and usability. Certain design approaches and techniques, while helpful for usability, may not be ideal for SEO purposes. But that doesn’t mean we have to sacrifice good design for solid SEO — we just have to be creative and find solutions that marry design with SEO.

What Is Parallax Design?

Parallax design is a website design approach that’s been used for several years now and takes its name from the concept of parallax movement. Instead of linking from one entire webpage to another, the visitor moves up and down on the same webpage.

The Spotify home page is a great example of a parallax design — the site essentially displays layers as a visitor scrolls down the page:

YouTube Preview Image

One of the main benefits of using parallax design is that it allows the website to essentially walk a visitor through a story just by scrolling down the page. A good demonstration of this storytelling technique is found in Google’s “How Search Works” site, where Google explains in very basic terms how the Google search engine works.

YouTube Preview Image

Parallax can go a long way in helping guide a visitor through a story or goal. Rather than expecting the visitor to click through a series of pages, parallax makes the experience easier and provides a cleaner flow overall.

How Does Parallax Design Affect SEO?

Similar to Flash and AJAX, parallax design presents unique challenges for SEO. Most of these challenges stem from the fact that all of the content is housed on a single page, essentially giving you a one-page website.

A single-page website design makes it difficult to optimize the site for a wide variety of search terms. All of your target keywords must be concentrated on one page rather than spread out over many, leading to keyword dilution. Additionally, inbound links can only link to your site’s single page and not to specific page content.

Another Challenge: Analytics

It can be difficult to truly measure engagement on a single-page website with today’s analytics tools. While time on site might be an indicator, it’s not a very accurate form of measurement. As Avinash Kaushik mentions in a blog post, tabbed browsing has really mucked up time on site metrics in analytics, so they aren’t always the most accurate measurements.

In fact, while many claim that parallax design increases engagement, I failed to find any studies or A/B tests that supported this claim. I suspect that is because the measurement for engagement would likely need to be time on site, and given that this particular measurement isn’t exactly accurate, a true study on parallax versus non-parallax engagement on the site would be difficult to perform.

What About Mobile?

A recent report from Walker Sands indicated that mobile traffic to websites has increased 78% year-over-year, now accounting for 24% of website traffic on average. But parallax, unfortunately, does not work well on mobile devices. This means that webmasters have to create a second version of the site specifically for mobile devices (as Google did with its “How Search Works” site, creating a series of pages to tell the same story).

GoogleScreenshots

Aren’t There Workarounds?

If organic search engine visibility is a priority for your website, then ideally you should avoid solely parallax design. While there are creative workarounds for SEO, many may be in conflict with Google’s webmaster guidelines.

In one case, I saw a site essentially using doorway pages to attract search engines, using javascript redirects to redirect human visitors (with javascript enabled) to the parallax design site. Search engine bots, on the other hand, are not redirected — they are meant to index the “doorway page,” which clearly is against Google’s webmaster guidelines:

It’s a violation of Google’s Webmaster Guidelines to use JavaScript, a meta refresh, or other technologies to redirect a user to a different page with the intent to show the user a different page than a search engine crawler sees.

That’s where this becomes a sticky wicket when optimizing for purely parallax sites. While a redirect workaround for parallax sites may seem pretty smart, it’s in violation of Google’s guidelines and thus puts sites at a penalty risk.

So inevitably, there is a trade off. Is the SEO or the user experience more important?

Best Approach: The “Combo” Approach

A better approach might be to combine a parallax home page with accompanying sub-pages. Spotify takes this approach — while the home page is a parallax design, some of the content links go to separate, static pages that explore a particular topic in greater depth. This approach helps ensure that a) there’s a separate page URL for each unique topic and b) each unique topic has a dedicated page to house its related keywords, all while respecting Google’s Webmaster Guidelines.

The result for Spotify? Its US-based site has over 3,400 pages indexed by Google. Compare this to a parallax-only site, like this Victoria Beckham edition of the Range Rover which only has one page indexed in Google for its US site.

What To Ponder When Considering Parallax

Parallax isn’t all bad, but it’s not ideal, either. The main questions to ask yourself when considering parallax as an option are:

  1. Will parallax help tell the story more effectively?
  2. Do I (or will I) rely heavily on SEO to drive traffic to my website?
  3. Is a parallax page married with other associated webpages (the combo approach) an option?

If you do decide on the combo approach, the next thing to consider is what information is most appropriate on the parallax page versus the other supporting pages of the site. Some key things to remember about how to divide up the information (which goes beyond just SEO) are listed below:

  • Keywords: remember that the parallax page will likely only be able to be optimized for one keyword (or a small amount of highly related keywords). Given that, plan out your sitemap to allow for supporting pages to have deeper content around most of the keywords.
  • Deep Content: map out the parallax page and its sections. How can you segment the story, providing some level of information on the parallax page but offering more details on deeper HTML pages? The New Zealand Tourism site provides a great example of this, painting a picture as the visitor scrolls down the home page while also offering more specific content that is linked to from each area of the parallax home page.
  • Mobile Visitors: consider how the site will look in mobile environments and reference analytics to understand your mobile audience. You may have much more mobile traffic today than you realize. Don’t leave those visitors out by creating a parallax page they can’t navigate. Consider a plan for how you’ll handle these visitors.
  • Analytics: what do you want to know about your visitors? What actions do you want to measure? Take those goals into account when considering what information should be on the parallax page versus supporting webpages. Do you want to know how many people start the sign-up process but don’t complete it? Having a separate sign-up page could be helpful for measuring these types of actions. Perhaps you want to see what offering or product a visitor is most interested in or what type of content resonates best with your audience. Consider having this type of content on deeper site pages and not the parallax page to ensure that you can collect the data you want to make informed decisions.
  • Visitor Demographics: additionally, be sure to consider your other goals, like advertising. What do you want to know about the visitors to the site? For instance, if you want to retarget to visitors based on certain interests, you may need them to visit a certain website page to be entered into a retargeting group. For instance, if you wanted to retarget site visitors who visited the sign-up page but didn’t complete the process, it would be important to have the sign-up page/form on a separate webpage.

Opinions expressed in the article are those of the guest author and not necessarily Search Engine Land.

Related Topics: All Things SEO Column | Channel: SEO | SEO - Search Engine Optimization | SEO: Cloaking & Doorway Pages

Sponsored


About The Author: is the President and CEO of Marketing Mojo. She regularly blogs on a variety of search engine marketing topics, often focusing on technical solutions. You can find her on Twitter @janetdmiller.

Connect with the author via: Email | Twitter | Google+ | LinkedIn



SearchCap:

Get all the top search stories emailed daily!  

Share

Other ways to share:

Read before commenting! We welcome constructive comments and allow any that meet our common sense criteria. This means being respectful and polite to others. It means providing helpful information that contributes to a story or discussion. It means leaving links only that substantially add further to a discussion. Comments using foul language, being disrespectful to others or otherwise violating what we believe are common sense standards of discussion will be deleted. Comments may also be removed if they are posted from anonymous accounts. You can read more about our comments policy here.
  • http://printfirm.com/ Katherine Tattersfield

    Thank you for addressing this issue. I see a lot of sites using this design approach to their own peril. As a user, I do find them visually appealing, but I saw the SEO issues immediately. It’s my understanding that Parallax sites also don’t display correctly in older versions of Internet Explorer, another strike against them.

  • Colin Guidi

    Solid article, and in total agreement that parallax design presents more benefits to users than to spiders.

    But there has to be workarounds out there. You click on a section of the parallax scrolling site that has an anchor tag to scroll you down in the website experience to the next section. Ok, so let’s get that URL indexed via the hashbang (#!), and create a static page to be served from a headless browser.

    I’m just not buying the notion of either building for SEO or users (parallax scrolling), there’s definitely overlap.

  • theTruth

    Google tells us to build sites for users, not spiders. They need to learn to adapt.

  • http://www.LeadDiscovery.com/ Jerry Nordstrom

    I do think Parallax provides a fresh new way to deliver information. And being different in a very competitive online world can be a very good thing. However, it does not pass the feasibility test for me. No company can afford to market with out accurate analytics, even fewer can a afford an SEO decline. Add to that a risk in dropping PPC QS scores, mobile device challenges and certainly there will be a segment of your audience who will gag on the new style of interaction. The admin overhead to implement Parallax is not likely to exceed the benefits.

    Its great being a marketer/developer in these times as we have so many great tools to tell the story and measure its impact. Unfortunately the speed at which new forms of digital communication are developing are even outpacing the big G.

    We’re testing parallax on isolated landing pages only. This way we can minimize the implementation overhead, isolate the analytics and gain some knowledge to prepare for when the rest of the internet marketing ecosystem can handle it.

  • Lazwah Stylie

    I don’t think you quite understand what parallax is? Parallax is a type of movement in scrolling, not information on a single page – you keep pointing out information on a single page, but that has nothing to do with it. Essentially, you could have 500 pages with Parallax scrolling, as you would any other site, as long as it adopts the multiple layered approach of movement along the Z axis.

    In essence, stating that parallax scrolling refers to “the visitor moves up and down on the same webpage” is false information. That’s not parallax.

    That would imply that Google’s gmail login screen is parallax and just about any other page with ‘all the info on one page’ is parallax. That’s just crazy.

    Parallax is movement. NOTHING to do with the info being on one page at all.

  • http://www.brandappz.com/ BrandAppZ

    Thanks you for sharing nice information about parallax design approach…

  • http://www.spinxdigital.com/ Stephen Moyers

    Hey Janet you have really explained in-depth of parallax scrolling. You have really shown some pros and cons of parallax scrolling. I found an article why you use parallax scrolling for your web design http://www.spinxdigital.com/blog/5-reasons-you-should-be-using-parallax-web-design/ they have shown some benefits of parallax scrolling. What you think about these benefits?

  • Tom Howlett

    Hey, useful post.

    I like to keep up with web design trends and often spot a potential issue with regards to SEO. Maintaining a balance as you mention is definitely the best approach.

    Parallax web pages however can be good for link bait.

  • johnsolo1701

    You are confusing “single page scrolling web sites” with parallax. Parallax is a motion effect when two layers are moving in the same direction but at slightly different speeds, which creates a sense of depth.

    The parallax effect is used on many single-page scrolling websites, but they are different concepts.

  • Carla Dawson

    Hi Jerry,
    You can apply parallax scrolling to all pages and do onsite optimization. 1. start with a SEO friendly architecture and then apply parallax scrolling as a design technique to each URL. It can be done!

  • Carla Dawson

    This site applied this technique. It is SEO and Parallax http://www.posicionamientowebenbuscadores.com

  • http://www.richardrazo.com/ Richard Razo

    I’m a front end web developer and have not yet used parallax on a project but it’s been on my radar so the points you mention are good for me. I have a few comments & questions:

    1) What’s your take on Responsive versus separate mobile sites utilizing switchboard tags in terms of SEO. Can they truly be the same like this guy wrote about = http://searchengineland.com/when-responsive-web-design-is-bad-for-seo-149109

    2) Never used Parallax… surprising you can’t link to a specific spot within the page. i.e. some_web_site . com#section3. Please confirm if I understood this correctly.

    3) National Geo created a test page which looks awesome-using some beta code features, parallax, and hints that more pages in the future will use them. Wondering what you think/know about some of these future features like CSS Regions & Text Reflow. See page for youtube video = http://blogs.adobe.com/webplatform/2013/05/06/adobe-explores-the-future-of-responsive-digital-layout-with-national-geographic-content/

    Thanks in advance.

  • http://www.seo-theory.com/ Michael Martinez

    “All of your target keywords must be concentrated on one page rather than spread out over many, leading to keyword dilution”

    NOPE. No such thing.

    You lost me right there.

  • Keith James

    Being a designer, I like the way visitors can interact with content. Knowing that I need to get my clients the highest ranking possible, I never use it. If you aren’t concerned with ranking (why would you have a site?) then go ahead. As of now, I haven’t found a good workaround that I am comfortable with.

  • Lazwah Stylie

    This is exactly right (see my post above). This article essentially is about all site content on a single page and it’s effect on SEO. Absolutely nothing to do with parallax.

  • Carla Dawson

    Hi Guys, I totally agree with both of you. Here is an article you might like to read http://www.seobuzzinternetmarketing.com/blog/how-to-create-a-parallax-scrolling-website-with-seo/

  • http://www.linkedin.com/in/chrissanfilippo Chris Sanfilippo

    It’s still only one page. The problem is that there is only one page title.

  • Carla Dawson

    It is not one page…

 

Get Our News, Everywhere!

Daily Email:

Follow Search Engine Land on Twitter @sengineland Like Search Engine Land on Facebook Follow Search Engine Land on Google+ Get the Search Engine Land Feed Connect with Search Engine Land on LinkedIn Check out our Tumblr! See us on Pinterest

 
 

Click to watch SMX conference video

Join us at one of our SMX or MarTech events:

United States

Europe

Australia & China

Learn more about: SMX | MarTech


Free Daily Search News Recap!

SearchCap is a once-per-day newsletter update - sign up below and get the news delivered to you!

 


 

Search Engine Land Periodic Table of SEO Success Factors

Get Your Copy
Read The Full SEO Guide