要將html網頁變成社交圖形對象進行分享，需要使用open graph將基本元數據添加到頁面的<head><meta> 標簽里。
每個頁面的四個必需屬性是：
og:title- 對象的標題，因為它應該出現在圖表中，例如，“The Rock”。
og:type- 對象的類型，例如“video.movie”。根據您指定的類型，可能還需要其他屬性。
og:image- 一個圖像 URL，它應該在圖表中代表您的對象。
og:url- 對象的規范 URL，將用作圖表中的永久 ID，例如“https://www.imdb.com/title/tt0117500/”。
<meta property="og:url" content="https://www.***.com"/>
<meta property="og:site_name" content="***"/>
<meta property="og:title" content="***"/>
<meta property="og:description" content="***"/>
<meta property="og:type" content="***"/>
<meta property="og:image" content="***_.jpg"/>
<meta property="og:image:height" content="1000"/>
<meta property="og:image:width" content="1000"/>
<meta property="og:image:alt" content="content" />
<meta property="og:locale" content="en_US"/>
Open Graph標簽包含路徑，網站名詞，標題，描述，類型，圖片，圖片寬高，圖片alt屬性，圖片語言（后面幾項非必須）
示例：https://www.nytimes.com/2023/02/13/well/mind/jay-shetty-book-8-rules-love.html
? ? ? ? ?
代碼如下：
備注：
1. Facebook 開放圖譜圖像大小應約為 1200 x 630 像素（1.91/1 比率），且不得超過 5 MB；
2. og:image:alt- 對圖片內容的描述（不是標題）。如果頁面指定了 og:image，它應該指定og:image:alt.
3 .建議在Facebook 廣告創意中使用 1:1 圖片，以獲得更好的圖片鏈接廣告效果。
<meta property="og:image" content="https://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="ex:1000" />
<meta property="og:image:height" content=" ex:800" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />
Image標簽包含圖片路徑，圖片安全路徑，圖片類型，圖片寬高，圖片alt屬性
示例：
備注：
1. og:image:type：圖片的 MIME 類型。之一image/jpeg，image/gif或image/png
?<meta property="og:video" content="https://example.com/movie.swf" />
<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />
Video標簽包含視頻路徑，視頻安全網址，視頻類型，視頻寬高
示例：https://www.instagram.com/p/BtJnyR3lb6o/? ?
??代碼如下：
備注：
1.?og:video:type：視頻的 MIME 類型。要么application/x-shockwave-flash要么video/mp4。
2.og:image：在 Feed 中指定用于高質量預覽的圖像
<meta property="og:audio" content="https://example.com/sound.mp3" />
<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />
Audio標簽包括聲音文件路徑，安全聲音文件路徑，聲音類型
備注：og:audio標簽只有前 3 個屬性可用，因為大小對聲音沒有意義
?一般情況下，fb標簽內容完善的話，twitter card部分內容可以不撰寫的，返回fb標簽內容即可。
如果想twitter card展示內容和fb不一樣的話，那可以單獨撰寫完善的twitter card標簽內容。
示例：https://www.screamingfrog.co.uk/seo-spider/
?在twitter上的分享效果：
可以看到，代碼里twitter card本身的標簽里不含twitter:title, ?twitter:description和twitter:url，調用的是fb開放圖譜協議og:title和og:description標簽（上圖綠框內容）。
所以，Twitter, Linkedin和Pinterest會識別 Open Graph 標簽；Twitter 有自己的 Twitter 卡片元標簽，但如果 Twitter 機器人找不到任何內容，它會改用 OGP 標簽。
1.og:locale語言：
og:locale - 標記這些標簽的語言環境。格式為language_TERRITORY。默認為 en_US。
如果網站管理者想添加一種替代語言，可以這樣做：
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
2.og:image可以放置多個圖片
?例如：
<meta property="og:image" content="https://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="https://example.com/rock2.jpg" />
<meta property="og:image" content="https://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />
表示此頁面上有 3 張圖片，第一張圖片為300x300，中間一張未指定尺寸，最后一張為1000px 高。
3.可選元數據
以下屬性對于任何對象都是可選的，通常建議使用：
og:audio - 此對象附帶的音頻文件的 URL。
og:description - 一到兩句話描述您的對象。
og:determiner - 句子中出現在該對象標題之前的單詞。(a, an, the, "", auto)的枚舉。如果auto選擇，您的數據的消費者應該在“a”或“an”之間進行選擇。默認為“”（空白）。
og:locale - 標記這些標簽的語言環境。格式language_TERRITORY。默認為en_US。
og:locale:alternate -此頁面可用的一系列其他語言環境。
og:site_name- 如果您的對象是較大網站的一部分，則應為整個網站顯示的名稱。例如，“IMDb”。
og:video - 補充此對象的視頻文件的 URL。
4. 使用工具測試標簽是否在頁面上添加成功
?測試網址：
https://developers.facebook.com/tools/debug/
總結
og：圖像元標記是更廣泛的集合的一部分，它會影響 Facebook、LinkedIn、Pinterest 和 Twitter 上社交媒體帖子的表現。
使用 OGP 標簽可以幫助您跟蹤您的內容在社交媒體上的表現，帶有 OG 圖片的帖子通常會受到最多的關注，可以通過解決對轉化率和點擊率低等常見問題。
文章為作者獨立觀點，不代表DLZ123立場。如有侵權,請聯系我們。( 版權為作者所有，如需轉載，請聯系作者 )
網站運營至今，離不開小伙伴們的支持。 為了給小伙伴們提供一個互相交流的平臺和資源的對接，特地開通了獨立站交流群。
群里有不少運營大神，不時會分享一些運營技巧，更有一些資源收藏愛好者不時分享一些優質的學習資料。
現在可以掃碼進群，備注【加群】。 ( 群完全免費，不廣告不賣課！)
