如果你希望在分享網址時，讓網址能夠顯示出圖片及說明文字，來吸引別人的目光焦點，那你就會需要指定網址的預覽圖片與預覽文字。你可以透過在網頁的 head 標籤內加上 Open Graph Protocol 的標籤來達成這個目的，今天我們就來認識一下這個東西吧。
Open Graph Protocol 原本是由 Facebook 所提出，目的是為了標準化網頁中的 metadata，讓這些 metadata 可以用來描述這個網頁的內容，並且讓程式可以很容易的讀取這些 metadata。
你可以在這個 metadata 內提供網頁的簡易資訊（如網頁標題）或是特定的詳細資訊（如影片的時間長度），這些資訊可以讓社群網站更容易辨識你的內容，並且在分享時可以讓你的內容更有吸引力。
最基本的四個 Open Graph Protocol 標籤是：og:title、og:type、og:image、og:url，這些標籤在不同的頁面上應該會有不同的設定值。
以下是這些標籤的說明：
og:title：網頁的標題，這個值通常會跟網頁的 title 相同，除非你希望在分享時顯示不同的標題。og:type：網頁的類型，這個值通常會是 website，但如果你的網頁是一篇文章，那你可以設定成 article。og:image：你希望用來代表這個網頁的圖片連結，這個網址通常會在分享時被當作網頁的預覽圖片。og:url：目前網頁的網址。og:image雖然 GitHub 的專案本身已經有提供預設的 og:image 如下：
但筆者還是會想幫這個專案設計一個專屬的 og:image，這樣在分享時一看就知道是跟 ChameleonUltra 有關。
在 GitHub 上面有建議 og:image 尺寸為 1280x640：
筆者會使用 Canva 這個網站來快速製作 og:image，Canva 有提供一些預設的 og:image 範本，你可以直接使用這些範本來製作 og:image，也可以自己設計 og:image 的內容。以下是筆者設計的 og:image：
筆者也同時把這個 og:image 上傳到 GitHub，並且在 pug 產生的網頁內加上 og:image 的標籤。
筆者都是透過 Meta 提供的 Sharing Debugger 來測試 Open Graph Protocol 是否正確。當然還有一些其他的工具，像是 Twitter 提供的 Card validator、LINE 提供的 Page Poker 都可以用來測試喔。
iThome鐵人賽
看影片追技術