跳到主內容

【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

需要我幫你加上「SEO 實戰：如何檢查 metadata 是否正確渲染」的工具教學嗎？（如 view-source:、meta checker、social card preview 等）

回到頂端