Next.js Metadata API 的基本概念
在 App Router 架構下，你可以在任何 layout.tsx 或 page.tsx 中 export 一個 metadata 物件或 generateMetadata 函式來設定該頁面的 meta 標籤：
靜態 metadata（適合固定的頁面）：直接 export 一個 metadata 物件，包含 title、description 等屬性。
動態 metadata（適合動態路由如部落格文章頁面）：export 一個非同步的 generateMetadata 函式，接收 params 和 searchParams，回傳 metadata 物件。
title 的正確設定
在 root layout 中，可以設定 title 的 template：
設定一個包含 template（例如 '%s | SimpleCreative'）和 default（網站主標題）的 title 物件。
這樣子頁面只需要設定 title 字串，App Router 會自動套用 template 格式，確保每個頁面的 title 格式一致。
完整的 Open Graph 設定
Open Graph 控制你的頁面在分享到 Facebook、LINE、Slack 等平台時的顯示方式。最重要的屬性：
type：通常是 website 或 article（部落格文章用 article）
title：分享時顯示的標題（可以和 SEO title 不同，更口語化）
description：分享時顯示的描述（160 字以內，口語化一點更容易被點擊）
images：分享圖片的 URL、寬高、描述（建議 1200x630px）
url：當前頁面的完整 URL
siteName：網站名稱
如果你使用 Next.js 的 opengraph-image.tsx 自動生成 OG 圖片，App Router 會自動把這張圖片加入 Open Graph metadata。
Twitter Card 設定
Twitter（現在的 X）有自己的 Card 系統。在 Next.js metadata 中，設定 twitter 物件：
card：summary_large_image（大圖卡片，視覺效果好）
title 和 description：Twitter 上顯示的文字
images：Twitter Card 圖片（可以複用 OG 圖片）
部落格文章的動態 metadata
對動態路由的部落格文章頁面，generateMetadata 函式從資料庫取得文章資料，然後設定：
title：文章標題（套用 template 後會變成「文章標題 | 網站名稱」）
description：文章摘要（excerpt）
openGraph 的 type 設 article，publishedTime 和 authors 可以提升在 Google Discover 中的表現
alternates.canonical：設定 canonical URL 避免重複內容問題
如果文章不存在，記得 return notFound() 避免返回空 metadata。
robots 設定
大多數頁面不需要特別設定 robots（預設允許索引和追蹤）。需要設定的情況：
管理後台頁面：設定 robots: { index: false, follow: false } 防止被索引
感謝頁（/thank-you）：避免被索引，因為這個頁面對 SEO 沒有價值且可能被空白流量訪問
搜尋結果頁：通常建議 noindex（避免動態生成的搜尋結果頁被索引，可能影響整個網站品質評分）
canonical URL 的重要性
canonical URL 告訴搜尋引擎「這個頁面的官方地址是什麼」，解決了以下重複內容情況：
- http vs https
- www vs non-www
- 有尾斜線 vs 沒有尾斜線（/blog/ vs /blog）
- 有追蹤參數的 URL（/blog?utm_source=twitter）
在 Next.js 中，設定 alternates.canonical 為完整的標準 URL：
在根 layout 設定站台的基本 canonical 前綴，在每個動態頁面的 generateMetadata 中設定完整的 canonical URL。
結構化資料（Schema.org）與 metadata 的關係
metadata API 不直接支援 JSON-LD 結構化資料，這部分需要在頁面中用 script 標籤注入。
但結構化資料和 metadata 是互補的：metadata 影響搜尋結果的標題/描述顯示，結構化資料影響 Rich Results（星級評分、麵包屑、FAQ 等特殊展示格式）。