How to stop WOW.js from killing your SEO

What is WOW.js?

If you haven’t heard about WOW.js, let me quickly explain. Open this link and scroll the page down, you will notice that while you're scrolling new elements appears on the screen. This is called WOW effect.

This simple, free (for the noncommercial project) and easy to implement script allows you trigger animate.css animations while you are scrolling the page.

Probably, you’ve seen this effect many times on different pages i.e. this one. When you start scrolling the page you will notice that different elements aren’t visible immediately. They appear while you scroll creating an amazing effect which impresses your visitors and attracting their attention.

This allows you to achieve stupendous effects and create outstanding websites. Since WOW.js used to be licensed under MIT (open source), it became the most popular solution (7000+ stars on GitHub). It's not surprising that effect is often used by web developers. Even when his author changed the license and started charging users for using the script, didn’t discourage potential customer, therefore wow remains the most commonly used “show on scroll” script.

Critical side effect

Unfortunately, using WOW causes very critical and undesirable issues which are ruining entire SEO for the pages using it. How? Due to fact that WOW makes elements invisible until you scroll down the page, it’s making your website invisible to Google. Let’s see how it works.

Let’s have a look at this sample website using WOW script:

https://mdbootstrap.com/wow/

This is how normal user sees the web page:

And this is how Google see’s it:

Are you shocked? You definitely should be. Each element animated with WOW become invisible for Google bot crawlers, except for those which are visible on the top of the page after the initial load of the web page. If you still don’t understand why this is so important let me explain you in a nutshell how Google indexes the pages and rank them. The most popular search engine uses small bots, so-called crawlers, which are scanning your website. They are crawling through your website and analyzing the content of the page. Google bots are also indexing your internal links and creating sitemap map that means the map of all the links included on your website.

Since many years Google emphasizes that content is one of the most important factors while ranking website. With every update, Google enhances his algorithm to reward websites with valuable content to the users and punish the one which is creating junk. I guess that now you can understand how using WOW can impact your SEO. Regardless of how much effort do you put in your content, how many content marketing specialists you hire, it will have no effect until Google can read your content.

Why actually Google can’t see my website?

The reason is quite simple - WOW, makes elements visible on the scroll. Google bot crawlers are not actual crawlers. Although we state that they are crawling through the website they actually work slightly differently. Crawlers are scripts which are loading the entire website and analyzing underneath. They simply don’t scroll, instead of rendering the entire website at once and analyzing the visible output. And because they don’t scroll, animated content never became visible for them.

Is there a solution?

Unfortunately, although this issue is known to the author, (it was submitted already in 2015) till now there is no solution for it within, the library.

Have a look at GitHub discussion.

Does MDBootstrap solve this issue?

Yes, it does. We have created our own library working the same way as WOW and at the same a time making a website visible for both - users and Google.

In order to use it, simply download MDB from here, and include to your project as it’s shown in this tutorial. Everything will happen automatically. From now on you will be able to amaze your visitors with effect without harming your SEO.

How is MDB solution different from WOW?

Standard WOW script use simple logic, each and every element marked to animate is getting hidden by setting CSS attribute display: to none. As a result, a web browser doesn’t display this element at all until view er doesn’t scroll till that element. As we said before, Google’s crawler doesn’t scroll, therefore all elements remain invisible. Within MDB we have rewritten logic to make sure that both, users as well as crawlers will get what the need.

Within our script, all elements are still visible after loading the page. As soon as the customer starts to scroll they are getting hidden until we reach a point where given element enters the screen and become visible again. The difference seems to be small but has a huge impact. Due to fact that our script hides elements just after user start scrolling, all elements including text remains visible for crawlers. Furthermore, we have written script in the way it doesn’t change the syntax, therefore you do not have change single line of your code if you are using standard WOW solution now. Just replace WOW with our script, and wait for your SEO boost :)