SEO 百科

加载更多

本页目录

加载更多

加载更多是一种补内容的加载方式：页面先显示初始的一段结果，用户点击按钮，脚本再往当前页面追加下一段，地址栏里的网址多半不变[2]。Google 把它与分页、无限滚动并列为展示较长列表的三种方式，三种方式对抓取的影响各不相同[2]。按钮这一支的麻烦集中在两处：点击之后多出来的内容有没有对应的地址，抓取工具取回文档时那段内容在不在里面。

三种加载方式的分工

Google 给三种方式的定义各自不同，差别在触发者和承载文档上。

  • 分页：用户使用“下一页”“上一页”和页码等链接在不同网页之间导航，一次显示一页结果[2]。
  • 加载更多：点击按钮，用户即可展开一组初始的显示结果[2]。
  • 无限滚动：用户滚动到网页末尾，加载更多内容[2]。

按钮加载与滚动加载共用一条脚本路径：都不换地址，都要由脚本把后面的条目写进当前文档。两者的分岔在触发者是谁，滚动加载由页面位置自动触发，按钮加载由一次明确的点击触发。Google 的抓取工具不会点击按钮。需要用户操作才更新当前网页内容的 JavaScript 功能，通常也不会被触发[2]。这一段限制对两种写法同样成立。

Google 列出的优缺点也照这个分岔走。按钮加载的好处是所有内容都在同一个网页上，还能在按钮附近告诉用户结果总数；坏处是无法处理数量非常多的结果，因为所有结果最后都要装进一个网页[2]。

按钮背后的网址表现

默认实现里，第二次点击之后的内容不再对应一个新地址，整组结果都归在同一个网址下。抓取工具取回的是这个网址对应的文档，点击之后才请求回来的条目不在这份文档里。

另一种做法是给每段内容一个能独立访问的地址，点击时用 history.pushState() 改写地址栏。这个方法往会话历史里加一条记录，浏览器不会因为这次调用去请求新的文档[5]。地址改了，服务器端要有对应的返回内容，否则用户复制链接发给别人，对方拿到的还是初始那一页。

按钮加载最常见的形态只有一个地址，此时内容能不能被看见，取决于文档本身。两种写法的差别用一行代码就能看出：

<!-- 后端有对应文档，链接可被抓取 -->
<a href="/list?offset=20">加载更多</a>

<!-- 只有脚本事件，地址不变，内容在点击之后才请求 -->
<button onclick="loadMore()">加载更多</button>

第一段把 offset=20 交给服务器，服务器返回同一列表的第二段条目。第二段的行为全在脚本里，抓取工具不发这次点击，也就没有这次请求。

抓取视角下的内容可见性

百度把搜索流程概括成三步：“从互联网抓取网页、建立索引数据库、将索引库中数据展现给用户”[3]。点击之后的内容进不到第一步，索引和展现都不会有它的位置。

Google 对延迟加载提的要求是同一件事：加载策略不要依赖用户操作，因为 Google 搜索不会与网页互动[1]。延迟加载指把首屏不需要的那部分资源推到后面再取，目的在缩短关键渲染路径，也就是浏览器首次绘制出可用页面要经过的那条取资源、执行脚本的路径[4]。性能上的收益是真的，抓取上的缺口也是真的。

按钮加载不必整体放弃。可抓取的写法是两件事同时成立：按钮位置上有带 href 的真实链接，链接指向的地址在服务器端返回对应那一段内容。剩下的补充条目再由脚本追加给浏览器用户。只满足其中一件，后段内容仍然只在点击之后才存在。

Google 同时提醒，链接文字由脚本插入时，要用网址检查工具确认它出现在渲染后的 HTML 里[1]。按钮上只有“加载更多”四个字，指向的还是同一个页面，这段文字给不出任何目标信息。

什么时候保留按钮

按钮加载的适用范围由结果总量决定。Google 的判断标准写得很具体：结果数量极大时它撑不住，因为所有结果都要落在一个网页上[2]。

适合用按钮的场合有几类特征：

  • 结果总数在几十到一两百条之间，全部装进一个文档也不会拖慢首屏太多；
  • 用户在连续浏览，不需要知道自己在第几页，商品评价、图片集、评论列表属于这一类；
  • 页面主体是浏览动作本身，没有把每段结果分别卖给不同查询的需求。

需要用户比较结果规模、需要每段结果各自参与排序时，分页那套独立地址更合适[2]。无限滚动那篇讲的每分块独立网址做法，针对的也是同一个需求，两种写法都在解决一段内容一个地址这件事。

验证做法

验证分两步：看原始文档里有没有后段内容，看渲染后的文档里有没有。

# 第一步：取原始 HTML，数列表项数量
curl -s "https://www.example.com/list" | grep -c "class=\"item\""

# 第二步：取 offset 地址，确认服务器返回的是第二段条目
curl -s "https://www.example.com/list?offset=20" | grep -c "class=\"item\""

两个数字接近且条目相同，说明 offset 没起作用，按钮背后那份地址是空的。网址检查工具在 Search Console 里，用它看渲染后的 HTML，找到相应文字才算过关[1]。

常见误用

  • 按钮只绑脚本事件，页面上没有任何指向后段内容的链接；
  • 用 #more 这类片段承载第二段结果，片段不进请求，服务器返回的还是同一份文档；
  • 结果上千条仍然用按钮加载，一个页面装下全部内容，首屏时间和内存都撑不住；
  • 点击后改写地址栏，服务器端却没有对应地址的返回内容，分享出去的链接回到初始页面；
  • 把只在点击后出现的条目当成站内唯一路径，别的内容再没有链接指向这些页面；
  • 只在移动端做按钮加载，桌面端保留完整列表，两个版本的文档内容不一致。

附录

参见

参考资料

官方（境外）

  1. 《修正延迟加载的内容》，Google 搜索中心。
  2. 《分页和增量加载以及它们对 Google 搜索的影响》，Google 搜索中心。

官方（国内）

  1. 《百度搜索的工作原理》，百度搜索资源平台，2023-12-21 更新。

第三方

  1. 《懒加载》，MDN。
  2. 《History API》，MDN。

外部链接

无。