Images Not Rendering with Webmasters Fetch as Google Tool about yall.js

[leeoniya]

i would not treat AMP as a fair guideline of what to do. they have a lot of their own special tags and i'm sure google does whatever it needs to make sure it understands AMP content for its own purposes.

google's official guidelines are here and have no signs of tag replacement (which can break SSR and vdom-infused doms):

https://developers.google.com/search/docs/guides/lazy-loading
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

[DanThePainter]

I'm assuming the Google image bot and the Google fetch tool have a connection. But I suspect these are 2 separate entities. My images using yall don't render in Google fetch tool. I've been monitoring my indexed images on Google images using site: domain.
I also submitted an image sitemap to Google.
So far I'm seeing...
Only where I used <noscript><img src="nojavauserimage.jpg></noscript> are indexed.
I suppose Google image bot wants to see noscript fallback images.
Currently I believe the Google fetch tool is not to be used to determine if images will get indexed.
I'm still watching to confirm Google image bot behaviour.

[malchata]

This is a known issue. I'm not sure what causes it. When I've looked at other tools to find out why they work, it's not entirely apparent. I'll need to get a copy of Chrome 41 I think to troubleshoot.

[DanThePainter]

I had to write an "unyall" function to get images to render on Google Fetch tool.
unyall function detects Chrome 41 and turns all img data-src to src.
(If Chrome 41 then make stuff look like normal.)
I'm beginning to see my images appear in Google images after a Google indexing request and 9 hours of time. Going to monitor what happens next. Maybe Google will deindex images lol,

[DanThePainter]

btw...
The javascript used by Google AMP pages cdn.ampproject.org/v0.js uses lazy loading and images do render in the Google Fetch tool . This code maybe something to analyze.

[malchata]

Thanks for this, @DanThePainter! I'll see if I can find a repo for this with the unuglified source and try to find out what it is I'm missing. It's something I've been wanting to fix for quite some time, and this at least gives me some place to start.

[DanThePainter]

It looks to me that Google AMP pages don't change img attributes. It changes custom tags to img tags. Perhaps this is what Google image bots accept and images get indexed.
I've noticed that images on all my Google AMP pages show up in Google images.
I would certainly try out a version of yall that makes uses of custom tags instead of src changes.
<yall-img src="theimage.jpg"></yall-img>

[leeoniya]

also, from [1].

SEO improved: lazysizes does not hide images/assets from Google. No matter what markup pattern you use. Google doesn't scroll/interact with your website. lazysizes detects, whether the user agent is capable to scroll and if not, reveals all images instantly.

i'm not sure if this is bulletproof. it also requires that js is enabled, so <noscript> would not matter.

from [2], the way google recommends to test it is:

After you set up your implementation, you should make sure it works correctly. One way you do this is by using a Puppeteer script to locally test your implementation. Puppeteer is a Node.js library for controlling headless Chrome. To run the script, you'll need Node.js. Use the following commands to check out the script and run it:

the best solution might be to test the user-agent on the server and just serve proper src attrs without lazy-loading anything.

[1] https://github.com/aFarkas/lazysizes#what-makes-lazysizes-so-awesome
[2] https://developers.google.com/search/docs/guides/lazy-loading

[collinsethans]

+1 for this request.

Facing the same issue with Google search console. Google's indexing is kind of black box and prefer to do things as it wants.

[DanThePainter]

+1 for this request.

Facing the same issue with Google search console. Google's indexing is kind of black box and prefer to do things as it wants.

I switched from yall to lazysizes. Google image bot indexed all my images.

[collinsethans]

Yesterday I had migrated from lazyload (jqyery) to Lazysizes. Got the ref from a good article by malchata.

Yall.js is on our list. Didn't migrate to it though due to 2 reasons: 1) the issue in this thread, 2) !IE10 (we need this as analyzing our nginx logs shows a fair count of customers are still using IE10).

I am hoping this one will be supported and need to figure how to quickly support IE10, before migrating to this.

BTW, lazysizes has a fair count of issues as well. I debugged yesterday before migrating and found these:

1. performance issue/unwanted calls (see 614)
2. broken image not handled (see 615)

I think yall.js also doesn't mark if an image fails to load, does it?