Creating a Parallax Scrolling Website with SEO
Many believe that a parallax scrolling website and SEO are incompatible. My colleague, however, has combined them beautifully. This is her tutorial on how to design a website with parallax scrolling and full-site search engine optimization (SEO).
The search engine optimization process is 30% onsite optimization (web architecture, SEO elements, and content) and 70% offsite optimization (link and anchor text portfolio and co-citations). Onsite optimization is important because it is akin to translating your website content to a language that the search engines can understand. Of course, presenting information for your website visitors is the primary concern, but while you are at it, be sure that the search engines can digest it, too. It is the onsite optimization that challenges parallax scrolling designs. This is because all of the website’s information is on one page. Search engines really prefer it when you have a page per topic so that their bots can determine what the page is about so the page is presented in appropriate search results. Wouldn’t you be annoyed if you searched for “hamburger helper” and got search results for McDonald’s jobs? That is a (somewhat farfetched) potential if search engines cannot understand what the content on your site is about.
xDawson, a digital marketing agency in Argentina, analyzed several award-winning parallax scrolling websites. They noticed that most of them are beautifully designed, but have no onsite optimization for search engine purposes. This inspired them to prove that you can have a parallax scrolling website with SEO. Once they proved it, they knew they had to share the information. We thank Carla for sharing that here!
Her own website, xDawson, is used in the tutorial below because it was their proof of concept site for a full-site SEO on a parallax scrolling website.
General Principles
The site must have a site architecture for SEO.- Parallax scrolling is a style of effects that can be applied to each URL but you first have to start with SEO-friendly web architecture.
The site must have a - Parallax Scrolling can be done vertically or horizontally. Here is a great example of how a site used parallax scrolling with lots of content. The problem is that the put everything on the same URL
- xDawson used parallax scrolling on multiple URLs. Each page of content is keyword-optimized as suggested in the “Perfectly Optimized Page” illustration and each URL is SEO-optimized.
- Content must be one of the layers so that it is visible to the browser and to the user, but you can move it in a different way or time than the other layers to accomplish the parallax effect. Content may be hidden from users to make the site interactive where they must click to see more details. This is not the same as hiding content sometimes called ghosting content to trick the search engines.
Online example – Parallax Scrolling and SEO
The xDawson website is a beautiful example of combining parallax scrolling with SEO to achieve visual interest, user interaction, and search-engine friendliness.
Internal Pages
SEO Parallax Scrolling Example – note that only Chrome and Firefox browsers can view the parallax scrolling version of this proof of concept site. If you do not use those browsers, thumbnails of the website pages are included at the end of this tutorial.
- Layer 1 – This layer is the background. Notice that this layer just has the wall with graffiti. It moves at 400px/scroll to the left if you scroll down. It moves the right if you scroll up.
- Layer 2 – This layer has the content. When you scroll throughout the site you see more content come in. This is a great way to get lots of content on one URL for SEO purposes. The content blocks move at 200px/scroll to the left as you scroll down and the content blocks move the right as you scroll right.
- Layer 3 – This layer has the sky and it does not move
Onsite Optimization
The two illustrations below explain how the onsite optimization was accomplished. Notice the website does have a footer with local addresses with schema.org markup and also, an XML sitemap link.
More examples of internal pages
More examples of internal pagesIn case you don’t use Chrome or Firefox and want to see how the other internal pages look, check out these thumbnails below.
Have you used SEO on a parallax scrolling website? Share how you did it! comment below!
*UPDATE 06 August 2013: Since this post, moz.com has published an article with about the analysis of SEO and website design agencies’ websites that le
Hi Wanda. I was just wondering since this post was updated about a year & a half ago if there have been any advances or changes in Google’s way of looking at the parallax site for SEO purposes?
I’d really like to build our new site with the scrolling page idea as it just looks so good & it can be very clean & uncluttered if done right. I am going to be doing a multi page scrolling site so will be able to optimize each page for a keyword appropriately for SEO purposes without having to do a lot of the architectural workaround you discussed here..
There is a comment from Kate you responded to related to a blog but I was not able to find Kate’s original post. I was planning on including a blog on our site specifically for SEO purposes to supplement any keywords I’m not able to optimize on the site’s main pages. Is this what you were saying was a good idea?
Thanks for any updates or additional help you can provide. We are in the beginning stages of the site’s design and I want to know what I’m getting into now so I am prepared. SEO is very important to our B2B site.
thank you!
Hi, Shannon. Thanks for your interest. This post and the related articles linked to were based on SEO basics…things that really don’t change a lot in algorithms. Your approach sounds spot on. Building a page for each keyword and related synonyms is the way to go. Using visual art and intriguing technology to keep people engaged on that page, including scrolling and parallax, are also ways to not only improve SEO as website visitor statistics show engaged visitors, but also to show your business brand, personality, and innovation. I looked for the post from “kate” and it appears that it was a trackback and not a comment, but on a crazy day, I must have responded to it! Here is the Kate Toon post referenced: http://www.katetooncopywriter.com.au/5-reasons-why-single-page-websites-are-bad-for-seo/.
Post your site back here when it is published! And let us know how the ranking goes!
I’d like to find out more? I’d care to find out some
additional information.
Hi Everyone,
I think if many people are getting to start using this one page techniques Google will understand it. I think Google have already understand this type of websites. Don’t waist your time to make too much efforts for SEO focusing your content and if it is gerat users will come from Google as well.
Thanks for your comment, Adam. While I agree that search engines will one day rely less on orderly “packaging” of information on a page by page basis, currently they do rely on this method of compartmentalization of information. I do agree that the user’s experience is also very important. And that is why I and others seek to use the best of engaging technology like parallax scrolling while maintaining the structure that search engines need today to interpret website content.
Sorry but this is all wrong. The article does not solve any problems or answer the question from the main header. All examples are wrong are these websites maintain one url while browsking all subpages. Meta tags remain the same. Homepage loads too much content.
Thanks for your comment, but I am not sure I understand your point. The tutorial is about moving away from a one URL website which most parallax scrolling websites are. The post states you should create an SEO-friendly multiple-page architecture, but using parallax scrolling design features on each page. We totally agree that one of the tradeoffs with parallax that must be managed is a lot of graphic overhead. Please do comment back to let me know if I misunderstood your point.
Thanks for sharing, Kate! Your idea about using a blog with your parallax scrolling other single-page website is awesome! Also, thanks for mentioning our post in your article!