Nuxt - 每个页面单独设置 SEO 相关标签及网页标题、图标等（页面配置 head）

前言

您一定知道，要想配置一些 SEO 相关的标签，就要在项目根目录下 nuxt.config.js → head 字段进行。

请注意，nuxt.config.js 文件中所配置的是全局的，

并非 “独立” 应用到每个页面，也就是说所有页面都用这个全局配置。

---

但要是想要更加 “全面 SEO” ，您必须为每个页面 单独设置。

解决方案

Nuxt 提供了便捷的钩子，可以让我们在页面中轻松定义。

例如 index.vue 页面，为其配置的代码如下：

<template>
  <div>
	...
  </div>
</template>

<script>
export default {

  data() {
    return {}
  },

  // 与 data 钩子函数同级
  head() {
  	// 直接返回所有SEO相关及页面配置
    return {
      title: "我是标题",
      meta: [
        { charset: "utf-8" },
        { name: "viewport", content: "width=device-width, initial-scale=1" },
        { hid: "description", name: "description", content: "我是首页内容，这是描述" },
        { name: "renderer", content: "webkit" },
        // 更多标签...
      ],
      // 该页图标
      // link: [{ rel: "icon", type: "image/x-icon", href: "/favicon1.ico" }],
    }
  },
  
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

每个页面都具有 head() 这个钩子函数。