在 FB、LINE 等..社群媒體上分享網站連結時，該怎麼做，才能獲得更好的 點擊率 呢？
關鍵就是使用 Open Graph 標籤！透過設定 OG 標籤，可以優化連結在社群平台上的預覽效果，讓你的連結分享看起來更專業！
這篇文章將要帶大家深入了解 OG 標籤是什麼、對 SEO 有哪些影響，並教你如何正確設定 OG title、OG description、OG image 尺寸等..。更多 SEO 是什麼。
最後再分享幾款偵錯工具，幫助你檢查連結預覽是否正確顯示，進行除錯。
準備好就開始吧：）
Open Graph OG 標籤是什麼？
OG 標籤（Open Graph Meta Tags），中文名稱為「 開放社交關係圖 」標籤，是由 Facebook 開發的技術，通常埋在 head 程式碼中，可用來優化連結的預覽效果。
當你在社群網站分享某個網頁連結時，一般會顯示網站標題、描述文字＆縮圖，這些資訊就是透過 OG image、OG title、OG description 等..Open Graph 標籤設定的。
透過設定 OG 標籤，站長們可以明確指定這些資訊，以確保呈現最高品質、具吸引力的網站預覽。
其他社群媒體網站，像是 LINE、LinkedIn、Twitter 等..，也都會使用 og meta 標籤。
所以，不管你是經營什麼類型的網站，想讓自己的頁面連結在社群上看起來更專業，就來設定 Open Graph preview 吧！
OG 標籤會影響 SEO 嗎？
那麼設定 OG 標籤，就可以提升網站 SEO 排名嗎？
其實 Open Graph 並不是 Google 搜尋引擎作為排名的依據，但它會間接影響網站 SEO 表現。
如果沒有設定 OG 標籤，社群媒體爬蟲就只能隨機抓取網頁的標題、內容＆圖片，可能會抓到沒什麼意義的文字，甚至沒有預覽圖，導致分享效果大打折扣。
透過 OG title 和 OG description 標籤，站長可以設定適合社群平台的 CTA 標題＆描述文字，並利用 Open Graph image 標籤，指定吸睛預覽圖，優化連結預覽效果。更多 CTA 是什麼。
這些設定不僅能讓網頁連結更吸眼球，也能讓用戶輕鬆理解網頁主題，進而提升點擊率，為網站帶來更多的社群流量。
總結來說，Open Graph 標籤是提升社群平台分享效果的利器，雖然不是直接影響 SEO 排名的因素，但卻能間接幫助網站在 SEO 上的表現！
OG 標籤屬性
在 Facebook 官方的 分享指南 中，有列出 Open Graph 標籤的多種屬性類型，像是 OG image、OG video、OG url 等..。
以下為站長們整理出幾個常用的 OG 標籤屬性、功能＆用法，方便大家瞭解如何設定。
常見形式一：「 og:image 」
指在社群平台分享網址時，出現的預覽圖片，是影響點擊率的重要關鍵！使用優質的預覽圖，可有效吸引用戶注意，提升點擊率。
og image 尺寸建議使用 1200 * 630 px，這符合大多數社群媒體平台的顯示參數，比較能確保預覽圖的品質。
此外，Open Graph image 建議用 JPG 或 PNG 檔，這兩種格式除了能確保影像品質，也能被多數的平台接受。
程式碼用法：
<meta property=”og:image” content=”預覽圖連結”>
常見形式二：「 og:url 」
表示將網頁分享到社群媒體平台時，顯示的網址。
這個 url 應設定為無參數的標準網址，例如「 https://example.com/post-title 」，而不是「 https://example.com/post-title?utm_source=facebook 」。
Facebook 會統計所有的按讚＆分享，並匯總到這個 url 網址中。
程式碼用法：
<meta property=”og:url” content=”網址連結”>
常見形式三：「 og:title 」
將網頁分享到社群媒體平台時，顯示的主標題。通常會和 meta title（顯示於搜尋引擎結果的網頁標題）相同。更多 SEO 標題技巧。
標題要盡可能簡短又有吸引力，建議中文不超過 30 個字。
程式碼用法：
<meta property=”og:title” content=”標題”>
常見形式四：「 og:description 」
顯示在 OG 標題下方的頁面描述，可放上簡短的內容，讓用戶知道點擊連結可以看到什麼內容、獲得哪些好處。
描述文字要盡可能吸引用戶的注意力，鼓勵用戶點擊，最好簡短 1-2 句話就結束，避免內容被截斷。
程式碼用法：
<meta property=”og:description” content=”描述文字”>
官方列出的標籤有非常多種，但基本上只要包含這四個，就可以良好的控制社群分享連結顯示方式。
| Open Graph 標籤 | 功用 |
|---|---|
| og:image | 網頁連結預覽圖，是影響點擊率的重要關鍵 |
| og:url | 將網頁分享到社群時顯示的網址，應設定為無參數的標準網址 |
| og:title | 分享網頁時顯示的主標題，通常會和 meta title 相同 |
| og:description | 會顯示在 OG 標題下方，可放上簡短的內容描述，盡可能發想有吸引力的文案 |
OG image 尺寸建議
當我們分享網站連結到社群平台時，OG 預覽圖往往是最吸引用戶目光的元素，但不是所有圖片都適合用於 OG image。Facebook 官方文件 針對 Open Graph image size 有明確的說明。
一般建議 OG image 尺寸使用 1200 * 630 px，才能在高解析度裝置上呈現最佳效果。若無法達到上述尺寸，也建議至少要 600 * 315 px，以支援社群平台大圖預覽。
如果使用小於 600 * 315 px 的圖片，在連結預覽中，圖片將以較小的預覽圖顯示，吸睛程度會有所影響。
需要注意！圖片尺寸絕對不要小於 200 * 200 px，若小於這個尺寸，爬蟲可能會抓不到圖片，導致連結沒有預覽圖，降低分享效果。
此外，圖檔大小不可超過 8 MB，建議站長可使用 圖檔壓縮軟體，事先縮小圖檔。
而不同社群平台的預覽圖顯示比例也會不同，像是 FB、Twitter、LinkedIn 的連結預覽圖長寬比最好是使用 1.91：1，LINE 的預覽圖長寬比則是 1：1。
選擇正確的預覽圖尺寸，可以有效避免出現裁切不完整或模糊的情況，讓你的分享連結看起來更美觀、專業！
WordPress OG 設定
若是使用 WordPress 架站的站長，可利用像是 Rank Math、Yoast 等..SEO 外掛，輕鬆設定 OG 標籤。
以下用免費的 Rank Math 外掛示範。首先，可先前往 WordPress 後台安裝＆啟用外掛。更多 Rank Math 教學。
啟用後可前往 Titles & Meta 分頁，找到文章＆頁面，這邊可以看見 Rank Math 已經有幫我們預設參數，讓每個頁面或文章分享到社群平台時，可顯示該頁的標題、描述等..。
之後我們可以前往要分享連結的文章頁面，進入 Rank Math > Social，應該就會跳出設定視窗，若沒有也可以點選 Edit Snippet。
接著可以預覽連結分享到 Facebook 或 Twitter 上的實際呈現樣貌，下方有標題、描述欄位，都可以再自行做調整，也能指定 OG 預覽圖。
Rank Math 還能設定更多 OG 標籤，像是文章作者、發表時間等..，不過通常有標題、描述＆預覽圖就夠了，若需要更多設定的站長，可參考 Rank Math 官方教學。
如何檢查 / 除錯 OG 標籤？
Open Graph 標籤如果設定不正確，可能會導致連結預覽顯示錯誤，影響點擊率。或是當網站內容更新時，社群爬蟲沒有同步更新，預覽就仍會顯示舊的資訊。
還好各大社群平台都有推出 OG 偵錯工具，幫助站長檢查 / 除錯 OG 標籤，確保內容正確呈現。
以下分享 LINE、Facebook（包含 Messenger）、LinkedIn 這三大社群平台的偵錯工具。
Line Page Poker
Line Page Poker 是 LINE 官方推出的偵錯工具，可以檢查連結預覽在 LINE 社群上是否正常顯示，不論是網站連結、YouTube 影片連結等..，都可以偵測。
進入 Line Page Poker 後，只需貼上 url 網址連結，Language 選擇 Chinese – Taiwan，就可以開始進行偵測。
通常約一分鐘內就可以爬出連結預覽，包含 og url、og title、og image、og image size 等..，都會清楚列出。
若你發現 OG 數據錯誤，或是舊的資訊沒有更新的話，可先確認網站 OG 標籤是否設定正確，之後回到 Line Page Poker，點選上方的 Clear Cache 清除快取，再次送出偵測，應該就會看見預覽內容被更新囉！
Meta 分享偵錯工具（Facebook）
Meta 分享偵錯工具 是 Facebook 提供的專業偵錯工具，可以檢查網站、YouTube 等..連結分享到 Facebook、Messenger 上的狀況，並檢測是否有任何問題。
使用前需要先登入 Facebook 帳號（任一帳號即可），之後將要檢測的網址貼上，工具會顯示標題、描述、預覽圖等..詳細資訊。
若有缺少或設置錯誤的 OG 標籤，則會顯示在「 應處理的警告 」中，讓站長清楚知道網頁有哪些 OG 設定需要加強。
改善 OG 標籤設定後，可以再回來點選「 再次抓取 」，應該就沒問題囉：）
LinkedIn Post Inspector
LinkedIn Post Inspector 是 LinkedIn 官方提供的貼文檢查器，可以幫助你確認頁面上缺少的數據，並告訴你還需要添加哪些內容，才能讓連結獲得更好的預覽。
LinkedIn Post Inspector 可接受任何類型的連結，像是網站連結、YouTube 影片連結等..。
LinkedIn Post Inspector 會列出 og title、og image、og author 等..內容，資訊算是滿完整的。
若你的內容有做更新，也可以使用 LinkedIn Post Inspector 除錯，要求重新抓取新的內容，確保連結預覽顯示正確資訊。
好啦！以上就是今天的分享，希望有幫助你更瞭解怎麼設定 OG 標籤，讓你的分享連結看起來更吸睛！
常見問題
Open Graph OG 標籤是什麼？
OG 標籤（Open Graph Meta Tags），中文名稱為「 開放社交關係圖 」標籤，可用來優化連結的預覽效果。
當你在社群網站分享某個網頁連結時，通常會顯示網站標題、描述文字＆縮圖。透過設定 OG 標籤，站長們可以明確指定這些資訊，以確保呈現最高品質、具吸引力的網站預覽。
OG 標籤會影響 SEO 嗎？
Open Graph 並不是 Google 搜尋引擎作為排名的依據，但它會間接影響網站 SEO 表現。若沒有設定 OG 標籤，社群媒體爬蟲就只能隨機抓取內容，可能沒什麼重點，導致分享效果大打折扣。
設定 OG 標籤可以指定連結標題、描述、預覽圖等..，不僅能讓連結預覽更吸眼球，也能讓用戶輕鬆理解網頁主題，進而提升點擊率，為網站帶來更多社群流量。
OG image 尺寸建議為？
一般建議 OG image 尺寸使用 1200 * 630 px，才能在高解析度裝置上呈現最佳效果。若無法達到上述尺寸，也建議至少要 600 * 315 px，以支援社群平台大圖預覽。
圖片尺寸絕對不要小於 200 * 200 px，若小於這個尺寸，爬蟲可能會抓不到圖片，導致連結沒有預覽圖，降低分享效果。
如何設定 OG 標籤？
OG 標籤一般會放在網站 head 程式碼中。若是使用 WordPress 架站的站長，可利用像是 Rank Math、Yoast 等..SEO 外掛，輕鬆設定 OG 標籤，相關步驟可參考本文說明：）
WordPress 學習資源
學習網站架設＋網路行銷的過程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！
接下來，額外分享 2 項實用資源，可有效幫助大家做學習。
資源一：犬哥數位（專業 WordPress 網頁設計公司）
如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位（WordPress 網頁設計公司），請專家製作會更有效率！
我們有多年網頁設計經驗，加上上百個實戰高質感作品，絕對能滿足您的需求！
資源二：WordPress＋SEO 超強線上課程
這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗，從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站，3 大類型網站建置方法等 .. 豐富內容，一次教會你。
課程內容非常的紮實（長度超過 20 小時）。如果你剛學習自架網站，這門課程可以讓你用最快的速度，就學會這項技能！
網站建立完畢後，但卻沒有流量怎麼辦？或是只能靠花錢投廣告才會有訂單？
這門 SEO 排名飆升課，教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等 ..，大幅提升行銷能力。
帶你衝上 Google 排名第一頁，大量提升網站營收和訂單！
