Open Graph 開放社交關係圖

認識 Open Graph，
讓你的網站在社交媒體上漂亮的分享!
或是避免被當成詐騙網站 (>﹏<)

Open Graph 介紹
OG 設定與解說
- 代碼範例
- og:type 的種類
- 套用 Open Graph 設定的社交媒體網站
- 常見社群的 Open Graph (OG) 預覽圖片尺寸推薦
- 測試工具

Open Graph 介紹

Open Graph 是一種協議，
讓你的網站在社交媒體上分享時能呈現更好的預覽內容。

The Open Graph protocol enables any web page to become a rich object in a social graph.
For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

OG 設定與解說

代碼範例

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Open Graph 設定 -->
  <meta property="og:title" content="你的網頁標題" />
  <meta property="og:description" content="網頁的描述內容" />
  <meta property="og:image" content="網頁的分享圖片 URL" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="你的網頁 URL" />

  <!-- SEO 設定 -->
  <title>你的網頁標題</title>
  <meta name="description" content="網頁的描述內容" />
</head>

og:type 的種類

類型	描述
website	整個網站的類型。通常用於網站首頁。
article	文章類型的內容，如新聞、部落格文章等。
video	影片類型的內容，可以是影片網址或頁面。
music.song	音樂單曲或歌曲的類型。
music.album	音樂專輯的類型。
music.playlist	音樂播放清單的類型。
book	書籍類型的內容，如小說、散文等。
profile	個人或專頁類型的內容，如社交媒體資料。
place	地點類型的內容，如商家、餐廳、景點等。
product	實物或數位產品類型的內容，如商品頁面。

套用 Open Graph 設定的社交媒體網站

Facebook
Line
Instagram (透過分享到 Facebook)
Twitter
LinkedIn
Pinterest
WhatsApp

常見社群的 Open Graph (OG) 預覽圖片尺寸推薦

平台	圖片尺寸（像素）	最小尺寸（像素）	最大圖片大小	備註
Facebook	1200 x 630	600 x 315	5 MB
Twitter	1200 x 675	300 x 157	5 MB
LinkedIn	1200 x 627	80 x 150	5 MB
Instagram	1080 x 1080	–	5 MB	方形圖片推薦
	1080 x 566	–		橫向圖片推薦
	1080 x 1350	–		直向圖片推薦
Pinterest	600 x 900	100 x 200	20 MB
LINE	1200 x 627	–	10 MB	方形圖片推薦