不少站点在文字层面做得很规范，标题、描述、内链都检查过，但一说到图片和媒体资源就默认「反正搜索引擎也看不懂图」。实际情况是：图片搜索本身就是一个不小的流量入口，而且图片加载失败、地址写在 JS 里、尺寸没有约束，都会让页面在蜘蛛眼里变成另一副样子。这篇就从站点运营的角度，把图片和媒体资源过一遍。
一、蜘蛛看到的图，可能和你浏览器里看到的不是一张
浏览器执行 JS、触发懒加载、走 CDN，用户看到的是最终画面。而蜘蛛第一次抓取时拿到的往往是原始 HTML。如果图片地址只存在于 data-src 或者某个 JS 变量里，蜘蛛看到的就是一个空的 img 标签或者一张占位图。页面上没有可用图片，图片搜索自然也无从收录。
几种常见写法与风险
- data-src / data-original 懒加载：img 的 src 指向占位图或空值，真实地址放在自定义属性里，不执行 JS 就只能拿到占位图。
- 纯 JS 注入图片：图片节点由脚本创建，原始 HTML 里没有任何图片痕迹。
- CSS 背景图承载关键内容：图表、数据图、产品细节图直接写成 background-image，蜘蛛读不到图片地址，也拿不到说明文本。
- 需要交互才显示：图片要点击、滑动或悬停才加载，蜘蛛不会主动触发这些动作。
二、自查顺序：从源码开始看
这件事不需要复杂工具，按下面顺序走一遍，大部分问题都能暴露出来。
- 用浏览器查看页面源代码（注意不是审查元素），搜索 img 标签，确认 src 里是真实图片地址。
- 临时禁用 JS 再打开页面，观察图片区域是否还有内容。这一步能直观看出哪些图依赖脚本。
- 用抓取测试工具看返回的 HTML，确认里面有没有图片地址。
- 翻服务器日志，看图片路径有没有出现在抓取记录里。如果整站几乎没有图片请求，说明蜘蛛压根没发现它们。
三、懒加载要做，但要做成蜘蛛能看见的
懒加载本身不是问题，问题在于把真实地址藏起来。比较稳妥的做法是：img 的 src 直接写真实地址，把懒加载交给浏览器的 loading=lazy 属性处理；如果必须用 JS 实现，至少保证首屏图片有原生 src，同时用 noscript 或提前一段脚本把地址补回去。
判断标准很简单：把 JS 关掉之后，页面上是不是还能看到这张图。看不到，就要考虑降级方案。
四、srcset 与 picture 的写法检查
响应式图片用 srcset 列出多套地址，蜘蛛通常只会取其中一张。要确认 srcset 里的每个地址都可访问，不要出现某档尺寸 404，或者指向被 robots.txt 屏蔽的目录。picture 标签里的 source 和 img 的 src 都要指向真实文件，避免只写 source、没有兜底 img 的情况，否则旧浏览器和蜘蛛都会落空。
五、图片站点地图与 alt 文本
图片站点地图能帮助蜘蛛更快发现图片，尤其是藏在深层页面或相册里的图。可以给重点图片单独配置，标记图片地址和所在页面地址，方便把图片和内容关联起来。alt 文本不必堆关键词，但要说清图片内容，这对图片搜索和可访问性都有帮助。装饰性图片则留空即可，不必强行加词。
六、顺带处理的几个运维项
- 图片体积：大图既拖慢页面，也占用抓取时间。上传前压缩，必要时转成 WebP 等格式。
- CDN 与防盗链：确认图片 CDN 没有对蜘蛛返回 403。有些防盗链配置会误伤搜索引擎。
- 地址稳定性：换 CDN、改目录时，旧图片地址做 301，别直接 404，否则外链和图片搜索里的记录会一起断掉。
- 文件名：用有意义的名字，比 IMG_20240101_1234.jpg 更容易被理解和复用。
- HTTPS 混用：页面走 HTTPS 时图片也走 HTTPS，避免浏览器拦截和抓取异常。
七、把这项检查放进日常
图片资源不像正文那样天天改，所以更容易被忽略，一旦出问题往往是一整批。建议在每次上线新模板、接入新的懒加载库、切换 CDN 或更换图片域名之后，固定做一次上面的源码检查。花十分钟，能避免整站图片在一个版本里集体从蜘蛛视野里消失。
总结一句：图片能不能被蜘蛛看到，取决于原始 HTML 里有没有它的真实地址。别把关键资源全押在 JS 执行上，留一条蜘蛛能走的路，剩下的交给浏览器去做优化。