Nuxt 3 笔记：SEO 与 Meta（元标记） #14
Description
全局 <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.vuenuxt.config（titleTemplate不生效）
类似 meta 这样的数组字段会在合并后生效，多个 <meta> 的排列顺序与上面的优先级顺序相反。
坑
在 nuxt.config 中配置 title 有两个问题：
titleTemplate不生效。- 不能使用 app config 中的数据。（无法使用 ``）
相关链接：