Build Build Studio

web / commerce / systems
built across markets

返回 Blog

实操

分页与无限滚动 SEO QA 检查清单

用这份实操清单检查分页与无限滚动的可抓取性、索引、Canonical、性能和可用性,避免首屏以外的内容被搜索引擎遗漏。

深蓝背景上的抽象分页与无限滚动流程,包含连续内容卡片、爬虫路径、页面边界、视口面板和几何 QA 指示器。

技术 SEO QA

可抓取分页 + 流畅体验

发布日期

2026年7月18日

阅读时间

11 分钟阅读

主题

技术 SEO / 分页 / 无限滚动 / JavaScript SEO / QA

01

先确定 SEO 目标,再选择交互方式

分页和无限滚动不只是界面选择,它们决定商品、文章、职位、案例和资源能否通过内链被发现。加载动画再流畅,也无法弥补首屏以外没有可抓取路径的问题。

先决定哪些页面应该独立进入索引。大多数团队希望分类或 Collection 首页被索引,而更深层页面用于发现内容,同时避免争夺同一个查询。开发前写下这项决定,让 Canonical、Title、Sitemap 与筛选规则采用同一模型。

  • 列出所有分页模板:Collection、Search、Blog Archive、Resource、Case Study 与 Account History。
  • 估算常规与最大结果数、页面深度、更新频率及自然搜索价值。
  • 为每个模板选择数字分页、Load More、Infinite Scroll 或混合方案。
  • 记录第 2 页及更深页面是允许索引、仅用于抓取,还是通过 Canonical 合并。

02

建立可抓取的 URL 与链接路径

每批有价值的内容都应通过普通链接和稳定 URL 访问,例如 `?page=2` 或统一的 path pattern。搜索爬虫不会可靠地模拟用户持续滚动,只运行 JavaScript 的按钮也可能让后续内容全部隐藏。

每个分页 URL 的 HTML response 应直接包含本页项目和导航链接,不依赖 browser event。Hydration 完成后,无限滚动可以增强体验,但不能成为内容唯一入口。

  • 关闭 JavaScript 打开第 2 页,确认目标项目与链接仍在 HTML 中。
  • 确认每个下一页 URL 可直接返回 200,不依赖 Session Storage 或前一次请求。
  • Next、Previous 与必要页码使用真实 `<a href>` 链接。
  • 最后一页之后停止生成链接,不可能的页码返回明确的 404。
  • HTML、Sitemap、Canonical 与 Analytics 中的参数顺序和 URL 格式保持一致。

03

定义 Canonical 与索引规则

不存在把所有分页 URL 都 Canonical 到第 1 页的通用规则。如果深层页面包含其他地方没有链接的商品或文章,把所有信号合并到首页可能削弱发现能力。通常应让每页 Self-reference Canonical,除非经过验证的 View All 页面确实代表完整结果集。

Robots 规则必须与目标一致。Noindex 页面最终可能无法稳定传递发现链接,而 robots.txt block 会让爬虫看不到 Canonical 或 Noindex 指令。不要在不理解处理顺序的情况下组合这些设置。

  • 检查第 1 页、第 2 页、最后一页、筛选页面与无效页面的 Canonical。
  • 让 Title 与主 Heading 有意义,同时避免在可见文案中堆砌重复页码。
  • 避免可索引分页 URL 与 Noindex、robots.txt、Sitemap 规则互相冲突。
  • 不要把过时的 `rel=next` 与 `rel=prev` 当作主要发现或合并策略。
  • 让多语言与移动 URL 版本遵循同一套 Canonical policy。

04

用 History API 更新 URL 并恢复位置

用户跨过页面边界时,用 History API 更新 browser URL,让当前可见状态可以分享和恢复。不要每滚动几像素就创建 history entry,而应在稳定边界更新,并明确何时使用 replace、何时使用 push state。

返回列表是收入与可用性要求。用户打开第 37 个商品再返回时,应回到该商品附近并保留筛选与排序,而不是回到空白的第 1 页顶部。只保存必要状态,并通过 URL 重建列表,不要依赖脆弱的完整 DOM snapshot。

  • 加载多个批次后复制 URL,并在干净 browser session 中打开。
  • 同一 Tab 打开详情再返回,确认列表位置、筛选和已加载范围都恢复。
  • 在每个页面边界测试 Refresh、Deep Link、Back、Forward 与 Share。
  • IntersectionObserver 或 JavaScript 失败时,提供可见的 Load More 或分页 fallback。
  • 向辅助技术播报新增结果,但不要意外移动 keyboard focus。

05

控制渲染成本与 Core Web Vitals

无限列表可能产生无限 DOM。只追加用户需要的内容、预留媒体尺寸,并在结果很大时谨慎使用 virtualization。虚拟列表不能移除可抓取的服务端链接,也不能破坏键盘导航、页面内查找、Analytics 与位置恢复。

重点测量批次之间的过渡。加载过程不应推动 Footer、跳动 Focus、重复卡片或阻塞 Main Thread。首屏很快但越滚越慢,仍然不是合格的生产体验。

  • 为 Card、Image、Ad 与 Loader 预留空间,避免 Layout Shift。
  • 懒加载首屏以下媒体,同时正确提高首屏关键图片的优先级。
  • 筛选或排序变化时取消过期请求,并对重叠 response 去重。
  • 在低内存移动设备与限速网络上测试真实最大深度。
  • 多次加载后测量 LCP、CLS、INP、内存增长、请求数与 DOM size。

06

测试筛选、排序、库存与内容变化

分页缺陷常在两次请求之间结果集发生变化时出现。价格排序、库存更新或内容发布可能让项目跨页移动,产生重复或缺口。Cursor-based pagination 可以提高快速变化 Feed 的一致性,但如果内容依赖自然搜索,Cursor 仍需要配套 URL 策略。

Filter、Locale、Currency 或 Sort Order 变化时必须重置分页。界面、API Query、URL、Canonical、Result Count 与 Analytics Event 应描述同一个状态,绝不能静默沿用另一组筛选条件下的第 5 页。

  • 分别在第 1 页、第 2 页和多次无限滚动后修改筛选条件。
  • 测试零结果、一个结果、刚好一整页、多一个结果和最大数据集。
  • 模拟 Session 期间项目新增、删除、取消发布或移动。
  • 确认 Locale、Market、Currency、Customer Segment 与 Inventory 规则不会泄漏旧结果。
  • 确认 API 使用稳定的 Secondary Sort Key 提供确定性顺序。

07

验证内链、Analytics 与无障碍体验

只有每张卡片都指向正确 Canonical destination,并且 Analytics 只记录一次用户动作,列表才算完成。Re-render、Prefetch 与 State Restore 很容易造成重复 Page View 或 Product Impression,应围绕明确的页面边界与可见阈值定义 Event。

键盘和 Screen Reader 用户需要可理解的自动增长页面替代方案。保留 Focus、提供 Status Update、确保 Footer 可到达,并在连续加载形成陷阱时允许暂停或改用明确的 Load More。

  • 抓取 rendered links,对比 Item URL、Canonical、Status Code 与 Redirect。
  • 确认 Impression 去重,Click 保留列表位置与 Campaign Context。
  • 测试纯键盘加载、Focus Order、Screen Reader Announcement 与 Reduced Motion。
  • 分页控件满足触控尺寸要求,并清楚标记目标页面。
  • 分别验证同意 Consent、拒绝 Consent 与 Returning Session 的 Analytics。

08

上线清单与上线后监控

发布前保存 Server HTML、Rendered Browser、无 JavaScript Request、Crawler 与 Analytics Debugger 的证据,同时测试浅层与深层结果集。这能区分视觉上正确的界面和技术上真正可发现的实现。

上线后按页面深度比较 Crawl Request、Index Coverage、Internal-link Discovery、Engagement 与 Performance。关注爬虫循环、参数组合暴增、深层内容发现减少,或用户反复回到第 1 页等信号。

  • 在 Release Ticket 中记录批准的 URL、Canonical、Indexation、Sitemap 与 Filter Policy。
  • 至少抓取三个页面深度,并比较 Server HTML 与 Rendered HTML。
  • 抽样验证 Search Console URL Inspection 与 Server Log 中的深层页面请求。
  • 首周监控 404、有效空页面、重复项目、API Error 与加载延迟。
  • 保留 Rollback Path,在无限滚动增强失败时恢复可抓取分页。

分页与无限滚动上线前必须证明什么

  • 01为每个有价值的结果集提供稳定、可抓取的 URL 和服务端渲染路径。
  • 02用户可以持续加载内容,但搜索引擎不需要模拟滚动或点击才能发现内容。
  • 03让 Canonical、Title、Heading 和内链信号与选定的 URL 策略一致。
  • 04用户打开详情再返回时,保留位置、筛选条件与浏览历史。
  • 05上线后监控抓取模式、索引覆盖、互动与性能。

继续阅读

实操 / 10 分钟阅读

JavaScript 网站技术 SEO 上线前 QA 检查清单

JavaScript 框架会把抓取、渲染、元数据、内链和站点地图问题藏到上线前。上线 Next.js、Headless 或 React 网站前,用这份清单做技术 SEO QA。

SEO / 8 分钟阅读

Shopify 筛选导航 SEO 上线前 QA 检查清单

用这份 Shopify 筛选导航 SEO QA 检查清单,在上线前检查筛选器、URL 参数、canonical、noindex、内部链接、分析追踪和抓取控制。

实操 / 10 分钟阅读

Canonical URL QA 检查清单:Shopify、WordPress 和 Headless 网站上线前必查

用这份 canonical URL QA 清单,在上线或改版前检查重复模板、URL 参数、重定向、分页、hreflang、站点地图和渲染后的 HTML。

SEO / 9 分钟阅读

XML 站点地图 QA 检查清单:网站上线前必做

XML 站点地图不应该暴露所有草稿、筛选页、重定向和重复 URL。用这份上线前检查清单,确认真正应该被搜索引擎发现的页面。

实操 / 10 分钟阅读

Shopify Collection 页面 SEO 上线检查清单

Collection 页面通常同时承担 Shopify SEO、商品陈列、筛选和转化任务。改版、迁移或发布重点分类前,用这份清单做上线 QA。

SEO / 8 分钟阅读

网站改版后 Server Log SEO 审计检查清单

网站改版、迁移或 Shopify / Headless 上线后,用这份 Server Log SEO 审计清单确认搜索引擎爬虫能访问正确页面、重定向有效、抓取浪费受控,并用真实爬虫行为判断技术修复优先级。

Build a site your team can keep running

Strategy, design, development, SEO foundations, and launch support for brands growing across markets.

Start a projectContact@buildbuild.studio