大模型时代,内容站如何让 AI 爬虫抓得到?

为什么普通 SPA 对 AI 爬虫不友好

绝大多数 React SPA(Vite + React、Create React App、Umi 等) 都是客户端渲染: 服务端只返回一个空的 <div id="root"> 和一个 JS bundle。

人类访问时,浏览器执行 JS 后页面才「长出来」;但 GPTBot、ClaudeBot、字节 Bytespider 等 AI 爬虫只下载 HTML 源码,不执行 JS,看到的永远是空 root。

结果: 你辛辛苦苦写的 1 万字深度文章,在大模型眼里就是一段空 HTML,自然不会被引用。

AI 爬虫到底看什么?

主流 AI 爬虫(GPTBot、ClaudeBot、PerplexityBot、Google-Extended 等)对页面的解析流程高度一致:

1) HTTP 请求拿 HTML; 2) 提取 <title>、<meta description>、<h1>~<h6>、<p>、<li>、<a>、<img alt>; 3) 解析 <script type="application/ld+json"> 结构化数据; 4) 拼装成向量化的文本块索引。

全程不执行 JS,也不等接口返回。

解法:服务端渲染 (SSR) 或 预渲染 (SSG)

两种方式都能让 HTML 在首字节就包含完整内容:

SSR (Server-Side Rendering): 每个请求都服务端实时渲染,适合内容高频变动。

SSG (Static Site Generation): 构建时一次性生成静态 HTML,适合内容相对稳定的资讯/产品/FAQ 页。

Next.js 14 默认走 SSG,build 时把所有页面预渲染成 HTML。Vite SPA 也能补救: 用中间件拦截爬虫 UA,返回预渲染快照。

5 条工程最佳实践

1) 所有页面默认 Server Component,只在交互组件加 'use client'。

2) robots.txt 放行所有主流 AI 爬虫,只屏蔽后台/登录页。

3) sitemap.xml 自动生成,包含全部公开 URL。

4) 每个页面提供 Article / FAQPage / Product JSON-LD 结构化数据。

5) 配套 llms.txt 文件,按 llmstxt.org 规范写站点说明。