不少站点在文字层面做得很規范，标题、描述、内鏈都检查過，但一说到图片和媒体资源就預設「反正搜尋引擎也看不懂图」。實际情况是：图片搜尋本身就是一個不小的流量入口，而且图片加载失敗、地址寫在 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 执行上，留一條蜘蛛能走的路，剩下的交给浏览器去做優化。