Hello,
Am planning to implement a codepen but the HTML looks like hereunder.
<div class="card"><img class="lazy" data-src="https://images.pexels.com/photos/3575854/pexels-photo-3575854.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" /></div>
Does it makes sense SEO wise to use “img data src” instead of “img src” and “alt”. I mean the image is no more a content which Google can understand and take into account, right ?
I’m not sure why you would be using data-src instead of the standard src, but I can’t see that it would affect SEO.
The “alt” attribute, however, is required, not only for search engines, but for human visitors who are unable to view the image, for whatever reason.
Quoted from somewhere :
data-* attributes only have meaning for JS scripts.
…data-src to provide additional information that can be used by JavaScript for improving the users’ experience.
It seems you cannot use alt with data-src. Based on the above, my point is that my images will be “invisible” ?
Does the browser understand data-src to load the image? (That’s a genuine question.)
What of visitors without JavaScript? Does the site still work for them, without the “improved” experience? If not, I’d think again about this approach.
As far as Google goes, I would strongly suggest reading and following their guidelines. https://developers.google.com/search/docs/advanced/guidelines/google-images
You will need a src attribute for people who don’t have JS enabled.
Sorry, I’m not following here.
That pen is using src and alt.
Yes it’s the case for the 1st images, then it used on data-src. I started implementing it as well… then I realized that ! 
What problems are you having using that codepen in your site?
Like I said in my initial post, am concerned about the SEO. I have a photography website (my own pictures). Having them being loaded and not properly indexed by google is a major issue for me.
In that case, you probably need to find another way to do the lazy loading.
There was a discussion on the forums a little while ago here which might help.
Thanks but my requirement is a bit more specific. Since I have pictures of different sizes, I need to load the image in masonry style (using JS) together with Lazy loading.
Check this post about Googles’s AmpProject that has the hidden benefit of storing images on their free CDN.
Oh I forgot to mention that my photos (dynamic) are loaded by a script. Else I would have use grid css to display static images in masonry. And for sure Lazy loading js would have load correctly.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
