next-image搭配Cloudinary使用时SEO工具抓取图片返回404如何解决？

你的next-image用法功能逻辑没有问题，出现SEO工具404报错是两个核心原因导致的：

• 未执行JS的爬虫（包括谷歌部分爬虫、Screaming Frog默认抓取规则）只能获取到HTML初始写入的相对路径/blog/${imageSlug}，无法拿到客户端JS运行后拼接完成的Cloudinary全路径，因此会默认拼接你的站点域名发起请求，触发404。
• next export静态导出场景下，Next.js不会在构建阶段完成外部loader的路径预拼接，路径拼接逻辑被推迟到客户端运行时，进一步放大了爬虫无法获取正确路径的问题。

以下两个方案任选其一即可解决问题：

方案1：构建阶段预拼接完整图片路径（更推荐） #

直接在代码层面提前拼接完整Cloudinary路径，不需要依赖next.config的loader自动拼接，确保静态导出的HTML里直接写入正确的全路径，爬虫可以直接识别。

1. 先抽离统一的Cloudinary公共前缀常量方便维护：

const CLOUDINARY_PUBLIC_PATH = 'https://res.cloudinary.com/jumbodonuts/image/upload/'

2. 调整next-image组件写法，直接传入完整路径，同时指定loader直接返回路径即可：

<Image
    src={`${CLOUDINARY_PUBLIC_PATH}/blog/${imageSlug}`}
    width="800"
    height="800"
    loader={({src}) => src}
    alt="填写对应的图片描述即可"
/>

注意别忘了给Image组件加alt属性，也有助于图片SEO优化。
调整后你原来的next.config里的images.domains配置可以删除，该参数仅针对Next.js内置图片优化服务生效，使用外部云存储时不需要配置。

方案2：配置图片路径301重定向 #

如果不想批量修改现有Image组件写法，可以在站点部署层配置重定向规则，把所有指向自有域名的图片请求301跳转到对应的Cloudinary地址，既不会返回404，也不会影响SEO权重。
以Nginx部署为例，添加如下重写规则即可：

rewrite ^/blog/(.*)$ https://res.cloudinary.com/jumbodonuts/image/upload/blog/$1 permanent;

如果使用Vercel/Netlify等平台部署，对应配置平台的重定向规则即可，逻辑完全一致。

内容的提问来源于stack exchange，提问作者antonwilhelm