HTML og meta 開放社交關係圖
分類
說明
本篇將帶您了解 HTML og meta 開放社交關係圖。社交關係圖是一種強大的工具，讓您的網站和內容能夠更好地與社交媒體平台互動，增加曝光和分享。透過適當設置 og meta 標籤，您的網站可以在 Facebook、Twitter、LinkedIn 等社交媒體上展示吸引人的標題、描述和圖片，吸引更多讀者點擊和分享您的內容。
開放社交關係圖標記
在 Facebook 文件有提到：如果沒有這些「開放社交關係圖」標籤，Facebook 網路爬蟲會使用內部啟發學習法盡可能猜測內容的標題、說明和預覽圖像。使用「開放社交關係圖」標籤明確指定此資訊，以確保在 Facebook 上呈現最高品質的貼文。
詳細內容請參考網站管理員分享指南。
懶人包
如果你不想知道那麼多，我直接推薦幾個 meta og 標籤，你加在 html 上就行了，但你要記得帶入正確的資訊。
index.html
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta property="og:description" content="內容的簡短說明">
<meta property="og:image" content="https://image.com/image.png">
<meta property="og:image:alt" content="logo">
<meta property="og:image:height" content="4268">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="4268">
<meta property="og:title" content="Enjoy 軟體">
<meta property="og:type" content="website">
<meta property="og:url" content="https://veryenjoy.tw">
</head>
</html>
| 標籤 | 說明 |
|---|---|
| og:description | 內容的簡短說明，通常為 2 到 4 個句子。 |
| og:image | 用戶將內容分享至 Facebook 時顯示的圖像網址。 |
| og:image:alt | 對圖像內容的描述（不是標題）。 |
| og:image:height | 以像素表示的圖像高度。 |
| og:image:type | 圖像的 MIME 類型，可為 image/jpeg、image/png 等等。 |
| og:image:width | 以像素表示的圖像寬度。 |
| og:title | 您文章的標題，不包含網站名稱等任何品牌內容。 |
| og:type | 您內容的媒體類型。 |
| og:url | 您網頁的標準網址。 |
og:image
關於圖片大小請參考 連結分享中的圖像
擷取重點
- 圖像長寬比盡可能保持為 1.91:1。
- 請使用至少 1200 x 630 像素的圖像，在高解析度裝置時才能呈現最佳顯示效果。至少應使用 600 x 315 像素的圖像，才能顯示圖像較大的連結粉絲專頁貼文。
- 圖像檔案大小不可超過 8 MB。
- 使用 分享偵錯工具 預先快取圖像。
og:type
此標籤會影響您的內容在動態消息中的顯示方式。如果您未指定類型，將預設為 website。每個網址都應該是單一物件，因此不可能有多個 og:type 值。請在物件類型參考資料 中尋找完整的物件類型清單。
大家不用緊張，只要參考上述連結的物件類型清單，挑選出符合這個網址的類型，接著再斟酌是否要填寫類型裡面的資訊，舉例類型如下。
- music.song
- video.movie
- article
- website
og:url
說明寫的讓我實在是看不太懂，可能就是假設 https://veryenjoy.tw/enjoy/article/1 這樣是完整的網址，但如果我使用短網址 https://veryenjoy.tw/a/1 其實也是連結到 https://veryenjoy.tw/enjoy/article/1，這樣 og:url 就要填主要的 https://veryenjoy.tw/enjoy/article/1，大概是這個意思，或者是 ? # 這些沒必要的參數可以省略的就省略，我猜應該是這樣。
結論
以上就是懶人包重點整理，完整的內容請參考官方文件。
一杯咖啡的力量，勝過千言萬語的感謝。
支持我一杯咖啡，讓我繼續創作優質內容，與您分享更多知識與樂趣！