SEO when lazy loading on carousel

Question

I have some carousels on a website with some lazy loadings such as the image loads only when the user moves the carousel or click the arrow. (It doesn't move by itself.)

<div class="owl-carousel">
    <img class="owl-lazy" src="#" data-src="http://.....image.jpg" alt="Image 1" />
    <img class="owl-lazy" src="#" data-src="http://.....image.jpg" alt="Image 2" />
</div>

Problem is, img src attribute is only populated on this event. And this event occurs only on the user action. But as my data-src is not read as an image by Googlebot, and as my src contains # on page loading, Google indexes only the first image of each carousel (which are visible on loading), event if all my images are in my sitemap. (Search Console says the sitemap contains all the images, but not in Google index)

Do you have any idea on how I would be able to reference all these images in Google?

Answer 1

Someone had a similar situation to yours on here recently.

Their solution was to load the href="" attribute upon page load. And then with an onload javascript they removed the href attribute. This allowed the href to be displayed in the html but not rendered in the browser. This allows crawlers that can't understand Javascript to better read your page, and also serves the images up to users who don't have Javascript turned on.

You could also set the images to display:none; or display:hidden; so that Google can discover the images.

I really don't fully advise either of these methods though because it's hard to know if Google would consider this cloaking or not. It likely won't, but there are still some risks involved.

Any time a website is coded with unusual standards it's difficult to determine how it will perform with Googlebot. In general, it's best to try to code your site with crawlers in mind while still providing the content to the user with the best experience possible.