As you may have heard, the parallax scrolling effect is taking the world by storm now. A whole lot of tutorials and articles come out on multiple blogs all over the web. I should admit it really looks cool in terms of the visual picture, but there’s a huge content promotion concern in that regard. And that’s exactly what I’m gonna cover in the article. So, if you’re an SEO who wants to be in the know of this up-to-date web development and design trend or a web designer who wants to make sure that his customer is totally happy with his designs, read on the article, because it’ll highlight the issues to keep in mind while developing a parallax effect website. Other than that, I’ll also explain how to fix the problem that most parallax scrolling websites or templates have.
What is Parallax Effect
The parallax effect is achieved by moving a few objects with different speeds, which creates the illusion of 3 dimensions. This effect was pretty actively used in many simple computer games in the 90s.
This method is getting more and more popular on the Web nowadays. For instance, you can see it on the Nike site. When you scroll, objects start to move both horizontally and vertically with different paces, which makes you feel like there are 3 dimensions and the site sort of gets alive. At least, that was my first personal impression when I saw a site based on the parallax scrolling effect.
How the Parallax Scrolling Effect Works
Web developers usually use JavaScript, HTML5 and CSS3 to achieve the effect. They just make the background and the objects (images for the most part) move at different levels of speed. As a rule of thumb, they just create one HTML file and stuff that file with all the content of the site.
By the way, if you just want to add this effect to your WordPress theme, you may wanna check out this parallax scrolling tutorial. It basically allows to add the effect without any coding, but you will have to copy and paste once.
The Parallax Scrolling Effect Issues
Using HTML5, CSS3 and JavaScript is not a problem per se, but it gets trickier when the developer creates such a design in one HTML file, which means ignoring SEO from the very start.
Now that you know what the parallax scrolling effect is and how developers create it (in general terms) let me make my point why using the method can cause content promotion issues for your site.
The issue is that one file only is used in sites with the parallax scrolling effect. From an SEO standpoint, that’s a real problem because:
● since all the text and scripting are in one file, it slows down the site, which is getting a problem because the site speed factor is gaining impact in site rankings. And if you or your client want to make money with your site, rankings are the main thing that you need to track and worry about. But site speed is the smallest concern.There’s more!
● keyword amount restriction. The thing is that you can use up to 3 keywords for each page in your site. Now, parallax scrolling effect sites usually have one page only. And that means that you just won’t be able to use more than 3 keywords on your site. So, you’ll be losing to your competitors who can SEO optimize more pages for their keywords
● even more keyword amount restrictions. It’s a good on-page SEO practice to use your keyword in a heading (in the h1 tag). Plus you can use the h1 tag once per page only. So, does that mean to you as a parallax scrolling site owner? It simply means that you’ll be able to use the h1 one time only throughout your whole site. And if you decide to use all your 3 keywords in the heading, Google may consider it over-optimization, which means dropped rankings in search engine results pages. Simply put, you’ll lose site traffic and, as a result, potential customers. On the flip side, if you actually decide to use one keyword in the heading of your page, it means that your WHOLE site will be optimized for one keyword only. Long story short, it’s a content promotion disaster.
● one indexed page. Another factor that both SEOs and search engines use to assess the site’s authority is the amount of indexed pages. In layman’s terms, the amount of indexed pages demonstrates your site authority. It shows how cool your site is. And in case of one page, Google will see your site as a very low-authoritative one, because it has just one and single indexed page.
● one meta title and meta description. Again, you’re limited by this amount because your site does not have multiple pages. Meta title and meta description are displayed on search results pages. You can take them as doors to enter your site. If you use the parallax scrolling effect and your whole site is just one page, you have just one door to offer for Google, unlike your competitors with multiple doors. And remember that the more doors you have the more chances for customers to see you (your site).
Paralyzed Parallax?
Though it’s not all roses, the issues don’t really mean that you shouldn’t use the effect by all means either. The thing is that it can be used if implemented right. Here’s the deal. All the problems that I’ve described above are caused specifically and single-handedly by the fact that the whole site is just one page. The good news is that it’s pretty easy to fix that.
Having researched the parallax scrolling effect issue on many websites, I had a hunch that it’s possible to actually just make it right somehow. I guess it’s because I have some web development background and I had a general idea how the whole parallax thing works.
External Parallax Scrolling Effect
The solution turned out to be really simple. You (or your web developer) just need to create a parallax scrolling site in the normal way, but you should load content to different site sections from different HTML files rather than stuff everything into one single file.
You just need to create different files with your website content. Just add appropriate content to each file (about.html, services.html, contact.html, etc.) like you would do if you had a static site.
Having done that, all the SEO issues I’ve highlighted in the post will just get irrelevant, because you’ll be able to have multiple pages with appropriate keywords, title tags and meta data, etc.
Some Techy Parallax Stuff
As far as I understand (I’ve talked to a few experts), there are several ways of loading content from external files.
● PHP. If you decide to use PHP, you need to first of all change the extension of your files to “php”. Rest assured that you’re safe in terms of SEO, because search engines can easily read HTML in PHP files. That done, you can just load external content with the help of similar code:
● JQuery is a faster way to do what you want to do..it’sJavascript… using AJAX.. so a simple load content would be like this
1 2 3 4 5 |
(function($) {
$(document).ready(function() {
$('#contents').load('content.html');
});
})(jQuery);
|
Which exactly way you go depends on the technology you’re most comfortable with.
In Conclusion
It really looks that the parallax scrolling method is not a problem, if you do it right. As a site admin or owner, you need to make sure that your site’s coding and technologies used don’t harm your rankings. I encourage using the parallax effect in site designs, but you need to be absolutely vigilant about how exactly it’s implemented because most developers don’t really care about content promotion and your site rankings. It’s your job to ensure that everything is A-OK.