Open Graph標籤,用OG讓網站分享到社群平台更美觀! 網頁設計

user

Open Graph標籤,用OG讓網站分享到社群平台更美觀!天矽科技網頁設計

 

Open Graph(OG)標籤,是控制使用者在分享網站到社群平台,如Facebook、LINE或其他社群上顯示的基本資訊,像是標題、描述與縮圖,都是使用mata og所設定的。

Open Graph是什麼?

 Open Graph 全名為 Open Graph Protocol 開放社交關係圖開放圖譜協議,一般簡稱為 OG,它是 Facebook 在2021年所推出、利用 Meta Tag(Meta標籤) 來完成的一項技術,是專為社群平台分享而生的標籤,而其目是希望能讓使用者在社群分享網站時,能讓資訊呈現得更加豐富且美觀。

 以最多人使用的 LINE 舉例,當我們分享網站給其他人的時候,LINE 訊息會自動將網站設定好 OG標籤的標題、描述 縮圖帶出並呈現,讓網站的資訊能更更加一目瞭然並一眼看出網站連結的內容。

 如果網站沒有設定 OG 標籤、沒有告訴社群平台該顯示哪些東西,社群平台可能會為了給使用者更好的體驗而自動抓取資訊並顯示網站標題與描述,但不是所有社群平台都會這麼做,因此如果網站沒有設定 OG,當使用者在社群平台分享網站連結時,可能出現的就只有一串網址而已,如此網站還有可能會讓人誤以為是釣魚或詐騙網站而不願意點選。

OG是什麼

 

網站的Open Graph(OG)屬性

 在這個注重使用者體驗的時代,網站加入 OG 標籤讓分享更加美觀已成基本功能與要素,其基本標籤如下:

  • og: title
    設定網站分享時所展示的標題,此處通常與網站的 title 標籤相同,但也有些網站會另外設定。
  • og: description
    設定網站分享時所展示的描述,大多網站的 og:description 會與網站的 description 標籤相同,但也有些網站會另外設定。
  • og: type
    設定網站分享的類型,比如 video.movie 或 article,可根據指定的類型添加不同的屬性。
  • og: image
    設定要顯示的圖片連結。
  • og: url
    設定一個指定要分享的連結網址(URL)或當前頁面的連結網址(URL)。

OG在社群的顯示

社群分享連結內容錯誤

 透過 OG 標籤的設定,讓使用者可以在社群平台的連結分享訊息中,快速看到網站的標題、描述與縮圖,讓使用者都能透過這些資訊來預覽與了解該網站的內容資訊

 若是網站管理者或工程人員將這些 OG 標籤的資訊進行修改或置換,那麼社群連結所顯示的資訊,仍有可能一樣顯示舊的資料且不會變更得這麼快,如果沒有特別處理,就會需要等待一段時間並等到暫存過期才會重新抓取新的資料;因此網站管理者或工程人員在修改資訊後,可以自行使用相關工具自行手動更新來避免這種情況發生。

 以最多人使用、最常發生且最多人詢問的 Facebook 與 LINE 為例,這兩個平台都提供了相關的工具可使用,如下。

※ 若使用相關工具還是無法解決,則可詢問開發網站的設計公司協助處理,但如果還是無法解決,亦可等待暫存時間過期即可正常顯示。

 

Facebook Debugger

  1. 進入Facebook Debugger偵錯工具
  2. 將連結URL貼入欄框
  3. 按下「偵錯」
  4. 下方則會出現相關的建議及資訊
  5. 在「抓取時間」旁按下「再次抓取」
  6. 完成

FB偵錯工具

 

LINE Page Poker

  1. 進入LINE Page Poker
  2. 將連結URL貼入欄框
  3. 選擇網站語言
  4. 清除快取資料重新抓取(要打勾)
  5. 按下「Submit」提交
  6. 完成

LINE偵錯工具

LINE OG資訊

▲LINE Page Poker與Facebook Debugger工具都會顯示資訊內容,並提供分享預覽畫面給使用者參考

 

參考資料:
電腦王阿達|LINE 分享連結網站縮圖標題錯誤、無法顯示?用這工具可強制更新修正
知乎|前端应该知道的:开放图谱协议(The Open Graph protocol)
OpenGraph|Preview Social Media Share and Generate Metatags
※可查看Facebook、Twitter、LinkedIn、Discord 的OG結果,還可協助產生OG 標籤

延伸閱讀:
【分享問題】網址連結分享到社群,資訊卻出不來?怎麼辦?

 

share

FB


LINE

回上一頁

延伸閱讀