We have a product page in which 4 item carousels are present, showing mostly related products. All these 4 carousels are client side rendered.
1. Scenario1: Google rich results
Now, we have observed that none of these 4 carousels are rendered when tested in Google "Rich Results Test" tool in desktop mode.
2.Secnario2: User-Agent="Googlebot Dekstop"
Also, on another note, I tested the same URL in browser by using "User-Agent" as "Googlebot Desktop". In this scenario, 2 of the carousels(sponsored) are rendered but not the remaining two(non-sponsored). They are handled differently in code.
The sponsored carousels data is already available in SSR HTML(NEXT_DATA) are rendered based on intersection observer API on client.
Where as the non-sponsored carousels data is fetched on client after hydration and then rendered.
In this scenario, the HTML rendered contains none of the carousels and matching the Scenario1, that is same as HTML rendered in Google rich results test.
- What is the actual HTML rendered to bots? is it the HTML rendered in "Google rich results Test"(Scenario1) tool or the HTML rendered in browser when "user-agent" is set as "Googlebot Desktop"(Scenario2?
- if it's the Scenario2,
- The bot is able client side render the carousels that are based on intersection observer API as data readily available, but it didn't render other two carousels for which additional network call is needed. Don't bots wait for network calls after hydration and render client side components?do they have time window within which HTML need to be rendered to be consider for the crawling?
- what is the ideal way to serve bots here? should all the carousels be present in SSR document and avoid CSR?