本章將教你如何使用 Nuxt 4 的 Composable 來管理 SEO 相關的 Meta Tags，包含社群分享卡片的設定。
1 核心概念
在傳統 HTML，你得手寫 <title> 和 <meta name="description">。在 Nuxt，我們使用 Composable 來管理。
為什麼要用 useSeoMeta？
它比舊版的 useHead 更好用，因為它提供了超過 100 種 Meta Tag 的型別提示 (Autocomplete)。
你不需要背誦 og:title 或是 twitter:card 的寫法，直接打 ogTitle，Nuxt 會幫你產生正確的 HTML。
運作邏輯
- •SSR 支援：當 Google 爬蟲來訪時，Nuxt 伺服器會先把這些 Meta Tag 填好在 HTML 裡回傳。
- •動態更新：當使用者切換頁面，瀏覽器的 Tab 標題會自動跟著變。
2 給 Claude Code 的中文指令 可複製
我們要建立一個測試頁面，並設定完整的 SEO 資訊（包含社群分享卡片）。
請幫我建立一個具備完整 SEO 設定的頁面：
- 建立
app/pages/seo-test.vue。 - 在
<script setup>中定義一個 ref 變數pageTitle，預設值為'Nuxt 4 SEO 教學'。 - 使用
useSeoMeta來設定 Meta Tags：title: 使用 pageTitle 變數。ogTitle: 同上 (Social Media 標題)。description:'這是使用 Nuxt useSeoMeta 自動生成的描述。'ogDescription: 同上。ogImage:'https://nuxt.com/assets/design-kit/icon-green.png'(借用 Nuxt 官方 Logo 當縮圖)。twitterCard:'summary_large_image'。
- 在 template 中：
- 顯示
<h1>{{ pageTitle }}</h1>。 - 放置一個輸入框
<input v-model="pageTitle">，讓我能動態修改標題，觀察瀏覽器 Tab 是否會跟著變。
- 顯示
3 驗收重點
請檢查 Claude 完成後的結果：
瀏覽器 Tab 標題檢查
- 打開
http://localhost:3000/seo-test。 - 你的瀏覽器分頁標籤應該顯示「Nuxt 4 SEO 教學」。
- 在輸入框修改文字，分頁標籤應該要即時跟著變。
原始碼檢查 (Source Code)
- 右鍵 → 檢視網頁原始碼 (不要用開發者工具的 Elements)。
- 搜尋
og:image。 - 你應該要看到
<meta property="og:image" content="...">出現在 HTML 裡。
意義：如果這裡有東西，代表 Facebook/Line 的爬蟲抓得到你的圖片。
社群預覽模擬
雖然在本機 localhost 無法讓 Facebook 真的抓到，但你可以用 Chrome 套件 (如 "Open Graph Preview") 或是單純檢查 <head> 標籤確認 og: 系列都有生成。
💡 架構師筆記 (Title Template)
在真實專案中，我們希望每一頁的標題都有統一的後綴，例如：「關於我們 - 我的網站」、「產品列表 - 我的網站」。
你可以在 app.vue 使用 useHead 設定全域模板：
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} - My Site` : 'My Site'
}
})
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} - My Site` : 'My Site'
}
})
這樣你在各頁面只要寫
title: '關於我們'，Nuxt 就會自動幫你組合成 '關於我們 - My Site'。