iT邦幫忙

2024 iThome 鐵人賽

DAY 22
0
Modern Web

GitHub Pages實作筆記系列 第 22

DAY22 分享預覽

  • 分享至 

  • xImage
  •  

昨天完成了複製連結的分享按鈕,那當我們傳送連結時會長什麼樣子?
假設我們分享一篇IG貼文到Line上,會像下圖這樣。
https://ithelp.ithome.com.tw/upload/images/20241003/20169370K1LK5o07xP.png
簡單來說,會像下圖這種配置
https://ithelp.ithome.com.tw/upload/images/20241003/20169370lOapqJKlMa.png
不過在沒有做任何設定的情況時,HTML的部分會出現一些不該出現的內容。
例如我在讀取畫面加入了< p> LOADING... </ p>這個元素,那LOADING...這段文字就會出現在HTML內容。

修改這個部分會用到meta屬性

<meta property="og:  " content=" ">

這裡稍微介紹會用到的幾個og屬性

og: title
分享時展示的標題,不做修改的話會和head裡設定的title相同。

og: description
設定完後會替換掉原先HTML內容的部分。

更改完可以利用FACEBOOK分享偵錯工具LINE Page Poker來做測試。

參考資料/延伸閱讀

  1. ryzo.io
  2. tsg.com.tw

上一篇
DAY21 一鍵分享
下一篇
DAY23 noscript
系列文
GitHub Pages實作筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言