Vue.js SPA动态设置页面标题源码异常及SEO相关问题咨询

现象原因 #

你当前通过router.beforeEach修改document.title的逻辑是纯客户端侧执行的：浏览器拿到服务器返回的原始HTML后，下载、解析、执行JS，路由初始化完成后才会运行守卫里的标题修改逻辑，所以标签页能正常显示预期标题。
而CTRL+U查看的页面源码是服务器首次响应返回的未经任何JS执行的原始静态HTML文件，这份文件是项目打包阶段就生成好的，title字段是htmlWebpackPlugin注入的固定默认值，自然不会随URL参数动态变化，这不是代码bug，是纯客户端渲染SPA的默认运行特性。

问题1：单页应用（SPA）是否可以在首次返回HTML页面时就携带预期的自定义标题？ #

纯客户端渲染（CSR）模式下的SPA做不到。
传统CSR模式的项目打包后只会生成一份固定的index.html入口文件，服务器收到任意路由的请求，都会直接返回这同一份静态文件，文件里的title在打包阶段就已经写死，不可能根据动态的URL路径参数（比如你配置的:location）在响应HTML时就替换成对应自定义值，所有动态修改标题的逻辑都必须等客户端JS加载执行后才会生效。

如果要实现首次返回HTML就携带匹配的自定义标题，只能调整技术方案：

• 采用服务端渲染（SSR）：请求到达服务端时，先根据URL参数匹配到对应要展示的标题，将标题注入HTML模板后再返回给客户端，此时查看源码就能看到和访问路径匹配的正确标题。
• 采用静态站点生成（SSG）：如果:location对应的路由路径是可枚举的有限集合，可以在打包阶段为每个路径单独生成一份静态HTML文件，每份文件提前写入匹配的标题，访问对应路径时服务端直接返回预生成好的文件即可。
• 接入层动态替换：在Nginx、CDN边缘节点配置规则，根据请求路径动态替换返回HTML中的title字段，不需要调整前端渲染模式也能实现响应时标题匹配，适合改造已有CSR项目。

问题2：纯客户端修改标题是否会对SEO造成关键性影响？ #

不会造成致命级别的关键影响，但存在一定局限：

• 目前主流搜索引擎（Google、百度、必应）的爬虫已经支持渲染执行页面JS，可以抓取到JS运行后动态修改的title内容，不会出现完全识别不到标题、页面无法收录的极端问题。
• 存在的负面影响主要有两点：
  • 抓取稳定性不足：如果页面JS体积过大加载超时、执行报错，或者爬虫渲染资源分配不足，就可能无法获取到动态修改后的标题，最终用默认标题收录，影响页面关键词匹配和排名。
  • 非搜索场景的元信息抓取失效：多数社交平台、即时通讯软件的分享爬虫不会执行页面JS，只会提取首次返回HTML中的title、description等元信息，这种场景下分享卡片会显示默认标题，无法展示你动态设置的内容。

如果站点是对搜索流量依赖度高的ToC公开站点，建议优先选择SSR/SSG方案保证元信息首屏返回；如果是内部系统、对搜索排名要求不高的站点，当前纯客户端修改标题的方案完全可以满足使用需求。

内容的提问来源于stack exchange，提问作者Александр Евсиков