1. 萬能工具箱：useHead

如果說 useSeoMeta 是一支專為 SEO 設計的筆，那 useHead 就是一整個瑞士軍刀。它什麼都能做，是 Nuxt head 管理最底層、也最強大的工具。

您可以用它來設定標題、meta，更能動態新增 <script>、<link>、<style> 等任何你想得到的 <head> 標籤，甚至能改變 <body> 的屬性！

使用 useHead 範例

<script setup>
useHead({
  // 設定標題
  title: '一個進階頁面',
  // 設定 meta 標籤
  meta: [
    { name: 'robots', content: 'noindex, nofollow' } // 告訴機器人不要索引此頁
  ],
  // 新增 script 標籤
  script: [
    { innerHTML: "console.log('Hello from the head!')" }
  ],
  // 改變 body 標籤的 class
  bodyAttrs: {
    class: 'advanced-page'
  }
})
</script>

何時使用 useHead？ 當 useSeoMeta 無法滿足您的需求時（例如需要加入 script），就是 useHead 大顯身手的時機。

2. 樣板裡的幫手：Head 元件

如果您不喜歡在 <script> 裡寫一堆設定，Nuxt 也提供了另一種選擇：直接在 <template> 裡使用元件來設定 head。

Nuxt 提供了 <Title>, <Meta>, <Link>, <Style> 等多種元件，讓您可以像寫 HTML 一樣設定 head。

在樣板中使用 Head 元件

<script setup>
const pageTitle = ref('用元件設定標題');
</script>

<template>
  <div>
    <Head>
      <Title>{{ pageTitle }}</Title>
      <Meta name="description" content="這是在樣板中設定的描述。" />
    </Head>

    <h1>這裡是頁面內容...</h1>
  </div>
</template>

這純粹是寫作風格的選擇，您可以選擇自己最喜歡的方式。

3. 自動化標題格式：titleTemplate

您是否希望網站的每個頁面標題都有固定的格式，例如「頁面名稱 - 網站總稱」？titleTemplate 就是為此而生的利器。

我們通常會在 app.vue 中設定一次，讓它對整個網站生效。這非常適合您的《人類補完計劃》。

在 app.vue 中設定 titleTemplate

// 在 app.vue 中
<script setup>
useHead({
  titleTemplate: (titleChunk) => {
    // 如果頁面有設定標題 (titleChunk)，就使用 '頁面標題 - 人類補完計劃'
    // 如果沒有，就只顯示 '人類補完計劃'
    return titleChunk ? `${titleChunk} - 人類補完計劃` : '人類補完計劃';
  }
})
</script>

這樣設定後，未來您在任何一個頁面裡，只需要簡單設定該頁的標題：

頁面中設定標題

useSeoMeta({ title: 'Day 12 學習筆記' })

最終在瀏覽器頁籤上顯示的標題就會自動變成：Day 12 學習筆記 - 人類補完計劃

今日總結

今天我們打開了 Nuxt head 管理的完整工具箱！

useHead：無所不能的萬用工具，適合各種複雜情境。

Head 元件：樣板愛好者的選擇，寫法直觀。

titleTemplate：自動化標題格式的產生器，提升品牌一致性。

到此為止，關於 SEO 和 Meta 的設定，您已經具備了從入門到進階的完整知識！