Open Graph 標籤：og:type、og:title、og:url 與其他標籤

Open Graph 是一組 meta 標籤，告訴 Facebook、LinkedIn、X、Slack、Discord 和 iMessage 如何把你的頁面顯示成連結卡片：它的標題、描述、圖片與網址。這個協定由 Facebook 在 2010 年制定，規格放在 ogp.me。每個標籤都以 og: 開頭，所以大家稱它們為 OG 標籤、OG meta 標籤或 OG 資料。

沒有這些標籤時，各平台只能自己猜。它們會取 HTML 的 title、頁面上的一些文字，再加上一張隨機的圖片，或是根本沒有圖片。有了這些標籤，你就能決定人們在點選之前看到什麼。

這篇文章會列出每個標籤並附上範例。至於圖片本身、它的尺寸，以及如何為每個頁面各做一張，請閱讀 OG 圖片指南。

四個必要標籤

規格要求每個頁面都要有四個標籤：

<meta property="og:title" content="We shipped dark mode" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/dark-mode" />
<meta property="og:image" content="https://example.com/og/dark-mode.png" />

og:title

卡片的標題。要為卡片而寫，不是為搜尋而寫：簡短，結尾不加網站名稱，因為網站名稱由 og:site_name 負責。Facebook 和 LinkedIn 會依螢幕不同，在約 60 到 90 個字元之後截斷過長的標題。

og:type

頁面屬於哪一種物件。多數頁面使用 website 或 article。沒有 og:type 的頁面會被視為 website。完整清單在下一節。

og:url

頁面的標準網址。請使用與 link rel="canonical" 相同的網址，含 https://，且不帶追蹤參數。平台會用它來計算分享與按讚數，所以同一個網址若有兩種版本（例如有無 ?utm_source=），計數就會被拆開。

og:image

卡片上圖片的網址。必須是絕對網址。請使用 1200 × 630 像素，檔案小於 5 MB。各平台的尺寸請見 OG 圖片指南。

og:type 的值

規格定義了這些類型：

website：預設值。首頁、產品頁和工具頁都用它。
article：部落格文章、新聞報導或指南。它會多出 article:published_time、article:modified_time、article:author、article:section 和 article:tag。
profile：一個人。它會多出 profile:first_name、profile:last_name、profile:username 和 profile:gender。
book：一本書，搭配 book:author、book:isbn、book:release_date 和 book:tag。
music.song、music.album、music.playlist、music.radio_station：音樂頁面。
video.movie、video.episode、video.tv_show、video.other：影片頁面。

文章頁面看起來像這樣：

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-10-28T09:00:00Z" />
<meta property="article:author" content="https://example.com/authors/duc-an" />
<meta property="article:section" content="Engineering" />
<meta property="article:tag" content="dark mode" />

多數平台顯示 website 卡片與 article 卡片的方式相同。類型對 Facebook，以及會讀取日期的工具（例如部分 RSS 閱讀器和聊天軟體）最重要。

選用標籤

og:description：標題下方的一兩句話。請控制在約 160 個字元以內。可以和你的 meta description 相同。
og:site_name：網站名稱，例如「Bannerify」。Facebook 和 Slack 會把它顯示在標題的上方或下方。
og:locale：頁面的語言，例如 en_US。預設值是 en_US。你有其他語言版本時，每種語言各加一個 og:locale:alternate。
og:determiner：句子中標題前面的詞，例如 “a” 或 “the”。很少有平台使用它。
og:video 和 og:audio：卡片用的影片或音訊檔案網址。

圖片標籤

og:image 還有額外的標籤，用來描述圖片：

<meta property="og:image" content="https://example.com/og/dark-mode.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Dark mode launch card with the app logo" />

og:image:width 和 og:image:height 讓 Facebook 在第一次分享時，不必先下載檔案就能顯示圖片。
og:image:alt 為螢幕閱讀器描述這張圖片。
og:image:secure_url 是當 og:image 為 http:// 時使用的 https:// 網址。如果你的 og:image 已經是 https://，就不需要它。

你可以加入不只一個 og:image。多數平台會使用第一個。

完整範例

一篇部落格文章的所有標籤，再加上你需要的那一個 X 標籤：

<head>
  <title>We shipped dark mode | Example</title>
  <meta name="description" content="Every screen, both themes, no flash on load." />
  <link rel="canonical" href="https://example.com/blog/dark-mode" />

  <meta property="og:site_name" content="Example" />
  <meta property="og:type" content="article" />
  <meta property="og:url" content="https://example.com/blog/dark-mode" />
  <meta property="og:title" content="We shipped dark mode" />
  <meta property="og:description" content="Every screen, both themes, no flash on load." />
  <meta property="og:locale" content="en_US" />
  <meta property="og:image" content="https://example.com/og/dark-mode.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Dark mode launch card with the app logo" />
  <meta property="article:published_time" content="2026-10-28T09:00:00Z" />

  <meta name="twitter:card" content="summary_large_image" />
</head>

Open Graph 與 X（Twitter）卡片

X 有自己以 twitter: 開頭的標籤。缺少 twitter: 標籤時，X 會改讀 Open Graph 標籤：twitter:title 讀 og:title，twitter:description 讀 og:description，twitter:image 讀 og:image。所以你唯一必須加入的 X 標籤就是 twitter:card。要大圖就用 summary_large_image，要小的正方形圖就用 summary。

會讓卡片失效的錯誤

用 name 取代 property。 規格使用的是 property="og:title"。多數平台也能讀 name="og:title"，但不是每個都可以。
用 JavaScript 加入標籤。 社群平台的爬蟲不會執行你的腳本。請在伺服器送出的 HTML 裡直接帶上標籤，或是預先渲染頁面。
相對路徑的圖片網址。 /og/dark-mode.png 是無效的。請使用完整的 https:// 網址。
需要登入才能看的圖片， 或是 robots.txt 封鎖了該平台爬蟲的圖片。
過期的卡片。 平台會快取它們抓取的內容，通常長達數天。修改之後，請在 Facebook 分享偵錯工具或 LinkedIn Post Inspector 重新抓取頁面。

Open Graph 對 SEO 有幫助嗎？

沒有直接的幫助。Google 依據頁面的內容與連結排名，並不把 og: 標籤當作排名訊號。不過，清楚的卡片能讓人們分享連結時獲得更多點選，而這些造訪與分享有助於頁面被找到。當頁面沒有更好的標題或描述時，搜尋引擎與 AI 工具也會讀取 og:title 和 og:description。

測試你的標籤

把網址貼到免費的 Open Graph 檢查工具。它會一次顯示 X、Facebook 與 LinkedIn 的預覽，列出缺少的標籤，並檢查圖片尺寸。Twitter 卡片驗證工具做的事相同，但以 X 卡片為優先。

為每個頁面生成圖片

標籤是容易的部分，難的是為每個頁面都準備一張好圖片。你可以用免費的 OG 圖片產生器手動做一張，也可以用範本為每個頁面各做一張：在 Bannerify 設計一次，再為每個頁面簽署一個帶有標題與作者的網址。OG 圖片指南有完整的程式碼，免費方案每月包含 100 次生成。