Vue 2 SPA站点Google搜索仅展示noscript内容、缓存页为空如何解决？

• Vue 2 属于客户端渲染框架，默认返回的HTML是没有实际内容的空壳，需要等JS执行完成才会挂载生成页面DOM。Google 爬虫虽然支持JS执行，但受限于执行时长、资源加载限制，如果你的页面首屏内容依赖异步接口、JS bundle 体积过大加载慢、或者history模式没有配置服务端 fallback，爬虫在超时前没有等到DOM渲染完成，就只会抓取到空内容，fallback 到noscript标签的内容作为描述。
• vue-pwa 注册的service worker如果配置了HTML资源的缓存策略，爬虫访问时会直接返回提前缓存的空HTML壳，不会等待客户端渲染完成，也是导致Google缓存页面空白的核心诱因之一。
• 如果你的robots.txt禁止了爬虫访问JS、CSS等静态资源，爬虫无法加载执行渲染所需的资源，也会拿到空内容。

1. 采用预渲染方案（落地页场景最优解） #

不需要改动现有业务逻辑，只需要在构建阶段生成带完整内容的静态HTML，爬虫不用执行JS就能拿到全部内容。适配Vue 2的prerender-spa-plugin即可实现：

• 首先安装依赖：npm install prerender-spa-plugin --save-dev
• 配置vue.config.js：

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, 'dist'),
          routes: ['/'], // 填写你的落地页路由，有多条路由可以加多个
          renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
            // 等待Vue实例挂载完成后再生成静态内容，避免预渲染空壳
            renderAfterDocumentEvent: 'app-mounted'
          })
        })
      )
    }
  }
}

• 在main.js的Vue实例挂载完成后触发对应事件：

new Vue({
  router,
  render: h => h(App),
  mounted() {
    document.dispatchEvent(new Event('app-mounted'))
  }
}).$mount('#app')

2. 适配PWA的爬虫抓取规则 #

修改vue-pwa的workbox配置，调整HTML资源的缓存策略，避免给爬虫返回空缓存：

// vue.config.js pwa配置补充
module.exports = {
  pwa: {
    workboxOptions: {
      runtimeCaching: [
        {
          urlPattern: /\.html$/,
          handler: 'NetworkFirst', // HTML走网络优先，避免返回旧缓存
          options: {
            cacheableResponse: {
              statuses: [200]
            }
          }
        }
      ]
    }
  }
}

同时检查robots.txt，确保没有禁止爬虫访问静态资源目录。

3. 补充静态元信息 #

在public/index.html的head标签内提前写好默认的meta description、og标签等基础SEO信息，即使爬虫JS执行异常也能拿到正确的页面描述，不会 fallback 到noscript内容。

4. 验证后提交重索引 #

修改上线后，先通过Google Search Console的「URL检查」工具的「测试实时网址」功能，确认抓取到的HTML已经包含完整页面内容，再提交重索引请求，一般3-7天搜索结果就会更新。

内容的提问来源于stack exchange，提问作者fysherman