How to Create 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.
Posicionamiento Web, a digital marketing agency in Argentina owned by Carla Dawson (my colleague), 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 Posicionamiento Web is used in the tutorial below because it was their proof of concept site for a full-site SEO on a parallax scrolling website.
- 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.
- 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
- Posicionamiento Web 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 Posicionamiento Website is a beautiful example of combining parallax scrolling with SEO to achieve visual interest, user interaction, and search-engine friendliness.
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
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
In 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