[Next.js] Metadata

Next.js SEO 優化，提升網站曝光度
設定適當的 Metadata 能幫助搜尋引擎更正確地解讀和索引你的網站，進而提高在搜尋結果中的排名

Types of metadata

Title Metadata 顧名思義為每個網頁的名稱或是標題，顯示在搜尋引擎結果頁面（SERP）的藍色標題連結上
參考資料

<title>Page Title</title>

Description Metadata

提供網頁內容的簡要概述，必須要為每個網頁撰寫獨一無二的說明，通常顯示在搜尋引擎結果中
站在 SEO 操作的角度，擁有好的網頁標題和網頁描述不只能讓爬蟲快速理解我們網站的內容，撰寫吸引人的 Meta Title 與 Meta Description 也有助於提升用戶的點擊率（CTR），對搜尋結果排名有重大的影響，也是 SEO 優化不可或缺的項目。

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

Open Graph Metadata

社交媒體平臺上顯示預覽網頁時的表示方式，提供標題、描述和預覽圖像等資訊， Open Graph 由 Facebook 推出，目的是讓網頁內容在社交媒體分享時顯示得更吸引人。當用戶在 Facebook 或其他支持 Open Graph 的社交平台上分享你的網頁時，這些 metadata 將決定顯示的內容。

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

Favicon

網頁小圖示，是一個 16x16 像素的小圖示，用於表示網站或網頁資訊，通常顯示在瀏覽器的標籤頁上，也會出現在書籤欄或其他地方。它有助於用戶快速識別和找到你的網站。

備註:

Google 搜尋已不支援 meta-keyword 標記，而且這個標記完全不會影響建立索引和排名。
參考來源

<meta name="keywords" content="...">

Adding metadata

Next.js 提供的 Metadata API 可以讓開發者更方便的設定各種 meta tags，只需要在 layout.js 或 page.js 檔案中，定義並 export 一個靜態的 metadata 物件或一個動態的 generateMetadata function，就會自動為頁面生成相關的 metadata。

有兩種方法可以將 metadata 加到網頁裡面

Config base
File base

Config-base

靜態頁面

使用 metadata object 可以放置在 layout.js or page.js

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Acme Dashboard',
  description: 'The official Next.js Course Dashboard, built with App Router.',
}

動態頁面

使用 generateMetadata function

汽車規格表
url: https://xxxx/spec/toyota/2024-toyota-corolla-altis

品牌(brandId): toyota
車款(modelId): 2024-toyota-corolla-altis

export async function generateMetadata(
  { params }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const { modelId, brandId } = params;

  const modelData: any = await getModelResData(modelId);
  const model_name = modelData.name;

  return {
    title: `${model_name} 規格配備 `,
    description: `${model_name} 車款介紹， ${model_name}`,
    openGraph: {
      title: `${model_name}`,
      description: `${model_name} 車款介紹， ${model_name}`,
      url: `https://xxxx/spec/toyota/2024-toyota-corolla-altis`,
    },
  };
}

備註:

static and dynamic metadata 僅能在 Server component 裡面使用:
代表必須在 server 端處理這些 metadata，而不能在純 client 端中設置。
這樣做的好處是可以確保 metadata 的安全性和一致性。
Next.js 會等待 generateMetadata fetched 完成，再來才會將 streaming UI 傳遞給 Client，這保證了第一個 streamed response 包含 <head /> tags:
這確保了第一個傳遞到 client 端的 streaming response 已經包含了所有必要的 <head /> 標籤。這對於 SEO 以及社交媒體分享時顯示正確的預覽內容非常重要。參考資料
不能在同個 route 裡面同時 export metadata object 和 generateMetadata function:
這是為了避免 metadata 設置的衝突，確保 metadata 的設定是唯一且明確的。我們應該根據需求選擇其中一種方式來設置元數據，而不是同時使用兩者。

File-based

特殊檔案需放在 /app 路徑

用於圖片 favicon.ico 、 apple-icon.jpg 、和 icon.jpg
用於社交媒體圖像: opengraph-image.jpg 和 twitter-image.jpg
提供搜尋引擎可存取網站上的哪些網址: robots.txt
提供有關網站結構的資訊，幫助 Google 完整分析網站並加快收錄速度： sitemap.xml

預設行為

File-based metadata 優先度 > config-based metadata

就算沒有定義 metadata，預設會帶入兩個 metatag

// 字元編碼
<meta charset="utf-8" />
// 設定網站的視窗寬度和比例
<meta name="viewport" content="width=device-width, initial-scale=1" />

順序從 Root Layout 開始算，一直到最接近最终 page.js 的地方，越靠近 page.js 的 metadata 會覆蓋前方的 metadata

Favicon 和 Open Graph 建議將這些圖像移至 /app 資料夾的根目錄。

放在 /public 資料夾不會在 <head> 裡面自動產生 <link /> 元素

參考:

其他可優化 SEO 的方法

canonical

當網站出現相似或重複的內容，可能讓搜尋引擎難以判定哪一頁是"標準"版本。

Canonical Tag 的功能即是在此情境下指引搜尋引擎，透過在 HTML 的標籤中加入 rel="canonical"屬性，明確標註哪一個 URL 為首選，確保搜尋引擎能正確理解和索引網頁。

範例:

https://xxxx/car-news/1975434
https://xxxx/car-news/1975434?utm_source=LINE&utm_campaign=2025061401GRD

雖然這些連結都導向同一網頁，但因其 URL 的查詢字符串不同，搜索引擎可能會將它們視為不同的內容。

export const metadata = {
  alternates: {
    canonical: 'https://xxxx/car-news/1975434',
  },
}

output

<link rel="canonical" href="https://xxxx/car-news/1975434" />

為什麼使用 Canonical Tag :

避免重複內容的 SEO 問題：如果一個網站有多個 URL 指向相似或相同的內容，搜尋引擎可能會困惑，不知道哪一個版本應該優先索引。這可能導致所有這些頁面的排名下降。
集中權重：使用 Canonical Tag 可以告訴搜尋引擎哪個 URL 是原始內容，從而將所有的權重集中到這個 URL 上，提升其在搜尋結果中的排名。
改善抓取效率： Canonical Tag 可以幫助搜尋引擎更有效地抓取網站，避免因重複內容而浪費抓取資源。

結構化資料

Google 搜尋結果頁在近幾年變得愈來愈多元，出現像是食譜、書籍、電影輪播、商品資訊…….等各式各樣的搜尋結果，如果想讓網站在搜尋結果上呈現出這些豐富的功能、引起使用者的目光與興趣，就要做好結構化資料標記（Schema）設定

參考資料

範例:

如果網站的標題是「Brownie（布朗尼）」

未使用結構化資料標記的網頁，程式碼中會這樣呈現：<h1> Brownie </h1>

未使用結構化資料標記時，搜尋引擎只會知道「Brownie」是這個網頁的標題，但不會知道 Brownie 代表的是布朗尼食譜做法、還是商品資訊、甚至可能是書名或是一家店名？

使用結構化資料標記後，即可提醒 Google ，網頁上的 Brownie 究竟是哪一種類型的內容，就能更容易讓網頁內容以相符的模式出現在搜尋結果上。

產品連結: https://www.purebread.com.tw/products/brownie
結構化資料測試結果: https://search.google.com/test/rich-results/result?id=lPHHBbN_hqdcDftdBc4q2w

Recipe 結構化資料設定文檔: https://developers.google.com/search/docs/appearance/structured-data/recipe

實際範例

Breadcrumb:

麵包穴: 網頁上的導覽標記記錄會指出該網頁在整個網站階層中的位置，協助使用者有效瞭解及探索網站

Books › Science Fiction › Award Winners

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="https://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="https://www.example.com/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

程式碼

<script type="application/ld+json">

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  itemListElement: [
    {
      "@type": "ListItem",
      position: 1,
      name: "Books",
      item: "https://example.com/books",
    },
    {
      "@type": "ListItem",
      position: 2,
      name: "Science Fiction",
      item: "https://example.com/books/sciencefiction",
    },
    {
      "@type": "ListItem",
      position: 3,
      name: "Award Winners",
    },
  ],
};

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <section>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      {children}
    </section>
  );
}
</script>

結構化資料標記有哪些？

目前 Google 搜尋引擎常見的結構化資料有 32 種

常用：

Article 文章
Breadcrumb 導覽標記 / 麵包屑
FAQ 常見問題（僅在政府、健康網站顯示）
QA Page 問與答
Local Business 當地商家
Logo 標誌
Sitelinks Searchbox 網站連結搜尋框
Carousel 輪轉介面
....等
所有功能: https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=zh-tw

使用結構化資料的優點

提高搜尋結果的可見度：結構化資料可以讓搜尋引擎更好地理解和展示網頁內容，從而增加在搜尋結果中的曝光率。例如，使用 FAQ 結構化資料可以讓你的常見問題直接顯示在搜尋結果中，提供即時答案給用戶
增強搜尋結果的外觀：結構化資料可以讓你的搜尋結果看起來更豐富和吸引人，例如加入圖片、評分、價格等資訊。這些豐富結果（Rich Snippets）可以提高點擊率（CTR），吸引更多用戶訪問你的網站。
提升搜尋引擎的理解能力：結構化資料標記可以幫助搜尋引擎更準確地理解網頁內容，從而提高搜尋結果的準確性和相關性。例如，使用 Local Business 結構化資料可以讓搜尋引擎更清楚地知道你的商店位置、營業時間等信息。
提高網站排名：雖然結構化資料本身不會直接影響排名，但它可以間接影響 SEO。例如，豐富結果可以提高點擊率，而點擊率是搜尋引擎排名算法中的一個重要因素。

[Next.js] Metadata

Types of metadata​

Adding metadata​

Config-base​

備註:​

File-based​

預設行為​

其他可優化 SEO 的方法​

canonical​

為什麼使用 Canonical Tag :​

結構化資料​

範例:​

實際範例​

使用結構化資料的優點​

參考文件​