Next.js使用Image组件渲染出空alt标签的原因及解决方案问询

那个无alt属性的img是Next.js旧版next/image组件自动生成的布局占位图，本质是base64编码的空白svg，作用是提前撑开图片容器的宽高，避免图片加载过程中出现页面布局偏移（CLS），提升页面性能体验。
它默认携带aria-hidden="true"和role="presentation"两个无障碍属性，本身就是为了告知搜索引擎、屏幕阅读器该元素为纯装饰性元素，不需要被识别和解析，空alt属性是符合W3C无障碍规范的设计。
SEO Minion的报错属于工具的机械检测误判，它只校验了alt属性是否为空，没有识别配套的无障碍属性，实际上这个占位图不会对你的站点SEO产生负面影响，Google等搜索引擎的爬虫可以正确识别aria-hidden属性，不会将该占位图计入有效内容图片。

你可以根据自己的需求选择对应处理方式：

• 直接忽略误报：如果你的站点SEO核心诉求是满足搜索引擎收录规则，完全可以忽略该提示，不会产生实际负面影响。
• 升级新版Image组件：将Next.js升级到13及以上版本，使用App Router下的新版next/image组件，新版已经重构了布局逻辑，不再生成额外的占位img标签，从根源上消除该检测警告。
• 旧版本适配优化：如果你仍在使用Next.js 12及以下的Page Router，可以在next.config.js中开启配置：

module.exports = {
  experimental: {
    images: {
      layoutRaw: true
    }
  }
}

之后在调用Image组件时添加layout="raw"属性即可取消占位图生成，不过该方案需要你自行定义图片的宽高样式，避免出现布局偏移问题。

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