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