NextJs (7) MetaData

發表於 分類於
MetaData 設定解說

在 Next.js 中，metadata 設定是針對 Next.js 13 及更新版本中使用 App Router（app/ 資料夾）的一個特性。如果你使用的是 app 資料夾結構，你可以在每個頁面的 page.js 文件中定義 metadata。

全域設定

你可以在 app/layout.js 文件中設定全局的 metadata。這樣所有的頁面都會繼承這些設定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// app/layout.js
export const metadata = {
  title: "網站標題",
  description: "網站的描述",
  keywords: ["關鍵字1", "關鍵字2", "關鍵字3"],
  openGraph: {
    title: "網站的 Open Graph 標題",
    description: "網站的 Open Graph 描述",
    url: "https://你的網站.com",
    images: [
      {
        url: "https://你的網站.com/圖片路徑.jpg",
        width: 800,
        height: 600,
        alt: "圖片描述",
      },
    ],
  },
};

頁面級別設定

你也可以在特定頁面的 page.js 文件中設定該頁面的 metadata。

1
2
3
4
5
// app/your-page/page.js
export const metadata = {
  title: "特定頁面的標題",
  description: "特定頁面的描述",
};

動態 metadata

假設你有一個商品頁面，並且想要根據商品的 ID 動態設置每個文章頁面的 metadata。你可以使用 generateMetadata 函數，並透過 URL 參數來取得文章資料。

1
2
3
4
5
export const generateMetadata = ({ params }) => {
  return {
    title: `Product ${params.productId}`,
  };
};

title 設定為物件

你可以在 metadata 裡將 title 定義為物件，並使用 template 來自定義標題的格式。template 是一個字串，會插入指定的頁面標題。

1
2
3
4
5
6
7
8
// app/layout.js
export const metadata = {
  title: {
    default: "Next.js",
    template: "%s | code tutorial",
  },
  description: "Generated by Next.js",
};
  • default: 如果頁面沒有設定特定標題，這個值將會用作頁面的標題。
  • template: 這是一個格式化字串，其中 %s 會被具體頁面的標題替換。例如，如果頁面的標題是 “產品頁面”，那麼最終顯示的標題會是 “產品頁面 | 我的網站名稱”。

在個別頁面元件內設定的 title 會和 template 結合

1
2
3
4
5
// about.js
export const metadata = {
  title: "產品名稱", // 這會插入到模板的 %s
  description: "這是產品頁面的描述",
};

如果個別頁面的 title 不想和 template 結合，可使用 absolute

1
2
3
4
5
6
// blog.js
export const metadata = {
  title: {
    absolute: "blog",
  },
};