SEO 基本設置就是 head 標籤裡的 meta 和 title，在 Nuxt3 中有兩種方式可以設定頁面的這些資訊

nuxt.config.ts

在環境配置中設定會套用到所有頁面，以下是 nuxt3 中的預設值：

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

以下是官方文件範例配置：

app: {
  head: {
    meta: [
      // <meta name="viewport" content="width=device-width, initial-scale=1">
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    noscript: [
      // <noscript>Javascript is required</noscript>
      { children: 'Javascript is required' }
    ]
  }
}

useHead

useHead 方法可以在個別頁面的 script 標籤裡面設置，而且也可以做動態配置，以下是官方範例：

<script setup>
  const description = ref('My amazing Nuxt app')

  useHead({
    meta: [
      {
        name: 'description',
        content: description
      }
    ]
    // 動態配置
    titleTemplate: '%s - Site Title',
    titleTemplate: (productCategory) => {
      return productCategory
        ? `${productCategory} - Site Title`
        : 'Site Title'
    }
  })
</script>

Head 的其他設定

除了可以設定 head 資訊外也可以撰寫 style 或引入外部的 css, js 檔案（就像一般 html 的 head 一樣 ），但是不太建議使用就是了。

style: [
  { children: ':root { color: red }', type: 'text/css' }
],
link: [
  { 
    rel: 'preconnect', 
    href: 'https://fonts.googleapis.com'
  },
  { 
    rel: 'stylesheet', 
    href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', 
    crossorigin: '' 
  }
],
script: [
  {
    src: 'https://third-party-script.com',
    // body 設置為 true 時會將 script 放在 body 最下方，最後載入
    body: true 
  }
]