你辛辛苦苦配好了alt，图片也压得够小，CDN节点都选在了离用户最近的地方。结果一查Google Search Console，首页的图还是没被收录？别急着怀疑服务器——大概率是懒加载，悄悄把爬虫挡在了图库门外。

答案很直接：是的，它真会这么干。

懒加载到底怎么坑了搜索引擎的爬虫？

懒加载本意是好事儿：页面刚打开时，只加载屏幕里看得到的图；其余的先放个占位符，等用户往下滚，再一张张“唤醒”。

可爬虫不是人。Googlebot不会真的拖滚动条，也不会等 Intersection Observer 回调、更不会模拟手指滑动2秒去触发懒加载。它抓取页面，靠的是解析HTML + 有限度的JS执行——能跑通就跑，跑不通就跳过。

比如你写的是这种常见写法：

<img data-src="real-image.jpg" src="placeholder.jpg" class="lazy" />

爬虫看到的只有 src="placeholder.jpg"。那个藏着真实地址的 data-src？它压根不读，除非你的JS在服务端或首屏就主动把链接塞进 src。

我之前帮一个家居电商做诊断，首页48张商品图全用了JS懒加载。Google抓取后，只认出了前6张——就是刚好在首屏里的那几块。剩下42张，连带它们的文件名、alt、周围文字描述，全部消失。结果这些商品在图片搜索里几乎查不到。

怎么判断你的懒加载有没有坑爬虫？

别猜，动手试。

方法1：用Google Search Console的“检查网址”工具

粘贴页面链接 → 点“检查已收录的网址” → 看“页面抓取”下的截图。如果截图下半截全是灰色占位图，说明爬虫根本没看到那些图。

方法2：用curl命令模拟Googlebot请求

打开终端，跑这一行（把网址换成你自己的）：

curl -H "User-Agent: Googlebot" -L https://your-site.com/page | grep "<img"

重点看返回的HTML里，<img>标签的 src 是真实地址，还是 placeholder.jpg 这类占位图。如果是后者，爬虫拿到的就是空包。

方法3：用Chrome DevTools看加载时机

打开开发者工具 → Network 标签页 → 勾上 “Disable cache” → 刷新页面。然后别动鼠标，只看Network列表里图片什么时候出现。如果一张都没加载，直到你手动往下滚才开始加载，那就说明：纯JS驱动，没给爬虫留后门。

我一个做新闻站的朋友，用方法2扫了一遍，发现80%的文章配图都没被抓到。原因很简单：他们用的第三方懒加载插件，开箱即用，但默认配置对爬虫完全不友好。改完之后，图片搜索带来的访客明显多了。

3个不牺牲用户体验又能让爬虫抓到图片的方法

懒加载不能砍——它对首屏速度、LCP、CLS这些核心指标太关键了。你要做的，是让爬虫和真人各走各的通道。

方法1：加 <noscript> 兜底（最省心的保底）

在懒加载图片后面，补一段不依赖JS的代码。爬虫哪怕不执行JS，也能顺手把图链带走：

<img data-src="real-image.jpg" src="placeholder.jpg" class="lazy" alt="沙发特写" />
<noscript>
  <img src="real-image.jpg" alt="沙发特写" />
</noscript>

HTML体积会略大一点，但兼容性拉满，连老版本爬虫都吃得下。

方法2：换用原生 loading="lazy"（最推荐）

现代浏览器原生支持的懒加载，不用JS库，一行属性搞定：

<img src="real-image.jpg" loading="lazy" alt="沙发特写" />

关键是：Googlebot 明确表示会忽略 loading="lazy" 这个属性，直接按 src 地址抓图。也就是说，它看到的就是真实图片，不是占位符。

我帮客户把JS懒加载全换成这个后，Google抓到的图片数量翻了3倍。顺便还删掉了一个JS库，页面体积也轻了。

方法3：后端识别爬虫，动态关懒加载（最干净，但要动代码）

在服务端加个判断：如果 User-Agent 里有 Googlebot、Bingbot 或 Baiduspider，就直接输出完整 <img src="xxx">；否则，照常走懒加载逻辑。

Python示例（Django/Flask通用思路）：

if any(bot in user_agent for bot in ['Googlebot', 'Bingbot', 'Baiduspider']):
    # 输出真实图片链接
    context['use_lazy'] = False
else:
    context['use_lazy'] = True

效果最好，但得维护爬虫UA列表，而且如果CDN缓存没分清楚“人”和“虫”，容易出错。

Google官方到底怎么看待懒加载？

网上有些说法太乐观：“Google现在都能跑React了，懒加载肯定没问题”。但翻翻Google官方文档和John Mueller的公开回复，话其实很实在：Googlebot会尝试渲染，但不会模拟用户行为。

具体到懒加载，关键就两点：

  • 如果你靠 onscroll 或 IntersectionObserver 触发加载，Googlebot大概率不会触发；
  • 如果页面JS太多、渲染队列排太满，它可能干脆跳过JS执行，只拿初始HTML——那所有JS加载的图，全白忙。

我2022年处理过一个资讯站：用 IntersectionObserver 实现懒加载，Googlebot因为资源限制只做了浅层抓取，JS根本没跑。结果2000多篇文章的配图，一张都没进索引。换成 loading="lazy" 后，当天就开始陆续收录。

懒加载对图片搜索流量的真实影响

图片搜索不是锦上添花，而是很多行业的主流量入口：装修案例、产品实拍、教程截图、信息长图……全靠它引流。

有个装修平台，每个案例页有30–40张实景图，全用了JS懒加载。结果在Google图片搜索里，他们几乎不出现在前两页。一查，Google只抓到了每页最上面3张。

修复方式特别轻：把前5张关键图（封面、全景、细节）改成普通 <img>，剩下的全换成 loading="lazy"。两周后，图片搜索带来的访客翻了快两倍。更明显的是，用户从图片点进来后，平均看了2.8页，比原来多了一倍。

还有一个摄影博主，为了加载效果炫，搞了一套带模糊渐显+高清替换的懒加载方案。结果Google一张图都没抓到。他花了3个月手动提交URL，才勉强捞回一小部分。后来一刀切换成 loading="lazy"，3个月内图片搜索流量基本恢复。

今天就能执行的3个操作步骤

别收藏，现在就做：

步骤1：打开Search Console，检查首页和3个核心内容页
进“检查网址” → 输入URL → 看截图和“已抓取的HTML”。记录哪些图没出现，尤其是商品图、文章头图、步骤示意图。

步骤2：登录你的CMS或模板后台，找到图片输出位置
把类似 <img data-src="xxx" class="lazy"> 的代码，替换成 <img src="xxx" loading="lazy" alt="xxx">。WordPress用户改主题的 the_post_thumbnail() 调用；Vue/React项目改组件里的 <img> 标签。通常半小时内能改完10个页面。

步骤3：改完立刻提交更新
回到Search Console → “URL检查” → 输入改过的页面地址 → 点“请求编入索引”。3天后去看“效果”→“图片”报告，如果收录数开始涨，说明生效了。如果不动，回头检查是不是还有JS弹窗、登录墙或无限滚动在拦路。

懒加载本身没错，错的是把它当“设了就忘”的开关。花半天理清楚，换来的不是一时流量，是往后半年、一年持续进来的图片搜索访客——这笔账，闭着眼也算得清。