The Parallax SEO Conundrum

This post touches on the parallax SEO issue and offers solutions to fix it. If you're following the trends in web design at least from time to time, you probably know that parallax scrolling is one of the cool things that are all the rage as we speak. It does not look that the trend will go anywhere any time soon. That said, you need to make sure that you use every web design trend with caution. Otherwise you may go belly up one day just because people stopped finding you in Google.

Does Your Audience Actually Like it?

If you are in the process of creating or redesigning your site and actually thinking to add some parallax features to your site, think again. As you know, you need to offer your site visitors what they want rather than what you personally consider necessary or awesome. Would you rather add something breath-taking to the design of your site and lose potential customers (traffic) or actually give your visitors what THEY want? Sure thing, there are examples when companies create a need and then meet it with their products - such as Apple did - but that does not really happen that often. Plus too much is at stake. So, you want to conduct a survey to see if that makes sense to use parallax scrolling on your site. If that's not something you can afford, just ask some of your friends and acquaintances what they think about your idea.

In case you really want to add some parallax scrolling gimmick on your site, you may add something in the header or footer. Thus, it won't impact your site's performance that much. In case you're in the mood of expanding your knowledge, you can check this post that explains how to use the Parallax Scrolling Background tool in order to create a simple effect for your site. You're not supposed to have any programming skills to do so.

That said, you probably want to know what can happen to your site  and what you should be on the lookout for if you eventually implement the effect in all its entirety. So, here's what you need to consider first.

Gaining Pounds

As a rule of thumb, parallax scrolling sites are created  using one-page templates. That means that your site is actually one HTML page that you can modify to edit your content. It may sound comfortable because you're not supposed to browse through tons of files, trying to find the right one to edit that one little thing. That goes without saying, it's definitely an advantage in that respect.

The discouraging news is that your site will have all its content in one file. That is to say when somebody comes to your site, the browser will load all texts, images and videos at one go. That will add up to your site's loading speed. So, you get a huge  file with tons of stuff that loads. That translates to your site getting slower and slower.

Actually, users don't like slow sites. If your site does not load within 1-3 seconds, the user will just give up and return to his search engine results page for a different resource for whatever he or she is trying to find.

What's more, Google is not happy with slow sites either. In case your site loads slower than Google likes it (over 2-3 seconds), you'll have worse rankings for your target keywords. So, less searchers will see your snippet in Google. And that means that you'll get less customers. End of chain. :)

Limited Optimization

In case you're not scared enough, there's more for you. The point is that you can optimize every page of your site for 1-3 keywords. So, if you have 10 pages, you can optimize them for like 10-30 keywords. Now, in case you use a one-page parallax scrolling design, you are constrained to one page only. Guess what? It means your site can be optimized for 1-3 keywords only. Basically, it's a case when the design of your site prevents you from proper search engine optimization.

One H1

It's also best SEO practice to use your keyword in the headline (the H1 tag) of your site. Thing is, you need to use one H1 tag per page. And here's the math again. You have one page and you can use one H1 tag per page. That's another limitation. You can use just one headline tag per your site!

Plus you're most likely gonna use one keyword in your headline. So, you won't be able to properly optimize your site for all your 3 keywords.

Meta Stuff

The same holds true for your metadata. Since your site is eventually one file (page), you can use just one set of metadata. That is to say you can use one meta title and meta description per your whole site. It looks that you deliberately remove ad spots (Google snippets) so that less people see what your site offers.

Handicapped Responsive

In case you also make up your mind to use another web design trend, such as responsive, you'll have to shell out white a bit. That's because combining these two effects requires a very advanced skill set from a web designer. And such designers don't really work for cookies. It may really cost you an arm and a leg. So, you need to consider all the cons and pros before you take the plunge and implement parallax scrolling and other awesome things that are all the rage in the world of web design nowadays.

How to Fix

That said, you still can use parallax scrolling on your site. You just need to ensure that you do it properly. Since the one page approach is wrong, we'll tackle specifically that aspect.  I'm gonna offer you a few solutions that you can just choose from. You need to go for the one that works best in your particular case.

Separation 

This fix does not require any extra skills given that you're good at HTML/CSS. The general idea is that you can use the parallax scrolling effect on your site. Just distribute your content to a few pages so that each page (ideally) can be optimized for one keyword. Those would be the pages that have decent Google rankings. So that your secondary pages are accessible for both search engines and visitors,  put links to them from your homepage. As simple as that. You're going to love the fact that this approach does not require any other tweakings, unlike the solutions that I offer beneath.

Disclaimer

I'm not a programmer or web developer by any means. I learned the basics of PHP, JavaScript and jQuery specifically to figure out how to remedy the SEO issue that one-page parallax scrolling designs cause. What's more, I kind of have a hunch that there's even a better tech solution and I genuinely hope that you'll give some interesting ideas as well. What I'm saying is that my code is not perfect and I know it, but it fixes the issue in question.

PHP and External Files

This solution takes it for granted that you are familiar with the nuts and bolts of PHP. No panic. You are not supposed to be a PHP guru. In fact, you can implement this solution just if you follow a PHP tutorial on how to load content from external file into a main file (page). You'll be even able to copy and and paste if you wish so.

For starters, you need to turn your index.html file into a PHP one. No magic here. Just change the extension of your file to .php and you're good to go. Having done that, you can use PHP function to load stuff to your brand new index.php file (homepage) from external files. Say, you want to load content from a page called about.html First, make sure that such a page exists and it's in the same folder (directory) where your index.php file is. Now that you checked all that, you can use the following code to load all the content from your about.html file:

$stream = fopen("file.php","r"); // open the file and allow it to read stuff
$string = stream_get_contents($stream); // create a variable with content of your about.html file
echo $string; // display the content of the $string variable
fclose($stream); // and finally close the file you got that content from

As you can see for yourself, it's a really simple code that allows you to do the job just fine. You can just copy and paste it to the spot in your index.php file where you want to show the content from your about.html file.

Since that would raise the issue of duplicate content  (your homepage and external files will have portions of identical or similar content), you need to take  care of that issue as well. Otherwise your site may have severe problems with the major search engines.

Here are the solution in a nutshell:

a. rel=canonical for main page. Thus Google will know which is the main page and which is a secondary one.

b. blocking your homepage from being indexed. You can do it with the help of robots.txt and your homepage will become invisible for search engines.

c.unique content on your homepage. This fix will just partially take care of the issue, but your homepage will be more thick (good) in terms of how Google comprehends it.

JavaScript and jQuery

Also, in case you don't like doing stuff in PHP, you can load content from external files with the help of jQuery. The advantage is that you won't need a local server to test it. Plus you'll be able to load both whole external files and only certain portions from them (content of specific divs).

The good news is that unlike with the PHP solution you're not supposed to change file extensions for implementing the jQuery solution. You need to create an HTML file with the content that you want to load to your homepage (index.hmtl). Now, open your index.html file and add the following code in the head section:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

It just enables your file to use jQuery in it. At this point, you're supposed to create a paragraph where you want to display the content from your external file. I'l add an ID to my paragraph and call it ‘about'. Just because I'll load content from the about.html page. So, that code should look similar to this one:

<p id="about"></p>

You may be confused by the fact that there's nothing between the opening and closing paragraph tags, but that's supposed to be so. I'll dynamically load content there from an external file.

Now just add the following jQuery code before the </body> tag in your index.html file in order to load the actual content from your about.html file:

$('#about').load('about.html', function() {
	//alert('Load was performed.');
});

Basically that's it. You need to do  the same for each section that you want to load external stuff for. You'll just need to rename IDs and files name of your external HTML files.

Bottom Line

All in all, it's an interesting effect that you can consider using on your site. You just need to keep in mind that implementing that sort of effects should not harm your site's rankings. Otherwise it's totally not worth it because if you're not visible in Google, nobody will see your fancy bells and whistles. Put your customers first and always test your ideas before putting them to practice.

About Kenneth von Rauch

Ken is an SEO at WebDesy.com. He’s confident that smart web solutions with just a bit of SEO can make the web a better place to be in. He’s meticulously studying the issues that parallax scrolling designs bring to the search engine optimization table.

WebDesy.comKennethVonRauchPosts