当前位置：首页 > SEO工具 > 正文

前端满足SEO翻页如何影响用户体验，爬虫抓取效率如何保障？

我是贝贝，做SEO有些年头了，也写过不少前端代码。今天聊聊前端做翻页怎么兼顾SEO。很多人觉得这是后端的事，其实前端能做的也不少。

想想你自己用搜索引擎。你搜一个东西，结果第二页、第三页的内容，你点进去看的概率有多大？大概率不会。对爬虫来说，道理类似。如果翻页没处理好，爬虫可能只抓了第一页，后面几十页好内容全浪费了。

传统做法是后端渲染，URL里带页码参数。比如 /list?page=2。这方式对爬虫友好，因为链接清清楚楚。但现在很多网站是前端渲染，数据通过接口加载，页面URL不变。这就出问题了。

爬虫看到的是一个空壳页面，或者只有第一页的内容。后面的内容虽然用户能通过点击“加载更多”看到，但爬虫可能不执行这些操作，它就抓不到。

我们先搞清楚两种技术路线的差异。

这张表能看明白吧？我们的目标，就是让前端动态加载，也能有后端分页的SEO效果。

光说没用，我直接讲可以落地的办法。

首先，最推荐的是“混合渲染”方案。具体步骤是这样的：

首屏内容必须由服务器直接生成HTML。也就是说，用户和爬虫第一次访问这个列表页时，比如访问 /article-list，服务器就返回已经包含了第一页文章标题、摘要的完整HTML代码。不要只返回一个空的div和一段JS。
翻页按钮或“加载更多”的链接，必须是真实的a标签。href属性要指向独立的、有内容的URL。例如：
<a href=“/article-list?page=2”>第2页</a>
不要用div或span加点击事件来模拟。
当用户点击这个a标签时，我们用JavaScript拦截这个点击事件。阻止默认的跳转行为，然后用fetch或axios去请求 /article-list?page=2 这个接口的数据，拿到后动态更新到当前页面里。这样用户感觉是无刷新加载。
同时，要用History API更新浏览器地址栏的URL，把它变成 /article-list?page=2。这样即使用户刷新页面，看到的也是第二页的内容，URL和历史记录都对得上。

这个方案的关键，是确保每一个页码都有对应的、能被独立访问的真实URL，并且这个URL返回的是完整的HTML。这样既满足了爬虫，又保证了用户体验。

上面是方案骨架，这里填上血肉，讲几个技术细节。

关于链接的rel属性：翻页链接建议加上 rel=“next” 和 rel=“prev”。比如第一页指向第二页的链接，可以写 rel=“next”；第二页指向第一页的链接，写 rel=“prev”。这算是给爬虫的明确指示，虽然不保证所有爬虫都遵循，但加了没坏处。
动态加载时的页面标题更新：用户点击加载第二页后，除了用History API改URL，最好也同步更新一下document.title。比如改成“文章列表 - 第2页”。这样更规范。
处理JS禁用的情况：这是做渐进增强的考量。你的a标签的href链接必须是真实有效的。这样即使浏览器禁用了JavaScript，用户点击后虽然会整页跳转，但至少能看到内容，网站功能依然是可用的。这是基础可访问性原则。

再讲一个进阶点：无限滚动的SEO处理。很多网站用无限滚动代替翻页按钮，体验更无缝。但对SEO更不友好。

一个可行的办法是，在页面底部自动生成一个“分页导航区”。这个区域平时用CSS隐藏起来（不要用display:none，可以用透明度或者定位到屏幕外），但它的HTML代码是存在的，里面包含了指向后续页码的a标签链接。这样爬虫就能发现这些链接并抓取。

我见过不少项目在这件事上踩坑。

第一个坑：滥用display:none。为了让用户看不到分页链接，就直接给div加display:none。但很多搜索引擎会认为这是隐藏内容，可能被判作作弊。应该用其他视觉隐藏技术，比如 .sr-only 这类只对屏幕阅读器可见的CSS类。
第二个坑：懒加载图片的alt文本为空。翻页内容里的图片，通常也会懒加载。别忘了给这些图片加上描述性的alt属性，即使src是占位符。否则会损失图片搜索的流量机会。
第三个坑：不考虑内容重复度。如果你的第一页展示了10篇文章，第二页又展示了这10篇再加上10篇新的，那么第一页的内容在第二页里就重复了。最好确保每一页的内容都是独立的集合，避免大面积重复，这对SEO不利。

最后，一定要用Google Search Console里的“URL检查”工具，或者类似的百度搜索资源平台工具，去提交你处理好的翻页URL，看看爬虫实际渲染出来的页面是什么样子。这是最直接的验收方式。

说到底，前端满足SEO翻页，核心思想就是“渐进增强”。先保证有一个对爬虫和所有浏览器都友好的基础版本（即带独立URL的真实链接），再用JavaScript去增强它，实现无刷新的流畅体验。这样两边都照顾到了。