logo-small
Features Prices
News 0
Latest News See All

Temporarily unavailable. Please come back later.

See All
Webinars 0
Upcoming Webinars See All
Upcoming Webinars

Sorry, we could not find any upcoming webinars.

See recorded webinars
Blog 0
Recent Posts See All

Temporarily unavailable. Please come back later.

See All
Steve Morgan

Parallax Web Design vs. SEO: What You Need To Know

Steve Morgan
Parallax Web Design vs. SEO: What You Need To Know

As search engine marketers, we know that the best time for us to be involved with a web design or redesign project is right at the beginning, so that SEO can be 'baked in' to the process right from the start. However, sometimes a website will be built and SEO will be a later consideration (usually if it's because it doesn't rank)! A few times recently, people have come to me with a website designed in the parallax format and asked me if I can do anything to help with its SEO – which is a heck of a problem, because while parallax websites often look pretty darn slick, they come with some major technical SEO issues.

In this post I'll talk about the perils of parallax web design: its effect on SEO, why it's SEO-unfriendly, and if there are any workarounds to see if you can have your parallax cake and eat it too.

What is Parallax Web Design?

But first, an explanation... Chances are that you'll be familiar with the style of parallax websites, even if you don't know them by name.

Parallax websites rely heavily on a scrolling effect on one page, rather than the website's content being spread across multiple pages like on traditional websites. So on the homepage of a parallax site, if you click on 'About' in the top menu navigation for example, instead of being taken to domain.com/about (i.e. a different page), the URL changes to domain.com#about and you will be automatically scrolled down to the 'About' section on the same page.

Parallax design example

Example - scytale.pt, GIF created using Gyazo

…But is it Really “Parallax?”

Well... Some folks argue that the name isn't true to parallax. This post by Rob Palmer explains why, giving examples of 'parallax' websites that are and aren't actually following true parallax style. But given the fact that so many people already refer to them this way, I'll stick with it for the sake of consistency – even if it's wrong.

Why Parallax is Bad for SEO

While parallax web design looks great, it can be a major hindrance to SEO – so much so that I often recommend people against it entirely.

The reason for its SEO unfriendliness is due to the fact that it side-steps the need for additional pages, relying on fewer, 'longer' pages to try and rank for more keyword areas and topics. To give you an example, here is an imagined URL structure for an imaginary website – that sells and repair widgets – if it opts for parallax:

  • com
  • com#buy-widgets
  • com#widget-repair
  • com#contact

But here is what the URL structure would look like if it were broken down into individual pages:

  • com
  • com/buy-widgets
  • com/widget-repair
  • com/contact

In the first example, search engines would index the homepage but not the latter three URLs, as search engines index whole pages, not individual fragment identifiers (the hashes in the URL that act as a shortcut to a part of the page) separately.

In the second example, search engines would be able to index all four pages separately. This gives added visibility in search engines and improves the chances of the content on the separate pages - for Buy Widgets, Widget Repair and Contact - to rank higher in search engines.

This is important because if the website wanted to rank for the keyword "widget repair" for example, there is a much higher chance of this happening if the URL is domain.com/widget-repair (i.e. an individual page) rather than domain.com#widget-repair (and therefore a part of the homepage: domain.com).

A dedicated Widget Repair page can properly focus on that keyword – e.g. the phrase "widget repair" can appear in its page title, its metadata, its H1 tag and other heading tags, its page copy (at a higher density), etc. Meanwhile, the parallax version (domain.com#widget-repair and therefore domain.com) would have more difficulty ranking for that keyword as its page title and overall page content would be more general, with the phrase "widget repair" possibly only appearing in one small section of the whole page.

But What if SEO Isn't the Be-all-and-end-all?

Be that as it may, the argument for parallax web design can really only be made on a case-by-case basis. It's easy for us as SEOs to think that parallax websites are the devil's work simply because they're SEO-unfriendly. But after all, there's more to life (and online marketing) than SEO.

For example, in an industry where SEO isn't too important (e.g. maybe it's a product or service on sale that doesn't get searched for that often and gets found via other channels, e.g. social media) but the potential client/customer is someone who would be impressed by the slickness of a parallax website, then there might be more of an argument to retain parallax web design. Ironically, in this case, it might be that although fewer people will find it through search engines, those who do find it – via other channels – may convert better.

Additionally, it also depends on the competitiveness of a particular sector from an SEO point of view. For example, if you offer something extremely niche with very few competitors, you may be able to rank well in search engines even if you proceed with parallax as your website's design. However if it is a competitive sector as far as search engines are concerned then proceeding with the parallax design may hinder your SEO efforts in the long run, and therefore it's probably best avoided.

Regardless, to be on the safe side, and given SEO's importance in the grand scheme of things, I'm sure that in 99 cases out of 100, the way to go is non-parallax.

You might be able to have both, though…

Can You Enjoy the Benefits of Both SEO and Parallax?

There is a potential 'workaround' solution, whereby you make the parallax design more SEO-friendly – effectively utilizing both elements – but it has its own considerations and flaws.

You could keep the homepage as an 'index' page for each section and keep them in the style of parallax design, while each section has its own dedicated page (for SEO purposes) as well. For example, for Widget Repair, clicking on the Widget Repair link on the homepage would jump down to the Widget Repair section of the homepage (i.e. domain.com#widget-repair), which could act as an introduction to the service (i.e. containing a short intro paragraph), concluding with a 'Find out more' link that links through to a dedicated page all about the Widget Repair service (i.e. domain.com/widget-repair – a page that explains the service in more detail, e.g. a few hundred words). This could be replicated across every section of the website.

However if you opt for this solution, there are a few other considerations to be aware of:

  • Parts of the site would be parallax while other parts (e.g. individual pages) would not be. This could cause confusion for visitors if they are navigating between different sections – and especially if they first visit a non-parallax page/section of the website before moving onto a parallax section. This could potentially put off visitors and potential clients/customers, therefore negatively affecting the website's conversion rate.
  • It may also affect how to decide how the top menu works going forward, i.e. whether clicking on a section takes the user to the parallax section on the homepage (e.g. domain.com#widget-repair) or straight to the non-parallax page (e.g. domain.com/widget-repair).
  • I would also recommend taking the time to make sure that the 'intro' content on the main (parallax) pages is unique to the more in-depth content on the dedicated (non-parallax) pages, otherwise the website may be punished by search engines for containing too much duplicate content. For example, for Widget Repair, I would recommend that the intro paragraph on the homepage is different to the content on the dedicated Widget Repair page, and not simply a copy-and-paste job of the same text on both pages. I'm sure that if you're going to the effort of expanding the content on each dedicated page then this shouldn't be a problem, as the dedicated page would probably need a few hundred extra words added it to anyway in order to beef it out a bit, but it is still important to mention.

What are your thoughts on parallax web design? Are there other considerations as far as SEO, usability or CRO (conversion rate optimisation) are concerned? Leave your thoughts in the comments below!

Join the SEMrush Webinar!

Are you ready to up your content marketing game? Join my June 8 SEMrush webinar, "25 Blog Posts in One Month: Co-Ordinating a Low-Budget 'Content Blitz' Campaign."

Steve Morgan is a Freelance SEO Consultant based in Cardiff, South Wales, UK, trading as Morgan Online Marketing. Having worked in SEO full-time for over six years (mostly agency-side), I decided to take the plunge and go self-employed two years ago. An all-round SEO but with a particular love for Local SEO and devising link building strategies. I also blog about SEO over on my own blog: SEOno.

Comments

2000 symbols remain
joe smith
Thanks for sharing these tips. I recently came across a blog
related to parallax website and its effect on SEO. I would like to share it
with you guys. Here’s the blog URL: http://infrawebsoft.com/blog/p...
Ralph M. Rivera
Ralph M. Rivera
This is what Google has to say on the matter: https://www.youtube.com/watch?...
Steve Morgan
Ralph M. Rivera
Spot on, Ralph. There's still "if's" and "should's" in what Matt's saying though - so there's no guarantee that a one-page parallax website should rank just as well as a multi-page non-parallax website, but as I said above, SEO isn't the be-all-and-end-all and if it's the case that SEO isn't a big driver for a particular website and/or parallax is likely to convert better (given the nature of users in the industry) then it might still be worth doing. :-)
John Leo Weber
This blog isn't actually about parallax at all. Parallax has nothing to do with how many pages are on a website-- it is simply a way to describe the relationship between an image and how it appears differently from different (scrolling) positions.

Actual parallax design CAN cause SEO issues in the way bots render your website, but its really just an aesthetic choice.
Steve Morgan
John Leo Weber
I appreciate that, John. But for the most part, the parallax 'style' is often applied in a way that often results in a one-page website (or at least one main page covering the bulk of the content, e.g. the homepage). And if someone's researching the topic, they might be more inclined to Google "parallax website" (if they know it by that name) rather than "single-page website" and hopefully come across this post, where they'll realise that - if SEO is important to them - that maybe they should reconsider.
Carla Dawson
John Leo Weber
Totally agree John...Parallax scrolling is a technique that can be applied to a multipage website or a single page website.
John Leo Weber
Steve Morgan
You make a lot of good points about clean URL structures, Steve, I just thought the name of the blog was a bit misleading. Cheers!
Steve Morgan
Carla Dawson
Absolutely, Carla. I didn't say that it couldn't be applied to a multi-page website, but oftentimes it takes the style of a single-page website (e.g. the homepage). That said, the inspiration for this post came from a report I wrote for a client who wanted to create the parallax style across 6 pages, so I can vouch first-hand that it can apply to multi-page sites. :-)
Carla Dawson
Steve Morgan
I am glad you agree Steve! So many people think parallax scrolling is only something that can be done on single page websites. Cheers
Carla Dawson
Hi Steve,

I think you pointed out some great issues that most parallax scrolling website have , however that being said there is big misconception in industry that parallax scrolling is restricted to one page web design and it is not. I created a multipage website with basic SEO features and placed parallax scrolling some of the URL's therefore accomplishing in my opinion an SEO friendly parallax scrolling website. I financed the project myself and the website has tons of flaws but I think you will get the general idea if you check it out. www.xdawson. BTW the site was original in Spanish and I changed what I could to English..still working on the translation.

Thanks
Steve Morgan
Carla Dawson
Sorry Carla, I saw your reply to John before seeing this separate comment. I've responded above... ;-)
Rob Wilson
This is all very good information to keep in mind, Steve. Since I came from the development world prior to joining the evil empire that is digital marketing, I previously had absolutely zero priority for marketing related concerns, only crawlability. Sadly, Parallax is heading the direction as Flash was several years ago as something that most people try to avoid. However, I am not convinced that incorporating the fluidity and aesthetics of parallax into design schemes is always problematic to UX. Done incorrectly, it certainly can be, but the same goes for any type of site design.
Steve Morgan
Rob Wilson
So true, Robby. It's funny actually because someone on Twitter said (when sharing this post): "Parallax is modern day flash. Try to avoid it." Makes me laugh... ;-)
Have a Suggestion?