# 【Next.js】metadata 設定總覽

以下是 Next.js App Router 中 `metadata` 常用設定的整理表，適合初學者參考與實作時使用。

---

# 📘 Next.js App Router `metadata` 設定總覽

> 用於自動產出 SEO-friendly 的 `<title>`, `<meta>`, `<link>` 等標籤

---

## 🧱 基本結構

```ts
export const metadata: Metadata = {
  title: "單一頁面標題",
  description: "這是這一頁的描述",
};

```

會輸出：

```html
<title>單一頁面標題</title>
<meta name="description" content="這是這一頁的描述">

```

---

## 🔁 多層 Layout 組合使用：template + default

```ts
// app/layout.tsx
export const metadata = {
  title: {
    default: "My Site",
    template: "%s | My Site",
  },
};

```

```ts
// app/about/page.tsx
export const metadata = {
  title: "About",
};

```

💡 實際輸出：

```html
<title>About | My Site</title>

```

---

## 🚫 絕對標題覆蓋 template

```ts
export const metadata = {
  title: {
    absolute: "登入中，請稍候...",
  },
};

```

💡 實際輸出：

```html
<title>登入中，請稍候...</title>

```

---

## 🌐 設定 Open Graph、Twitter Card

```ts
export const metadata = {
  title: "About",
  description: "關於我們的介紹",
  openGraph: {
    title: "About Page",
    description: "OpenGraph 專用描述",
    url: "https://example.com/about",
    siteName: "My Site",
    images: [
      {
        url: "https://example.com/og-image.jpg",
        width: 1200,
        height: 630,
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "About Page",
    description: "Twitter 用的描述",
    images: ["https://example.com/twitter-image.jpg"],
  },
};

```

---

## 🔒 禁止搜尋引擎索引（noindex）

```ts
export const metadata = {
  robots: {
    index: false,
    follow: false,
  },
};

```

💡 實際輸出：

```html
<meta name="robots" content="noindex, nofollow">

```

---

## 🧭 設定 favicon 與 manifest

```ts
export const metadata = {
  icons: {
    icon: "/favicon.ico",
    shortcut: "/shortcut-icon.png",
    apple: "/apple-touch-icon.png",
  },
  manifest: "/site.webmanifest",
};

```

---

## ✅ 常見欄位對照表

<table id="bkmrk-%E6%AC%84%E4%BD%8D%E5%90%8D%E7%A8%B1-%E8%AA%AA%E6%98%8E-title-%E9%A0%81%E9%9D%A2%E6%A8%99%E9%A1%8C%EF%BC%8C%E5%8F%AF"><thead><tr><th>欄位名稱</th><th>說明</th></tr></thead><tbody><tr><td>`title`</td><td>頁面標題，可以是 string 或物件</td></tr><tr><td>`description`</td><td>meta 描述，用於搜尋結果</td></tr><tr><td>`openGraph`</td><td>Facebook/LinkedIn 等分享資訊</td></tr><tr><td>`twitter`</td><td>Twitter 分享資訊</td></tr><tr><td>`robots`</td><td>是否讓搜尋引擎索引這頁</td></tr><tr><td>`icons`</td><td>頁籤圖示、apple icon 等</td></tr><tr><td>`manifest`</td><td>PWA 設定檔</td></tr></tbody></table>

---

## 📦 使用建議

<table id="bkmrk-%E4%BD%BF%E7%94%A8%E6%83%85%E5%A2%83-%E5%BB%BA%E8%AD%B0%E8%A8%AD%E5%AE%9A-%E4%B8%80%E8%88%AC%E9%A0%81%E9%9D%A2-title"><thead><tr><th>使用情境</th><th>建議設定</th></tr></thead><tbody><tr><td>一般頁面</td><td>`title` + `description` 即可</td></tr><tr><td>分享卡片 / 社群預覽</td><td>加上 `openGraph` 與 `twitter`</td></tr><tr><td>後台或登入頁</td><td>可用 `title.absolute` + `noindex`</td></tr></tbody></table>

---

當然可以！下面我將清楚說明 Next.js `metadata` 中的 `openGraph` 與 `twitter` 欄位的用途、格式與實戰例子，幫助你製作具有社群分享預覽功能的頁面。

---

# 🌐 `openGraph` 與 `twitter` 是什麼？

當你把一個網頁連結貼到 **Facebook、Line、Slack、Twitter 等社群平台**，它會自動產生「預覽卡片」：

> ✅ 圖片  
> ✅ 標題  
> ✅ 描述  
> ✅ 網站名稱

這些內容的來源就是：

- Facebook、Line：讀取 **Open Graph meta tags**
- Twitter：讀取 **Twitter Card meta tags**

Next.js 的 `metadata.openGraph` 與 `metadata.twitter` 就是自動產生這些 tags 的設定方法。

---

## 🧱 `openGraph` 結構（用於 Facebook / Line / LinkedIn）

```ts
export const metadata = {
  openGraph: {
    title: "產品名稱 - 超好用的工具",
    description: "這是一款改變你人生的產品。",
    url: "https://yourdomain.com/product/123",
    siteName: "My Cool App",
    type: "website", // 常見還有: 'article', 'product', 'profile'
    locale: "zh_TW",
    images: [
      {
        url: "https://yourdomain.com/images/product-123.jpg",
        width: 1200,
        height: 630,
        alt: "產品圖說",
      },
    ],
  },
};

```

🔽 對應輸出的 HTML meta：

```html
<meta property="og:title" content="產品名稱 - 超好用的工具" />
<meta property="og:description" content="這是一款改變你人生的產品。" />
<meta property="og:url" content="https://yourdomain.com/product/123" />
<meta property="og:site_name" content="My Cool App" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="zh_TW" />
<meta property="og:image" content="https://yourdomain.com/images/product-123.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="產品圖說" />

```

---

## 🐦 `twitter` 結構（用於 Twitter）

```ts
export const metadata = {
  twitter: {
    card: "summary_large_image", // summary / summary_large_image / app / player
    title: "這是商品標題",
    description: "這是商品描述",
    images: ["https://yourdomain.com/images/product-123.jpg"],
    creator: "@your_twitter_id", // 可選
  },
};

```

🔽 對應輸出的 HTML meta：

```html
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="這是商品標題" />
<meta name="twitter:description" content="這是商品描述" />
<meta name="twitter:image" content="https://yourdomain.com/images/product-123.jpg" />
<meta name="twitter:creator" content="@your_twitter_id" />

```

---

## ✅ 圖片尺寸建議

<table id="bkmrk-%E5%B9%B3%E5%8F%B0-%E5%B0%BA%E5%AF%B8%E5%BB%BA%E8%AD%B0-facebook-120"><thead><tr><th>平台</th><th>尺寸建議</th></tr></thead><tbody><tr><td>Facebook</td><td>1200×630 px（1.91:1 長方形）</td></tr><tr><td>Twitter</td><td>1200×628 px（summary\_large\_image）</td></tr><tr><td>LINE</td><td>同 Facebook（讀 og:image）</td></tr></tbody></table>

---

## 🧪 實戰檢查工具

<table id="bkmrk-%E5%B7%A5%E5%85%B7%E5%90%8D%E7%A8%B1-%E9%80%A3%E7%B5%90-facebook-deb"><thead><tr><th>工具名稱</th><th>連結</th></tr></thead><tbody><tr><td>Facebook Debugger</td><td>[https://developers.facebook.com/tools/debug/](https://developers.facebook.com/tools/debug/)</td></tr><tr><td>Twitter Card Validator</td><td>[https://cards-dev.twitter.com/validator](https://cards-dev.twitter.com/validator)</td></tr><tr><td>OpenGraph Preview</td><td>[https://www.opengraph.xyz](https://www.opengraph.xyz/)</td></tr></tbody></table>

---

## 🧠 小結

<table id="bkmrk-%E9%A0%85%E7%9B%AE-opengraph-twitter"><thead><tr><th>項目</th><th>openGraph</th><th>twitter</th></tr></thead><tbody><tr><td>使用平台</td><td>Facebook, Line, LinkedIn, Slack 等</td><td>Twitter 專用</td></tr><tr><td>支援圖片</td><td>✅ 多張圖片</td><td>✅ 單張或多張</td></tr><tr><td>文字自訂</td><td>✅ title, description, siteName 等</td><td>✅ title, description, creator 等</td></tr><tr><td>SEO 關聯</td><td>✅ 有助於點擊率與品牌識別</td><td>✅ Twitter 分享時更具吸引力</td></tr></tbody></table>

---

如果你需要我產出一個 Next.js 頁面範例，實作一頁完整的 SEO + 分享卡片（含圖片），我可以幫你快速產一份喔！要嗎？