你有沒有遇過，當你分享網站連結到 Facebook 時，出現了詭異的縮圖，甚至連縮圖、介紹都沒有，不寫個訊息的話，完全不會讓人想點進去，有人可能還會以為你被盜了😅

這不是被盜！是你應該設定 OG，給用戶理解和信任的網站體驗。

OG 是什麼

OG 是由 Facebook 提出的設定，全名為 Open Graph Protocol，官方中文翻譯為「開放社交關係圖」。
OG 可以輕鬆的標記網頁的結構化訊息、包含標題、描述、圖片等，以呈現顯示分享連結的預覽內容，現在主流的社群網站平台都支援 OG，例如：Facebook、Line、Twitter 等。
OG 可以呈現網站明確的模樣，增加用戶的信任與好的網站體驗，相對的也會有比較好的點閱率。

設定 OG

要設定 OG 其實很簡單，首先了解每個 og 屬性的意義

<head>
  <meta property="og:url" content="你的網址"/>
  <meta property="og:locale" content="網站語系，ex:zh_TW，預設為 en_US" />
  <meta property="og:type" content="類型，ex：website" />
  <meta property="og:title" content="網站的標題" />
  <meta property="og:description" content="網站內容描述"/>
  <meta property="og:image" content="縮圖圖片連結" />
  <meta property="og:image:type" content="圖像的 MIME 類型，可為 image/jpeg、image/gif 或 image/png" />
  <meta property="og:image:width" content="縮圖寬度" />
  <meta property="og:image:height" content="縮圖高度" />
</head>

其中縮圖的寬、高度依官方建議的比例，對高解析度裝置使用至少 1080 像素的寬度以獲得最佳顯示，至少使用寬度為 600 像素的圖像以顯示圖像連結廣告。
🔸 正方形：比例 1:1，如 600 x 600 像素
🔸 長方形：比例 1.91:1，如 600 x 314 像素

接著設定到自己的網站

<head>
  <meta property="og:url" content="https://happy9990929.github.io/gtplay"/>
  <meta property="og:locale" content="zh_TW" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="GTPLAY吉他館" />
  <meta property="og:description" content="販賣各式弦樂器，吉他、電吉他、烏克莉莉等，歡迎洽詢!"/>
  <meta property="og:image" content="https://happy9990929.github.io/gtplay/logo.png" />
  <meta property="og:image:type" content="image/png" />
  <meta property="og:image:width" content="1080" />
  <meta property="og:image:height" content="565" />
</head>

檢查 OG

可以透過 Facebook分享偵錯工具來檢查你的 OG，輸入網址，就可以預覽你的成果囉！

設定完 og 後，到 Facebook 建立貼文，就可以看到清楚的網站資訊啦！
是不是看起來漂亮多了呢🤩快把你的網站也設定一下吧！

Facebook 官方文件:

Facebook 開放社交關係圖
 Facebook 分享最佳作法

Hey！想學習更多前端知識嗎?

最近 Lala 開了前端課程 👉【實地掌握RWD - 12小時新手實戰班】👈
無論您是 0 基礎新手，又或是想學 RWD 的初學者，
我們將帶你從零開始，深入了解並掌握 RWD 響應式網頁設計的核心技術，快來一起看看吧 😊

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Lala Code

設定 OG 分享網址連結，讓你的網站更吸引人

OG 是什麼

設定 OG

檢查 OG

Facebook 官方文件:

Hey！想學習更多前端知識嗎?

🚀線上課程分享

Hahow

六角學院

Udemy