今天，我們要學習如何優化網站的 SEO (搜尋引擎優化)，讓使用者和 Google 更容易找到並理解我們的網站。這主要透過設定 HTML 的 <head> 標籤來完成。

1. 網站的身分證：nuxt.config.ts

你可以把 nuxt.config.ts 裡的 app.head 設定看作是網站的身分證。這裡的資訊是全站通用的預設值，在每個頁面都有效。

我們通常會在這裡放一些不太會變動的資訊，例如：

網站的預設標題
網站的主要語言
網站的 icon (favicon.ico)

nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      title: '我的酷網站', // 預設標題
      htmlAttrs: {
        lang: 'zh-TW' // <html> 標籤的語系屬性
      },
      link: [
        // 設定網站的 icon
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ]
    }
  }
})

2. 頁面的專屬名片：useSeoMeta

光有身分證還不夠，每個頁面（房間）也應該有自己的名片，更詳細地告訴大家「我是誰」、「我在做什麼」。

Nuxt 提供了一個超級好用的工具 useSeoMeta 來幫我們製作這張名片。它專為 SEO 設計，語法簡單且不易出錯。

假設我們在一個「關於我們」的頁面：

pages/about.vue

<script setup>
useSeoMeta({
  // 頁面標題，會覆蓋 nuxt.config.ts 的設定
  title: '關於我們 - 我的酷網站',

  // 頁面描述
  description: '這裡是關於我們公司的介紹，我們致力於打造最棒的產品。',

  // 給社群媒體看的資訊 (Open Graph)
  ogTitle: '關於我們 - 我的酷網站',
  ogDescription: '這裡是關於我們公司的介紹，我們致力於打造最棒的產品。',
  ogImage: 'https://example.com/about-us-banner.png', // 分享連結時顯示的圖片

  // 給 Twitter 看的資訊
  twitterCard: 'summary_large_image',
})
</script>

<template>
  <h1>關於我們</h1>
  <p>這裡是頁面內容...</p>
</template>

使用 useSeoMeta 設定的資訊，會優先於 nuxt.config.ts 中的全域設定。

今日總結

今天我們學會了 SEO 設定的黃金組合：

在 nuxt.config.ts 設定全站的「身分證」：提供一個穩固的基礎。

在每個頁面裡，用 useSeoMeta 發送該頁專屬的「名片」：提供精確、豐富的頁面資訊。

掌握這兩招，你的網站 SEO 基礎就已經非常穩固了！

預告：今天學的方法專門針對 SEO，但如果我們想做更多事，比如動態加入 <script> 或 <style> 標籤到 <head> 裡呢？明天，我們將來認識更底層、更萬能的工具 useHead。