HTML og meta 開放社交關係圖


分類

建立時間: 2023年7月23日 00:57
更新時間: 2023年10月19日 02:12

說明

本篇將帶您了解 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,大概是這個意思,或者是 ? # 這些沒必要的參數可以省略的就省略,我猜應該是這樣。

結論

以上就是懶人包重點整理,完整的內容請參考官方文件。

觀看次數: 605
facebookgraphhtmlmediametaogopenprotocolsocial開放社交關係圖標記
按讚追蹤 Enjoy 軟體 Facebook 粉絲專頁
每週分享資訊技術

一杯咖啡的力量,勝過千言萬語的感謝。

支持我一杯咖啡,讓我繼續創作優質內容,與您分享更多知識與樂趣!