[{"data":1,"prerenderedAt":458},["ShallowReactive",2],{"blog-seo-for-progressive-web-apps-zh-CN":3},{"id":4,"title":5,"excerpt":6,"content":7,"coverImage":421,"meta":429,"status":433,"slug":434,"author":435,"category":447,"publishDate":19,"featured":354,"updatedAt":453,"createdAt":454,"contentHtml":455,"previewUrl":456,"localeSlugs":457},163,"PWA SEO 完全指南：让渐进式 Web 应用被搜到（2026）","PWA SEO 决定 Google 收录的是你的内容还是一个空壳。本文讲清渲染策略、Service Worker、Core Web Vitals 与结构化数据，让渐进式 Web 应用真正被搜到。",{"root":8},{"children":9,"direction":19,"format":15,"indent":13,"type":420,"version":18},[10,22,29,33,37,41,72,76,80,84,189,195,199,203,219,223,227,231,303,307,311,331,335,339,343,368,372,377,381,385,389,393,397,401,408,412],{"children":11,"direction":19,"format":15,"indent":13,"type":20,"version":18,"tag":21},[12],{"detail":13,"format":13,"mode":14,"style":15,"text":16,"type":17,"version":18},0,"normal","","什么是 PWA SEO（渐进式 Web 应用 SEO）？","text",1,null,"heading","h2",{"children":23,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":18,"textStyle":15},[24,26],{"detail":13,"format":18,"mode":14,"style":15,"text":25,"type":17,"version":18},"PWA SEO 指的是让「渐进式 Web 应用」这种类原生的网页体验被搜索引擎完整抓取、收录并参与排名的一整套优化实践。",{"detail":13,"format":13,"mode":14,"style":15,"text":27,"type":17,"version":18}," PWA（Progressive Web App）跑在浏览器里，却拥有原生 App 的能力——离线可用、消息推送、加到主屏——正是这种「混血」特性，让它的 SEO 和普通网站不一样。做对了，一套代码同时收获自然搜索流量和 App 级的用户黏性；做错了，Google 抓到的只是一个空壳。","paragraph",{"children":30,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[31],{"detail":13,"format":13,"mode":14,"style":15,"text":32,"type":17,"version":18},"这篇指南讲清楚决定 PWA 能不能被搜到的几个技术选择：渲染方式、Service Worker 行为、可收录的 URL、Core Web Vitals 和结构化数据。",{"children":34,"direction":19,"format":15,"indent":13,"type":20,"version":18,"tag":21},[35],{"detail":13,"format":13,"mode":14,"style":15,"text":36,"type":17,"version":18},"为什么 PWA SEO 和普通网站 SEO 不一样",{"children":38,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[39],{"detail":13,"format":13,"mode":14,"style":15,"text":40,"type":17,"version":18},"传统网站直接把 HTML 交给爬虫读取。而大多数 PWA 是单页应用（SPA），首屏只发一个近乎空白的 HTML 骨架，内容全靠 JavaScript 渲染。这一个架构选择就带来三个 SEO 风险：",{"children":42,"direction":19,"format":15,"indent":13,"type":69,"version":18,"listType":70,"start":18,"tag":71},[43,55,62],{"children":44,"direction":19,"format":15,"indent":13,"type":54,"version":18,"value":18},[45,47,49,52],{"detail":13,"format":18,"mode":14,"style":15,"text":46,"type":17,"version":18},"首屏内容不可见",{"detail":13,"format":13,"mode":14,"style":15,"text":48,"type":17,"version":18},"——如果 Googlebot 收到的是空的 ",{"detail":13,"format":50,"mode":14,"style":15,"text":51,"type":17,"version":18},16,"\u003Cdiv id=\"root\">\u003C/div>",{"detail":13,"format":13,"mode":14,"style":15,"text":53,"type":17,"version":18},"，内容要等客户端 JavaScript 跑完才出现，那么排名信号就完全取决于爬虫能不能把这段 JS 执行好。","listitem",{"children":56,"direction":19,"format":15,"indent":13,"type":54,"version":18,"value":61},[57,59],{"detail":13,"format":18,"mode":14,"style":15,"text":58,"type":17,"version":18},"Service Worker 可能缓存过期内容",{"detail":13,"format":13,"mode":14,"style":15,"text":60,"type":17,"version":18},"——让 PWA 变快的「离线优先」缓存，如果策略不当，会把过期页面同时喂给用户和爬虫。",2,{"children":63,"direction":19,"format":15,"indent":13,"type":54,"version":18,"value":68},[64,66],{"detail":13,"format":18,"mode":14,"style":15,"text":65,"type":17,"version":18},"路由没有真实 URL",{"detail":13,"format":13,"mode":14,"style":15,"text":67,"type":17,"version":18},"——客户端路由可能造出一堆没有独立、可分享、可抓取 URL 的「页面」，搜索引擎根本没东西可收录。",3,"list","bullet","ul",{"children":73,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[74],{"detail":13,"format":13,"mode":14,"style":15,"text":75,"type":17,"version":18},"这些都不是弃用 PWA 的理由，而是提醒你：从第一天起就要在渲染和缓存上做出有意识的选择。",{"children":77,"direction":19,"format":15,"indent":13,"type":20,"version":18,"tag":21},[78],{"detail":13,"format":13,"mode":14,"style":15,"text":79,"type":17,"version":18},"渲染决策：SSR、SSG 还是纯客户端",{"children":81,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[82],{"detail":13,"format":13,"mode":14,"style":15,"text":83,"type":17,"version":18},"渲染策略是 PWA SEO 里最大的杠杆。下面对比三种主流方案对搜索可见性的影响。",{"children":85,"direction":19,"format":15,"indent":13,"type":188,"version":18},[86,108,128,148,168],{"children":87,"direction":19,"format":15,"indent":13,"type":107,"version":18},[88,95,101],{"children":89,"direction":19,"format":15,"indent":13,"type":94,"version":18,"backgroundColor":19,"colSpan":18,"headerState":18,"rowSpan":18},[90],{"children":91,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[92],{"detail":13,"format":13,"mode":14,"style":15,"text":93,"type":17,"version":18}," 渲染策略 ","tablecell",{"children":96,"direction":19,"format":15,"indent":13,"type":94,"version":18,"backgroundColor":19,"colSpan":18,"headerState":18,"rowSpan":18},[97],{"children":98,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[99],{"detail":13,"format":13,"mode":14,"style":15,"text":100,"type":17,"version":18}," 可抓取性 ",{"children":102,"direction":19,"format":15,"indent":13,"type":94,"version":18,"backgroundColor":19,"colSpan":18,"headerState":18,"rowSpan":18},[103],{"children":104,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[105],{"detail":13,"format":13,"mode":14,"style":15,"text":106,"type":17,"version":18}," 最适合 ","tablerow",{"children":109,"direction":19,"format":15,"indent":13,"type":107,"version":18},[110,116,122],{"children":111,"direction":19,"format":15,"indent":13,"type":94,"version":18,"backgroundColor":19,"colSpan":18,"headerState":13,"rowSpan":18},[112],{"children":113,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[114],{"detail":13,"format":13,"mode":14,"style":15,"text":115,"type":17,"version":18}," 服务端渲染（SSR） ",{"children":117,"direction":19,"format":15,"indent":13,"type":94,"version":18,"backgroundColor":19,"colSpan":18,"headerState":13,"rowSpan":18},[118],{"children":119,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[120],{"detail":13,"format":13,"mode":14,"style":15,"text":121,"type":17,"version":18}," 极佳——首屏即完整 HTML ",{"children":123,"direction":19,"format":15,"indent":13,"type":94,"version":18,"backgroundColor":19,"colSpan":18,"headerState":13,"rowSpan":18},[124],{"children":125,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[126],{"detail":13,"format":13,"mode":14,"style":15,"text":127,"type":17,"version":18}," 每次请求都变的内容（信息流、看板） ",{"children":129,"direction":19,"format":15,"indent":13,"type":107,"version":18},[130,136,142],{"children":131,"direction":19,"format":15,"indent":13,"type":94,"version":18,"backgroundColor":19,"colSpan":18,"headerState":13,"rowSpan":18},[132],{"children":133,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[134],{"detail":13,"format":13,"mode":14,"style":15,"text":135,"type":17,"version":18}," 静态生成（SSG） ",{"children":137,"direction":19,"format":15,"indent":13,"type":94,"version":18,"backgroundColor":19,"colSpan":18,"headerState":13,"rowSpan":18},[138],{"children":139,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[140],{"detail":13,"format":13,"mode":14,"style":15,"text":141,"type":17,"version":18}," 极佳——每个 URL 预生成 HTML ",{"children":143,"direction":19,"format":15,"indent":13,"type":94,"version":18,"backgroundColor":19,"colSpan":18,"headerState":13,"rowSpan":18},[144],{"children":145,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[146],{"detail":13,"format":13,"mode":14,"style":15,"text":147,"type":17,"version":18}," 营销页、文档、博客 ",{"children":149,"direction":19,"format":15,"indent":13,"type":107,"version":18},[150,156,162],{"children":151,"direction":19,"format":15,"indent":13,"type":94,"version":18,"backgroundColor":19,"colSpan":18,"headerState":13,"rowSpan":18},[152],{"children":153,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[154],{"detail":13,"format":13,"mode":14,"style":15,"text":155,"type":17,"version":18}," 纯客户端渲染（CSR） ",{"children":157,"direction":19,"format":15,"indent":13,"type":94,"version":18,"backgroundColor":19,"colSpan":18,"headerState":13,"rowSpan":18},[158],{"children":159,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[160],{"detail":13,"format":13,"mode":14,"style":15,"text":161,"type":17,"version":18}," 有风险——依赖爬虫执行 JS ",{"children":163,"direction":19,"format":15,"indent":13,"type":94,"version":18,"backgroundColor":19,"colSpan":18,"headerState":13,"rowSpan":18},[164],{"children":165,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[166],{"detail":13,"format":13,"mode":14,"style":15,"text":167,"type":17,"version":18}," 不需要 SEO 的登录态页面 ",{"children":169,"direction":19,"format":15,"indent":13,"type":107,"version":18},[170,176,182],{"children":171,"direction":19,"format":15,"indent":13,"type":94,"version":18,"backgroundColor":19,"colSpan":18,"headerState":13,"rowSpan":18},[172],{"children":173,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[174],{"detail":13,"format":13,"mode":14,"style":15,"text":175,"type":17,"version":18}," 动态渲染 / 注水（Hydration） ",{"children":177,"direction":19,"format":15,"indent":13,"type":94,"version":18,"backgroundColor":19,"colSpan":18,"headerState":13,"rowSpan":18},[178],{"children":179,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[180],{"detail":13,"format":13,"mode":14,"style":15,"text":181,"type":17,"version":18}," 良好——先出 HTML 再补交互 ",{"children":183,"direction":19,"format":15,"indent":13,"type":94,"version":18,"backgroundColor":19,"colSpan":18,"headerState":13,"rowSpan":18},[184],{"children":185,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[186],{"detail":13,"format":13,"mode":14,"style":15,"text":187,"type":17,"version":18}," 既要 SEO 又要富交互的混合应用 ","table",{"children":190,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":18,"textStyle":15},[191,193],{"detail":13,"format":18,"mode":14,"style":15,"text":192,"type":17,"version":18},"建议：",{"detail":13,"format":13,"mode":14,"style":15,"text":194,"type":17,"version":18}," 任何你希望参与排名的路由，首屏响应就要返回真实 HTML。Next.js、Nuxt、Astro、SvelteKit 之所以默认走 SSR/SSG，正是因为纯客户端渲染对 SEO 太脆弱。把纯客户端渲染留给那些没有自然搜索价值的登录态页面。",{"children":196,"direction":19,"format":15,"indent":13,"type":20,"version":18,"tag":21},[197],{"detail":13,"format":13,"mode":14,"style":15,"text":198,"type":17,"version":18},"Service Worker：又快又不藏内容",{"children":200,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[201],{"detail":13,"format":13,"mode":14,"style":15,"text":202,"type":17,"version":18},"Service Worker 是 PWA 之所以是 PWA 的关键——它也正是 SEO 悄悄出问题的地方。两条规则让它对搜索友好：",{"children":204,"direction":19,"format":15,"indent":13,"type":69,"version":18,"listType":217,"start":18,"tag":218},[205,211],{"children":206,"direction":19,"format":15,"indent":13,"type":54,"version":18,"value":18},[207,209],{"detail":13,"format":18,"mode":14,"style":15,"text":208,"type":17,"version":18},"可收录的 HTML 文档绝不用「缓存优先」。",{"detail":13,"format":13,"mode":14,"style":15,"text":210,"type":17,"version":18}," HTML 用「网络优先」（或 stale-while-revalidate）策略，保证用户和爬虫拿到最新内容；「缓存优先」只留给字体、CSS、图片这类静态资源。",{"children":212,"direction":19,"format":15,"indent":13,"type":54,"version":18,"value":61},[213,215],{"detail":13,"format":18,"mode":14,"style":15,"text":214,"type":17,"version":18},"别让 Service Worker 用同一个 App 壳拦截爬虫请求。",{"detail":13,"format":13,"mode":14,"style":15,"text":216,"type":17,"version":18}," 如果每个 URL 都返回同一个壳，Google 看到的就是一堆重复、无内容的页面。要确保每个可收录路由都解析出属于自己的渲染内容。","number","ol",{"children":220,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[221],{"detail":13,"format":13,"mode":14,"style":15,"text":222,"type":17,"version":18},"配置得当的 Service Worker 通过把 Core Web Vitals 推进绿区来间接助力 SEO——但它替代不了「每个 URL 都要有真实内容」这件事。",{"children":224,"direction":19,"format":15,"indent":13,"type":20,"version":18,"tag":21},[225],{"detail":13,"format":13,"mode":14,"style":15,"text":226,"type":17,"version":18},"PWA SEO 技术清单",{"children":228,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[229],{"detail":13,"format":13,"mode":14,"style":15,"text":230,"type":17,"version":18},"上线前逐条过一遍：",{"children":232,"direction":19,"format":15,"indent":13,"type":69,"version":18,"listType":70,"start":18,"tag":71},[233,247,261,271,278,285,296],{"children":234,"direction":19,"format":15,"indent":13,"type":54,"version":18,"value":18},[235,237,239,241,243,245],{"detail":13,"format":18,"mode":14,"style":15,"text":236,"type":17,"version":18},"每个视图一个可收录 URL。",{"detail":13,"format":13,"mode":14,"style":15,"text":238,"type":17,"version":18}," 用 History API（",{"detail":13,"format":50,"mode":14,"style":15,"text":240,"type":17,"version":18},"pushState",{"detail":13,"format":13,"mode":14,"style":15,"text":242,"type":17,"version":18},"）让每个有意义的视图都有唯一、可分享的 URL——可收录内容绝不要用 hash 路由（",{"detail":13,"format":50,"mode":14,"style":15,"text":244,"type":17,"version":18},"#/page",{"detail":13,"format":13,"mode":14,"style":15,"text":246,"type":17,"version":18},"）。",{"children":248,"direction":19,"format":15,"indent":13,"type":54,"version":18,"value":61},[249,251,253,255,257,259],{"detail":13,"format":18,"mode":14,"style":15,"text":250,"type":17,"version":18},"每个路由独立的标题和 meta description。",{"detail":13,"format":13,"mode":14,"style":15,"text":252,"type":17,"version":18}," SPA 常常忘了在客户端跳转时更新 ",{"detail":13,"format":50,"mode":14,"style":15,"text":254,"type":17,"version":18},"\u003Ctitle>",{"detail":13,"format":13,"mode":14,"style":15,"text":256,"type":17,"version":18}," 和 ",{"detail":13,"format":50,"mode":14,"style":15,"text":258,"type":17,"version":18},"\u003Cmeta name=\"description\">",{"detail":13,"format":13,"mode":14,"style":15,"text":260,"type":17,"version":18},"，每次路由变化都要更新它们。",{"children":262,"direction":19,"format":15,"indent":13,"type":54,"version":18,"value":68},[263,265,267,269],{"detail":13,"format":18,"mode":14,"style":15,"text":264,"type":17,"version":18},"服务端渲染 canonical 标签。",{"detail":13,"format":13,"mode":14,"style":15,"text":266,"type":17,"version":18}," 在首屏 HTML 里就输出正确的 ",{"detail":13,"format":50,"mode":14,"style":15,"text":268,"type":17,"version":18},"\u003Clink rel=\"canonical\">",{"detail":13,"format":13,"mode":14,"style":15,"text":270,"type":17,"version":18},"，别靠 JavaScript 后注入。",{"children":272,"direction":19,"format":15,"indent":13,"type":54,"version":18,"value":277},[273,275],{"detail":13,"format":18,"mode":14,"style":15,"text":274,"type":17,"version":18},"一份真实的 XML sitemap。",{"detail":13,"format":13,"mode":14,"style":15,"text":276,"type":17,"version":18}," 列出每个可收录 URL，别指望爬虫单靠 JavaScript 导航去发现路由。",4,{"children":279,"direction":19,"format":15,"indent":13,"type":54,"version":18,"value":284},[280,282],{"detail":13,"format":18,"mode":14,"style":15,"text":281,"type":17,"version":18},"结构化数据（Schema.org）。",{"detail":13,"format":13,"mode":14,"style":15,"text":283,"type":17,"version":18}," 在服务端响应里加文章、产品、FAQ、面包屑的 JSON-LD，去争取富媒体结果。",5,{"children":286,"direction":19,"format":15,"indent":13,"type":54,"version":18,"value":295},[287,289,291,293],{"detail":13,"format":18,"mode":14,"style":15,"text":288,"type":17,"version":18},"Web App Manifest。",{"detail":13,"format":13,"mode":14,"style":15,"text":290,"type":17,"version":18}," ",{"detail":13,"format":50,"mode":14,"style":15,"text":292,"type":17,"version":18},"manifest.json",{"detail":13,"format":13,"mode":14,"style":15,"text":294,"type":17,"version":18}," 驱动安装提示；它本身不影响排名，但有效的 manifest 加 HTTPS 是 PWA 安装体验的前提，而安装体验带来复访黏性。",6,{"children":297,"direction":19,"format":15,"indent":13,"type":54,"version":18,"value":302},[298,300],{"detail":13,"format":18,"mode":14,"style":15,"text":299,"type":17,"version":18},"一切移动优先。",{"detail":13,"format":13,"mode":14,"style":15,"text":301,"type":17,"version":18}," Google 用移动版建索引。PWA 天生移动优先——确保渲染出的移动端 HTML 包含完整内容。",7,{"children":304,"direction":19,"format":15,"indent":13,"type":20,"version":18,"tag":21},[305],{"detail":13,"format":13,"mode":14,"style":15,"text":306,"type":17,"version":18},"Core Web Vitals：PWA 本该赢的地方",{"children":308,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[309],{"detail":13,"format":13,"mode":14,"style":15,"text":310,"type":17,"version":18},"Core Web Vitals 是 Google 已确认的排名信号，而构建得当的 PWA 有结构性优势：",{"children":312,"direction":19,"format":15,"indent":13,"type":69,"version":18,"listType":70,"start":18,"tag":71},[313,319,325],{"children":314,"direction":19,"format":15,"indent":13,"type":54,"version":18,"value":18},[315,317],{"detail":13,"format":18,"mode":14,"style":15,"text":316,"type":17,"version":18},"最大内容绘制（LCP）：",{"detail":13,"format":13,"mode":14,"style":15,"text":318,"type":17,"version":18}," SSR/SSG 加资源缓存，让主要内容快速绘制。",{"children":320,"direction":19,"format":15,"indent":13,"type":54,"version":18,"value":61},[321,323],{"detail":13,"format":18,"mode":14,"style":15,"text":322,"type":17,"version":18},"下一次绘制交互（INP）：",{"detail":13,"format":13,"mode":14,"style":15,"text":324,"type":17,"version":18}," 保持主线程空闲——渐进式注水，别一次性塞一个巨大的 JavaScript 包。",{"children":326,"direction":19,"format":15,"indent":13,"type":54,"version":18,"value":68},[327,329],{"detail":13,"format":18,"mode":14,"style":15,"text":328,"type":17,"version":18},"累积布局偏移（CLS）：",{"detail":13,"format":13,"mode":14,"style":15,"text":330,"type":17,"version":18}," 为图片和动态加载内容预留空间，别让布局跳动。",{"children":332,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[333],{"detail":13,"format":13,"mode":14,"style":15,"text":334,"type":17,"version":18},"用 Lighthouse 和 Chrome 用户体验报告（CrUX）来测，而不是只看自己的设备。Google 真正采用的是「现场数据」（field data）。",{"children":336,"direction":19,"format":15,"indent":13,"type":20,"version":18,"tag":21},[337],{"detail":13,"format":13,"mode":14,"style":15,"text":338,"type":17,"version":18},"从排名到安装：闭环",{"children":340,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[341],{"detail":13,"format":13,"mode":14,"style":15,"text":342,"type":17,"version":18},"SEO 把用户带到你的 PWA，安装提示和再触达机制让他们不断回来——这正是 PWA 比普通网站更能变现的地方。当搜索流量落在一个又快又可安装的体验上，你就能把一次性的自然访客转化成已安装、可推送的用户。",{"children":344,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[345,347,357,359,366],{"detail":13,"format":13,"mode":14,"style":15,"text":346,"type":17,"version":18},"这正是 ",{"children":348,"direction":19,"format":15,"indent":13,"type":351,"version":68,"fields":352,"id":356},[349],{"detail":13,"format":13,"mode":14,"style":15,"text":350,"type":17,"version":18},"DeepClick 的 PWA 安装产品","link",{"linkType":353,"newTab":354,"url":355},"custom",false,"/product/pwa-install","6a4c654c5f5c4a00c86752ee",{"detail":13,"format":13,"mode":14,"style":15,"text":358,"type":17,"version":18}," 要解决的问题：用高转化的安装流程，把网页流量变成已安装的 PWA 用户。再配合 ",{"children":360,"direction":19,"format":15,"indent":13,"type":351,"version":68,"fields":363,"id":365},[361],{"detail":13,"format":13,"mode":14,"style":15,"text":362,"type":17,"version":18},"Web 推送再触达",{"linkType":353,"newTab":354,"url":364},"/product/re-engagement","6a4c654c5f5c4a00c86752ef",{"detail":13,"format":13,"mode":14,"style":15,"text":367,"type":17,"version":18},"，把这些已安装用户召回，而不必为同一次点击付两次钱。SEO 负责漏斗顶端，安装与再触达负责把价值收下来。",{"children":369,"direction":19,"format":15,"indent":13,"type":20,"version":18,"tag":21},[370],{"detail":13,"format":13,"mode":14,"style":15,"text":371,"type":17,"version":18},"常见问题",{"children":373,"direction":19,"format":15,"indent":13,"type":20,"version":18,"tag":376},[374],{"detail":13,"format":13,"mode":14,"style":15,"text":375,"type":17,"version":18},"Google 能收录渐进式 Web 应用（PWA）吗？","h3",{"children":378,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[379],{"detail":13,"format":13,"mode":14,"style":15,"text":380,"type":17,"version":18},"能。Google 可以抓取并收录 PWA，也确实会执行 JavaScript——但渲染是一次被推迟、资源受限的二次处理。可靠的做法是：任何想排名的路由，首屏响应就返回真实 HTML（SSR 或 SSG），而不是指望爬虫把客户端 JavaScript 完美渲染出来。",{"children":382,"direction":19,"format":15,"indent":13,"type":20,"version":18,"tag":376},[383],{"detail":13,"format":13,"mode":14,"style":15,"text":384,"type":17,"version":18},"PWA 排名会比普通网站高吗？",{"children":386,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[387],{"detail":13,"format":13,"mode":14,"style":15,"text":388,"type":17,"version":18},"不会自动更高。「是个 PWA」本身没有排名加成。优势是间接的：PWA 更容易拿到优秀的 Core Web Vitals 和移动优先性能，而这些是排名因素。真正决定排名的，还是内容质量和技术基本功。",{"children":390,"direction":19,"format":15,"indent":13,"type":20,"version":18,"tag":376},[391],{"detail":13,"format":13,"mode":14,"style":15,"text":392,"type":17,"version":18},"Service Worker 会损害 SEO 吗？",{"children":394,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[395],{"detail":13,"format":13,"mode":14,"style":15,"text":396,"type":17,"version":18},"只有配错时才会。对 HTML 文档用「缓存优先」策略，可能把过期或空壳内容喂给爬虫。HTML 用网络优先或 stale-while-revalidate，「缓存优先」只给静态资源，并确保每个 URL 都解析出自己的内容。",{"children":398,"direction":19,"format":15,"indent":13,"type":20,"version":18,"tag":376},[399],{"detail":13,"format":13,"mode":14,"style":15,"text":400,"type":17,"version":18},"Web App Manifest 是 SEO 排名因素吗？",{"children":402,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[403,405,406],{"detail":13,"format":13,"mode":14,"style":15,"text":404,"type":17,"version":18},"不是。",{"detail":13,"format":50,"mode":14,"style":15,"text":292,"type":17,"version":18},{"detail":13,"format":13,"mode":14,"style":15,"text":407,"type":17,"version":18}," 启用安装体验，本身不是排名信号。它影响的是黏性和复访，而这些能通过更好的用户信号间接支撑 SEO。",{"children":409,"direction":19,"format":15,"indent":13,"type":20,"version":18,"tag":21},[410],{"detail":13,"format":13,"mode":14,"style":15,"text":411,"type":17,"version":18},"关键要点",{"children":413,"direction":19,"format":15,"indent":13,"type":28,"version":18,"textFormat":13,"textStyle":15},[414,416,418],{"detail":13,"format":13,"mode":14,"style":15,"text":415,"type":17,"version":18},"PWA SEO 归根结底就一条原则：",{"detail":13,"format":18,"mode":14,"style":15,"text":417,"type":17,"version":18},"确保搜索引擎在首屏请求就看到和用户一样的完整内容。",{"detail":13,"format":13,"mode":14,"style":15,"text":419,"type":17,"version":18}," 可收录路由选 SSR 或 SSG，别让 Service Worker 缓存过期 HTML，给每个视图一个带独立元数据的真实 URL，并用好 PWA 天生的 Core Web Vitals 优势。然后让安装与再触达，把这些自然流量变成长期用户。","root",{"id":422,"alt":423,"updatedAt":424,"createdAt":424,"url":425,"thumbnailURL":19,"filename":426,"mimeType":427,"filesize":428,"width":19,"height":19},325,"Abstract illustration of SEO for progressive web apps: smartphone merging with browser, search and network motifs","2026-07-07T02:31:33.714Z","https://cms-r2.deepclick.com/gpt_1783391422919_0-aeef164cc04e.png","gpt_1783391422919_0-aeef164cc04e.png","application/octet-stream",1811683,{"title":430,"description":431,"image":432},"PWA SEO 完全指南：渐进式 Web 应用搜索优化（2026）","PWA SEO 怎么做？选 SSR 或 SSG、别让 Service Worker 缓存过期 HTML、赢下 Core Web Vitals，让你的渐进式 Web 应用在 2026 年被 Google 收录并排名。",{"id":422,"alt":423,"updatedAt":424,"createdAt":424,"url":425,"thumbnailURL":19,"filename":426,"mimeType":427,"filesize":428,"width":19,"height":19},"published","seo-for-progressive-web-apps",{"id":61,"name":436,"avatar":437,"updatedAt":445,"createdAt":446},"DeepClick",{"id":438,"alt":436,"updatedAt":439,"createdAt":439,"url":440,"thumbnailURL":19,"filename":441,"mimeType":442,"filesize":443,"width":444,"height":444},25,"2026-04-22T08:09:22.606Z","https://cms-r2.deepclick.com/头像-白.png","头像-白.png","image/png",26626,1024,"2026-04-22T08:09:35.299Z","2026-04-22T06:42:49.116Z",{"id":302,"titleZh":448,"titleEn":449,"slug":450,"order":284,"updatedAt":451,"createdAt":452},"技术导航","Tech Guides","tech-guides","2026-04-27T08:37:10.576Z","2026-04-23T02:59:13.436Z","2026-07-07T02:32:51.041Z","2026-07-07T02:32:30.673Z","\u003Cdiv class=\"payload-richtext\">\u003Ch2>什么是 PWA SEO（渐进式 Web 应用 SEO）？\u003C/h2>\u003Cp>\u003Cstrong>PWA SEO 指的是让「渐进式 Web 应用」这种类原生的网页体验被搜索引擎完整抓取、收录并参与排名的一整套优化实践。\u003C/strong> PWA（Progressive Web App）跑在浏览器里，却拥有原生 App 的能力——离线可用、消息推送、加到主屏——正是这种「混血」特性，让它的 SEO 和普通网站不一样。做对了，一套代码同时收获自然搜索流量和 App 级的用户黏性；做错了，Google 抓到的只是一个空壳。\u003C/p>\u003Cp>这篇指南讲清楚决定 PWA 能不能被搜到的几个技术选择：渲染方式、Service Worker 行为、可收录的 URL、Core Web Vitals 和结构化数据。\u003C/p>\u003Ch2>为什么 PWA SEO 和普通网站 SEO 不一样\u003C/h2>\u003Cp>传统网站直接把 HTML 交给爬虫读取。而大多数 PWA 是单页应用（SPA），首屏只发一个近乎空白的 HTML 骨架，内容全靠 JavaScript 渲染。这一个架构选择就带来三个 SEO 风险：\u003C/p>\u003Cul class=\"list-bullet\">\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"1\"\n        >\u003Cstrong>首屏内容不可见\u003C/strong>——如果 Googlebot 收到的是空的 \u003Ccode><div id="root"></div>\u003C/code>，内容要等客户端 JavaScript 跑完才出现，那么排名信号就完全取决于爬虫能不能把这段 JS 执行好。\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"2\"\n        >\u003Cstrong>Service Worker 可能缓存过期内容\u003C/strong>——让 PWA 变快的「离线优先」缓存，如果策略不当，会把过期页面同时喂给用户和爬虫。\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"3\"\n        >\u003Cstrong>路由没有真实 URL\u003C/strong>——客户端路由可能造出一堆没有独立、可分享、可抓取 URL 的「页面」，搜索引擎根本没东西可收录。\u003C/li>\u003C/ul>\u003Cp>这些都不是弃用 PWA 的理由，而是提醒你：从第一天起就要在渲染和缓存上做出有意识的选择。\u003C/p>\u003Ch2>渲染决策：SSR、SSG 还是纯客户端\u003C/h2>\u003Cp>渲染策略是 PWA SEO 里最大的杠杆。下面对比三种主流方案对搜索可见性的影响。\u003C/p>\u003Cdiv class=\"lexical-table-container\">\n        \u003Ctable class=\"lexical-table\" style=\"border-collapse: collapse;\">\n          \u003Ctbody>\u003Ctr class=\"lexical-table-row\">\n        \u003Cth\n        class=\"lexical-table-cell lexical-table-cell-header-1\"\n        \n        \n        style=\"border: 1px solid #ccc; padding: 8px;\"\n      >\n        \u003Cp> 渲染策略 \u003C/p>\n      \u003C/th>\n    \u003Cth\n        class=\"lexical-table-cell lexical-table-cell-header-1\"\n        \n        \n        style=\"border: 1px solid #ccc; padding: 8px;\"\n      >\n        \u003Cp> 可抓取性 \u003C/p>\n      \u003C/th>\n    \u003Cth\n        class=\"lexical-table-cell lexical-table-cell-header-1\"\n        \n        \n        style=\"border: 1px solid #ccc; padding: 8px;\"\n      >\n        \u003Cp> 最适合 \u003C/p>\n      \u003C/th>\n    \n      \u003C/tr>\u003Ctr class=\"lexical-table-row\">\n        \u003Ctd\n        class=\"lexical-table-cell lexical-table-cell-header-0\"\n        \n        \n        style=\"border: 1px solid #ccc; padding: 8px;\"\n      >\n        \u003Cp> 服务端渲染（SSR） \u003C/p>\n      \u003C/td>\n    \u003Ctd\n        class=\"lexical-table-cell lexical-table-cell-header-0\"\n        \n        \n        style=\"border: 1px solid #ccc; padding: 8px;\"\n      >\n        \u003Cp> 极佳——首屏即完整 HTML \u003C/p>\n      \u003C/td>\n    \u003Ctd\n        class=\"lexical-table-cell lexical-table-cell-header-0\"\n        \n        \n        style=\"border: 1px solid #ccc; padding: 8px;\"\n      >\n        \u003Cp> 每次请求都变的内容（信息流、看板） \u003C/p>\n      \u003C/td>\n    \n      \u003C/tr>\u003Ctr class=\"lexical-table-row\">\n        \u003Ctd\n        class=\"lexical-table-cell lexical-table-cell-header-0\"\n        \n        \n        style=\"border: 1px solid #ccc; padding: 8px;\"\n      >\n        \u003Cp> 静态生成（SSG） \u003C/p>\n      \u003C/td>\n    \u003Ctd\n        class=\"lexical-table-cell lexical-table-cell-header-0\"\n        \n        \n        style=\"border: 1px solid #ccc; padding: 8px;\"\n      >\n        \u003Cp> 极佳——每个 URL 预生成 HTML \u003C/p>\n      \u003C/td>\n    \u003Ctd\n        class=\"lexical-table-cell lexical-table-cell-header-0\"\n        \n        \n        style=\"border: 1px solid #ccc; padding: 8px;\"\n      >\n        \u003Cp> 营销页、文档、博客 \u003C/p>\n      \u003C/td>\n    \n      \u003C/tr>\u003Ctr class=\"lexical-table-row\">\n        \u003Ctd\n        class=\"lexical-table-cell lexical-table-cell-header-0\"\n        \n        \n        style=\"border: 1px solid #ccc; padding: 8px;\"\n      >\n        \u003Cp> 纯客户端渲染（CSR） \u003C/p>\n      \u003C/td>\n    \u003Ctd\n        class=\"lexical-table-cell lexical-table-cell-header-0\"\n        \n        \n        style=\"border: 1px solid #ccc; padding: 8px;\"\n      >\n        \u003Cp> 有风险——依赖爬虫执行 JS \u003C/p>\n      \u003C/td>\n    \u003Ctd\n        class=\"lexical-table-cell lexical-table-cell-header-0\"\n        \n        \n        style=\"border: 1px solid #ccc; padding: 8px;\"\n      >\n        \u003Cp> 不需要 SEO 的登录态页面 \u003C/p>\n      \u003C/td>\n    \n      \u003C/tr>\u003Ctr class=\"lexical-table-row\">\n        \u003Ctd\n        class=\"lexical-table-cell lexical-table-cell-header-0\"\n        \n        \n        style=\"border: 1px solid #ccc; padding: 8px;\"\n      >\n        \u003Cp> 动态渲染 / 注水（Hydration） \u003C/p>\n      \u003C/td>\n    \u003Ctd\n        class=\"lexical-table-cell lexical-table-cell-header-0\"\n        \n        \n        style=\"border: 1px solid #ccc; padding: 8px;\"\n      >\n        \u003Cp> 良好——先出 HTML 再补交互 \u003C/p>\n      \u003C/td>\n    \u003Ctd\n        class=\"lexical-table-cell lexical-table-cell-header-0\"\n        \n        \n        style=\"border: 1px solid #ccc; padding: 8px;\"\n      >\n        \u003Cp> 既要 SEO 又要富交互的混合应用 \u003C/p>\n      \u003C/td>\n    \n      \u003C/tr>\u003C/tbody>\n        \u003C/table>\n      \u003C/div>\u003Cp>\u003Cstrong>建议：\u003C/strong> 任何你希望参与排名的路由，首屏响应就要返回真实 HTML。Next.js、Nuxt、Astro、SvelteKit 之所以默认走 SSR/SSG，正是因为纯客户端渲染对 SEO 太脆弱。把纯客户端渲染留给那些没有自然搜索价值的登录态页面。\u003C/p>\u003Ch2>Service Worker：又快又不藏内容\u003C/h2>\u003Cp>Service Worker 是 PWA 之所以是 PWA 的关键——它也正是 SEO 悄悄出问题的地方。两条规则让它对搜索友好：\u003C/p>\u003Col class=\"list-number\">\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"1\"\n        >\u003Cstrong>可收录的 HTML 文档绝不用「缓存优先」。\u003C/strong> HTML 用「网络优先」（或 stale-while-revalidate）策略，保证用户和爬虫拿到最新内容；「缓存优先」只留给字体、CSS、图片这类静态资源。\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"2\"\n        >\u003Cstrong>别让 Service Worker 用同一个 App 壳拦截爬虫请求。\u003C/strong> 如果每个 URL 都返回同一个壳，Google 看到的就是一堆重复、无内容的页面。要确保每个可收录路由都解析出属于自己的渲染内容。\u003C/li>\u003C/ol>\u003Cp>配置得当的 Service Worker 通过把 Core Web Vitals 推进绿区来间接助力 SEO——但它替代不了「每个 URL 都要有真实内容」这件事。\u003C/p>\u003Ch2>PWA SEO 技术清单\u003C/h2>\u003Cp>上线前逐条过一遍：\u003C/p>\u003Cul class=\"list-bullet\">\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"1\"\n        >\u003Cstrong>每个视图一个可收录 URL。\u003C/strong> 用 History API（\u003Ccode>pushState\u003C/code>）让每个有意义的视图都有唯一、可分享的 URL——可收录内容绝不要用 hash 路由（\u003Ccode>#/page\u003C/code>）。\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"2\"\n        >\u003Cstrong>每个路由独立的标题和 meta description。\u003C/strong> SPA 常常忘了在客户端跳转时更新 \u003Ccode><title>\u003C/code> 和 \u003Ccode><meta name="description">\u003C/code>，每次路由变化都要更新它们。\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"3\"\n        >\u003Cstrong>服务端渲染 canonical 标签。\u003C/strong> 在首屏 HTML 里就输出正确的 \u003Ccode><link rel="canonical">\u003C/code>，别靠 JavaScript 后注入。\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"4\"\n        >\u003Cstrong>一份真实的 XML sitemap。\u003C/strong> 列出每个可收录 URL，别指望爬虫单靠 JavaScript 导航去发现路由。\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"5\"\n        >\u003Cstrong>结构化数据（Schema.org）。\u003C/strong> 在服务端响应里加文章、产品、FAQ、面包屑的 JSON-LD，去争取富媒体结果。\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"6\"\n        >\u003Cstrong>Web App Manifest。\u003C/strong> \u003Ccode>manifest.json\u003C/code> 驱动安装提示；它本身不影响排名，但有效的 manifest 加 HTTPS 是 PWA 安装体验的前提，而安装体验带来复访黏性。\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"7\"\n        >\u003Cstrong>一切移动优先。\u003C/strong> Google 用移动版建索引。PWA 天生移动优先——确保渲染出的移动端 HTML 包含完整内容。\u003C/li>\u003C/ul>\u003Ch2>Core Web Vitals：PWA 本该赢的地方\u003C/h2>\u003Cp>Core Web Vitals 是 Google 已确认的排名信号，而构建得当的 PWA 有结构性优势：\u003C/p>\u003Cul class=\"list-bullet\">\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"1\"\n        >\u003Cstrong>最大内容绘制（LCP）：\u003C/strong> SSR/SSG 加资源缓存，让主要内容快速绘制。\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"2\"\n        >\u003Cstrong>下一次绘制交互（INP）：\u003C/strong> 保持主线程空闲——渐进式注水，别一次性塞一个巨大的 JavaScript 包。\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"3\"\n        >\u003Cstrong>累积布局偏移（CLS）：\u003C/strong> 为图片和动态加载内容预留空间，别让布局跳动。\u003C/li>\u003C/ul>\u003Cp>用 Lighthouse 和 Chrome 用户体验报告（CrUX）来测，而不是只看自己的设备。Google 真正采用的是「现场数据」（field data）。\u003C/p>\u003Ch2>从排名到安装：闭环\u003C/h2>\u003Cp>SEO 把用户带到你的 PWA，安装提示和再触达机制让他们不断回来——这正是 PWA 比普通网站更能变现的地方。当搜索流量落在一个又快又可安装的体验上，你就能把一次性的自然访客转化成已安装、可推送的用户。\u003C/p>\u003Cp>这正是 \u003Ca href=\"/product/pwa-install\">DeepClick 的 PWA 安装产品\u003C/a> 要解决的问题：用高转化的安装流程，把网页流量变成已安装的 PWA 用户。再配合 \u003Ca href=\"/product/re-engagement\">Web 推送再触达\u003C/a>，把这些已安装用户召回，而不必为同一次点击付两次钱。SEO 负责漏斗顶端，安装与再触达负责把价值收下来。\u003C/p>\u003Ch2>常见问题\u003C/h2>\u003Ch3>Google 能收录渐进式 Web 应用（PWA）吗？\u003C/h3>\u003Cp>能。Google 可以抓取并收录 PWA，也确实会执行 JavaScript——但渲染是一次被推迟、资源受限的二次处理。可靠的做法是：任何想排名的路由，首屏响应就返回真实 HTML（SSR 或 SSG），而不是指望爬虫把客户端 JavaScript 完美渲染出来。\u003C/p>\u003Ch3>PWA 排名会比普通网站高吗？\u003C/h3>\u003Cp>不会自动更高。「是个 PWA」本身没有排名加成。优势是间接的：PWA 更容易拿到优秀的 Core Web Vitals 和移动优先性能，而这些是排名因素。真正决定排名的，还是内容质量和技术基本功。\u003C/p>\u003Ch3>Service Worker 会损害 SEO 吗？\u003C/h3>\u003Cp>只有配错时才会。对 HTML 文档用「缓存优先」策略，可能把过期或空壳内容喂给爬虫。HTML 用网络优先或 stale-while-revalidate，「缓存优先」只给静态资源，并确保每个 URL 都解析出自己的内容。\u003C/p>\u003Ch3>Web App Manifest 是 SEO 排名因素吗？\u003C/h3>\u003Cp>不是。\u003Ccode>manifest.json\u003C/code> 启用安装体验，本身不是排名信号。它影响的是黏性和复访，而这些能通过更好的用户信号间接支撑 SEO。\u003C/p>\u003Ch2>关键要点\u003C/h2>\u003Cp>PWA SEO 归根结底就一条原则：\u003Cstrong>确保搜索引擎在首屏请求就看到和用户一样的完整内容。\u003C/strong> 可收录路由选 SSR 或 SSG，别让 Service Worker 缓存过期 HTML，给每个视图一个带独立元数据的真实 URL，并用好 PWA 天生的 Core Web Vitals 优势。然后让安装与再触达，把这些自然流量变成长期用户。\u003C/p>\u003C/div>","https://deepclick.com/zh-CN/resources/blog/seo-for-progressive-web-apps",{"zh-CN":434,"en":434},1783391785171]