Vue.js2+Vue Router应用Google页面索引问题排查求助

1. 检查Vue Router路由模式 #

• 默认的hash模式（URL带#）虽能被Google处理，但history模式更利于SEO和爬虫抓取。确认你的路由配置是否使用history模式：

  const router = new VueRouter({
    mode: 'history',
    routes: [...]
  })
  

• 若使用history模式，必须配置服务器fallback规则（避免直接访问子页面返回404）：
  • Nginx：添加try_files $uri $uri/ /index.html;
  • Apache：配置RewriteRule ^ index.html [L]

2. 确认导航链接的可爬取性 #

• 确保首页的导航是静态可见的<a>标签（Vue的<router-link>会渲染为a标签，需检查生成的href属性是否为正确的history路径，如/experiences而非/#/experiences）。
• 避免通过JS动态加载导航（如点击后才显示），爬虫会优先抓取页面初始加载时可见的链接。

3. 完善sitemap.xml配置 #

• 目前sitemap仅包含首页，需将另外4个页面的URL全部添加进去，示例格式：

  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
      <loc>https://edouard-herrengt.com/</loc>
    </url>
    <url>
      <loc>https://edouard-herrengt.com/experiences</loc>
    </url>
    <!-- 其他页面依次添加 -->
  </urlset>
  

• 确保sitemap放置在网站根目录，提交到Google Search Console。

4. 检查页面内容的可渲染性 #

• 等Search Console激活后，使用「URL检查工具」测试子页面：查看Google爬虫抓取到的渲染内容是否完整，若为空或缺失，说明客户端渲染的内容未被爬虫正确解析。
• 可临时禁用JS访问子页面，若页面内容为空，说明依赖客户端渲染，可考虑：
  • 使用预渲染工具（如prerender-spa-plugin）将5个页面预渲染为静态HTML，适合页面数量少的场景；
  • 优化页面加载速度，压缩打包后的JS体积，避免爬虫因等待超时放弃渲染。

5. 验证页面元信息与爬虫权限 #

• 每个页面需设置独立的<title>和<meta name="description">，可在路由配置中定义meta字段，再在组件内动态渲染：

  routes: [
    {
      path: '/experiences',
      component: Experiences,
      meta: { title: '我的经历', description: '个人工作经历介绍' }
    }
  ]
  

• 检查根目录的robots.txt，确保没有禁止爬虫抓取子页面（如Disallow: /experiences），建议设置为Allow: /允许所有页面被抓取。

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