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]https://www.youtube.com/watch?v=9BR2HOPTD9Q[/youtube]

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]https://www.youtube.com/watch?v=9by5YIbdTBY[/youtube]

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).

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.