Is there a way to index the images generated by "Next/Image Component" in Google Image Search?

Question

I am having issues with indexing the images that are optimized by the Next/Image component these images are in the public folder of my Next.js app.

I haven't seen any examples where any resource/URL like below, that was generated by Next/Image component has been indexed in google image search.

This type of URL: https://www.example.com/_next/image?url=%2Fimages%2Fhome%2FDog-image-1.jpg&w=384&q=100

The reason that these images are not getting indexed in google despite having the resource content-type: image/jpg in http header is because google needs to crawl the resource at the location root file/resource/URL like this: https://www.example.com/images/home/Dog-image-1.jpg

Why? If the http header has the correct content-type? Because google needs make sure that it knows the original resource because it is not sure how long the URL that is generated by Next/Image will stay, and it wants to avoid these kind of URL's or base64 in its image index to avoid 404 errors in the search engine to maintain a satisfactory UX, so it needs to crawl the image resource at it's location directly and it has to crawl it in the html code.

Now the question:

How is it possible to make google crawl the root resource/URL in my img tag when using the Next/Image component as well. If that's not possible Next/Image is not at all for e-commerce or other image dependent websites that depend on a lot of traffic from image search, even other websites would be reluctant in sharing your images via these URLs.

Anybody thinks a data-src attribute can solve this or something here https://nextjs.org/docs/api-reference/next/image#minimum-cache-ttl?

Thank You for Your time.

Quail

did you find any solution? – Algetic

Answer 1

I did it using https://nextjs.org/docs/api-reference/next/image#unoptimized

Since Next.js 12.3.0, this prop can be assigned to all images by updating next.config.js with the following configuration:

module.exports = {
  images: {
    unoptimized: true,
  },
}

And as a result I have regular image URL https://www.example.com/images/home/Dog-image-1.jpg

Malversation

Well this is not the solution. It kills lazy loading and makes the loading speed of website to next level. There are points where we need optimized images, so we cannot directly unoptimized all the images. – Harrisonharrod