有没有办法在Google图像搜索中索引“Next/Image Component”生成的图像？

Question

我在索引由 Next/Image 组件优化的图像时遇到问题，这些图像位于我的 Next.js 应用程序的公共文件夹中。

我还没有看到任何例子，其中由 Next/Image 组件生成的任何资源/URL（如下所示）已在谷歌图像搜索中建立索引。

这种类型的URL：https://www.example.com/_next/image? url=%2Fimages%2Fhome%2FDog-image-1.jpg&w=384&q=100

尽管 http 标头中具有资源内容类型：image/jpg，但这些图像未在 google 中建立索引的原因是因为 google 需要在根文件/资源​​/URL 位置抓取资源，如下所示：https://www .example.com/images/home/Dog-image-1.jpg

为什么？http 标头是否具有正确的内容类型？因为google需要确保它知道原始资源，因为它不确定Next/Image生成的URL将保留多长时间，并且它希望在其图像索引中避免此类URL或base64以避免404错误搜索引擎要保持满意的用户体验，就需要直接抓取其所在位置的图片资源，并且必须在html代码中抓取。

现在的问题是：

当使用 Next/Image 组件时，如何让 google 抓取我的 img 标签中的根资源/URL。如果这是不可能的，那么 Next/Image 根本不适用于电子商务或其他依赖大量图像搜索流量的图像相关网站，甚至其他网站也不愿意通过这些 URL 共享您的图像。

有人认为 data-src 属性可以解决这个问题或这里的问题https://nextjs.org/docs/api-reference/next/image#minimum-cache-ttl？

感谢您的时间。

Answer 1

我使用https://nextjs.org/docs/api-reference/next/image#unoptimized做到了

next.config.js从 Next.js 12.3.0 开始，可以通过使用以下配置更新来将该属性分配给所有图像：

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

结果我有常规图像 URL https://www.example.com/images/home/Dog-image-1.jpg