Last Updated on March 7, 2024
This post will highlight some aspects of parallax scrolling that you need to keep in mind if you want to use the effect for your or your client’s site. As you probably know, the parallax scrolling effect is all the rage now. Many brands use it on their sites to both entertain and engage their audience even more. Also, pretty much all major web design providers offer parallax scrolling designs to their customers.
The thing is, they don’t seem to care that much about the SEO aspect of the effect because most companies offer one-page parallax designs regardless of how it can influence SEO rankings. Sure thing, such designs are visually appealing, 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 what you can do to fix those issues.
Parallax is Heavy
Since all the content is on one page (in one file), all your text, 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 optimize your images. You’re not really supposed to use any retina images as of now because not that many devices can enjoy them. If you’re absolutely sure that you need retina-optimized images on your site, at least make sure to load them only for retina-ready devices. You can do that with the help of retina.js or a similar JavaScript library.
Parallax is Keyword-Poor
It’s good practice to optimize your page for 1-3 keywords. So, if you have 5 pages in your site, you can optimize each for 1-3 words, which means 5-15 keywords per site. Now, if you use a one-page parallax design, you’re constrained to just 1-3 keywords. That’s another reason to break your one-page design into multiple pages. I’ll offer you a few solutions down the road.
One H1 Only
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 and Parallax
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 the parallax scrolling effect in your 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 some Google research.
You can have one title and description per page. Again, your 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 3 pages in your site, it would be like 3 doors to enter, etc. Don’t you think that using a one-page parallax scrolling site is like trying to get rid of as many potential visitors as possible?
Not Good for Responsive
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 the technologies on your site, be ready to shell out. That’s because you’ll need a real pro who has the skills to make your site both responsive and with a parallax scrolling effect.
Parallax Lights
You can actually apply a slight parallax effect that won’t influence your site in any major way. Plus you won’t have to mess around with any coding. Such a method is explained in this post. In a nutshell, you can just use a user-friendly parallax background builder to generate your code snippet that you’ll have to just copy and paste. You can use the tool for adding your effect to WordPress, Drupal, Joomla and other CMSs or plain HTML sites. The downside of that approach is that you can’t really customize it to meet any whimsical need and you can apply it to your background only. So, if you need more flexibility, you’ll have to get your hands dirty with some HTML5/jQuery coding or just buy a ready-made parallax scrolling design.
Non-tech fix
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 actual content which 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. So, it’s a no-brainer in fact. Now let’s take a looksie at a few techie solutions.
PHP Fix
There’s another way to make your site more SEO friendly, 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 homempage HTML file into a PHP one. So, your new homepage should be entitled ‘index.php’. Now you can just load the content of your external PHP file into your homepage file (index.php). One of the PHP methods that you can use is as follows:
$stream = fopen(“file.php”,”r”);
$string = stream_get_contents($stream);
fclose($stream);
You need to place this chunk of code to the spot where you’d like to load the content of your external file to and replace ‘file.php’ with your 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. Search engines index PHP files just fine nowadays.
jQuery Fix
In case you want to use a client side solution, you can load an external HTML file with the help of jQuery. For starters, connect to jQuery with this line of code:
// CDATA[
src=”
// ]]>https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js“></script>
Now just create a paragraph and assign the ‘result’ id to it (<p id=”result”></p>) 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 <p id=”result”></p>.
Just like with the PHP method, now you have seperate files for different content of your site. You need to load content for different sections of your one-page site as described above. The cool thing is that visually you’ll have the same parallax site, but this time around the SEO aspect is fixed.
Conclusion
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 it if you’re sure that you have a creative design idea for your particular audience. 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 effectively fix the issue either with the help of PHP or jQuery.