Open Graph 標籤是什麼？og Image 與社群分享設定完整教學

Open Graph 標籤是什麼？OG image 與社群分享設定完整教學

內容目錄 顯示
加入為 Google 偏好來源

Open Graph 標籤是寫在網頁原始碼裡的一組 meta 資訊，告訴 Facebook、LINE、Threads、X 等社群平台，當有人分享你這個網址時，應該顯示什麼標題、什麼描述、什麼縮圖。沒設 OG 標籤的網址被分享出去時，常會看到一張白白的縮圖，亂跑的標題，不知所云的描述，點擊率掉到剩兩成。這篇講清楚 Open Graph 是什麼、4 個必填欄位、OG image 尺寸建議，以及怎麼驗證設定有沒有生效。

Open Graph 標籤是什麼？

Open Graph 是 Facebook 在 2010 年推出的開放協議，用 meta 標籤的形式讓網頁可以指定「被分享到社群時要顯示什麼」。一開始只是 Facebook 的規範，後來被 LINE、X（Twitter）、Threads、Slack 等幾乎所有主要平台採用，成為網頁與社群之間的標準語言。當你在 LINE 群組貼一個網址，畫面跳出來的那張縮圖、標題、描述，背後就是 OG 標籤在運作。

為什麼 Open Graph 對社群分享這麼重要？

同樣的網址，有 OG 標籤的分享卡片視覺豐富，吸睛又可信，點擊率高；沒設定的網址分享出去常常顯示一張平台抓錯的縮圖，不知所云的標題，甚至完全空白，使用者根本不會點。對中小品牌來說，這個落差直接決定社群行銷的 ROI——同樣的廣告預算或內容曝光，OG 設定好的能多帶 2 到 3 倍流量回網站。它不是什麼進階技巧，而是基本功，但偏偏很多網站漏設或設錯。

Open Graph 和 SEO meta 標籤差在哪？

兩種 meta 標籤寫在 HTML 的 head 區塊裡看起來很像，但服務的對象不同。SEO 用的 meta title 與 meta description 是給 Google 看的，決定搜尋結果頁長什麼樣。Open Graph 標籤則是給社群平台看的，決定網址被分享到 Facebook、LINE 時的外觀。兩者要分開設定，內容可以相關但不一定要一樣——SEO 標題要符合搜尋意圖，OG 標題可以更口語也更吸睛，因為使用情境完全不同。

Open Graph 必填的 4 個欄位

Open Graph 規範定義了很多欄位，但對中小品牌來說，把下面這 4 個寫對就解決 9 成的問題。

og:title — 分享卡片的標題

og:title 是分享卡片上顯示的大字標題。它可以和 SEO 的 meta title 不同，因為社群與搜尋的使用情境不一樣。SEO 標題講究關鍵字與點擊意圖，OG 標題則可以更直接、有情緒，目標是讓使用者在訊息流滑動時停下來點進去。長度建議控制在 60 個字以內，太長會被截斷。

og:description — 分享卡片的描述

og:description 是標題底下的小字描述，補充說明這個網頁能給點擊者什麼。建議 100 到 200 個字之間，把標題沒講完的價值補上。不要直接複製 meta description，因為兩者使用情境不同，社群分享的描述可以更口語，更聚焦在「點進來能得到什麼」。

og:image — 分享卡片的縮圖

og:image 是分享卡片上的視覺，也是視覺面最關鍵的欄位。一張好的 OG image 能讓點擊率多 2 倍以上。建議尺寸 1200×630 像素、長寬比 1.91:1，符合 Facebook、LINE、X 等多數平台的顯示規格。檔案大小控制在 8MB 以內，常見格式 jpg 或 png 都可以。圖中的文字不要太小，因為手機顯示時會被縮小到原圖的一半左右。

還有兩個底線值要記住。第一是 OG image 不能小於 200×200 像素，低於這個尺寸爬蟲會直接抓不到圖、分享卡片變成沒縮圖的純文字連結。第二是不同平台的最佳長寬比有差異：Facebook 與 X（Twitter）偏好 1.91:1 的橫向卡片，但 LINE 的分享卡片更偏向 1:1 的方形顯示，所以重要的視覺元素要放在中央區域，才不會在 LINE 上被切掉。如果品牌主力客群來自 LINE，可以額外為 LINE 場景準備一張方形圖。

og:url — 分享卡片指向的網址

og:url 是分享卡片點下去要去的網址，通常就是這個網頁本身的標準網址（canonical URL）。如果你的網站同一個內容有多個網址版本（例如帶 UTM 參數的版本），務必把 og:url 設成沒有參數的乾淨網址，避免被誤判成不同頁面、稀釋社群信號。

OG image 設計的 3 個常見錯誤

OG image 的視覺好壞直接決定點擊率，下面三個常見錯誤是台灣中小品牌最容易犯的。

  • 文字太小手機看不到：在桌機看大圖時字很清楚，到手機被縮小一半後就糊成一團。設計時務必模擬手機尺寸，重要文字至少要佔圖片寬度的 5% 以上。
  • 比例不對被裁切：不是 1.91:1 的圖在分享時會被各平台用不同方式裁切，常常重要的人臉或標題被切掉。固定用 1200×630 最安全。
  • 整張只放 Logo：分享卡片是吸引使用者點擊的視覺鉤子，不是品牌識別放置區。應該放對讀者有意義的標題或畫面，品牌 Logo 縮小放角落即可。

怎麼驗證 Open Graph 設定有沒有生效？

OG 標籤設了不代表會立刻生效，社群平台會快取舊版資料。下面三個工具是免費可用的驗證方式：

  • Facebook Sharing Debugger：貼上網址，看實際抓到的 OG 資料、預覽分享卡片、強制刷新快取。Facebook 與 Instagram 都吃這份快取。
  • X（Twitter）Card Validator：驗證 Twitter Card 的顯示效果，因為 X 同時讀 Open Graph 與 Twitter Card 兩種標籤。
  • LinkedIn Post Inspector：驗證 LinkedIn 分享時的卡片樣式，對 B2B 內容尤其重要。

每次改完 OG 標籤都應該到對應的 Debugger 強制刷新，否則使用者看到的可能仍是舊版快取。LINE 的分享卡片沒有官方驗證工具，但會自動讀 Open Graph 標籤，設好 og:image 與 og:title 就會顯示正確。

秒站把 Open Graph 設定變成後台一鍵的事

Open Graph 對自架網站來說是一個既基本又繁瑣的設定：要懂 HTML head 區塊，要產 1200×630 圖，要記得每篇文章都重新填一次，改完還要去 Debugger 刷新。秒站 x 即站力把這些技術細節全部內建，OG 設定變成後台一個欄位的事。

OG 設定面向秒站自架網站
標籤輸出後台填欄位，前台自動產生需手寫 HTML 或裝外掛
OG image沒填就用文章精選圖自動代入需另外處理 fallback
規格驗證輸出符合 Facebook 與 LINE 規範需自行測試各平台
每篇預設新文自動繼承品牌預設 OG每篇都要手動設

把 OG 設定變簡單，社群分享的點擊率才會被照顧到。如果你還在為每篇文章手動寫 OG 標籤而頭痛，秒站 x 即站力幫你把這層技術細節包起來，後台填欄位就搞定。

內文精華總結

  • Open Graph＝網頁與社群之間的標準語言：決定網址被分享到 Facebook 與 LINE 時的縮圖、標題、描述。
  • OG 和 SEO meta 不一樣：SEO 給 Google 看、OG 給社群看，內容可以相關但建議分開設定。
  • 4 個必填欄位：og:title、og:description、og:image、og:url 寫對就解決 9 成問題。
  • OG image 規格：1200×630 像素、1.91:1 比例、8MB 以內、文字要大到手機看得清。
  • 用 Debugger 驗證：Facebook、X、LinkedIn 各有官方工具，改完要強制刷新快取。

延伸閱讀

系列文章

把 OG 設定變成後台一鍵的事

每篇文章都手寫 OG 標籤太累，秒站 x 即站力幫你把這層細節內建：

重點整理

Open Graph 標籤是什麼？

Open Graph 是 Facebook 在 2010 年推出的開放協議，用 meta 標籤的形式告訴社群平台「這個網址被分享時要顯示什麼」。後來被 LINE、X、Threads 等所有主要平台採用。當你在 LINE 群組貼網址，跳出來的縮圖、標題、描述，背後就是 OG 標籤在運作。

為什麼網頁需要設 Open Graph 標籤？

同樣的網址，有 OG 標籤的分享卡片視覺豐富、可信、吸睛，點擊率高；沒設定的顯示一張平台亂抓的縮圖、不知所云的標題，使用者根本不會點。對中小品牌來說，OG 設定好的能多帶 2 到 3 倍流量回網站。

Open Graph 和 SEO meta 標籤差在哪？

SEO 的 meta title 與 meta description 是給 Google 看的，決定搜尋結果頁長什麼樣。Open Graph 標籤是給社群平台看的，決定網址被分享到 Facebook 與 LINE 時的外觀。兩者要分開設定，內容可以相關但不一定要一樣。

Open Graph 有哪些必填欄位？

對中小品牌來說，把 og:title（分享卡片標題）、og:description（描述）、og:image（縮圖）、og:url（指向的網址）這 4 個寫對就解決 9 成問題。Open Graph 規範還有更多欄位例如 og:type、og:site_name，但這 4 個是基本必填。

OG image 該用多大尺寸？

建議 1200×630 像素、長寬比 1.91:1，符合 Facebook、LINE、X 等多數平台的顯示規格。檔案大小控制在 8MB 以內，常見格式 jpg 或 png 都可以。圖中的文字不要太小，因為手機顯示時會被縮小到原圖的一半左右。

怎麼驗證 OG 設定有沒有生效？

用 Facebook Sharing Debugger、X Card Validator、LinkedIn Post Inspector 三個官方工具貼上網址驗證，能看到平台實際抓到的 OG 資料與分享卡片預覽。每次改完 OG 都要到 Debugger 強制刷新，否則使用者看到的可能仍是舊版快取。

改了 OG 標籤後 LINE 還顯示舊圖怎麼辦？

LINE 沒有官方 Debugger，但會自動讀 Open Graph 標籤。改完 OG 後 LINE 仍顯示舊圖通常是快取問題，可以先在 Facebook Sharing Debugger 強制刷新（很多平台會跟著更新），或在網址後加一個無意義參數（例如 ?v=2）讓 LINE 把它視為新網址重新抓取。

沒時間每篇文章手動設 OG 怎麼辦？

用一個能在後台直接填 OG 欄位、或自動用文章精選圖當 OG image 的網站平台。秒站 x 即站力把 OG 標籤輸出內建在後台，新文章自動繼承品牌預設 OG，沒填的也會用精選圖當 fallback，免去自架網站「每篇手動寫 HTML head」的繁瑣流程。

分享此文章：

相關文章