你的PWA网站，百度蜘蛛真的能看懂吗？

你刚给网站加上了PWA——安装按钮有了，离线能打开，首页秒出。但晚上躺床上刷手机时突然想到：百度来爬的时候，看到的真是我最新那篇干货吗？还是只抓到了一个“网络已断开”的提示页？

别慌，这问题很真实。我们帮好几个内容站和电商客户调过PWA，踩过的坑比缓存策略还多。

PWA的核心技术，对搜索引擎友好吗？

PWA靠两样东西撑起来：Service Worker 和 manifest.json。前者是后台脚本，能接管网络请求、存资源、发推送；后者只是个配置文件，告诉浏览器“这个网站可以装成App”。

真正卡住SEO的，是 Service Worker。

它太“尽职”了：一旦注册，所有页面请求都先过它这一关。如果它被设成“有缓存就直接返回”，那百度蜘蛛一来，可能拿到的是三天前的HTML，甚至是个空壳页。

我们见过一个本地生活类站点，首页标题在用户端已经改成“暑期特惠专场”，但百度收录的还是“春季上新”，整整差了两个版本。不是蜘蛛不努力，是它连门都没进对。

百度蜘蛛如何处理JavaScript和动态内容？

百度确实在提升JS渲染能力，但它不像Chrome那样等你把所有异步数据、懒加载图片、滚动触发动画全跑完再截图。它更像一个赶时间的编辑——加载主框架、执行关键JS、提取可见文本，然后收工。

如果你的内容藏在 Service Worker 缓存里，或者非得点一下“加载更多”才出现，蜘蛛大概率会跳过。

有个做母婴用品的客户，商品详情页用JS拼接参数+缓存组合渲染。结果百度只收录了页头和页脚，中间30多个SKU一个没见着。流量掉下来那天，他们才发现蜘蛛根本没看到货架。

离线缓存的内容，搜索引擎能索引吗？

不能。

离线内容存在用户手机里，百度蜘蛛连你家服务器IP都得查DNS，怎么可能翻你用户的本地存储？

它唯一能做的，就是发起一次HTTP请求，打到你域名上。至于这次请求最后返回什么——是你服务器吐出的真HTML，还是 Service Worker 拦下来塞给它的缓存页，全看你写的逻辑。

你可以把它想成：蜘蛛是来你店里拍货品图的摄影师。你却在他进门时递了张写着“今日休市”的纸条。他当然只能拍下这张纸。

如何配置Service Worker，才能让百度顺利抓取？

一句话：蜘蛛来了，别让它走缓存通道。

在 Service Worker 的 fetch 事件里加个小判断：

self.addEventListener('fetch', event => {
  const ua = event.request.headers.get('user-agent');
  if (ua && ua.includes('Baiduspider')) {
    // 百度来了，直连服务器，不走缓存
    event.respondWith(fetch(event.request));
    return;
  }
  // 其他人照常走你的缓存策略
});

这段代码不难写，也不影响用户——普通访客该缓存的还缓存，该离线的照样离线。只有百度蜘蛛会被“特殊照顾”，每次看到的都是你服务器刚生成的新鲜内容。

我们帮一个知识付费平台加上这行逻辑后，核心课程页的百度收录延迟从“好几天”缩回到“当天可查”。

PWA的SEO，还需要注意哪些关键点？

  • SSR 或 SSG 不是加分项，是入场券。
    尤其是内容型或电商类站点。百度不会等你的Vue/React把整个页面“组装”完再抓。首页、列表页、详情页，必须在HTML源码里就带着标题、描述、正文段落。

  • manifest.json 里的 name 和 short_name 写得再漂亮，也救不了没 <title> 的页面。
    真正起作用的，还是老三样：<title>、<meta name="description">、语义清晰的 <h1> 到 <h3>。这些得在首屏HTML里直接出现，别指望JS后期注入。

  • 路由别玩花的。
    用户点“关于我们”，地址栏变成 /about，那服务器就得能响应这个路径，返回带完整内容的HTML。History API 可以用，但每个有意义的URL，背后都得有对应的真实页面兜底。

今天就能执行的一个具体操作步骤

现在，打开你正在维护的PWA网站，用 Chrome 打开开发者工具（Mac按 Cmd+Option+I，Windows按 Ctrl+Shift+I），切到 Network 标签页。

→ 勾选左上角的 Disable cache
→ 点右上角三个点 → More tools → Network conditions
→ 在 User agent 区域，取消勾选 Use browser default，从下拉菜单选 Baiduspider
→ 刷新当前页面，看 Network 列表里第一个 .html 请求的响应内容

右键 → Open in Sources tab，或者直接点响应预览，看源码里有没有你期望的 <title>、正文段落、关键关键词。如果只看到 <div id="app"></div> 和一堆 script 标签——说明百度现在看到的就是这个。

那就别犹豫了：今天就在你项目的 sw.js 里，补上那段识别 Baiduspider 的 fetch 判断。改完重新注册 Service Worker，再跑一遍上面的测试。