Nuxt 菜鸟入门学习笔记七：SEO 和 Meta 设置
文章目录
- SEO 和 Meta
-
- 默认值
- useHead
- useSeoMeta 和 useServerSeoMeta
- Components
- Meta 对象数据类型格式
- 特性
-
- 响应式 Reactivity
- 标题模板 Title Template
- Body Tags
- 示例 Examples
-
- definePageMeta
- 动态设置标题
- 动态添加外部 CSS
Nuxt 官网地址： https://nuxt.com/
SEO 和 Meta
Nuxt 可以通过 3 种方式提高 Nuxt 应用程序的搜索引擎优化：
- 强大的头部配置
nuxt.config - 组合式函数
useHead - 组件
Head、Title、Meta等
默认值
在开箱即用的情况下，Nuxt 提供了合理的默认值，如：
charset: utf-8viewport: width=device-width, initial-scale=1
如果需要，可以覆盖这些默认值，还可以设置 title 和 meta，如下代码示例：
// nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
charset: "utf-8",
viewport: "width=device-width, initial-scale=1",
title: "Nuxt3学习实践",
meta: [
{
name: "description",
content: "菜鸟小白nuxt3从入门到精通，边理论边实践",
},
],
},
},
});
上面的代码运行结果可以通过在浏览器中查看网页源代码。
在nuxt.config.ts中提供app.head属性允许自定义整个应用程序的head。
缺点：这种方式无法使用响应式数据。
如果需要，推荐在 app.vue 或者在页面中使用useHead组合式函数。
useHead
useHead组合式函数允许我们通过Unhead以编程和响应式的方式管理页面的head标签。
与所有组合式函数一样，它只能用在组件的setup函数和生命周期钩子中。
// app.vue
我们建议您查看useHead和useHeadSafe组件。
useSeoMeta 和 useServerSeoMeta
通过useSeoMeta和useServerSeoMeta组合式函数，可以将网站的 SEO 元标签定义为一个完全支持 TypeScript 的扁平对象。
这可以帮助您避免错别字和常见错误，例如使用name而不是property。
// pages/about.vue
了解更多关于useSeoMeta和useServerSeoMeta可组合项的信息。
Components
Nuxt 提供了@ login page
Meta 对象数据类型格式
以下是用于useHead、app.head和组件的非响应式类型。
interface MetaObject {
title?: string;
titleTemplate?: string | ((title?: string) => string);
templateParams?: Record<string, string | Record<string, string>>;
base?: Base;
link?: Link[];
meta?: Meta[];
style?: Style[];
script?: Script[];
noscript?: Noscript[];
htmlAttrs?: HtmlAttributes;
bodyAttrs?: BodyAttributes;
}
特性
响应式 Reactivity
所有属性都支持响应式，包括 computed、getters 和 reactive。
建议
computed 建议使用getters(() => value)而不是computed(() => value)。
-
useHead 响应式应用
-
useSeoMeta 响应式应用
-
标签组件响应式应用
标题模板 Title Template
可以使用titleTemplate选项为自定义网站标题提供一个动态模板，例如，在每个页面的标题中添加网站名称。
titleTemplate可以是一个字符串（其中%s被title属性的值替换），也可以是一个函数。
如果使用函数（完全控制），则不能在nuxt.config中设置，建议在app.vue文件中设置，它将适用于网站的所有页面：
// app.vue
现在，每个页面标题的后面都增加了 - www.51blog.xyz。
Body Tags
可以在适用的标记上增加 tagPosition 选项，将它们追加到页面的不同位置。
tagPosition 可选值：
- head：将标记添加到页面的
标签内； - bodyOpen：将标记添加到页面的
标签的开始； - bodyClose：将标记添加到页面的
标签的末尾；
示例 Examples
definePageMeta
在pages/目录中，您可以使用definePageMeta和useHead来设置基于当前路由的元数据。
例如，可以首先设置当前页面的标题（这是在构建时通过宏提取的，因此无法动态设置）：
然后在布局文件中，您可以使用之前设置的路由元数据（Route Meta）：
动态设置标题
在下面的示例中，titleTemplate既可以设置为带有%s占位符的字符串，也可以设置为函数，这样就可以为 Nuxt 应用程序的每个路由动态设置页面标题，具有更大的灵活性：
nuxt.config也是设置页面标题的另一种方法。但是，nuxt.config不允许页面标题是动态的。因此，建议在app.vue文件中使用titleTemplate添加动态标题，然后将其应用于 Nuxt 应用程序的所有路由。
动态添加外部 CSS
-
使用
useHead组合式函数的 link 属性： -
使用组件来启用谷歌字体