As you probably know, the parallax scrolling effect is all the rage now. Many brands use it on their sites to entertain and engage their audience even more. Also, pretty much all major web design providers offer parallax scrolling designs to their customers.
The interesting thing is that they don't seem to care that much about the SEO aspect because they use one-page designs regardless of how it can influence SEO rankings. Sure thing, parallax scrolling designs are dynamic and visually appealing (just like Flash back in the day), but if you look under the hood, you can see some unexpected pitfalls. Before we go any further, let's see what is actually wrong (or can be wrong) with the parallax scrolling effect and then you'll get to know what you can do to fix those issues.
Since all the content is on one page, all your texts, images, and videos (if any) are placed in the same file. And that goes without saying that such an approach makes your page way heavier than it could be otherwise. So, for starters, you need to optimise your images. No need to use hi-res images. Retina? You're not really supposed to use retina images as of now because not that many devices can enjoy them. If you're absolutely sure that you need retina-optimised images and your traffic stats prove that, at least make sure to load high quality images only for retina-ready devices. You can do that with the help of retina.js or a similar JavaScript library.
It's good practice to optimise your page for 1-3 keywords. So, if you have five pages in your site, you can optimise each for 1-3 words, which means 5-15 keywords per site. Fair enough. Now, if you use a one-page parallax design, you're limited to just 1-3 keywords because your site is actually just one page. That's another reason to break your one-page design into multiple pages. I'll offer you a solution or two down the road.
You're supposed to use one H1 tag per page. Otherwise it'll be considered bad practice by major search engines. You also want to use your keyword in the headline. Since your whole site is one page, you can use one H1 tag per your whole site. Another limitation right in your face.
Meta data is pretty much the information about what your site or page is all about. Although it won't directly influence your SEO, you'll definitely be able to see the disadvantages of using a one-page site. That said, let me explain why. Meta data consists of meta title and meta description. They are displayed on search results pages when you do your Google research. You can have one title and description per page. Again, your one-page site is ... one page. So, if you have one set (title and description) of meta data, it means that there's only one way to find your site in SERPs. It's like having one door to enter a house. If you had three pages in your site, it would be like three doors to enter, etc.
On a side note, there's another meta element entitled meta keywords, but they are not used by major search engines nowadays. At least, they are not game-changers for sure. So, you can pretty much ignore meta keywords. OK, back on track.
If you want to both use the parallax scrolling effect and make your site responsive, you'll have to face a whole lot of obstacles because it's pretty hard to make a parallax site display properly on all sorts of devices. So, in case you're sure that you need both technologies on your site, be ready to shell out. That's because you'll have to hire a real pro who has the skills to implement both trends within your site.
Now let's take a look at a few parallax scrolling tutorials that allow you to take care of the issue in both techie and non-tech ways. Whatever works best for you.
Basically, you may just want to use all sorts of gimmicks and visual effects on your homepage and place links to external pages that contain your content that you want to be indexed by search engines. That's a non-tech workaround, but it works just fine if you can move your important stuff to external files and keep the fluff on the homepage.
There's another way to do that, but you need to make sure that you're comfortable with PHP. I'm not going to go into details now, but the general idea is to create a few PHP files that contain content for different pages, such as 'about-us.php, 'contact.php',etc. That done, turn your homepage HTML file into a PHP one. Now you can just load the content of your external PHP file into your homepage file. One of the PHP methods that you can use is as follows:
$stream = fopen("file.php","r");
$string = stream_get_contents($stream);
echo $string;
fclose($stream);
You need to place this chunk of code to the location where you'd like to load your external file to and replace 'file.php' with the actual file name, such as about-us.php, contact.php, etc. Now you can use a headline (h1), Meta title, and Meta description in each .PHP file.
In case you want to use a client side solution, you can load an external HTML files with the help of jQuery.
For starters, connect to jQuery with this line of code:
(open chevron)script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"(close chevron)(open chevron)/script(close chevron)
Now just create a paragraph and assign the 'result' id to it ((open chevron)p id="result"(close chevron)(open chevron)/p(close chevron)) now inert this chunk of code where exactly you want to display the loaded HTML content:
$('#result').load('about.html', function() {
//alert('Load was performed.');
});
Basically, the code will insert the content of your about.html file between your paragraph tags (open chevron)p id="result"(close chevron)(open chevron)/p(close chevron).
Just like with the PHP method, now you have seperate files for different content of your site. The cool thing is that visually you'll have the same parallax site, but this time around the SEO aspect is fixed.
I'd personally recommend using the jQuery fix because it does not require a local server. Plus it's way easier to implement the solution.
As you load content from external files, you create another SEO issue that is called duplicate content. Basically, it's when you use the same or very similar text on a few pages within your site. You'll have to tell Google and other search engines explicitly which of the duplicates is actually the original.
You can do it by applying the rel=canonical solution or you can just prohibit search engines from crawling and indexing your homepage (index file). You'll be able to do it by editing your robots.txt file. If you're not sure which way to go, you need to consult an SEO in order to make the best educated decision possible in your particular situation.
The parallax effect is a very popular trend now, but you can land in hot water if you implement it improperly. Again, the effect itself is OK and it's worth using it if you're sure that your have a creative design idea for your particular audience and you know how to apply the effect safely for SEO. The source of the parallax scrolling effect problem is the fact that it's usually designed as one file. That's not good for your SEO. You can fix the issue either with the help of PHP or jQuery. Which way to go is up to you. As they say, there's no accounting for taste.
Which solution would you personally apply if you have such a dilemma?
*A special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion. (Source: Wikimedia)
