is this library SEO friendly?

[vettndr]

Hi all, is AOS library SEO friendly? Are there any steps to follow to achieve that?

[SergiOca87]

I would like to follow up on this. I am using this library heavily on one site and apparently, it is suffering on the SEO side but I don't know if it is a problem with this library or not. According to some tools like "Screaming Frog" Google bots do see the content that is hidden by AOS but at the same time, content being outside of the viewport causes errors on Lighthouse reports.

[SergiOca87]

To follow up on this, Google Lighthouse reports were giving back a "?" on Performance with an error and what I could find is that the error on performance sometimes appeared when content is outside of the window initially or something similar. The error and "?" on Performance did not happen with AOS deactivated. I wonder if a failed Lighthouse report can somehow hurt a website SEO and indexing in general.

[vettndr]

@SergiOca87 thank you for sharing your experience.

[prageeth]

I ended up going for this appraoch:

npm install is-web-crawler

And in the application, simply initialising AOS with the disable flag when the current user agent represents a "known" crawler.

import { isCrawlerUserAgent } from 'is-web-crawler';

AOS.init({
    disable: isCrawlerUserAgent(),
});

Disclaimer: I created the is-web-crawler library, but simply for the purpose of this use case.

[domdomegg]

Another alternative, which is less accurate than is-web-crawler but might do for some use cases (covers GoogleBot and BingBot at least, and works for pure JS, React, and Gatsby):

AOS.init({
  disable: /bot|crawler|spider|crawling/i.test(navigator.userAgent),
})

And if you want to use the prefers-reduced-motion select in combination with it (to help make your site more accessible):

AOS.init({
  disable: (
    /bot|crawler|spider|crawling/i.test(navigator.userAgent)
    || window.matchMedia("(prefers-reduced-motion: reduce)").matches
  ),
})