返回

Vue.js 动态更新 `<title>` 标签：提升 SEO 和用户体验

vue.js

在 Vue.js 中动态更新 <title> 标签

在 Vue.js 应用中，<title> 标签的内容至关重要，因为它不仅用于浏览器选项卡中显示当前页面的标题，还用于搜索引擎优化 (SEO)。通过将 <title> 内容绑定到 Vue 实例中的数据字段，我们可以轻松地根据应用状态动态更新标题。

实现步骤

1. 使用 <meta> 标签

在 HTML 的 <head> 部分中，添加一个 <meta> 标签，并将 name 属性设置为 "title"，content 属性留空：

<meta name="title" content="{{ title }}">

2. 定义 Vue 实例数据

在 Vue 实例中，定义一个名为 title 的数据字段，并为其分配初始值：

const vm = new Vue({
  data: {
    title: '我的 Vue 应用标题'
  }
});

3. 在页面加载时更新 <title>

在页面加载时，使用 JavaScript 将 <title> 的内容更新为 Vue 实例中 title 数据字段的值：

document.addEventListener('DOMContentLoaded', () => {
  document.title = vm.title;
});

原理解析

当 Vue 实例中的 title 数据字段值发生改变时，Vue 将自动更新 <meta> 标签中 content 的值。而浏览器会监听 <meta> 标签的变化，并在更新后自动更新 <title> 的内容。

示例代码

<meta name="title" content="{{ title }}">

const vm = new Vue({
  el: 'html',
  data: {
    title: '我的 Vue 应用标题'
  }
});

document.addEventListener('DOMContentLoaded', () => {
  document.title = vm.title;
});

常见问题解答

1. 为什么不使用 <title v-text> 指令？

<title v-text> 指令虽然也可以更新 <title>，但它存在一个问题：当页面重新加载时，<title> 会被重置为 <meta> 标签中定义的初始值，而 document.title 不会。

2. 如何在不同的页面或路由之间更新 <title>？

在页面或路由切换时，可以使用 Vue 路由钩子或 beforeRouteUpdate 钩子，在新的页面或路由加载前更新 title 数据字段的值。

3. 如何在动态更新 <title> 时优化 SEO？

为了优化 SEO，应在 <title> 中包含页面或应用程序的相关，并确保其简洁且准确地页面内容。

4. 是否可以在服务器端预渲染 <title>？

是的，可以使用 Node.js 的 VueSSR 模块在服务器端预渲染 <title>。

5. <title> 的最佳实践是什么？

  • 保持简短，不超过 70 个字符
  • 使用相关的关键字
  • 避免重复内容
  • 在不同页面或路由之间提供不同的 <title>