无限滚动加载会不会伤SEO？4种友好方案推荐
无限滚动加载这个功能, 它是完全可以做到对搜索引擎优化友好的。这里面的核心原则其实特别简单, 只有一条。那就是要确保所有已经加载出来的内容, 对于搜索引擎的爬虫来说, 都是可见的, 也是可以被爬取的, 还可以被索引的。
只要做到了这一点, 那么无限滚动就不会导致网页排名的损失。下面推荐4种经过验证的可以友好应对搜索引擎优化的方案。这4种方案是按照落地难度的从低到高进行排列的。。
方案一：分页兜底 + 无限滚动体验
这是一个最稳妥的方式, 后端会按页输出完整的 HTML 代码, URL 的形式像是 /list?page=2, 每一页渲染 20 条数据, 前端会在用户滚动到底部的时候, 使用 Intersection Observer 来触发加载下一页的操作, 并且把新数据追加到列表末尾。
搜索引擎它们抓取的这个行为, 是集中在分页URL这块内容之上的, 而这些内容, 百分之百分之百都是完全可见的；可是用户所能够看到的这种体验, 却是像无限滚动那样一种非常流畅的状态。
这个要点是说, 用于分页显示的页面必须能够被独立访问, 并且需要包含完整的标题标签、meta描述标签以及语义化的标签结构。 结构。不要只靠 JS 拼页面。
方案二：Push State 更新 URL + 内容预渲染
是在方案一的这种基础情况里面, 每到加载新一批内容的时候, 去调用 history.pushState 来更新地址栏（像 /list?page=3 这个样子）。
同时把新内容的这些东西追加到 DOM 里面而不是去做替换的动作, 这样就可以保证当爬虫用 JS渲染引擎（Googlebot 这个是支持的）去进行抓取操作的时候, 能够看到全部的那些内容。
把那个分页链接给放到 这个标签里面去, 这主要就是为了做个降级方案, 这样做的话, 就算是在没有 JS 的环境底下, 也能够正常地去翻页。
方案三：服务端渲染 + 客户端增量加载
你要使用采用 Next.js 的 App Router, 或者是 Nuxt 3 的这样的服务端渲染框架来搭建项目, 这样处理起来会比较得当。
在首屏 HTML 里面包含第一页的内容信息, 之后的页面内容则是通过 RSC 或者数据请求的方式在客户端进行追加操作的这种做法是非常可行的。对于爬虫来讲, 它拿到的是完整 SSR HTML 内容, 而对于用户来说, 他们将获得丝滑滚动体验。
配合 next/Intersection Observer 或 Nuxt 的 useIntersectionObserver，在滚动到占位符时触发数据预取，减少白屏等待。
方案四：静态生成 + 增量水合
对于那种内容更新节奏并不是很快的网站, 比如说博客或者是产品数据库之类的项目, 是可以用静态生成的这种方法来处理的。每一篇文章都会有一个自己独立的网址。在生成列表页的时候, 只提前去生成前50条内容。
如果数量超过了这部分的话, 那么就通过路由守卫这个机制来触发客户端去加载剩下的数据。等到水合这个过程结束之后, 列表呈现出来的样子就与爬虫所看到的视角是一样的了, 完全不会出现内容缺失这样的情况。
必须遵守的SEO细节
- 或
, 不要使用没有实际用途的。
这里必须做出一个明确的禁止行为, 也就是不能通过把 display:none 这个样式加上去的手段, 去把那些已经加载出来的内容给隐藏掉, 我们要采取的动作仅仅是只往后面追加新数据, 绝对不要把旧有的那部分内容给替换掉, 要保证那些旧的内容一直都在, 并且保持它们能够被看到的状态。
给图片加上 alt 属性的描述内容, 然后在实现懒加载的时候, 应该使用 loading=”lazy” 这个属性设置方式, 而不是通过 JavaScript 代码来隐藏元素的方式去处理。
在每一页的 HTML 代码里面, 都需要输出 ItemList 和 ListItem 这样的结构化的数据标记, 这样做的目的是为了能够更好地帮助搜索引擎去理解分页的逻辑。
关于分页规范, 它需要符合 Google 提出的 canonical 建议, 以及 rel="next" 和 rel="prev" 的建议。尽管在 2019 年之后, Google 已经弱化了这一信号的使用权重, 但是目前仍然推荐大家保留这些相关标识。
在性能方面, 单次追加的DOM节点数量不能超过50条, 这是为了避免因为长列表的问题导致LCP和INP这些指标变差。
一句话总结
很多人可能会觉得无限滚动这种技术对于搜索引擎优化来说会是一场灾难, 但实际上这并不是问题的核心所在。真正会造成影响的, 是那种完全依靠JavaScript进行渲染的情况、没有提供分页的URL链接, 以及内容对网络爬虫来说无法被看见的这些状况。
只要我们在选择技术方案的时候能够作出正确的决策, 并且确保我们的内容在HTML层级可以被正常抓取到的话, 那么无限滚动功能和搜索引擎优化这两个东西就完全是可以并行存在的。
常见问题
《无限滚动加载会不会伤SEO？4种友好方案推荐》主要讲什么？
无限滚动加载这个功能, 它是完全可以做到对搜索引擎优化友好的。这里面的核心原则其实特别简单, 只有一条。
文章提到了哪些重点？
下面推荐4种经过验证的可以友好应对搜索引擎优化的方案；page=2, 每一页渲染 20 条数据, 前端会在用户滚动到底部的时候, 使用 Intersection Observer 来触发加载下一页的操作, 并且把新数据追加到列表末尾
文章给出了哪些建议？
这里面的核心原则其实特别简单, 只有一条。