Vue+Router(history模式)动态页面内容的谷歌索引方案咨询

1. 动态管理页面元信息（标题、Meta标签） #

使用vue-meta或@vueuse/head这类工具库，在路由配置或页面组件中直接定义标题、描述等元信息，页面切换时会自动更新DOM的<head>区域。谷歌爬虫现在能正常执行JS，会抓取到这些动态更新后的内容。

示例（基于vue-meta）：

• 项目中注册插件：

import VueMeta from 'vue-meta'
Vue.use(VueMeta)

• 在路由配置里为每个页面指定元信息：

const routes = [
  {
    path: '/article/:id',
    name: 'ArticleDetail',
    component: () => import('../views/ArticleDetail.vue'),
    meta: {
      title: '文章详情', // 可在组件内动态覆盖
      description: '文章详情页内容'
    }
  }
]

• 在页面组件内动态更新标题：

export default {
  data() {
    return {
      articleTitle: ''
    }
  },
  async mounted() {
    const res = await fetch(`/api/article/${this.$route.params.id}`)
    const data = await res.json()
    this.articleTitle = data.title
    this.$meta().setTitle(`${this.articleTitle} - 我的网站`)
  }
}

2. 确保谷歌能正常抓取JS渲染内容 #

• 检查robots.txt，不要禁止谷歌爬虫访问SPA依赖的JS、CSS资源
• 在谷歌搜索控制台提交包含所有动态路由的站点地图（sitemap.xml），明确告知谷歌需要抓取的页面URL

3. 预渲染静态页面（替代SSR的轻量方案） #

如果站点需要索引的页面数量不多，用prerender-spa-plugin在构建阶段预渲染指定路由，生成对应的静态HTML文件。谷歌爬虫可直接读取完整的HTML内容，无需执行JS。

配置示例（vue.config.js）：

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

module.exports = {
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: ['/', '/about', '/article/1', '/article/2'], // 需预渲染的路由列表
      })
    ]
  }
}

4. 动态注入结构化数据 #

在页面组件中生成JSON-LD格式的结构化数据，帮助谷歌更清晰地理解页面内容（比如文章、产品信息）：

mounted() {
  const schemaScript = document.createElement('script')
  schemaScript.type = 'application/ld+json'
  schemaScript.textContent = JSON.stringify({
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": this.articleTitle,
    "description": this.articleSummary,
    "author": {"@type": "Person", "name": "作者名称"}
  })
  document.head.appendChild(schemaScript)
}

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