跳到主內容

【Next.js】metadata 設定總覽

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

📘 Next.js App Router metadata 設定總覽

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

🧱 基本結構

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

會輸出：

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

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

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

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

💡 實際輸出：

<title>About | My Site</title>

🚫 絕對標題覆蓋 template

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

💡 實際輸出：

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

🌐 設定 Open Graph、Twitter Card

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）

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

💡 實際輸出：

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

🧭 設定 favicon 與 manifest

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

✅ 常見欄位對照表

欄位名稱 說明
title 頁面標題，可以是 string 或物件
description meta 描述，用於搜尋結果
openGraph Facebook/LinkedIn 等分享資訊
twitter Twitter 分享資訊
robots 是否讓搜尋引擎索引這頁
icons 頁籤圖示、apple icon 等
manifest PWA 設定檔

📦 使用建議

使用情境 建議設定
一般頁面 title + description 即可
分享卡片 / 社群預覽 加上 openGraph 與 twitter
後台或登入頁 可用 title.absolute + noindex

當然可以！下面我將清楚說明 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）

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：

<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）

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：

<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" />

✅ 圖片尺寸建議

平台 尺寸建議
Facebook 1200×630 px（1.91:1 長方形）
Twitter 1200×628 px（summary_large_image）
LINE 同 Facebook（讀 og:image）

🧪 實戰檢查工具

工具名稱 連結
Facebook Debugger https://developers.facebook.com/tools/debug/
Twitter Card Validator https://cards-dev.twitter.com/validator
OpenGraph Preview https://www.opengraph.xyz

🧠 小結

項目 openGraph twitter
使用平台 Facebook, Line, LinkedIn, Slack 等 Twitter 專用
支援圖片 ✅ 多張圖片 ✅ 單張或多張
文字自訂 ✅ title, description, siteName 等 ✅ title, description, creator 等
SEO 關聯 ✅ 有助於點擊率與品牌識別 ✅ Twitter 分享時更具吸引力

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

回到頂端