要將網(wǎng)頁變成社交圖形對象進行分享，需要使用open graph將基本元數(shù)據(jù)添加到頁面的<head><meta> 標(biāo)簽里。
每個頁面的四個必需屬性是：
og:title- 對象的標(biāo)題，因為它應(yīng)該出現(xiàn)在圖表中，例如，“The Rock”。
og:type- 對象的類型，例如“video.movie”。根據(jù)您指定的類型，可能還需要其他屬性。
og:image- 一個圖像 URL，它應(yīng)該在圖表中代表您的對象。
og:url- 對象的規(guī)范 URL，將用作圖表中的永久 ID，
例如“https://www.imdb.com/title/tt0117500/”。
property="og:url" content="https://www.***.com"/>
property="og:site_name" content="***"/>
property="og:title" content="***"/>
property="og:description" content="***"/>
property="og:type" content="***"/>
property="og:image" content="***_.jpg"/>
property="og:image:height" content="1000"/>
property="og:image:width" content="1000"/>
property="og:locale" content="en_US"/>
示例模板：https://www.imdb.com/title/tt0117500/
頁面添加的fb open graph html標(biāo)簽：
property="og:url" content="https://www.imdb.com/title/tt0117500/"/>
property="og:site_name" content="IMDb"/>
property="og:title" content="The Rock (1996) - IMDb"/>
property="og:description" content="The Rock: Directed by Michael Bay. With Sean Connery, Nicolas Cage, Ed Harris, John Spencer. A mild-mannered chemist and an ex-con must lead the counterstrike when a rogue group of military men, led by a renegade general, threaten a nerve gas attack from Alcatraz against San Francisco."/>
property="og:type" content="video.movie"/>
property="og:image" content="https://m.media-amazon.com/images/M/MV5BZDJjOTE0N2EtMmRlZS00NzU0LWE0ZWQtM2Q3MWMxNjcwZjBhXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_FMjpg_UX1000_.jpg"/>
property="og:image:height" content="1481"/>
property="og:image:width" content="1000"/>
property="og:locale" content="en_US"/>
展示效果：
特別說明：
og:locale - 標(biāo)記這些標(biāo)簽的語言環(huán)境。格式為language_TERRITORY。默認為 en_US。
接受的格式是 en_US。如果網(wǎng)站管理者想添加一種替代語言，可以這樣做
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
使用工具測試Fb open graph meta tag標(biāo)簽是否在頁面上添加成功：
測試網(wǎng)址：https://developers.facebook.com/tools/debug/
<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="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />
Image標(biāo)簽包含圖片路徑，圖片安全路徑，圖片類型，圖片寬高，圖片alt屬性
可以放置多個圖片，例如：
<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 高。
Video標(biāo)簽包含視頻路徑，視頻安全網(wǎng)址，視頻類型，視頻寬高
<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" />
<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 個屬性可用，因為大小對聲音沒有意義
可選元數(shù)據(jù)
以下屬性對于任何對象都是可選的，通常建議使用：
og:audio- 此對象附帶的音頻文件的 URL。
og:description- 一到兩句話描述您的對象。
og:determiner- 句子中出現(xiàn)在該對象標(biāo)題之前的單詞。(a, an, the, "", auto)的枚舉。如果auto選擇，您的數(shù)據(jù)的消費者應(yīng)該在“a”或“an”之間進行選擇。默認為“”（空白）。
og:locale- 標(biāo)記這些標(biāo)簽的語言環(huán)境。格式language_TERRITORY。默認為en_US。
og:locale:alternate-此頁面可用的一系列其他語言環(huán)境。
og:site_name- 如果您的對象是較大網(wǎng)站的一部分，則應(yīng)為整個網(wǎng)站顯示的名稱。例如，“IMDb”。
og:video- 補充此對象的視頻文件的 URL。
結(jié)構(gòu)化屬性
某些屬性可以附加額外的元數(shù)據(jù)。它們的指定方式與使用property和 的其他元數(shù)據(jù)相同content，但property會有額外的:.
該og:image屬性有一些可選的結(jié)構(gòu)化屬性：
og:image:url- 等同于og:image.
og:image:secure_url- 如果網(wǎng)頁需要 HTTPS，則使用備用 url。
og:image:type- 此圖像的MIME 類型。
og:image:width- 像素寬的數(shù)量。
og:image:height- 高像素數(shù)。
og:image:alt- 對圖片內(nèi)容的描述（不是標(biāo)題）。如果頁面指定了 og:image，它應(yīng)該指定og:image:alt.
文章為作者獨立觀點，不代表DLZ123立場。如有侵權(quán),請聯(lián)系我們。( 版權(quán)為作者所有，如需轉(zhuǎn)載，請聯(lián)系作者 )
網(wǎng)站運營至今，離不開小伙伴們的支持。 為了給小伙伴們提供一個互相交流的平臺和資源的對接，特地開通了獨立站交流群。
群里有不少運營大神，不時會分享一些運營技巧，更有一些資源收藏愛好者不時分享一些優(yōu)質(zhì)的學(xué)習(xí)資料。
現(xiàn)在可以掃碼進群，備注【加群】。 ( 群完全免費，不廣告不賣課！)
