| 你是否曾經分享網站鏈接後發現預覽圖不美觀，標題和描述也不完整？ 「 Open Graph 」不僅能讓你分享的內容更加豐富，還能提升網站的點擊率和用戶互動體驗。 接下來，讓 Web5 Studio 帶你快速了解什麼是 OG、為何要設置它、如何正確設定， 讓你網站的每次分享都能脫穎而出！ |
目錄
- 什麼是 Open Graph（OG）？
- 為什麼要設定 OG？如何設定？
- 常見的 OG 設定錯誤與解決方法
- 結論：OG 對行銷活動的重要性
什麼是Open Graph（OG）？
Open Graph（簡稱 OG ）是由 Facebook 開發的一項技術，旨在通過 Meta Tag 豐富用戶在社交平台上分享的內容。當一個網站設置了 OG 標籤後，當用戶將該網站的鏈接分享到 Facebook、Twitter 或 LINE 等平台時，這些 Meta Tag 會控制顯示的標題、描述、圖片和網址，確保用戶分享的資訊更加美觀、統一和有吸引力。
在數位行銷的世界裡，讓網站能夠以最佳方式呈現在社群媒體上是非常重要的。透過 OG 設定，品牌不僅可以控制分享的內容，還能增強用戶點擊和互動的機會。
為什麼要設定 Open Graph？
Open Graph 設定不僅僅是為了美化內容，還有實質性的行銷效益：
- 提升用戶分享體驗
當用戶分享網站內容時，透過 OG 設定的豐富信息和圖片可以讓分享的內容更具吸引力，從而提高點擊率。 - 增加點擊率與曝光度
OG 設定可以使社群分享的內容精確展示，吸引更多的用戶點擊，進而增加品牌的曝光度和網站流量。 - 改善品牌形象與專業度
通過精確的 OG 標籤設置，品牌可以確保每次分享內容時都保持統一且專業的形象，增強用戶對品牌的信任。
如何設定 Open Graph？
要在網站中成功應用 OG 標籤，以下是必須的 Meta Tag 屬性和規則：
- 必須的 Meta Tag 屬性
og:title：網頁標題og:description：網頁簡介og:image：預覽圖og:url：網頁網址
- 如何選擇合適的 OG 圖像尺寸
圖像是用戶在社群分享時第一眼看到的內容，因此需要確保圖片適合不同平台的顯示格式。建議使用 1200px × 630px 的尺寸，這樣可以避免在 Facebook 裁切成 16:9 時上方和下方被遮蔽，或者在 Twitter 和 LINE 等平台裁切成 1:1 時左右被遮蔽。 - 標題與文案的最佳字數（如下圖）
標題字數應控制在 28 字以內，這樣可以確保所有字元能完整呈現。
文案建議控制在 29 字以內，避免因字數過長而被截斷。 - 圖片置中的重要性
圖片中的關鍵內容應放在圖片的中心部分，這樣可以防止圖片在各個平台的自動裁切機制中失去重要訊息。
常見的 OG 設定錯誤與解決方法
- 圖片無法顯示
確保og:image中的 URL 正確無誤，並且圖片已經被公開存取，否則平台無法抓取圖片。 - 文字過長或格式錯誤
如果分享的標題或描述過長，會導致平台截斷顯示，影響內容的完整性。因此，應遵循上述的字數限制。 - 網頁無法正確讀取 OG 資料
如果網站沒有正確設置 OG 標籤，或者標籤拼寫錯誤，分享時的預覽內容會不完整。使用 Facebook Debugger 工具進行測試，並修正標籤中的錯誤。 - 分享後 OG 縮圖遭裁切？
分享至聊天室時縮圖尺寸跑版的類似問題，主要是因各平台會自行裁切預覽的縮圖。如：FB 尺寸依循 16:9 上下會被遮蔽；Twitter、WhatsApp、LINE 依循 1:1 左右會被遮蔽。
若非使用「社群 API 分享機制」 ，就只能設定一種尺寸的 OG 圖，建議將 9:16 的 OG 圖片調整成重點文字和素材置中 (如下圖)
結論：Open Graph 對行銷活動的重要性
Open Graph 的設定對於任何網站或品牌來說都是非常重要的。它不僅能增強分享時的內容豐富性，還能提升用戶的互動體驗，從而幫助品牌在社群平台上獲得更高的曝光和更好的點擊率。
Web5 活動預設分享後的畫面為「網址＋OG」。若要呈現「文字＋網址＋OG」則會因裝置版本與機型有所不同 (如下圖) 。
如果你對 Open Graph 的設定有任何疑問，請隨時聯繫我們，我們將提供專業的協助，幫助你完成 OG 設置，並優化你的行銷效果。
