Lazy-loading & SEO for hidden carousel elements

[oyeanuj]

Hi folks! Thanks for maintaining this port!

So, I am using this in a server rendered context to show a list of clickable cards. Now with Lazy loading, it doesn't create those components on initialization which would affect SEO for the page since those card links aren't discoverable.

Is there any way to have SEO not suffer in such a case? If not, would you consider adding a placeholder prop which renders a placeholder component for lazy loading cases?

If we do that, I imagine line 113 below would need to change to instead render the placeholder component: https://github.com/akiran/react-slick/blob/48c93ed36cfb58991e6bf4d34a1a588094281d12/src/track.js#L106-L114

[oyeanuj]

Another option if this should be solved in the userland is to provide a renderChild method for the children items that is called with a flag like isVisible. In that case, the placeholder logic can be shifted to the user.

Thoughts @akiran @laveesingh @maddhruv?

[lucashfreitas]

I am facing the same issue using SSR. Did you find any solution for that @oyeanuj ?

[lucashfreitas]

@oyeanuj I solved this problem setting sliderContent lazyLoading property to false. Now all the slides contents are being rendered for SEO.

const settingsSliderContent = { dots : false, lazyLoad : false, infinite : false, arrows : true, fade : true, speed : 500, slidesToShow : 1, slidesToScroll: 1, swipeToSlide : false, accessibility: true,

[oyilmaztekin]

@lucashfreitas Providing a placeholder content rendered by the server while the original content is progressively loading is a good example. That is why @oyeanuj suggested adding a placeholder prop as a feature. Setting lazyload property as a false also prevents progressive loading. Rendering small-sized placeholder content by the server for SEO purposes also loading original big-sized content progressively... or similar solution that we expected.

[debjits1]

@oyeanuj @oyilmaztekin I am facing the same issue. Googlebot does not crawl the lazyloaded items, also I don't render the slides at SSR. Can anyone help me here?

[adamjez]

I'm facing the same issue too. The behavior changed in the version 0.27.1: https://github.com/akiran/react-slick/commit/8ae0e38218da99ac87b3322306ca693a17c5a9f2

Behavior before version 0.27.1: Initial slide was rendered even with lazy loading enabled in server-side rendering.

Behavior in version 0.27.1 and forward: No slide is rendered with lazy loading enabled in server-side rendering.