Nuxt SEO 基礎工程｜SEO Basics

Nuxt 專案要能被 Google 穩定收錄，必須在架構階段就決定渲染模式，並在每一頁落實 meta 標籤、語意結構與效能基線。這份文件涵蓋開工前到每頁上線的基礎工程。

進階的 sitemap / canonical / hreflang 一致性請參考 Sitemap / Canonical / Hreflang 一致性。robots 與 indexability 請參考 Robots 與 Indexability。

渲染模式決策

渲染模式是 SEO 的地基，必須在設計階段就決策好。

模式	說明	SEO 適合度	適用頁面
SSG (`nuxi generate`)	建構期靜態預渲染	★★★★★	首頁、行銷頁、部落格、文件、知識庫
SSR (`ssr: true`)	每次請求伺服器渲染	★★★★★	動態公開頁、需即時資料但可索引的頁
ISR / SWR	靜態頁加定時更新	★★★★☆	更新頻率高但不需每次即時的列表頁
CSR / SPA (`ssr: false`)	純客戶端渲染	★☆☆☆☆	後台、會員中心、付款流程、互動工具

不可妥協規則：

需要被 Google 或社群平台抓取的頁面，不可只有 CSR。
會員、付款、歷史紀錄、後台等頁面應 noindex，且不得進 sitemap。
互動主流程若暫時 CSR-only，短期可先從 sitemap 排除；後續再改成「SSR landing shell + ClientOnly interactive」。

Hybrid Rendering 範例

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/pricing/**': { prerender: true },
    '/cards/**': { ssr: true },
    '/learn/**': { ssr: true },
    '/guide/**': { ssr: true },
    '/account/**': { ssr: false },
    '/history/**': { ssr: false },
    '/payment/**': { ssr: false },
    '/api/**': { cors: true }
  }
})

Meta 標籤 SOP

全站預設（app.vue 或 default layout）

useHead({
  htmlAttrs: { lang: 'zh-TW' },
  link: [{ rel: 'icon', href: '/favicon.ico' }]
})

useSeoMeta({
  titleTemplate: '%s | 品牌名稱',
  description: '全站預設描述，80-160 字',
  ogSiteName: '品牌名稱',
  ogImage: 'https://www.example.com/og-default.jpg',
  twitterCard: 'summary_large_image'
})

頁面 Meta

useSeoMeta({
  title: '頁面主標題',
  description: '這一頁的專屬描述，80-160 字。',
  ogTitle: '頁面主標題',
  ogDescription: '社群分享描述。',
  ogImage: 'https://www.example.com/og/page.jpg',
  ogUrl: 'https://www.example.com/page/',
  ogType: 'website',
  twitterTitle: '頁面主標題',
  twitterDescription: '社群分享描述。'
})

useHead({
  link: [
    { rel: 'canonical', href: 'https://www.example.com/page/' }
  ]
})

titleTemplate 規則

頁面 title 只放頁面主標題。
品牌後綴交給 titleTemplate。
不要在頁面 title 手動加品牌名，否則會品牌重複。

錯誤示範：

// ❌ title 已帶品牌，titleTemplate 又加一次
title: '使用指南 - Arcana Mirror'
titleTemplate: '%s | Arcana Mirror 奧秘心鏡'

正確作法：

// ✅ title 只放主題，品牌由 titleTemplate 處理
title: '使用指南'
titleTemplate: '%s | Arcana Mirror 奧秘心鏡'

HTML 語意化結構

<body>
  <header>
    <nav>主選單</nav>
  </header>
  <main>
    <article>
      <h1>頁面唯一主標題</h1>
      <section>
        <h2>次級章節標題</h2>
        <p>內文</p>
      </section>
    </article>
  </main>
  <footer>頁尾資訊</footer>
</body>

每頁只有一個 <h1>，且和 <title> 主題一致。
標題層次不跳躍（h1 → h2 → h3，不要 h1 → h3）。
使用 <main> / <article> / <section> 等語意標籤。
內部連結錨文字要有描述性，不要全用「點這裡」。

圖片 SEO（Nuxt Image）

建議使用 <NuxtImg> 或 <NuxtPicture>，自動處理格式與尺寸。

<NuxtImg
  src="/hero.jpg"
  alt="描述性替代文字，包含主要關鍵字"
  width="1200"
  height="630"
  format="webp"
  loading="eager"
  sizes="100vw"
  priority
/>

每張圖片要有描述性 alt。裝飾圖使用空 alt=""。
指定 width / height 避免 CLS。
首屏圖片 loading="eager" + priority；非首屏 loading="lazy"。
OG image 建議 1200×630。

Core Web Vitals

指標	達標標準	主要優化方式
LCP	≤ 2.5 秒	首屏圖片 eager、CDN、減少阻塞資源
INP	≤ 200ms	減少 JS、拆分互動元件、避免長任務
CLS	≤ 0.1	圖片尺寸、穩定 layout、避免 late injected UI

Nuxt 重點：

靜態頁用 SSG / prerender。
互動大型區塊用 <ClientOnly>，但 SEO shell 要 SSR。
三方腳本延後載入。
Cloudflare CDN cache policy 要避免 sitemap 被長期錯誤快取。