4

I was thinking of making a 'load on scroll' image gallery plugin, i.e. I do not want the image to load until it is in view in the viewport. That got me thinking in terms of implementation.

I don't want to use markup that would mean that the images were not indexed by Google, but the question is, what can you do?

You can't have img tags but then stop the files from being loaded because that defeats the purpose completely.

You could not care about the markup and use image site maps instead, but that makes life harder for the person using the plugin.

What, if anything, can one do?

  • Why can't you use img tags? You would create img elements as the page scrolled. But the search engines may not execute your js to see the images anyway, so if you want them indexed they probably need to be accessible via some vanilla HTML as well. – MrWhite Jun 27 '14 at 23:59
  • Possibly with noscript tags? As long as there is an img element with a src, thé browser WILL try to download it, thus diy i seek an alternative – Luke Madhanga Jun 28 '14 at 0:26
6

Google indexes images that are either:

  • In an image tag -- <img src="foo.jpg">
  • The target of link -- <a href="foo.jpg">

If you want to remove an image from the page but still have it indexed from that page, make a link to it on that page.

This is a very good technique for image search optimization anyway. Google ranks very large images better than smaller images. The larger size images are harder to fit on page and take longer for users to download (slowing down the entire page load). A technique that works well is to use the thumbnail in the img tag but link to the larger image:

 <a href="/img/full/foo.jpg"><img src="/img/thumb/foo.jpg"></a>
  • You my friend, are a genius – Luke Madhanga Jun 28 '14 at 10:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.