使用 Vue 和 UI Pro 的仪表板模板

SEO 和元数据

使用强大的头部配置、组合式函数和组件,提升您的 Nuxt 应用的 SEO。

默认值

Nuxt 提供了开箱即用的合理默认值,您可以在需要时覆盖它们。

nuxt.config.ts
export default 
defineNuxtConfig
({
app
: {
head
: {
charset
: 'utf-8',
viewport
: 'width=device-width, initial-scale=1',
} } })

在您的 nuxt.config.ts 中提供一个 app.head 属性,可以自定义整个应用程序的头部。

此方法不允许您提供响应式数据。我们建议在 app.vue 中使用 useHead()

提供了一些快捷方式来简化配置:charsetviewport。您也可以在 类型 中提供下面列出的任何键。

useHead

Unhead 提供支持的 useHead 组合式函数允许您以编程方式和响应式地管理头部标签。

与所有组合式函数一样,它只能与组件的 setup 和生命周期钩子一起使用。

app.vue
<script setup lang="ts">
useHead
({
title
: 'My App',
meta
: [
{
name
: 'description',
content
: 'My amazing site.' }
],
bodyAttrs
: {
class
: 'test'
},
script
: [ {
innerHTML
: 'console.log(\'Hello world\')' } ]
}) </script>

我们建议您查看 useHeaduseHeadSafe 组合式函数。

useSeoMeta

使用 useSeoMeta 组合式函数,您可以将网站的 SEO 元标签定义为一个扁平对象,并提供完整的 TypeScript 支持。

这有助于您避免拼写错误和常见错误,例如使用 name 而不是 property

app.vue
<script setup lang="ts">
useSeoMeta
({
title
: 'My Amazing Site',
ogTitle
: 'My Amazing Site',
description
: 'This is my amazing site, let me tell you all about it.',
ogDescription
: 'This is my amazing site, let me tell you all about it.',
ogImage
: 'https://example.com/image.png',
twitterCard
: 'summary_large_image',
}) </script>
文档 > API > 组合式函数 > 使用 Seo 元标签 中了解更多信息。

组件

Nuxt 提供了 <Title><Base><NoScript><Style><Meta><Link><Body><Html><Head> 组件,以便您可以在组件模板中直接与元数据进行交互。

由于这些组件名称与原生 HTML 元素匹配,因此它们必须在模板中大写。

<Head><Body> 可以接受嵌套的元标签(出于美观原因),但这不会影响嵌套元标签在最终 HTML 中的渲染位置。

app.vue
<script setup lang="ts">
const title = ref('Hello World')
</script>

<template>
  <div>
    <Head>
      <Title>{{ title }}</Title>
      <Meta name="description" :content="title" />
      <Style type="text/css" children="body { background-color: green; }" ></Style>
    </Head>

    <h1>{{ title }}</h1>
  </div>
</template>

类型

以下是用于 useHeadapp.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;
}

有关更详细的类型,请参见 @unhead/schema

功能

响应式

通过提供计算值、getter 或响应式对象,所有属性都支持响应式。

建议使用 getter (() => value) 而不是计算属性 (computed(() => value))。

<script setup lang="ts">
const 
description
=
ref
('My amazing site.')
useHead
({
meta
: [
{
name
: 'description',
content
:
description
}
], }) </script>

标题模板

您可以使用 titleTemplate 选项提供一个动态模板来自定义网站的标题。例如,您可以将网站名称添加到每个页面的标题中。

titleTemplate 可以是字符串(其中 %s 将被标题替换)或函数。

如果您想使用函数(以获得完全控制),则不能在您的 nuxt.config 中设置它。建议改为在您的 app.vue 文件中设置它,它将应用于您网站上的所有页面。

<script setup lang="ts">
useHead
({
titleTemplate
: (
titleChunk
) => {
return
titleChunk
? `${
titleChunk
} - Site Title` : 'Site Title';
} }) </script>

现在,如果您将标题设置为 My Page,并使用 useHead 在您网站的另一个页面上,则标题将在浏览器选项卡中显示为“My Page - Site Title”。您也可以传递 null 以默认设置为“Site Title”。

正文标签

您可以在适用的标签上使用 tagPosition: 'bodyClose' 选项,将它们附加到 <body> 标签的末尾。

例如

<script setup lang="ts">
useHead
({
script
: [
{
src
: 'https://third-party-script.com',
// valid options are: 'head' | 'bodyClose' | 'bodyOpen'
tagPosition
: 'bodyClose'
} ] }) </script>

示例

使用 definePageMeta

在您的 pages/ 目录 中,您可以使用 definePageMeta 以及 useHead 来根据当前路由设置元数据。

例如,您可以先设置当前页面的标题(这是在构建时通过宏提取的,因此无法动态设置)

pages/some-page.vue
<script setup lang="ts">
definePageMeta
({
title
: 'Some Page'
}) </script>

然后在您的布局文件中,您可以使用之前设置的路由元数据

layouts/default.vue
<script setup lang="ts">
const 
route
=
useRoute
()
useHead
({
meta
: [{
property
: 'og:title',
content
: `App Name - ${
route
.
meta
.
title
}` }]
}) </script>
Docs > Examples > Features > Meta Tags 中阅读和编辑实时示例。
Docs > Guide > Directory Structure > Pages > #page 元数据 中了解更多信息。

动态标题

在下面的示例中,titleTemplate 设置为带有 %s 占位符的字符串,或者设置为 function,这允许您更灵活地为 Nuxt 应用程序的每个路由动态设置页面标题

app.vue
<script setup lang="ts">
useHead
({
// as a string, // where `%s` is replaced with the title
titleTemplate
: '%s - Site Title',
}) </script>
app.vue
<script setup lang="ts">
useHead
({
// or as a function
titleTemplate
: (
productCategory
) => {
return productCategory ? `${
productCategory
} - Site Title`
: 'Site Title' } }) </script>

nuxt.config 也可以用作设置页面标题的另一种方法。但是,nuxt.config 不允许页面标题动态变化。因此,建议在 app.vue 文件中使用 titleTemplate 添加动态标题,然后将其应用于 Nuxt 应用程序的所有路由。

外部 CSS

下面的示例展示了如何使用 useHead 可组合的 link 属性或使用 <Link> 组件启用 Google Fonts

<script setup lang="ts">
useHead
({
link
: [
{
rel
: 'preconnect',
href
: 'https://fonts.googleapis.com'
}, {
rel
: 'stylesheet',
href
: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
crossorigin
: ''
} ] }) </script>