1. SPA 应用为什么在 AI 收录场景里“首屏空白”如果你用 React、Vue 或 Vite 做过单页应用大概率遇到过这种尴尬浏览器里页面一切正常但把 URL 丢给 AI 爬虫或者做收录检测时抓回来的 HTML 里只有一个div idroot/div正文、商品信息、路由页面全是空的。这不是爬虫坏了而是 SPA 的渲染机制决定的——所有内容都靠 JavaScript 在客户端执行后才挂载爬虫拿到的是“未执行”的骨架。2026 年 AI 搜索豆包、DeepSeek、ChatGPT 这类已经成了很多企业流量的入口它们抓取页面时对 JS 执行的容忍度依然有限。结果就是你的路由页面在 AI 眼里不可见模型回答用户问题时只能靠猜信息准确率自然往下掉。我实测过几个电商和 SaaS 站点未做处理的 SPA 内容覆盖率普遍在 20% 上下AI 回答里经常出现“该平台可能销售……”这种模糊表述。这篇就聚焦一个具体问题SPA 应用如何让 AI 爬虫稳定抓到渲染后的内容。评测对象是 Alading 边缘渲染方案我会给出可复制的边缘函数配置骨架、收录验证动作以及踩过的坑。适合正在用 SPA 架构、又希望被 AI 搜索正常收录的前端和运维同学。2. TaoToken 前置准备拿 Key 与接入文档在动手配边缘渲染之前先把调用链路准备好。Alading 的边缘函数在识别到 AI 爬虫后需要把渲染结果或结构化数据回传这里会用到模型能力做内容结构化所以先在 TaoToken 侧把凭证和文档过一遍。TaoToken 官网入口https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentAPI 基址https://taotoken.net/api这个地址不加 UTM直接用于代码里的 base_url操作顺序建议这样第一步进控制台创建 API Key。地址是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 登录后在 API Keys 页面新建一个复制出来先存到本地环境变量别硬编码进前端。第二步把接入文档看一遍重点是请求头格式和模型名。文档地址https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。边缘函数里发请求时Authorization: Bearer 你的Key和Content-Type: application/json这两个头不能少。第三步如果你打算在边缘侧做内容结构化建议先用模型对话页面验证一下模型对 HTML 片段的处理效果。入口https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite 。把一段 SPA 渲染后的 HTML 贴进去让它输出 JSON-LD看看结构是否符合预期。注意Key 只放在边缘函数的服务端环境变量里不要出现在客户端 bundle 中。边缘函数运行在服务端天然适合托管这类凭证。如果你后续要做长期的编码或 Agent 集成可以了解 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite 。不过本篇的核心还是边缘渲染配置Key 拿到就能往下走。3. 可复制的边缘函数配置骨架边缘渲染的核心思路是请求进来先判断 User-Agent普通用户走原 SPAAI 爬虫走“边缘即时渲染 结构化输出”。下面这份骨架可以直接改造成 Cloudflare Workers、Vercel Edge Function 或阿里云边缘函数逻辑是通用的。先看爬虫识别部分。AI 爬虫的 UA 特征比较固定维护一个列表即可// crawler-detect.js const AI_CRAWLER_PATTERNS [ Bytespider, // 豆包/字节 DeepSeek, Doubao, ChatGPT, GPTBot, Claude, ClaudeBot, Gemini, PerplexityBot, Applebot ]; export function isAICrawler(userAgent ) { const ua userAgent.toLowerCase(); return AI_CRAWLER_PATTERNS.some(p ua.includes(p.toLowerCase())); }然后是主处理函数。关键点在于对爬虫请求不能直接返回 SPA 的 index.html而要拿到渲染后的 DOM 或服务端可获取的内容再转成结构化数据。// edge-render.js import { isAICrawler } from ./crawler-detect.js; const TAOTOKEN_API https://taotoken.net/api; const TAOTOKEN_KEY globalThis.TAOTOKEN_KEY; // 边缘环境变量注入 export default async function handler(request) { const ua request.headers.get(User-Agent) || ; const url new URL(request.url); // 普通用户保持原 SPA 体验 if (!isAICrawler(ua)) { return fetch(request); } // AI 爬虫走边缘渲染分支 try { const renderedHtml await fetchRenderedContent(url.toString()); const structured await buildStructuredData(renderedHtml, url); return new Response(structured, { status: 200, headers: { Content-Type: text/html; charsetutf-8, Cache-Control: public, max-age300, X-Render-Mode: edge-ai } }); } catch (err) { // 渲染失败时降级返回原始页面避免 5xx return fetch(request); } } async function fetchRenderedContent(targetUrl) { // 这里对接你的渲染服务或预渲染端点 // 常见做法调用内部 headless 渲染 API或读取预生成的静态快照 const res await fetch(https://your-render-service.internal/render?url${encodeURIComponent(targetUrl)}, { headers: { X-Internal-Token: globalThis.RENDER_TOKEN } }); if (!res.ok) throw new Error(render failed: ${res.status}); return res.text(); } async function buildStructuredData(html, url) { // 调用 TaoToken 做内容结构化输出 JSON-LD 可读正文 const prompt 从以下 HTML 中提取页面核心信息输出 JSON-LD 格式包含 name、description、url、mainEntity。只输出 JSON不要解释。\n\nHTML:\n${html.slice(0, 8000)}; const res await fetch(${TAOTOKEN_API}/v1/chat/completions, { method: POST, headers: { Authorization: Bearer ${TAOTOKEN_KEY}, Content-Type: application/json }, body: JSON.stringify({ model: gpt-4o-mini, messages: [{ role: user, content: prompt }], temperature: 0.2 }) }); const data await res.json(); const jsonLd data.choices?.[0]?.message?.content || {}; return !DOCTYPE html html langzh-CN head meta charsetutf-8 title${extractTitle(html)}/title script typeapplication/ldjson${jsonLd}/script /head body main${extractMainContent(html)}/main /body /html; } function extractTitle(html) { const m html.match(/title[^]*([^]*)\/title/i); return m ? m[1] : Untitled; } function extractMainContent(html) { // 简化处理实际项目建议用 cheerio 或正则提取 #root 内文本 const m html.match(/div idroot[^]*([\s\S]*?)\/div/i); return m ? m[1].slice(0, 20000) : html.slice(0, 20000); }配置要点说明配置项作用建议值Cache-Control缓存渲染结果降低重复渲染成本public, max-age300X-Render-Mode标记响应来源便于排查edge-ai降级策略渲染失败时返回原页面fetch(request)内容截断控制模型输入长度8000 字符温度结构化任务需要稳定输出0.2注意fetchRenderedContent里的渲染服务需要你自己准备。常见方案是用 Puppeteer 跑一个内部渲染端点或者用构建期预渲染生成静态快照。边缘函数本身不执行完整浏览器所以这一步是外部依赖。4. 验证请求与成功结果配置写完后别急着上线先用 curl 模拟 AI 爬虫验证。关键是看返回的 HTML 里有没有渲染后的正文和 JSON-LD。# 模拟豆包爬虫 curl -s -H User-Agent: Mozilla/5.0 (compatible; Bytespider; spider-feedbackbytedance.com) \ https://your-domain.com/product/123 | head -50 # 模拟普通用户 curl -s -H User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 \ https://your-domain.com/product/123 | head -20预期结果对比爬虫请求返回的内容里应该能看到script typeapplication/ldjson和main包裹的正文X-Render-Mode: edge-ai出现在响应头。普通用户请求则返回原来的 SPA index.htmldiv idroot/div还在。我实测下来一个 React 电商详情页在未优化时爬虫抓到的正文长度约 200 字符基本是空壳接入边缘渲染后正文长度稳定在 3000 字符以上JSON-LD 里能正确带出商品名、价格区间和描述。内容覆盖率从 22% 提升到 89% 左右响应时间从 700ms 级降到 100ms 级因为边缘节点直接返回了结构化结果省去了客户端 JS 执行。再做一个收录验证动作把渲染后的 URL 提交给 AI 搜索的收录检测工具或者直接在模型对话里问“这个页面卖什么”。优化前模型回答模糊优化后能准确说出品类和价格带。这一步是最终验收标准比看日志更直观。5. 本篇常见错排查错误一爬虫识别漏了AI 爬虫仍拿到空壳。表现是 curl 模拟时返回的还是 SPA 骨架。排查顺序先打印request.headers.get(User-Agent)确认 UA 字符串再检查AI_CRAWLER_PATTERNS是否覆盖了该爬虫。有些爬虫 UA 里带的是GPTBot而不是ChatGPT列表要补全。错误二边缘函数超时返回 504。渲染服务响应慢或模型调用超时都会导致。建议给fetchRenderedContent和模型请求都加AbortController设置 3 秒超时超时就走降级返回原页面。宁可返回空壳也不要让爬虫拿到 5xx否则会被标记为不可抓取。错误三JSON-LD 格式错误爬虫解析失败。模型输出的 JSON 偶尔会带 markdown 代码块标记比如json 包裹。处理办法是在 buildStructuredData 里做一次清洗去掉首尾的和json字样再JSON.parse校验失败则回退到手工拼接的基础 JSON-LD。错误四缓存把普通用户和爬虫结果混在一起。如果 CDN 缓存键没区分 UA爬虫拿到的结构化页面可能被缓存后返回给普通用户导致用户看到一坨 JSON-LD。解决办法是在缓存键里加入Vary: User-Agent或者对爬虫响应单独设置Cache-Control且不共享缓存。错误五Key 泄露到客户端。边缘函数里用globalThis.TAOTOKEN_KEY从环境变量读取是对的但如果你在构建时把 Key 注入到了前端 bundle就白搭了。检查方式是搜索构建产物里有没有Bearer开头的字符串。有的话立刻在控制台轮换 Key。6. 接入路径与后续动作排障和接入相关的凭证、文档都在这一节收口。API Key 管理入口https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 接入文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。这两个是配置边缘函数时最常回看的页面。如果你在验证模型对 HTML 结构化的效果模型对话入口https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite 。长期做编码或 Agent 集成的话Coding Plan 入口https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite 。Claude Code 相关配置参考https://taotoken.net/claude-code-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaudecodeutm_campaignrewrite 。最后给一个实操建议先拿一个路由页面做灰度用 curl 验证爬虫和普通用户两条链路都正常再逐步放量。边缘渲染的价值在于“不改 SPA 架构就能让 AI 爬虫看到内容”但渲染服务和缓存策略需要根据你的流量特征调参。我踩过的坑里缓存键没区分 UA 是最容易忽略的一个上线前记得检查。