How to force Google and other bots to pick actual images and not thumbnails?

Question

For example, if there is an online shopping websites with thousands of small thumbnails of products and when you click over them it shows actual retina/full HD image over a popup. In this scenario, how we can ensure that Google or other bots should crawl only the retina/HD image and not the thumbnail when someone searches in Google images?

Answer 1

Link the thumbnails to the images for users that don't have JavaScript enabled. Like this:

<a href="full-image.jpg"><img src="thumb-nail.jpg"></a>

As long as users can see the full image by clicking, you can disable the click event on the link using JavaScript without incurring a penalty from Google.

Google treats links to images the same as actually having the full image in the page itself. Linking will get the full image to rank in image search and associate it with the correct page on your site.

You could also add a header to the thumbail images that prevents Google from indexing those:

X-Robots-Tag: noindex

If you have the Apache server you could use a directive in .htaccess like:

<FilesMatch ".*thumb.*\.(gif|jpg|jpeg|png)$">
    Header set X-Robots-Tag noindex
</FilesMatch>

Answer 2

Apply responsive images:

• Use relative sizes for images. For example:

  img{max-width:100%}
  

• Enhance imgs with srcset for high DPI devices. The srcset attribute enhances the behavior of the img element, making it easy to provide multiple image files for different device characteristics. Similar to the image-set CSS function native to CSS, srcset allows the browser to choose the best image depending on the characteristics of the device, for example using a 2x image on a 2x display, and potentially in the future, a 1x image on a 2x device when on a limited bandwidth network.

• Art direction in responsive images with picture. To change images based on device characteristics, also known as art direction, use the picture element. This element defines a declarative solution for providing multiple versions of an image based on different characteristics, like device size, device resolution, orientation, and more. Use the picture element when an image source exists in multiple densities, or when a responsive design dictates a somewhat different image on some types of screens. For example: The <picture> element of Google.

• Relative sized images. When the final size of the image isn’t known, it can be difficult to specify a density descriptor for the image sources. This is especially true for images that span a proportional width of the browser and are fluid, depending on the size of the browser.

Instead of supplying fixed image sizes and densities, you can specify the size of each supplied image by adding a width descriptor along with the size of the image element, allowing the browser to automatically calculate the effective pixel density and choose the best image to download.

<img src="yourimage-200.jpg" sizes="200vw" srcset="yourimage-100.jpg 100w, yourimage-200.jpg 200w, yourimage-400.jpg 400w, yourimage-800.jpg 800w, yourimage-1000.jpg 1000w, yourimage-1400.jpg 1400w, yourimage-1800.jpg 1800w" alt="your image alternative info">

Source: Web Fundamentals Images of Google.

Apply structured data to your images:

• For a list of products or categories, apply the type ItemList + Schema info.

• For images, apply the type ImageObject. Here for your thumbnails you can apply the property thumbnail. For the value of this property, you can use your value from Relative sized images, exemple:

  img src="yourimage-200.jpg" sizes="200vw" srcset="yourimage-100.jpg 100w
  

For the main image and for the thumbnail, you can use the properties width and height. It will also be useful to use the property contentUrl.

This will help search engines and browsers determine the most relevant image for each particular device (from which the request came).