这个坑值得记一笔。模板统一输出 srcset 时把两个宽度写反了,300px 的图标成 1200w,1200px 的标成 300w。蜘蛛按描述符挑了标称最小的那张,正文配图在搜索结果里全是模糊版本,图片点击率掉了一半。
刚开始盯着「src 兜底指向缩略图,解析器优先用 src」,折腾了半个多小时,排掉了。
这类报错背后常见的原因有几处,逐个排除就行。srcset 的 w 值与实际像素宽不一致;sizes 属性缺失,浏览器和蜘蛛都按默认视口选图;图片 CDN 按文件名判断宽度,命名与内容不符。
第一件事是看 srcset 实际输出的描述符
curl -s https://www.example.com/p/1 | grep -o 'srcset="[^"]*"' | head -2
接着核对图片真实像素宽度
curl -s https://www.example.com/uploads/a-1200.jpg -o /tmp/a.jpg && identify /tmp/a.jpg
随后检查有没有 sizes 属性
curl -s https://www.example.com/p/1 | grep -o 'sizes="[^"]*"' | head -2
等前面都确认过,再把 src 指向中等尺寸而不是缩略图
curl -s https://www.example.com/p/1 | grep -o '<img[^>]*>' | head -1
别只看报错消失,验证要多做一步。描述符与实际宽度一致,图片搜索里出现大图版本,点击率两周内回到原来的水平。
这里还有个坑。srcset 写错不会报错,只会让蜘蛛悄悄选错图,改完要实际抓一次看它选了哪张。如果同一现象隔几天又出现,说明根因没找到,别当偶发处理。
