商品图片在笔记本上看起来正常，在手机上却消失了。另一个页面用 CSS 背景展示同一张图，第三个页面虽然有图片元素，却指向不存在的文件。只说“把 alt 写好一点”，解决不了这三种不同问题。
Google 在 2026 年 10 月 1 日的咖啡教程中展示了 Lens 和实时摄像头问答场景。对网站经营者，更具体的起点是：页面能否提供可用的图片，并清楚解释图片内容？下面的流程检查这些基础条件，不测试 Lens 的选图结果，也不承诺 AI 引用。
1. 先复现四种情况，再扩大到全站
2026 年 10 月 18 日，我们用 Chromium 在 1280px 和 390px 视口宽度下打开了四个专门制作的本地示例页。四页使用同一张 560 × 320 的杯子 SVG 示意图。本地页面带有 noindex 指令，不属于 Google 索引实验。
| 示例 | HTML img 元素数 | 图片响应 | 390px 下的表现 | 这项观察能确认什么 |
|---|---|---|---|---|
| 仅 CSS 背景图 | 0 | 200，SVG | 背景可见 | 图能加载，但没有通过 HTML 图片元素提供。 |
| 图片文件缺失 | 1 | 404，纯文本 | 图片损坏 | 页面标记引用了服务器并未提供的文件。 |
| 移动端隐藏 | 1 | 200，SVG | display: none | 文件能加载，但窄屏布局不显示这张图。 |
| HTML 图片与文字说明 | 1 | 200，SVG | display: block | 该示例提供了可获取、可见的图片及相关说明。 |
缺失文件的图片自然宽度为 0，成功加载的图片元素自然宽度为 560。被隐藏的图片在 390px 下仍加载成功。因此，请求成功和图片可见需要分别核对。
2026 年 10 月 18 日在 900 × 700 视口拍摄的本地教学示例。这是示意素材和浏览器检查，不是客户效果或 Google 搜索结果截图。
2. 检查图片元素，而不只看外观
Google 的图片 SEO 文档建议使用标准 HTML 图片元素，并说明不会索引 CSS 图片。先在渲染后的 DOM 中检查重要的商品图或教程图。
对于承载内容的图片，可以从这样的结构开始：
<figure>
<img
src="/images/white-cup-handle.jpg"
alt="带弧形把手的白色陶瓷杯"
width="560"
height="320"
>
<figcaption>白色杯子的把手形状。</figcaption>
</figure>
上面的 JPEG 地址只是示例，应替换为实际存在的图片文件。真正用于装饰的图片可以使用空 alt；承担商品细节等信息的图片，应提供适当的替代文本。Alt 文本指南解释了两种用途的区别。
可在公开页面的 DevTools Console 运行以下代码，列出 HTML 图片：
console.table([...document.images].map(img => ({
src: img.getAttribute('src'),
selected: img.currentSrc,
alt: img.getAttribute('alt'),
loaded: img.complete && img.naturalWidth > 0,
display: getComputedStyle(img).display
})));
这份清单有明确范围：不包含 CSS 背景图，也无法识别元素移到屏幕外、透明、被祖先元素隐藏或被其他内容遮挡等所有情况。这些需要另外检查。懒加载图片可能要在正常滚动后，加载状态才有判断意义。
对响应式图片，同时比较写在 HTML 中的 src 和浏览器实际选择的 currentSrc。桌面版本可用，不代表手机选择的资源也可用。使用 picture 或 srcset 时，应保留可用的 src 回退地址。
3. 核对浏览器实际选择的图片资源
从浏览器 Network 面板复制准确的图片 URL。打开面板后重新加载页面，选中该图片请求，记录最终 URL、状态码和 Content-Type。打开资源，确认返回的是目标图片，而不是 HTML 验证页、登录页或带品牌样式的错误页。
命令行 GET 可以提供第二项观察：
curl --location --silent --show-error --dump-header - \
--output /dev/null 'https://example.com/images/white-cup-handle.jpg'
这个命令打印响应头，不检查下载内容在视觉上是否正确。浏览器与命令行客户端可能收到不同响应，两者都不能自动代表 Googlebot 的请求结果。
还要检查图片所在主机的 robots.txt 及相关 CDN 访问规则。页面域名的抓取规则，不能代表另一个图片 CDN 域名的规则。公开搜索素材也应避免使用很快失效的签名地址。Google 的图片站点地图说明可帮助提供图片位置，包括托管在外部主机的图片，但站点地图不能修复无法访问的资源。
如果地址返回 HTTP 200，但正文其实是错误页，需要继续排查 soft 404。再准确的 alt，也不能把错误响应变成有效商品图片。
4. 在手机布局中重复检查，并阅读附近文字
示例中，一条媒体查询在宽度不超过 600px 时隐藏图片：
@media (max-width: 600px) {
.hide-mobile { display: none; }
}
在 1280px 下图片可见；390px 下图片隐藏，但资源仍返回 200。这只能确认布局差异，不能直接证明某种 Google 排名或索引结果。
检查自己的页面时，应比较主图、说明文字、选中的图片文件、可见商品信息，以及是否必须操作后才会加载图片。Google 的移动优先索引说明强调资源可访问和重要内容等价。若差异不止一张图，可继续用移动端内容一致性流程检查。
再阅读图片旁边的段落：是否说明了实际商品、步骤或特征？图注是否准确？描述性文件名和 alt 应配合上下文，而不是罗列不相关的搜索词。对于多模态搜索，内容连贯的落地页，比堆砌关键词标签的孤立图片更有用。
5. 另外检查 Google 的记录
浏览器审计可以确认当前实现。要调查 Google 已记录的状态，需要使用对应工具，并为每类证据标明范围：
| 工具或记录 | 有助于回答的问题 | 边界 |
|---|---|---|
| 落地页 URL Inspection | 有哪些页面索引信息或实时测试结果？ | 页面已索引，不代表其中每张图片都已索引。 |
| Search Console 效果报告，图片搜索类型 | 哪些落地页有已报告的图片搜索展示和点击？ | 不是完整的逐图索引清单，也不是 Lens 专属报告。 |
| 图片主机的服务器日志 | 经识别的爬虫是否请求过资源？ | 请求不证明索引、排名或答案引用。 |
| 指定视口下的浏览器 | 当前重要图片能否加载和使用？ | 不代表 Google 已索引或渲染的版本。 |
具体用法见官方 URL Inspection 文档和效果报告文档。本教程没有报告私有 Search Console 实测数据。
6. 修一个已确认的问题，再用相同条件复查
为重要图片记录落地页 URL、实际图片 URL、视口、响应、DOM 观察、可见上下文和日期。针对确认的故障修改，再重复相同检查。
- 承载内容的图片只有 CSS 背景：用适当的 HTML 图片元素提供。
- 图片文件缺失：修复引用路径，或恢复目标文件。
- 重要图片在手机上被移除：在手机布局中恢复有用内容。
- 图片描述不准确：让图注和 alt 与实际图像一致。
图片优化指南覆盖传输与页面体积，SEO 优先级修复清单有助于按根因合并处理。大型网站如果多个页面共用同一个错误模板，应修模板，而不是逐张重写描述。
应立即验证的是文件、标记或用户体验是否修好。搜索可发现性和表现需要后续单独观察。Google 的 AI 搜索功能说明没有要求特殊 AI 标记，也不保证入选展示。
