要將網頁變成社交圖形對象進行分享,需要使用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/”。

      1
       一般頁面og標簽

         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標簽:


          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 - 標記這些標簽的語言環境。格式為language_TERRITORY。默認為 en_US。

      接受的格式是 en_US。如果網站管理者想添加一種替代語言,可以這樣做

      <meta property="og:locale:alternate" content="fr_FR" />

      <meta property="og:locale:alternate" content="es_ES" />

      使用工具測試Fb open graph meta tag標簽是否在頁面上添加成功:

      測試網址:https://developers.facebook.com/tools/debug/

                圖片

      圖片



      2
       og:image標簽

       <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標簽包含圖片路徑,圖片安全路徑,圖片類型,圖片寬高,圖片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 高。        


      3
      og:video標簽


      Video標簽包含視頻路徑,視頻安全網址,視頻類型,視頻寬高

      <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" />

      4
      og:audio標簽 

       <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 個屬性可用,因為大小對聲音沒有意義 

      可選元數據


      下屬性對于任何對象都是可選的,通常建議使用:

      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。

      結構化屬性


      某些屬性可以附加額外的元數據。它們的指定方式與使用property和 的其他元數據相同content,但property會有額外的:.

      該og:image屬性有一些可選的結構化屬性:

      og:image:url- 等同于og:image.

      og:image:secure_url- 如果網頁需要 HTTPS,則使用備用 url。

      og:image:type- 此圖像的MIME 類型。

      og:image:width- 像素寬的數量。

      og:image:height- 高像素數。

      og:image:alt- 對圖片內容的描述(不是標題)。如果頁面指定了 og:image,它應該指定og:image:alt.


      點贊(1) 打賞

      評論列表 共有 0 條評論

      暫無評論

      服務號

      訂閱號

      備注【拉群】

      商務洽談

      微信聯系站長

      發表
      評論
      立即
      投稿
      返回
      頂部