懒加载与SEO的矛盾：为什么你的图片不被百度收录
很多前端开发者喜欢用懒加载来提升页面性能，尤其是图片较多的网站。但在百度搜索引擎看来，如果懒加载实现方式不当，所有被延迟加载的内容都可能被直接忽略。百度爬虫在抓取页面时，不会像真实用户一样滚动页面、触发JavaScript事件。如果你的懒加载组件依赖滚动监听或点击触发展示，那么这些内容对百度来说就是“不存在”的。
常见的错误包括：使用data-src存放真实地址但未提供降级方案、把关键图文完全包裹在动态加载的组件中、或依赖框架的异步渲染而不做服务端预渲染。这些做法都可能导致页面核心内容在搜索引擎眼中一片空白。
百度爬虫如何对待懒加载内容
百度官方在搜索引擎优化教程中明确建议：所有对搜索引擎可见的内容，其链接和文本必须直接出现在HTML源码中。具体到懒加载，爬虫会识别以下几种情况：
- 标准的
<img>标签加loading="lazy"：大部分现代浏览器和百度爬虫已支持此属性，但兼容性有限，不能完全依赖。 <noscript>降级方案：当JavaScript未执行时，<noscript>内的内容会作为备用HTML呈现，这是百度爬虫可以抓取的安全区。- 占位图 + 真实地址在JavaScript中：如果真实图片链接只在JS变量中拼接，爬虫完全无法获取，这属于不友好实现。
实践：一套对百度友好的懒加载组件写法
综合多个实战项目的经验，我们推荐以下结构作为基准模板。该写法同时兼顾前端性能与爬虫可读性：
第一步：使用<img>标签并直接写入src
即使是懒加载图片，也应当为百度爬虫提供一个默认的低质量占位图或缩略图，并放在src中。真实高清图地址放在data-src中，由JavaScript替换。
<img src="small-placeholder.jpg" data-src="large-image.jpg" alt="关键描述文字" />
这样，爬虫在抓取时至少能看到src中的图片和alt文本，不至于遗漏内容。
第二步：利用<noscript>提供完全降级
对于核心内容（如文章配图、产品图），可以在<noscript>内再写一份完整的<img>标签，这样当JavaScript完全不可用时，搜索引擎和低版本浏览器都能获取到图。
<noscript> <img src="large-image.jpg" alt="关键描述文字" /> </noscript>
第三步：使用Intersection Observer控制替换时机
前端用Intersection Observer监听元素进入视口时，将data-src的值赋给src。因为该API不要求页面滚动事件触发，性能更高，且不影响初始HTML结构。
避坑清单：你在实战中可能踩的雷
| 常见做法 | 对百度SEO的影响 | 建议改进 |
|---|---|---|
| 完全用JS生成图片标签，HTML中只有容器 | 爬虫看不到任何图片，收录为0 | 在HTML中预先写好<img>，即使src为占位图 |
| 依赖Vue或React的v-if/lazy加载组件 | 爬虫可能不执行或不等异步渲染，内容缺失 | 改用服务端渲染(SSR)或预渲染关键内容 |
使用display:none隐藏真实内容 |
百度官方已明确表示可能不索引隐藏内容 | 用loading="lazy"代替，或使用offscreen类 |
| 只对图片做懒加载，忽略文本/视频的SEO | 页面信息量下降，排名受损 | 所有重要内容应当先以HTML形式存在，再通过JS增强 |
收藏这份“实战清单”就能少走弯路
在平时开发中，建议养成一个习惯：在完成懒加载组件后，关闭浏览器的JavaScript或使用百度“抓取诊断”工具测试一下。如果核心内容在无JS环境下不可见，那这个组件就需要修改。现实项目中，很多团队因为前期没注意这一点，上线后才发现百度收录量远低于预期，补改成本很高。
记住一个公式：对爬虫可见 = HTML结构中有真实文本或src属性；对用户友好 = 前端用懒加载提升速度；两者结合 = 用data-*属性存高清图 + <noscript>兜底 + 服务端渲染关键片段。将这个思路沉淀到团队的组件库中，后续所有页面都可以直接复用，既省时间又保证SEO效果。
评论区
热门讨论 · 占位展示期待你的精彩发言。