當我們發布文章到 FaceBook (以下簡稱 FB) 時，會看到 FB 自己去抓出文章的標題、圖片、描述來顯示預覽畫面。可是 FB 幫我抓的這張圖我不滿意，覺得無法吸引讀者，有沒有什麼辦法可以將預覽圖設定成我要的圖片？
在 FB 給網站管理員的分享功能指南 中，提供了解決方法 ─ 使用 og tag。
og tag 是什麼
在 HTML 的 <head> 標籤之間，我們會放一些給瀏覽器看的網頁資訊。其中， og (Open Graph) tag 可以設定網頁被貼到 FB 時，預覽顯示的標題、網址、縮圖、描述等資訊。
如果我們沒有設定這些標籤，FB 在爬蟲的時候，只能盡可能從我們的文章中去猜測標題、描述、預覽圖。但如果我們用 og tag 明確指定這些資訊，FB 就會照著我們提供的內容去呈現預覽畫面。
og tag 的基本標籤及說明：
圖片中是常用的幾個基本 og tag。 給網站管理員的分享功能指南 裡面有更多 og tag 的介紹及說明，有興趣的讀者可以點進去挖寶。
怎麼使用 og tag
大概了解 og tag 有哪些之後，我們要來看看 og tag 怎麼使用。
og tag 的擺放位置
og tag 是設定預覽圖用的資訊，並非放在網頁中呈現給讀者看的內容。前面我們提到，在 HTML 的 <head> 標籤之間，我們會放一些給瀏覽器看的網頁資訊，所以 og tag 要置於 <head> </head> 之間。
og tag 的寫法
og tag 的寫法如下。會使用 <meta> 標籤，在 property 設定要指定的資訊， content 則放入指定的內容。記得要將這些程式碼放到 <head> </head> 之間：
預覽 og tag 結果
由於這些設定是給瀏覽器而不是給使用者看的，所以更改後不會在網頁直接顯示出來。我們可以先透過 Facebook Debuger 預覽，如果不滿意再回來修改，滿意了再發佈到 FB 上。
如何在 Codepen 中加入 og tag
Codepen 是一款所見即所得的線上編輯器。如果要在 Codepen 加入，可以到設定 (Settings) ，選擇 HTML 項目，在 「Stuff for <head>」 進行添加。
延伸閱讀
更新記錄
2021/08/31 新增： 讀者情境、og tag 基本標籤及用法、延伸閱讀
2021/08/31 修改： 調整文章結構及部分用語如果想看更多文章，點擊以下連結可以看到我的文章清單：
* 所有文章清單如果您喜歡這篇文章，或覺得這篇文章有幫到您，想給我一些支持，可以這麼做：
1. 登入 Liker 點擊下方 LikeButton 免費按讚(按5下)，或直接打賞 LikeCoin
2. 透過街口支付請我喝杯咖啡！
3. 拍拍手(1~50下) 給我一些鼓勵。
