我們經常在社群平臺上看到朋友分享的文章或是連結，點進去卻發現內容和標題不符，這就是沒有設定好 OGP （Open Graph Protocol）的結果！然而，OGP 是什麼？該如何設置？想要讓你的網頁在社群分享時能夠吸引更多使用者點擊，就讓我們來為你一一說明，教你透過 OGP 設定，把你的網站推上社群網路的浪頭，讓更多人看到你的內容！
OGP (Open Graph Tags) 是什麼？
OGP(Open Graph Tags) 最初是由 Facebook 提出的一個協議，透過在網頁中插入 OGP 標籤，社群媒體在分享頁面時，就可以根據頁面中OGP資訊顯示對應的資訊。而後其他社交媒體平台如 Twitter、LinkedIn 也相繼採用協議，因此OGP漸漸成為建設網佔時，必定會注重的功能之一。
詳細介紹可見OGP官方文件：https://ogp.me/
以下圖為例，當我們在Facebook貼文時，FB會先到我們的頁面爬取OGP的資料，當他找到我們設定的圖片資料後，就會直接顯示在貼文中，不只增加了美觀性，更能讓讀者更佳了解文章內容而提高吸睛度。
為什麼要設定 OGP？缺少會有什麼影響？
在網頁中設定 OGP 可以大幅提升網頁在社群媒體平臺上的呈現效果，若未設定或是設定不當，則可能會導致以下負面影響：
- 資訊不完整或不正確：若未設定 OGP，社群平臺可能會隨機抓取網頁內容，導致顯示的標題、敘述或圖片不完整、不正確甚至不具吸引力。
- 降低點擊率：錯誤或不當的資訊會讓使用者無法準確預期網頁內容，進而降低點擊率，甚至可能引起反感，進而降低該網頁在社群平臺上的分享次數。
- 影響品牌形象：若顯示的資訊不正確、不完整或不具吸引力，可能會影響該網站或品牌在使用者心中的形象。
- 影響搜尋引擎優化（SEO）：雖然 OGP 並不直接影響搜尋引擎排名，但若能夠透過 OGP 設定來提升網頁在社群平臺上的分享次數和點擊率，則也能間接地提升網頁的流量和曝光率，進而對 SEO 產生正面影響。
延伸閱讀：SEO是什麼？2025 SEO優化指南，6大排名因素與優化4步驟懶人包
OGP 常見屬性說明
以下我們也將為你說明，在設定 OGP 時，較常見的屬性有哪些？又該如何填寫？
- og:title：網頁的標題，建議字數最多只設定到50字(100字元)，超過則會被系統省略
- og:description：網頁的描述，此處建議最多設定80字(16字元)，超過則會被系統省略
- og:type：網頁的類型，如 “article”、”website”、”video” 等。
- og:url：網頁的網址，照實貼上頁面
- og:image：網頁的預覽圖片 URL，但必須遵守以下規範
- 圖像檔案大小不可超過 8 MB。
- 可接受的圖像尺寸下限是 200 x 200 像素
- 建議使用至少 1200 x 630 像素的圖像，在高解析度裝置時才能呈現最佳顯示效果
- 至少應使用 600 x 315 像素的圖像，才能顯示圖像較大的連結粉絲專頁貼文
og:image 進階設定與常見錯誤
多張圖片設定：若想要在網頁中設定一張以上的 og:image，則應分別用多個標籤來指定每個圖片的 URL。
<meta property="og:image" content="https://www.example.com/image1.jpg" />
<meta property="og:image" content="https://www.example.com/image2.jpg" />圖片尺寸與格式：建議圖片尺寸至少為 1200 x 630 像素（參考自Facebook），以確保在各大社群平臺上顯示的清晰度。此外，圖片檔案格式應為常見的網路圖片格式，如：JPEG 或 PNG。檔案大小則應控制在 5MB 以下（參考自Twitter）。
常見錯誤：在設定 og:image 時，以下有 3 大常見錯誤，可能會導致社群平臺擷取不到圖片，或是顯示錯誤。建議可在設定前先行檢查，以避免上述問題的發生。
| 常見錯誤 | 說明 |
|---|---|
| 圖片 URL 使用相對路徑 | 圖片 URL 應採用絕對路徑，包含完整的網域名稱，以確保社群平臺可以正確擷取圖片。 |
| 圖片 URL 使用 https 而非 http | 若網站使用 HTTPS，則圖片 URL 也應使用 HTTPS，以確保圖片可以正確載入。 |
| 未授權社群平臺抓取圖片 | 確保網站伺服器的 robots.txt 檔案沒有禁止社群媒體平臺的抓取工具（如：Facebook 的 facebookexternalhit）抓取圖片。 |
OGP 該如何設定？
通常在有網站後台的情況下，可以透過以下方式來設定 OGP 標籤：
- 在網站後台欄位中修改 OGP
若網站後台有提供 OGP 標籤的欄位，則可直接在後台輸入各欄位的內容，系統會自動將其轉換為原始碼，並加入到網頁的 HTML 中。
以wordpress作為範例，你可以在後台中安裝Yoast外掛，該外掛除了一般的SEO設定之外，編輯文章時，編輯頁面的最下方會出現Yoast的設定區塊，而其中的「社交網路服務」則是控制OPG的欄位。
網站管理者只需要依照提示填入訊息及照片，即可以完成OPG的設定！
- 直接修改原始碼
若網站後台未提供 OGP 標籤的欄位，則可請開發人員直接修改網頁的 HTML 原始碼，並加入相應的 OGP 標籤。
如何確認網站已加入 OGP 標籤？
- 查看原始碼：
最簡單的方法就是直接在網頁上按下「Ctrl + U」即可檢視該網頁的原始碼，並在其中尋找 OGP 標籤。
- 使用社群平台 Debug 工具：
已見室另外分享Meta for Developers偵錯工具，確認網站在FB分享連結時會如何被顯示出來的同時，直接讓你確認那些代碼有遺漏！
只需要在頁面上輸入你要頁面的網址並按下抓取，就會如同下圖一樣，顯示OGP資料！
各大社群平台對 OGP 的支援與特殊要求
以下我們也整理出各大社群對於 OGP 的支援程度與特殊要求，讓你在設定時可以更加得心應手！
| LINE | |||||
|---|---|---|---|---|---|
| 支援程度 | 完全支援 OGP | 支援 OGP，並有額外屬性（Twitter Cards） | 支援 OGP，未提供官方說明 | 完全支援 OGP，未提供官方說明 | 支援 OGP，未提供官方說明 |
| 特殊要求 | 完全依賴 OGP | 需要額外添加 Twitter Cards 屬性 | 需要添加 og:image、og:title、og:description | 需要添加 og:image、og:title、og:description | 需要添加 og:image、og:title |
| og:image 要求 | 圖片最小尺寸為 1200 x 630 像素，最大檔案大小為 8MB | 圖片最小尺寸為 300 x 157 像素，最大檔案大小為 5MB | 無明確要求，但建議遵循 Facebook 的圖片要求 | 圖片寬度需至少 144 像素，高度至少 144 像素，且需小於 3MB | 圖片寬度需至少 200 像素，高度至少 200 像素，且需小於 20MB |
⚠ 注意：以上資訊為一般情況說明，實際支援程度與要求仍須以官方公告為準。
常見問題與重點整理
什麼是open graph tags?
Open Graph Tags 是一種用於描述網頁內容的標籤，主要是讓社群媒體平臺可以正確擷取網頁內容，並在分享時顯示出完整且具吸引力的資訊。
我該如何確認open graph tags
可以透過查看網頁原始碼，或是參照前面的說明，使用Meta for Developers偵錯工具來確認網頁是否已加入 OGP 標籤。
想要讓你的網頁在社群平臺上更具吸引力，並吸引更多使用者點擊？那就趕緊參考上述教學，將 OGP 設定妥當，讓你的網頁在社群平臺上大放異彩！如果你也正在為SEO優化而煩惱，就歡迎追蹤己見室與FB粉絲團，讓我們帶你一起衝刺SEO！如果你有任何問題，也歡迎在下方留言，我們都很樂意為你解答。
Last Updated on 17 7 月, 2025 by 己見室
