App Router：新增元數據 | Next.js

元數據對於 SEO 和分享功能至關重要。本章將討論如何為您的 Next.js 應用程式新增元數據。

什麼是元數據？

在網頁開發中，元數據提供了關於網頁的額外資訊。這些資訊不會直接顯示給造訪頁面的使用者，而是隱藏在網頁的 HTML 中，通常位於 <head> 元素內。這些隱藏資訊對於搜尋引擎和其他需要理解網頁內容的系統非常重要。

為什麼元數據很重要？

元數據在提升網頁 SEO 方面扮演重要角色，讓搜尋引擎和社交媒體平台更容易理解和存取網頁內容。適當的元數據能幫助搜尋引擎有效索引網頁，提升搜尋結果排名。此外，像 Open Graph 這樣的元數據能改善連結在社交媒體上的顯示效果，使內容對使用者更具吸引力和資訊性。

元數據的類型

元數據有多種類型，每種都有其獨特用途。常見類型包括：

標題元數據：負責顯示在瀏覽器分頁上的網頁標題，對 SEO 至關重要，幫助搜尋引擎理解網頁內容。

<title>Page Title</title>

描述元數據：提供網頁內容的簡要概述，通常顯示在搜尋引擎結果中。

<meta name="description" content="A brief description of the page content." />

關鍵字元數據：包含與網頁內容相關的關鍵字，幫助搜尋引擎索引頁面。

<meta name="keywords" content="keyword1, keyword2, keyword3" />

Open Graph 元數據：增強網頁在社交媒體平台上的顯示效果，提供標題、描述和預覽圖片等資訊。

<meta property="og:title" content="Title Here" />
<meta property="og:description" content="Description Here" />
<meta property="og:image" content="image_url_here" />

網站圖示元數據：將網站圖示（小圖標）連結到網頁，顯示在瀏覽器的地址欄或分頁上。

<link rel="icon" href="path/to/favicon.ico" />

新增元數據

Next.js 提供了 Metadata API，可用於定義應用程式的元數據。您有兩種方式可以為應用程式新增元數據：

基於配置：在 layout.js 或 page.js 檔案中匯出一個靜態 metadata 物件或動態的 generateMetadata 函式。
基於檔案：Next.js 提供了一系列專門用於元數據的特殊檔案：
- favicon.ico、apple-icon.jpg 和 icon.jpg：用於網站圖示和圖標
- opengraph-image.jpg 和 twitter-image.jpg：用於社交媒體圖片
- robots.txt：提供搜尋引擎爬蟲的指示
- sitemap.xml：提供網站結構的資訊

您可以靈活使用這些檔案來設定靜態元數據，也可以在專案中動態生成它們。

無論選擇哪種方式，Next.js 都會自動為您的頁面生成相關的 <head> 元素。

網站圖示和 Open Graph 圖片

在您的 /public 資料夾中，您會看到兩個圖片：favicon.ico 和 opengraph-image.jpg。

將這些圖片移動到 /app 資料夾的根目錄。

完成後，Next.js 會自動識別並使用這些檔案作為您的網站圖示和 OG 圖片。您可以透過開發工具檢查應用程式的 <head> 元素來驗證這一點。

小提示：您也可以使用 ImageResponse 建構函式來建立動態 OG 圖片。

頁面標題和描述

您也可以從任何 layout.js 或 page.js 檔案中匯出一個 metadata 物件，來新增頁面標題和描述等資訊。layout.js 中的元數據會被所有使用該佈局的頁面繼承。

在根佈局中，建立一個包含以下欄位的 metadata 物件：

/app/layout.tsx

import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Acme Dashboard',
  description: 'The official Next.js Course Dashboard, built with App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};
 
export default function RootLayout() {
  // ...
}

Next.js 會自動將標題和元數據新增到您的應用程式中。

但如果您想為特定頁面新增自訂標題呢？您可以透過在頁面本身新增 metadata 物件來實現。巢狀頁面中的元數據會覆蓋父層的元數據。

例如，在 /dashboard/invoices 頁面中，您可以更新頁面標題：

/app/dashboard/invoices/page.tsx

import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Invoices | Acme Dashboard',
};

這樣做雖然可行，但我們在每個頁面都重複了應用程式標題。如果公司名稱等資訊發生變更，您必須在每個頁面進行更新。

相反，您可以在 metadata 物件中使用 title.template 欄位來定義頁面標題的模板。此模板可以包含頁面標題和其他您想包含的資訊。

在根佈局中，更新 metadata 物件以包含模板：

/app/layout.tsx

import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: {
    template: '%s | Acme Dashboard',
    default: 'Acme Dashboard',
  },
  description: 'The official Next.js Learn Dashboard built with App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};

模板中的 %s 將被替換為特定頁面標題。

現在，在您的 /dashboard/invoices 頁面中，您可以新增頁面標題：

/app/dashboard/invoices/page.tsx

export const metadata: Metadata = {
  title: 'Invoices',
};

導航至 /dashboard/invoices 頁面並檢查 <head> 元素。您應該會看到頁面標題現在顯示為 Invoices | Acme Dashboard。

練習：新增元數據

現在您已經了解了元數據，請練習為其他頁面新增標題：

/login 頁面。
/dashboard/ 頁面。
/dashboard/customers 頁面。
/dashboard/invoices/create 頁面。
/dashboard/invoices/[id]/edit 頁面。

Next.js 的 Metadata API 功能強大且靈活，讓您能完全控制應用程式的元數據。這裡我們展示了如何新增一些基本元數據，但您還可以新增多種欄位，包括 keywords、robots、canonical 等。請隨時查閱文件，並為您的應用程式新增任何其他所需的元數據。

新增元數據

什麼是元數據？

為什麼元數據很重要？

元數據的類型

新增元數據

網站圖示和 Open Graph 圖片

頁面標題和描述

練習：新增元數據

On this page