Parallax Scrolling Websites Not SEO Friendly
Expertise, International, Fast
Your online partner for success
The popularity of one-page website format has grown considerably over the last few years and continues to play a central role in the design mix. Parallax Scrolling is one of the latest trends in web design and the beauty of a Parallax-style site is that viewers can simply scroll down the page and see all of the website’s content (e.g. who we are, what we do, our products) without having to navigate to elsewhere on the site. Or, the user can also navigate to a specific section of the page via on-page links or via the navigation menu.
Origin and current industry trends
Parallax Scrolling was originally created for the video game industry as a “special effects” technique to give the audience an illusion of depth. The trend began in 2011 when Ian Coyle created the very first parallax website for Nike "Nike Better World" on 2011, and the trend became strong in 2013.
Parallax is trendy, sleek, stylish and visually engaging. And yet, there’s one drawback – Parallax is not SEO-friendly. From an SEO perspective, a one-page website is nigh on impossible to rank in Google. Imagine for a moment that your competition has an equally cool and stylish website incorporating all the latest web design trends, but instead of one page, they have 10, 20, 30 or 100 pages for viewers to browse. Who do you reckon Google is going to send more traffic to? You? Not a chance.
Every single one of their pages has been optimised within an inch of it’s life with a single key phrase that drives people to their website, thus driving lead generation, new customers and profit! Your trendy looking, one page website will likely have many different topics condensed into a single page, therefore does not rank well for any given high value key phrase, unlike your competitor’s flashy, multi-page, expertly optimised equivalent.
How to work your SEO around this style
A cardinal rule of SEO is that the more pages you have, the more traffic you get. Every page is a rich mix of fact and figures that will be entered into Google’s search engine index, will show up in searches, and bring prospective customers to the door. Not to mention, having high-quality content on a particular topic basically tells Google you know your stuff. And if Google thinks you ‘know your stuff’, it is highly likely to send more traffic your way.
But remember, any old content won’t do, it needs to be of high quality, add value and be engaging for your target audience, otherwise you can be sure no one will be stopping by again. Building a great looking site is all well and good, but, just like us, we need food and water to keep us going, a website needs quality content to keep it nourished.
How to create a parallax scrolling website for search engines?
Before starting the design process, keep in mind the following three things;
▪ Parallax Scrolling is a design technique that moves different layers of content, images or backgrounds at different speeds.
▪ Regular onsite SEO requirements like schema, address in footer, etc. still apply. Remember, start with an SEO architecture, and then apply the design to the architecture.
▪ Parallax Scrolling is not ideal for mobile version. It makes the website to heavy. Remove parallax scrolling for mobile views.
There are three main techniques.
Here are some real examples of parallax scrolling websites that are SEO-friendly or almost SEO-friendly.
Technique 1 – "One page" web design with parallax scrolling using Jquery
This technique addresses the issue of one page web designs that use parallax scrolling and basically tweaks it for search engines. The solution uses the help of jQuery's 'pushState's' functionality. This allows a parallax scrolling page to be 'cut' into various sections which can be identified in the SERPs, each with their unique URL and meta data. As a result, one single page to be indexed multiple times, for different content.
Pros – It is a good fix for an existing one page parallax scrolling website that needs to SEOed. It is a good technique for small websites that are not interested in hard core analytics.
Cons – Bad for analytics. Bounce rates may be higher on these kinds of sites as scrolling through the website may occur rather quickly and to a software program it would appear as a quick enter-exit per URL.
Technique 2 – Multipage parallax scrolling website on SEO architecture
This technique is very simple and easy to understand. You start with a SEO web architecture and then place the parallax scrolling design effects on each SEO URL. It did accomplish the movement of layers at different velocities, however, it did not accomplish the “illusion of depth” or the “telling of a story”. Although it does qualify as parallax scrolling, it does not use parallax scrolling as the trend is today.
Pros – Good for analytics in that each URL has its own content, easy to implement
Cons – Loading times can be a problem with this technique as too much parallax scrolling may make browser loading time longer than it should be. It may be a bit too “interactive”. Designing each for each URL can be expensive and keeps the design rigid.
Recommendations – Use parallax scrolling sparingly throughout the website instead of on every URL. Reduces loading time and makes the website more natural. It also will reduce design expenses and let the website be a bit more flexible.
Technique 3 – Parallax Scrolling on homepage and regular SEO architecture
Another technique is to place parallax scrolling on the homepage and then include other URL’s that are SEO-friendly, but do not have parallax scrolling.
Pros – Keeps the website light and flexible. It is easy to design and more affordable than technique 1.
Cons – Not maximizing creativity or making the website super “interactive”.