你有沒有遇過，當你分享網站連結到 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>