站点运营

站点运营:图片與媒体资源自查,別让蜘蛛只看到空占位

图片和视频是頁面上數量最多的资源,却常只用“打開快不快”来衡量。這篇從蜘蛛的角度梳理媒体资源自查:地址能否正常訪問、懒加载有没有藏住真實地址、文件名與 alt 怎么寫、体积與格式如何取舍、图库頁和图片站点地图怎么配合,並给出一份可以定期执行的检查清單。

站点运营

站点运营:图片與媒体资源自查,別让蜘蛛只看到空占位

做站点运营时,URL、死鏈、重定向這些检查大多有人定期跑,但图片和视频這類媒体资源,往往被归到“前端優化”里,很少從蜘蛛的角度看一眼。實际上图片是頁面上數量最多的元素之一,也是頁面体积的主要来源。蜘蛛抓到一個頁面後,除了 HTML,它還會顺着图片地址去看一遍。如果這些地址訪問不了、名字全是數字、周围没有任何說明,那頁面在它眼里就少了一大块信息。

先確認图片地址能不能被正常訪問

這一步最容易被忽略,因為浏览器里图片顯示正常,不代表蜘蛛能拿到。常见的几種情况:

  • robots.txt 里為了“保護”图片,顺手把图片目錄 Disallow 了,连带頁面上的图片全抓不到;
  • 图片放在對象存储或 CDN 上,開了防盗鏈,只允许自家域名 Referer,蜘蛛請求时没有 Referer,直接返回 403;
  • 用了带簽名的临时地址,URL 里带一長串過期時間參數。這種地址每天甚至每次刷新都不一样,等于给同一張图造了無數個新地址;
  • 图片被删了但頁面還引用着,返回 404 或 403,長期堆在日誌里。

抽一批頁面,把里面的图片地址複製出来直接訪問一遍,看看狀態碼,是最直接的办法。

懒加载別把图片藏到蜘蛛看不到的地方

為了首屏速度,很多站点會给图片加懒加载。做法本身没問题,問题出在實現方式:有的把真實地址寫在 data-src、data-original 上,等 JS 执行时再替換给 src,HTML 里 src 留一個空白占位图。蜘蛛拿到的初始 HTML 里,那張图就等于不存在。

可以這样處理:

  • 首屏和靠前的图片直接用正常 src,不做延迟;
  • 靠後的图片用浏览器原生 loading="lazy",它不改變 HTML 里的 src,只是延迟加载;
  • 如果用 JS 方案,至少在 noscript 里保留一份带 src 的图片;
  • 用 CSS 背景图展示重要内容的,考虑改成 img,或者补上可抓取的說明文字。

文件名、alt 和图片周围的文字

蜘蛛看不懂图片内容,只能靠文件名、alt 和上下文判断。文件名建议用能說明内容的英文或拼音,避免 20240618-001.jpg 這種纯编号,也避免直接堆一長串關鍵詞。alt 寫成人能讀懂的短句,描述這張图在讲什么,不必把栏目词、地区词全塞進去。

图片下方的图注、同一段落里的正文、所在栏目的标题,都是它理解图片的线索。如果一張图是产品對比表、尺寸图這類信息量大的内容,旁邊最好有一段文字說明,而不是只有一張图。

图片不是装饰,它也是頁面内容的一部分。蜘蛛看不到的那部分,等于白做。

体积、格式與尺寸声明

這一块主要影响渲染和用戶体驗,但間接也關系到抓取。图片太大,頁面加载慢,蜘蛛等待的時間變長;没有声明 width 和 height,图片加载时頁面布局跳動,也會影响体驗。常见做法是压缩後輸出 WebP 或 AVIF,用 srcset 给不同屏幕提供不同尺寸,同时保留一張兜底格式。上千 KB 的原始大图直接挂在列表頁,是很不划算的。

图片站点地图和图库頁

如果你的站有图库、相册、作品集這類以图片為主的頁面,可以考虑單獨做一個图片站点地图,把图片地址和所在頁面列清楚。图库的列表頁也要像普通列表一样能一頁頁翻下去、有稳定的 URL,而不是全部靠 JS 加载。图片本身不适合作為 URL 發現的唯一入口,但它是补充。

一個可以定期跑的自查清單

  1. 從各栏目抽 20 到 30 個頁面,把图片地址批量取出来,直接訪問看狀態碼;
  2. 在浏览器里關掉 JS,看 HTML 源碼里還剩多少可用的图片 src;
  3. 检查 robots.txt 有没有誤封图片目錄,CDN 有没有拦掉無 Referer 的請求;
  4. 抽查图片文件名和 alt,是否寫了人话;
  5. 找出体积最大的那几張图,看能不能压缩或換格式;
  6. 如果有图库頁,確認列表能翻頁,並考虑加一份图片站点地图。

這些检查不需要一次做完,按季度或半年跑一轮就够。比起反复調整參數,先把“蜘蛛能不能看到這張图”這件事確認下来,往往更實际。