SEO 和元資料

利用強大的頭部配置、組合式函式和元件，改進您的 Nuxt 應用程式的 SEO。

Nuxt 頭部標籤管理由Unhead提供。它提供了合理的預設值、幾個強大的組合式函式以及眾多配置選項來管理您的應用程式的頭部和 SEO 元標籤。

Nuxt 配置

在您的 nuxt.config.ts 檔案中提供 app.head 屬性，可以靜態自定義整個應用程式的頭部。

此方法不允許您提供響應式資料。我們建議在 app.vue 中使用 useHead()。

在此處設定不會更改的標籤是一個好習慣，例如您的網站標題預設值、語言和 favicon。

nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      title: 'Nuxt', // default fallback title
      htmlAttrs: {
        lang: 'en',
      },
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      ],
    },
  },
})

您還可以提供 型別 中列出的任何鍵。

預設標籤

Nuxt 預設提供了一些標籤，以確保您的網站開箱即用。

  • viewport: width=device-width, initial-scale=1
  • charset: utf-8

雖然大多數網站不需要覆蓋這些預設值，但您可以使用帶鍵的快捷方式進行更新。

nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      // update Nuxt defaults
      charset: 'utf-16',
      viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
    },
  },
})

useHead

useHead 組合式函式支援響應式輸入，允許您以程式設計方式管理頭部標籤。

app/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>

我們建議您檢視 useHead 和 useHeadSafe 組合式函式。

useSeoMeta

useSeoMeta 組合式函式允許您將網站的 SEO 元標籤定義為一個具有完整型別安全的物件。

這有助於您避免拼寫錯誤和常見錯誤，例如使用 name 而不是 property。

app/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>
在 文件 > 4 X > API > 組合式函式 > Use Seo Meta 中閱讀更多內容。

元件

雖然在所有情況下都建議使用 useHead，但您可能個人更喜歡使用元件在模板中定義頭部標籤。

Nuxt 為此提供了以下元件：<Title>、<Base>、<NoScript>、<Style>、<Meta>、<Link>、<Body>、<Html> 和 <Head>。請注意這些元件的首字母大寫，以確保我們不使用無效的原生 HTML 標籤。

<Head> 和 <Body> 可以接受巢狀元標籤（出於美觀原因），但這不會影響巢狀元標籤在最終 HTML 中渲染的*位置*。

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

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

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

建議將您的元件包裝在 <Head> 或 <Html> 元件中，因為這樣標籤的去重會更直觀。

型別

以下是用於 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
}

請參閱@unhead/vue獲取更詳細的型別。

功能

響應性

透過提供計算值、getter 或響應式物件，所有屬性都支援響應性。

<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>

現在，如果您在網站的另一個頁面上使用 useHead 將標題設定為 My Page，則瀏覽器選項卡中會顯示“My Page - Site Title”。您也可以傳遞 null，預設顯示“Site Title”。

模板引數

您可以使用 templateParams 在您的 titleTemplate 中提供除預設 %s 之外的附加佔位符。這允許更動態的標題生成。

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

正文標籤

您可以在適用的標籤上使用 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

在您的 app/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>
在 文件 > 4 X > 示例 > 特性 > 元標籤 中閱讀和編輯即時示例。
在 文件 > 4 X > 指南 > 目錄結構 > 應用程式 > 頁面 > #頁面元資料 中閱讀更多內容。

動態標題

在下面的示例中，titleTemplate 可以設定為帶有 %s 佔位符的字串，也可以設定為 function，這為您的 Nuxt 應用程式的每個路由動態設定頁面標題提供了更大的靈活性。

app/app.vue
<script setup lang="ts">
useHead({
  // as a string,
  // where `%s` is replaced with the title
  titleTemplate: '%s - Site Title',
})
</script>
app/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>