章節16

新增詮釋資料

詮釋資料對於 SEO 和分享至關重要。在本章節中，我們將討論如何在 Next.js 應用程式中新增詮釋資料。

本章節內容

我們將涵蓋以下主題

什麼是詮釋資料。

詮釋資料的類型。

如何使用詮釋資料新增 Open Graph 圖片。

如何使用詮釋資料新增網站圖示。

什麼是詮釋資料？

在網頁開發中，詮釋資料提供網頁的額外詳細資訊。造訪網頁的使用者看不到詮釋資料。它是在幕後運作的，嵌入在網頁的 HTML 中，通常位於 <head> 元素內。這些隱藏的資訊對於搜尋引擎和其他需要更了解網頁內容的系統至關重要。

為什麼詮釋資料很重要？

詮釋資料在提升網頁的 SEO 方面扮演著重要的角色，使其更容易被搜尋引擎和社群媒體平台理解和存取。正確的詮釋資料可以幫助搜尋引擎有效地索引網頁，提高它們在搜尋結果中的排名。此外，像 Open Graph 這樣的詮釋資料可以改善分享連結在社群媒體上的顯示方式，使內容對使用者更具吸引力和資訊性。

Metadata 的類型

Metadata 有許多種類型，每一種都有其獨特的用途。一些常見的類型包括：

標題 Metadata：負責網頁標題，顯示在瀏覽器分頁標籤上。它對 SEO 至關重要，因為它可以幫助搜尋引擎了解網頁的內容。

<title>Page Title</title>

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

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

關鍵字 Metadata：這個 Metadata 包含與網頁內容相關的關鍵字，幫助搜尋引擎索引頁面。

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

Open Graph Metadata：這個 Metadata 增強了網頁在社群媒體平台上分享時的呈現方式，提供標題、描述和預覽圖像等資訊。

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

網站圖示 Metadata：這個 Metadata 將網站圖示（一個小圖示）連結到網頁，顯示在瀏覽器的網址列或分頁標籤中。

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

新增 Metadata

注意事項：您也可以使用 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 元數據 API 功能強大且靈活，讓您可以完全控制應用程式的元數據。在這裡，我們向您展示了如何新增一些基本元數據，但您可以新增多個欄位，包括 keywords、robots、canonical 等等。歡迎瀏覽文件，並將任何其他您想要的元數據新增到您的應用程式中。