如何不讓縮圖毀掉你的設計？
Open Graph 讓你的網站呈現「最好的樣子」！
6 min readJan 27, 2019
你有遇過費盡苦心設計好美美的網站，分享在 Facebook、或是用 Facebook 打廣告的時候，呈現出來的縮圖卻是一個奇怪角落，而不是你精心設計、漂亮的主視覺嗎？
不要說不好看，如果一個縮圖讓你看不出頭緒、不吸引人，你會很想點進去看嗎？大概是下圖這個樣子：
沒有設定 OG 的話，範例中的網站只會跑出迷樣的藍色形狀，有設定的話就會是我想呈現的樣子，在 Facebook 的完整預覽圖會是這樣：
設定好 OG 幫助網站呈現最好看的模樣！
所以 OG 是什麼？
OG 全名 Open Graph Protocol，是由 Facebook 提出，官方翻譯叫做「開放社交關係圖」，不同的社群平台有不同設定，像是 Twitter 有自己的工具叫做 Twitter Card，不過原理是相同的。
目的在於透過定義網站性質、Title、縮圖網址等等屬性，幫助社群平台爬蟲更輕鬆得梳理並找出你網站的重點，沒有的話就會是隨機生成的結果，如果生成的預覽結果不好看，就很難吸引人家點下去了對吧？
而且 OG 的設定非常簡單。
Open Graph 如何設定？
把這些放進你網站中的 <head> 標籤裡面，然後輸入需要的資訊：
<head><!-- Facebook Opengraph -->
<meta property="og:url" content="你的網址"/>
<meta property="og:locale" content="你的網站語系" />
<meta property="og:type" content="website" />
<meta property="og:title" content="網站標題" />
<meta property="og:description" content="網頁描述"/>
<meta property="og:image" content="縮圖圖片連結" />
<meta property="og:image:alt" content="縮圖說明文字" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="縮圖width" />
<meta property="og:image:height" content="縮圖height" />
<!-- End Facebook Opengraph --></head>
就完成了！
如果平常沒在看程式碼，可能會看起來很複雜，把它拆解其實很白話。
<meta property="og:url" content="你的網址"/>meta 可以不用知道沒關係，property 是屬性的名稱，content 則是屬性的值，要達成開頭呈現的 Facebook 縮圖，你只需要上述那些基本的屬性，把中文的地方改成你自己的就設定好了。
有兩個保持英文字的屬性
og:type 因為我們是網站所以就寫 website。
og:image:type 則是指定縮圖是一個 png，如果你是用 jpg 就改成 image/jpg。
完整屬性清單可以參考 http://ogp.me/。
完成長這樣：
<head><!-- Facebook Opengraph -->
<meta property="og:url" content="https://tenten.co/digital-transformation/" />
<meta property="og:locale" content="zh_TW" />
<meta property="og:type" content="website" />
<meta property="og:title" content="転転數位浪潮" />
<meta property="og:description" content="數位轉型如何做？臺灣傳統產業有哪些成功案例？"/>
<meta property="og:image" content="https://tenten.co/app/uploads/2019/01/dgtr_og.png" />
<meta property="og:image:alt" content="數位轉型如何做？臺灣傳統產業有哪些成功案例？" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- End Facebook Opengraph -->\</head>
你可以用這個工具來預覽成果，
