Images are not being crawled by Google when using React DatoCMS Image component

Describe the issue:

Hello team, We recently launched a new Marketing site (https://www.vanraam.com) with the DatoCMS and NextJS stack combo. Since we are using Dato as CMS, it’s a great advantage to use your Image component to get all the benefits from responsiveImageFragment for images out of the box. However, we are facing an issue; in our Google Search Console, we found that the images are not being crawled by Google.

After checking the source code of the Image component and taking a look at the page source of our website, I’ve noticed that the img tag with the actual URL is not rendered in the HTML with the intersectorObserver approach, only within the <noscript> tag, making it so that Google can’t find these images in the website HTML. Here you can find some screenshots of the issue:

I would like to know if you have received similar feedback related to this topic before. Additionally, is it possible to consider updating the Image component to utilize the browser’s native lazy loading approach?

Thanks in advance for any help and thoughts on this.

Cheers.

Hi @gerald,

Are you sure these images aren’t being indexed? A reverse image search shows several of them, for example: 1, 2, 3. Google is aware of them and knows where to find them, at least

And the image is in the HTML, outside the <noscript/> tag:

And in your screenshot (sorry, translated so I can see what’s happening), it looks like Google can detect the URLs just fine, but it wasn’t able to load them for some reason…?

What happens if you put those asset URLs directly into Google’s URL Inspection Tool?


As for the browser-level lazy-loading, that is actually something we’re in the middle of considering! I just pinged the dev working on it to ask what the status of that is, and I’ll report back if I find out more.

@roger, thanks for the quick response. Really appreciate it.

Yes, the img is render in the HTML but only when is in the viewport, if you inspect the source code and look at all the images you will find that the img tag with the actual URL is not rendered just within the <noscript> tag.

1 Like

Hey @gerald,

Sorry for the slow reply here. Last week was a US holiday.

I did some more testing, and as far as I can tell, Google should be able to see the images. For example, using our Next.js demo project, here is a sample page: Landing page DatoCMS Starter

And as Google sees it:


The <noscript> tag is just there in case there’s a user or crawler with JS disabled.

Is it possible there’s something else blocking Google indexing for your particular site (firewall? robots? captcha/CDN)?

Regardless, it still looks like those images (at least the ones you mentioned before) are showing up in their index. Are those from a previous version of the site, or…?


Side note: We are still looking into the browser-level lazy loading. We don’t have a clear release date for that yet, but one of the devs is investigating it!