Images not indexed by Google – lay-image-responsive system
-
Hello,
I'm experiencing an issue with image indexing in Google Images for my website:
https://www.francescocostantino.itThe site is built with Lay Theme.
The gallery images (for example, on this page:
https://www.francescocostantino.it/francesco-costantino-artista-contemporaneo/) are generated using the following approach:The
srcattribute contains only a 1×1 transparent GIF placeholder encoded in Base64, while the actual image URL is stored exclusively in thedata-srcattribute. The realsrcvalue is assigned only through JavaScript.Checks already performed
- I disabled the Lazy Load option in the Lay Options panel, but the behavior does not change: the generated markup still uses a Base64 placeholder in
srcand the actual image URL indata-src. - I tested the page using Google Search Console → URL Inspection → Test Live URL. In the rendered screenshot, the gallery images do not appear.
- I also tested the page with Google's Rich Results Test, with the same outcome: only one image is rendered out of dozens.
I have the following questions:
-
Is there an option (even one that is not exposed in the standard settings panel) to completely disable this JavaScript-based image loading system and restore a standard static
<img src="...">tag, at least for the gallery page? -
Is it possible for the theme to natively provide a proper
srcfallback for every image, so that they can still be indexed even when JavaScript is not executed correctly? -
What exactly does the Lazy Load toggle in Lay Options control, if disabling it still results in a Base64 placeholder being written to the
srcattribute instead of the actual image URL?
- I disabled the Lazy Load option in the Lay Options panel, but the behavior does not change: the generated markup still uses a Base64 placeholder in
-
Hey Francesco! You are right. The source image is just like an empty placeholder, and then the image just gets lazy loaded when it comes into view based on the source set. This is done so we don't load the image twice: once in the source and then the right resolution in the source set.
When I coded this, I realized this is a good approach because I saw many instances where the small preview image would load and then the bigger resolution would load afterwards. I did that to prevent double loading of different sizes.
So this was more of a performance decision.
There is no setting to disable lazy loading just for one part of the website.
You can, however, disable lazy loading for the whole website and also check this setting here called "Never show resized versions of images".
I think this setting is in Lay Options in the lazy loading section or in the image section.
Okay, I just checked, and I realized even with those settings, it will still load the images via JavaScript, and it will still have a 1x placeholder in the original markup.
So when Google indexes your website, it lets JavaScript run, so Google can actually find all of your images.
The thing is, over the years, sometimes people have come up with the same concern: "Oh, my images don't all get indexed by Google." I think the issue is not that Google can't see your images. The thing is, people expect all of their images to be indexed by Google, but the truth is, Google does not index all images. It kind of decides on its own how many images it indexes and which ones, and that's something that you can't control.
-
so that's why I'm 99% sure that if I would change my code now so that images are not just in the source set but also in the source, that would just not really change anything
-
but maybe I'm making a wrong assumption here. Do any of your images actually get indexed, or are there no images at all that are indexed? What's the website address of the website that you're working on?
-
Hey Armin, thanks a lot for the detailed explanation, that makes sense from a performance perspective.
The website is https://www.francescocostantino.it, and the specific page I'm concerned about is:
https://www.francescocostantino.it/francesco-costantino-artista-contemporaneo/To answer your question: only one image is indexed.
But here's why I don't think this is just "Google being selective about which images it indexes": I ran the page through Google's Rich Results Test (which uses the same rendering engine as Googlebot), and in the rendered screenshot only 1 image out of dozens in the gallery actually shows up, the rest stay as blank/placeholder. You can see it here:
https://search.google.com/test/rich-results/result?id=xXK7lCrVXxZVIHqsarDoMgThat's a different thing than "Google chose not to index some images": it looks like during headless rendering, the src/data-src swap simply isn't completing for most images on the page, not just a curation choice on Google's side after successfully seeing them.
So my question is: is there something about how/when the JS swap fires (scroll event, IntersectionObserver, container size calculation via getBoundingClientRect, etc.) that could fail to trigger during a headless render where there's no real user scrolling? That would explain why the rendered screenshot shows almost nothing, even though on a real browser with a real user everything loads fine.
-
This post is deleted!
-
Oh, actually, I just realized this test that you showed me only looks at what is visible on page load in the viewport on mobile.
It is not a test that determines all images on that page.
On mobile, on that specific page, only one image is actually visible on that website in the initial viewport, so it correctly shows one result there.
-
Could you run the page through Screaming Frog with JavaScript rendering and “Extract Images From IMG SRCSET” enabled? That will provide an export of all image URLs found in the rendered page. The Rich Results screenshot alone cannot provide that list.
