SEO 設定

Nuxt 天生對 SEO 友善。透過 SSR，搜尋引擎可以完美讀取你的內容。而 useSeoMeta 則讓管理 Meta Tags 變得前所未有的簡單。

基礎: useSeoMeta

這是 Nuxt 推薦的設定方式。它提供了型別安全 (Type-safe) 的介面，讓你不需要記憶繁瑣的 HTML meta 標籤名稱。 Nuxt 會自動將這些 JavaScript 物件轉換為標準的 HTML <meta> 標籤。

app.vue

<script setup>
useSeoMeta({
  title: '我的 Nuxt 應用',
  ogTitle: '我的 Nuxt 應用 - 社群版標題',
  description: '這是一個超級棒的網站，快來看看！',
  ogDescription: '這是一個超級棒的網站，快來看看！',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})
</script>

Interactive Playground

Title

Description

OG Image URL

// Generated Code

useSeoMeta({
  title: 'My Awesome Nuxt App',
  ogTitle: 'My Awesome Nuxt App',
  description: 'Build modern web applications with Nuxt 4. Fast, intuitive, and powerful.',
  ogDescription: 'Build modern web applications with Nuxt 4. Fast, intuitive, and powerful.',
  ogImage: 'https://nuxt.com/assets/design-kit/icon-green.png',
  twitterCard: 'summary_large_image'
})

Social Card Preview

EXAMPLE.COM

My Awesome Nuxt App

Build modern web applications with Nuxt 4. Fast, intuitive, and powerful.

My Awesome Nuxt App

example.com

👆 試著修改左側內容，觀察右側 Open Graph 預覽卡的變化

Open Graph (OG) 詳解

Open Graph (OG) 是一種網路協定，決定了當你的網頁被分享到 Facebook、LINE、Discord 或 Slack 時，會顯示什麼樣的「卡片」。如果沒有設定 OG，你的連結在社群軟體中可能只會顯示一串冷冰冰的網址。

og:image (關鍵!)

這是卡片的靈魂。建議尺寸 1200x630 px。一張好的圖片能顯著提升點擊率 (CTR)。

og:title

通常與網頁 Title 相同，但可以更具吸引力 (Clickbait)。這是使用者第一眼看到的文字。

og:description

1-2 句話的簡短摘要。補充標題沒說完的故事。

og:image (1200x630)

1.91:1

社群分享預覽卡片

動態 SEO

在實際專案中，SEO 資訊通常來自 API (例如文章標題、產品名稱)。不管是 useSeoMeta 還是 useHead 都支援響應式資料。

pages/articles/[id].vue

<script setup>
// 1. 從 API 取得資料
const { data: article } = await useFetch('/api/article/1')

// 2. 傳入 Getter Function (推薦)
useSeoMeta({
  title: () => article.value?.title,
  description: () => article.value?.summary,
  ogImage: () => article.value?.coverImage
})
</script>

為什麼要用箭頭函式 (Arrow Function)？

() => value

因為 useFetch 是非同步的。當頁面剛建立時，article.value 可能是 null。透過函式傳遞，Nuxt 可以在資料載入完成後，自動重新計算 (Re-evaluate) 並更新 Meta Tags。

進階: useHead

useSeoMeta vs useHead

useSeoMeta
專注於 內容 (Content)。包含 Title, Description, Open Graph, Twitter Cards。 ✅ 90% 的情況下你只需要這個。
useHead
專注於 結構與資源 (Structure & Assets)。包含載入外部 Script (GA, GTM)、CSS 樣式、JSON-LD 結構化資料、Body 屬性 (class, attrs)。

常見應用情境

1. 載入外部腳本 (Script) 與樣式 (Link)

例如：載入 Google Analytics、字型檔、或 Canonical URL。

useHead({
  // 設定 HTML 屬性 (如語言)
  htmlAttrs: { lang: 'zh-TW' },
  // 載入外部 Script
  script: [
    {
      src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXX',
      async: true, // 非同步載入，不阻塞渲染
      tagPosition: 'bodyClose' // 控制標籤位置 (head | bodyOpen | bodyClose)
    }
  ],
  // 載入 CSS 或設定 Canonical
  link: [
    { rel: 'canonical', href: 'https://example.com/current-page' },
    { rel: 'icon', type: 'image/png', href: '/favicon.png' }
  ]
})

2. 結構化資料 (JSON-LD)

這對 Google 搜尋結果的 Rich Snippets 非常重要。

useHead({
  script: [
    {
      type: 'application/ld+json',
      children: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'Article',
        headline: article.value?.title,
        datePublished: article.value?.publishedAt,
        author: [{ '@type': 'Person', name: 'Nuxt Expert' }]
      })
    }
  ]
})