Nuxt 3 笔记：SEO 与 Meta（元标记）

Open cssmagic opened this issue 1 year ago • 1 comments

全局 `<head>` 配置

在 nuxt.config.js 中，通过 app.head 字段可以自定义全局 <head> 内容。

如果需要使用全局的响应式数据，需要在 app.vue 中使用 useHead() 这个组合式函数。

interface MetaObject {
	title?: string
	titleTemplate?: string | ((title?: string) => string)
	base?: Base
	link?: Link[]
	meta?: Meta[]
	style?: Style[]
	script?: Script[]
	noscript?: Noscript[]
	htmlAttrs?: HtmlAttributes  // key/value 结构
	bodyAttrs?: BodyAttributes  // key/value 结构
}

`useHead()` 组合式函数

用来设置当前页面的 <head> 内的内容。

可以在组件的 setup 阶段和生命周期钩子里使用。

通过组件来配置 `<head>` 内容

看起来有点魔幻，Nuxt 定义了 <Html> <Head> <Body> <Meta> <Base> <Link> <Style> <NoScript> 等组件，并可以在组件内使用。当然他们的作用只是用来设置数据，并不会在组件内渲染出实际的元素。

感觉还是用 useHead() 组合式函数更直观一些。

技巧

`titleTemplate`

提供了更强的 title 控制能力。通常在 app.vue 设置 titleTemplate（可以是包含 %s 的字符串模板，也可以是一个函数），在页面组件中设置 title，最终 title 就是 titleTemplate 对 title 处理的结果。

注意：在 nuxt.config 中设置 app.head.titleTemplate 无效。似乎 titleTemplate 只能用于 useHead() 中。

插入 `<body>`

用 useHead() 指定的标记也可以插入 <body> 的末尾，方法是补一个 body: true 的属性。通常可以用来在页面尾部添加一个 <script> 标签。

useHead({
	script: [
		{
			src: 'https://third-party-script.com',
			body: true,
		}
	]
})

与 `definePageMeta()` 配合

页面模板可以用 definePageMeta() 设置当前路由的信息，这些信息可以在 Layout 组件的 useHead() 里用 route.meta.xxxxx 取到。

优先级

title 和 titleTemplate 等 head 字段的生效优先级从高到低排列如下：

页面级模板
Layout
app.vue
nuxt.config（titleTemplate 不生效）

类似 meta 这样的数组字段会在合并后生效，多个 <meta> 的排列顺序与上面的优先级顺序相反。

坑

在 nuxt.config 中配置 title 有两个问题：

titleTemplate 不生效。
不能使用 app config 中的数据。（无法使用 ``）

Nuxt 3 笔记：SEO 与 Meta（元标记）

全局 <head> 配置

useHead() 组合式函数

通过组件来配置 <head> 内容

技巧

titleTemplate

插入 <body>

与 definePageMeta() 配合

优先级

坑

全局 `<head>` 配置

`useHead()` 组合式函数

通过组件来配置 `<head>` 内容

`titleTemplate`

插入 `<body>`

与 `definePageMeta()` 配合