Metadata 中繼資料

描述頁面標題、摘要、圖片、語言與社群分享資訊的資料。

先用一句話理解

描述頁面標題、摘要、圖片、語言與社群分享資訊的資料。

打個比方

像書的封面、摘要與分類標籤。

什麼時候會遇到

做 SEO、社群分享、瀏覽器標題、搜尋結果摘要時。

再往深一點看

Metadata 是放在 HTML `<head>` 裡、不顯示在頁面主體但描述這頁內容的資料，包括 `<title>`、`<meta name="description">`，以及 Open Graph 標籤（og:title、og:image 等）。它是 SEO 和社群分享的原料：搜尋引擎靠 title 和 description 決定要怎麼在搜尋結果呈現你的頁面，Facebook 和 LINE 在預覽連結時靠 og:image 抓封面圖。metadata 本身不等於 SEO——好的 metadata 能讓搜尋結果的點擊率提高，但搜尋引擎的排名最終還是由頁面內容品質與連結信任度決定。在 Next.js App Router 中，你可以用 export const metadata 或 generateMetadata 函式為每個 page.tsx 輸出各自的 metadata，框架會自動渲染成正確的 HTML 標籤。

舉個例子

你的部落格文章頁在 Next.js 裡用 generateMetadata 根據文章標題動態產生 og:title 和 og:image。當有人把文章連結貼到 Facebook 或 LINE 群組時，會自動展開成帶標題和封面圖的預覽卡片，點擊率比純文字連結高出許多。

常見誤解

- 忘記設定 og:image，文章分享到社群平台時只顯示醜陋的空白預覽，沒有封面圖吸引點擊。
- 每個頁面用同一組靜態 metadata，動態路由（如 /blog/[slug]）的每篇文章都顯示網站首頁的標題和描述，搜尋引擎和社群平台都無法辨識個別頁面的內容。
- 以為設好 metadata 就完成 SEO，但忽略頁面本身的載入速度和內容深度，結果有好的摘要卻排名始終上不去。