AI爬虫如何处理无限滚动？我们的内容未被索引

我来详细说明不同AI爬虫对JavaScript的处理方式：

AI爬虫JavaScript支持情况：

核心问题：

无限滚动需要：

1. 执行JavaScript
2. 触发滚动事件
3. 发起更多HTTP请求
4. 渲染新内容

大多数AI爬虫在第1步或第2步就失败了。

为什么SSR还不够：

SSR只渲染首屏。无限滚动的内容不是“首屏”——它依赖交互加载。SSR无法解决交互依赖问题。

根本性矛盾：

无限滚动与当前AI爬虫的能力本质上不兼容。你需要采用其他方案。

我们也遇到过同样问题，解决方案如下：

混合模式实现：

// URL结构
/blog              // 无限滚动（用户默认）
/blog/archive/1    // 分页（爬虫可访问）
/blog/archive/2

关键实现要点：

1. sitemap只包含分页URL

   • AI爬虫发现/blog/archive/*页面
   • 这些页面服务端渲染全部内容

2. 无限滚动页同样加载这些内容

   • 底层用分页API
   • 用户体验更好

3. 内链指向独立文章页

   • 不指向无限滚动位置
   • 每篇文章都有独立URL

4. robots.txt建议：

# 引导爬虫聚焦独立文章
# 不要抓无限滚动容器
Sitemap: /sitemap.xml

结果：

• 人类用户体验未变（无限滚动）
• AI爬虫通过archive页抓全内容
• 所有文章都被索引
• 实施后被AI引用率提升4倍

Next.js 特定方案：

用 getStaticPaths + getStaticProps 实现：

// pages/blog/page/[page].js
export async function getStaticPaths() {
  const totalPages = await getTotalPages();
  const paths = Array.from({ length: totalPages }, (_, i) => ({
    params: { page: String(i + 1) }
  }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const posts = await getPostsForPage(params.page);
  return { props: { posts, page: params.page } };
}

优点：

• 每页静态页面
• 构建时HTML含全部内容
• AI爬虫能抓全内容
• 加载快（静态）

再加无限滚动增强：

• 客户端无限滚动复用同API
• 渐进增强
• 关闭JS也能正常工作

这样两全其美。

补充一种预渲染方案：

为AI爬虫提供预渲染服务：

可检测AI爬虫user-agent并返回预渲染内容：

// 中间件
if (isAICrawler(req.headers['user-agent'])) {
  return servePrerenderedVersion(req.url);
}

AI爬虫识别：

const aiCrawlers = [
  'GPTBot',
  'ChatGPT-User',
  'Google-Extended',
  'ClaudeBot',
  'PerplexityBot',
  'anthropic-ai'
];

function isAICrawler(userAgent) {
  return aiCrawlers.some(crawler =>
    userAgent.includes(crawler)
  );
}

预渲染方式：

• Prerender.io
• Rendertron
• 基于Puppeteer自定义方案
• 构建时预渲染

注意：

并非所有AI爬虫都明确标识自己，有些可能漏掉。所以这只是辅助方案，不能替代规范分页。

AI爬虫可访问性测试方法：

手动测试：

1. 禁用JS测试：

   • 浏览器打开博客
   • 禁用JavaScript
   • 能看到哪些内容？
   • 这接近无JS爬虫视角

2. 查看源码测试：

   • 查看页面源码（非审查元素）
   • 内容在HTML里吗？
   • 还是只是JS占位？

3. curl测试：

   curl -A "GPTBot/1.0" https://yoursite.com/blog/
   

   • 响应包含实际内容吗？

自动化测试：

4. Google Search Console：

   • URL检查工具
   • “查看渲染页面”可见Googlebot视角
   • （虽然不是AI爬虫，但JS渲染类似）

5. Lighthouse审核：

   • 检查“SEO”分类
   • 标记抓取可达性问题

理想状态：

• 内容在初始HTML响应中
• 所有页面链接可发现
• 不依赖JS即可访问内容

电商场景分享：

我们有1万+产品，用“加载更多”功能。解决方案如下：

分类页面结构：

/category/shoes                    # 前24个产品 + 加载更多
/category/shoes?page=2            # 25-48号产品
/category/shoes?page=3            # 49-72号产品

实践要点：

1. 首屏始终有分页链接

   • 即使启用无限滚动
   • 页脚有1、2、3…页码链接

2. ?page=参数为规范URL

   • 每页是独立内容
   • 不是主页面的重复

3. sitemap涵盖所有分页URL

   • 不只是无限滚动基础页

4. 每个产品有独立URL

   • 分类分页便于发现
   • 产品才是核心内容

结果：

AI平台能发现并引用我们的产品页，正是通过这种分页结构抓取到的。

大家的建议非常有用。我的实施计划如下：

方案：混合分页

第一阶段：增加分页路由（第1-2周）

• 创建 /blog/archive/[page] 路由
• SSR输出完整HTML内容
• 加入分页导航
• 更新sitemap包含这些页面

第二阶段：更新无限滚动（第3周）

• /blog 保持无限滚动
• archive页作为数据源
• /blog 的canonical指向 /blog/archive/1

第三阶段：测试与验证（第4周）

• 禁用JS测试
• 针对AI user-agent做curl测试
• 监测AI引用率

技术实现：

/blog                 → 无限滚动（人类，canonical到archive/1）
/blog/archive/1       → 分页（爬虫，canonical到自身）
/blog/archive/2       → 分页（爬虫）
/blog/[slug]          → 独立文章（核心内容）

核心原则：

• 内容无需JavaScript即可访问
• 每条内容有专属URL
• sitemap涵盖全部内容页
• 无限滚动是增强，不是前提

感谢大家详细的技术建议。