Open Graph 讓你的網站呈現「最好的樣子」！

你有遇過費盡苦心設計好美美的網站，分享在 Facebook、或是用 Facebook 打廣告的時候，呈現出來的縮圖卻是一個奇怪角落，而不是你精心設計、漂亮的主視覺嗎？

不要說不好看，如果一個縮圖讓你看不出頭緒、不吸引人，你會很想點進去看嗎？

沒有設定 OG 的話，範例中的網站可能圖片位置會跑掉，有設定的話就會是我想呈現的樣子，在 Facebook 的完整預覽圖會是這樣：

設定好 OG 幫助網站呈現最好看的模樣！

所以 OG 是什麼？

OG 全名 Open Graph Protocol，是由 Facebook 提出，官方翻譯叫做「開放社交關係圖」，不同的社群平台有不同設定，像是 Twitter 有自己的工具叫做 Twitter Card，不過原理是相同的。

目的在於透過定義網站性質、Title、縮圖網址等等屬性，幫助社群平台爬蟲更輕鬆得梳理並找出你網站的重點，沒有的話就會是隨機生成的結果，如果生成的預覽結果不好看，就很難吸引人家點下去了對吧？

而且 OG 的設定非常簡單。

Open Graph 如何設定？

根據ogp.me 的說明文檔 設定在head裡面的meta標籤中

• og:title- 對象的標題，因為它應該出現在圖表中，例如，“The Rock”。
• og:type-對象的類型，例如“video.movi​​e”。根據您指定的類型，可能還需要其他屬性。
• og:image- 一個圖像 URL，它應該在圖表中代表您的對象。
• og:url- 對象的規範 URL，將用作圖表中的永久 ID，例如“https://www.imdb.com/title/tt0117500/”

完整屬性清單可以參考 http://ogp.me/。

你可以用這個工具來預覽成果，FB分享偵錯

參考資料:medium