SEO For Parallax Websites: How To Rank With A Single Page

Story by Reed Steiner.

Let’s face the facts: parallax websites look really cool. But is SEO for parallax websites worth the hassle? How do you get a one-page website to rank on Google?

Many SEO and digital marketing experts will say that it’s not worth it, but that’s not true. Sure, not every website should be parallax. But if it helps you appeal to your target audience, don’t let the threat of an SEO dip get in the way. Parallax websites aren’t all bad if you build them right, and there are lots of ways to build better SEO that’ll knock traditional websites out of the park.

This article uses lots of examples, but no screenshot or video can capture how interactive a good parallax website can be. Feel free to explore each website in a new tab using the links provided underneath each image.

What Is A Parallax Website?

It depends on who you ask.

Strictly speaking, a parallax website uses the parallax effect. By moving different layers at different speeds as the user scrolls, the website appears to have 3-dimensional depth. The Firewatch video game website displays this effect very well. When you open the website, it looks like this:

However, as you scroll down, the front layer moves faster than the back layers. As a result, the scenery looks three-dimensional as you scroll.

Note that the front layer has moved a ton, but the back layer has hardly moved at all. That’s parallax.

However, language has a funny way of evolving over time. Since many parallax websites fit all the website content into one page, the definition has started to change. Now, even industry professionals will call any single-page scrolling website “parallax,” even if the website doesn’t use a parallax effect.

Sure, “Parallax” meaning “single page” may not be prescriptively correct, but that’s how many professionals use the word now. Besides, you can’t break the lines if you listen to prescriptivists.

We could argue about the merits of each definition for days, but let’s focus on what both definitions have in common: the website fits into one long, scrolling page. This design choice comes with some pros and cons–especially with respect to design and SEO.

The Pros Of Parallax

Parallax websites aren’t as common as traditional ones, but they can be extremely useful in certain contexts.

User Experience

Parallax websites are perfect for the user journey. Since all the content appears as the user scrolls, you can refine the user journey, strengthen your brand story, and streamline your funnel. It’s no wonder parallax websites have a 37.5% higher conversion rate.

Design

Parallax websites can look pretty cool. Dynamic animations, stunning graphics, and high-quality graphics can make a parallax website breathtaking. As a result, parallax websites usually have a lower bounce rate.

Budget

A parallax website costs less than a traditional website because you only need to pay for one page. Of course, this page isn’t small, but it’s still only one page. They’re a great choice for businesses that want a high-quality scalable website.

If storytelling, user journey, scaleability, and budget are important to your company, a single-page parallax website may be right for you.

The Problems With SEO For Parallax Websites

Parallax isn’t perfect. Otherwise, every website would be parallax. It comes with a few drawbacks.

Not Enough Pages

This is the biggest issue: parallax websites are single-page. If Google only indexes one page, you won’t rank for nearly as many keywords. Plus, you’ll be limited to only one H1 title.

Long Load Time

You can only fit so much content into one page before it slows down. If your entire website fits onto one page, it won’t load as fast–especially if it uses a parallax effect or other dynamic animations. Simply put, parallax websites take time to load.

Browser/Mobile Compatibility

Dynamic graphics and big animations may have trouble loading on certain browsers or mobile devices.

These problems are huge, but only if left unattended. If you know what you’re doing, you can solve all these issues.

How To Boost SEO For Parallax Websites

Fret not! There’s still hope.

If you build your single-page website the right way, these issues will be a lot less problematic.

Solution 1: Paginate

The best way to make scrolling content crawlable is to break it into distinct chunks that Google can understand. Lucky for us, Google explains exactly how to do it.

Google’s first recommendation for a scrolling page is to split the page into components. Here’s a helpful diagram from the Google blog post.

Yoast continues with more advice on how to set up different sections. It suggests using

or tags to create a sort of pseudo-slug for the section.

Another key step for creating crawlable sections is structuring your URLs correctly. Google advises using full URLs for each component page since it makes errors less likely.

Good: example.com/category?name=fun-items&page=1
Good: example.com/fun-items?lastid=567
Less optimal: example.com/fun-items#1

These guidelines help you divide your content into distinct sections that Google can crawl. While these sections aren’t perfect, they make a big difference and help you branch out a bit more.

The only problem with the last method is that Google doesn’t index each section. That’s too bad. If only you could get Google to index each section as a separate page!

A great post by iProspect tells you exactly how to do that using jQuery.

Here’s the gist of it:

Step 1

Start by dividing the parallax website into sections. This is a smart idea whether you use this method or not.

Step 2

Make one section active. All its content will be in the HTML. All other sections will be inactive and shown to the user through jQuery so Google doesn’t flag your website for duplicate content.

Step 3

When the user scrolls into a new section, the jQuery function will push the PHP content into the HTML. In other words, it’ll plop the content into place as the user gets there.

The iProspect page goes into more detail but keeps the language pretty simple. I recommend reading it for more details.

However, this solution is still limiting. You can only fit so many sections into your website before the page gets too bulky. The best solution for SEO for parallax websites would have to include about five sections to prevent the page from loading too slowly. However, you can have your cake and eat it too with a blog.

Solution 2: Add A Blog

“Blogs are great,” says the person who writes blogs for a living.

Seriously, though. Blogs are wonderful for SEO in so many ways. They’re especially great if you want your parallax website to rank for more keywords.

Why? Because you’re creating tons and tons of extra pages, and Google indexes each one!

In other words, you can get the best of both worlds: the brilliant UX of a parallax website with the SEO of a traditional one.

Creative copywriter Érika Moreira brilliantly integrates her blog right into her beautiful website. Users scroll through her content, select a piece of writing, and seamlessly transition into the next page.

Sure, the website is no longer just one page, but that’s a good thing. You get a huge SEO boost for just a little bit more money.

However, neither of these solutions address the other two SEO problems with parallax websites: loading speed and compatibility.

Solution 3: Try Responsive Design

Parallax websites don’t have to crash on mobile devices. If you design mobile-first, you won’t run into this problem.

Sometimes, that means cutting out your bigger and more complex animations, but not always. The Fyresite.com homepage opens with animation, and it works great on mobile.

Parallax websites are the same: if you want them to rank better, build them for mobile devices. After all, shouldn’t scrolling websites always prioritize scroll-friendly devices?

Solution 4: Let It Be

Here’s the real question: is SEO for parallax websites really that big of a deal?

Before you freak out about the importance of digital marketing and Google, let me explain: not every website needs 100% perfect SEO, and parallax really doesn’t hurt your SEO enough to throw it out entirely.

As usual, it all depends on your audience.

What if you run a small cutting-edge startup that needs a stunning website to encourage investment? Your brand storytelling, scalability, and budget are more important than your rank. A parallax website is perfect–even if it has a minor, fixable SEO dip.

What if you’re an artist who needs to showcase work and collect leads? Your sales funnel, page design, and budget are more important than your rank. Again, a parallax website is perfect–even if it has a minor, fixable SEO dip.

What if you’re running a conference and need a landing page to send to the guests? Your usability, design, and budget are more important than your rank. Unsurprisingly, a parallax website is perfect–even if it has a minor, fixable SEO dip.

The truth is that every website is unique. Sometimes all the benefits of a parallax website will outweigh the tiny dip in available keywords. Even Google agrees that it’s more important to meet your user’s needs than to play the Parallax SEO Game.

If a parallax website is the best fit for you, don’t worry about the SEO. Just design a high-quality, high-performance website for your target audience and Google will rank you. If you meet their needs, they’ll come to your website.

It’s that simple.