Vue应用中如何正确配置谷歌搜索显示的标题与描述内容

正确配置谷歌搜索展示标题、描述的方案 #

• 谷歌生成搜索结果时会优先读取页面<title>标签和<meta name="description">标签的内容，你配置的og标签仅用于社交平台分享，不会影响搜索结果展示。
• 你当前将标签写死在/public/index.html中的方式不适用于多语言SPA场景：首先你站的语言是JS运行时检测后加载字典替换内容，静态HTML里的固定内容无法匹配不同语言版本；其次如果你的i18n字典是异步加载的，爬虫可能在字典加载完成前就完成了页面抓取，会直接拿到初始静态内容甚至未匹配到翻译的i18n key。
• 推荐优化方案：
  1. 使用Vue专属的meta管理工具（Vue2用vue-meta，Vue3用@vueuse/head），在页面组件加载完成、i18n字典加载完成后，动态替换title和description标签的内容。
  2. 在head中添加hreflang标签，标注当前URL对应多语言内容，示例：

  <link rel="alternate" hreflang="x-default" href="你的站点URL">
  <link rel="alternate" hreflang="en" href="你的站点URL">
  <link rel="alternate" hreflang="zh" href="你的站点URL">
  

  3. 条件允许的话改用SSR/SSG方案，直接在服务端/构建时生成对应语言的完整标签内容，避免客户端运行时替换的不稳定性。

旧索引更新相关问题 #

需要主动发起更新请求。你可以在谷歌搜索控制台中提交对应URL的重新抓取申请，单页面可以用URL检查工具单独提交，全站更新可以提交最新的sitemap触发批量重新抓取，正常提交后数天内索引就会更新。

爬虫无法获取翻译内容的问题判断 #

你遇到的展示异常大概率就是这个原因导致的：

• 谷歌爬虫发起请求时的Accept-Language请求头默认是英文，你按浏览器语言检测返回内容的逻辑，会给爬虫返回英文版本的内容，导致其他语言的用户搜索时拿到不符合预期的结果。
• 如果你的i18n字典是异步加载的，爬虫执行JS时可能没等字典加载完成就完成了内容抓取，这时候会直接输出未匹配到翻译的key，和你当前看到的异常展示情况一致。

内容的提问来源于stack exchange，提问作者Javier Gonzalez Moncayo