• <span id="ycodp"></span>
    <span id="ycodp"><small id="ycodp"></small></span>
    1. <label id="ycodp"></label>
      <rt id="ycodp"><tr id="ycodp"><strike id="ycodp"></strike></tr></rt>
      <i id="ycodp"><strong id="ycodp"><ul id="ycodp"></ul></strong></i>
    2. 幫助中心

      這里有最新的使用文檔和教程

      < 返回

      OG協議,OG協議怎么用? html5的OG是什么意思?

      2024-10-31 16:01 作者:31IDC 閱讀量:3202 所屬分類:虛擬主機

      OG協議,OG協議怎么用? html5的OG是什么意思?og:title,og:type,og:image,og:url,og:site,og:description,og:url,og:type

       

      OG協議(Open Graph Protocol),也被稱為 "開放內容協議",是一組元標簽,即Meta Property=og標簽,用來給你的網頁標記信息,如網站頁面、視頻/音頻等的標題、類型、頁面地址、縮略圖、視頻/音頻等。

       

       

       基礎屬性
      要將你的網頁轉換為可控結構化圖形對象,你需要向頁面添加基本元數據。四個基本開放圖形標簽是:

      og:title- 指定你想要在共享時展示的標題。這通常與你網頁的<title>標簽相同,例如“百度一下,你就知道”。

      og:type- 對象的類型,例如“video.movie”。根據你指定的類型的不同,可能還需要添加一些其他的不同屬性。

      og:image- 一個圖片 URL。

      og:url- 指定你想要共享的 URL/當前頁面的 URL(可以是短鏈接),例如,“https://www.baidu.com/[2]”。


      給網站設置 OG 標簽時,應該將其與其他元數據一起放置在<head>標簽中。使用的標簽還是<meta>,添加方式如下:

      <meta property="“[NAME]”" content="“[VALUE]”" />
      例如,以下是 IMDB 上 The Rock 的 Open Graph 協議標記:

      <html prefix="og: https://ogp.me/ns#"><head><title>The Rock (1996)</title><meta property="og:title" content="The Rock" /><meta property="og:type" content="video.movie" /><meta property="og:url" content="https://www.imdb.com/title/tt0117500/" /><metaproperty="og:image"content="https://ia.media-imdb.com/images/rock.jpg"/>...</head>...</html>
      開放圖標簽介紹
      上面介紹了基本元數據標簽,下面將進一步對一些屬性進行說明。如果你想要獲得更全面的信息,請轉到Open Graph[3](https://ogp.me/[4])進行閱讀。
      title
      最多 65 個字符。

      <title>your keyword rich title of the website and/or webpage</title>
      description
      最多 155 個字符。

      <metaname="description"content="description of your website/webpage, make sure you use keywords!"/>
      og:title
      最多 35 個字符。

      <meta property="og:title" content="short title of your website/webpage" />
      og:site_name
      你的內容所在的整個網站的名稱。如果你的對象是較大網站的一部分,則應為整個網站的名稱。
      og:url
      當前網頁地址的完整鏈接。

      <meta property="og:url" content="https://www.example.com/webpage/" />
      og:description
      頁面的描述,最多 65 個字符。類似og:title,這通常應該和你網站的<meta type=“description”>標簽相同,當然,你也可以使其不同。

      <meta property="og:description" content="description of your website/webpage" />
      og:image
      尺寸小于 300KB 且最小尺寸為 300 x 200 的圖像(JPG 或 PNG)。此圖像一般應通過具有有效非自簽名證書的 HTTPS 鏈接提供。

      <metaproperty="og:image"content="http://cdn.example.com/uploads/images/webpage_300x200.png"/>
      雖然使用og:image添加圖像比較容易,但有時讓你的圖像正確顯示可能具有挑戰性。開放圖譜協議包括一些圖像標簽,例如og:image:urlvsog:image:secure_url以及og:image:width和og:image:height,可以對圖像進行更細致的控制。
      盡量確保你遵循開放圖形文檔[5]中的所有注釋和示例。此外,一些社交網絡可能會對圖像有特殊要求。例如,[Twitter 要求](https://developer.twitter.com...[6])比例為2:1,最小尺寸為300x157,最大尺寸為4096x4096,小于5MB,JPG、PNG、WEBP 或 GIF 格式。
      og:video
      og:video標簽與og:image標簽相同,用于補充“圖形”對象的視頻文件的 URL。
      og:type
      為了在圖形中表示你的對象,你需要指定其類型。這里[7]是可用的全部類型列表。你還可以指定自己的類型。

      <meta property="og:type" content="article" />
      設置開放圖標簽時,你需要了解哪種類型對你的網站更有意義。如果你的頁面專注于單個視頻,則使用“video”類型可能是有意義的;如果它是一個沒有特定垂直行業的一般網站,你可能更適合使用“website”類型。
      og:locale
      資源的語言環境。如果你有其他語言翻譯可用,你也可以使用og:locale:alternate。如果不指定og:locale,則默認為 en_US。

      <meta property="og:locale" content="en_GB" /><meta property="og:locale:alternate" content="fr_FR" /><meta property="og:locale:alternate" content="es_ES" />
      video/audio
      還可以共享音頻/視頻。例如,Facebook 和 Twitter 可以很好地共享視頻。當然,WhatsApp 也有這個選項,比如當你分享 Instagram 或 Youtube 鏈接時,WhatsApp 的預覽會在應用內附帶視頻播放。
      products, persons, movies 等
      此類信息實際上取決于提供商(Facebook、Google),WhatsApp 和 Twitter 可以啟用對產品的支持。這樣,你與之共享鏈接的人可能會在共享鏈接“小部件”中看到價格、平均評分、評論等內容。
      favicon
      要獲得對所有瀏覽器和設備的最佳圖標支持,請閱讀此內容[8]。
      Twitter 和其他使用開放圖的社交媒體
      大多數社交網絡都遵循開放圖譜協議的基本元數據標簽,當然,一些社交應用也會包括自己的擴展,以幫助自定義其生態系統中的一些外觀展示。
      例如,Twitter 允許你指定twitter:card,這是你在展示你的網站時可以使用的“卡片”類型。他們的卡類型包括:

      summary

      summary_large_image

      app

      player

      這將幫助你選擇如何在其 Feed 中使用你的鏈接。例如,如果你使用了summary_large_image,只要你在og:image標簽中提供了鏈接,Twitter 就會顯示帶有高分辨率大圖片的鏈接。 

       

      31IDC - 12 年深耕海外 IDC 高端資源

      主站蜘蛛池模板: 色综合久久一本首久久| 麻豆久久婷婷综合五月国产| 亚洲sss综合天堂久久久| 亚洲国产综合自在线另类| 婷婷国产天堂久久综合五月| 激情综合亚洲色婷婷五月APP| 亚洲a无码综合a国产av中文| 亚洲国产成人久久综合碰| 一本色道久久99一综合| 精品综合久久久久久888蜜芽| 日韩字幕一中文在线综合| 精品国产国产综合精品 | 亚洲一本综合久久| 色综合久久无码中文字幕| 色综合天天综合狠狠| 亚洲综合伊人久久大杳蕉| 成人综合久久精品色婷婷| 日本伊人色综合网| 国产成人精品综合久久久| 亚洲综合欧美色五月俺也去| 久久久久综合一本久道| 一本色道久久综合亚洲精品高清| 成人综合在线视频| 伊人yinren6综合网色狠狠| 综合在线视频精品专区| 狠狠爱天天综合色欲网| 丁香婷婷激情综合俺也去| 久久婷婷五月综合色丁香| 狠狠色综合久久婷婷色天使| 色欲天天婬色婬香视频综合网| 亚洲国产综合91精品麻豆| 久久久亚洲裙底偷窥综合 | 久久婷婷成人综合色综合| 狠狠色丁香久久婷婷综合蜜芽五月 | 天堂无码久久综合东京热| 人人狠狠综合久久亚洲| 亚洲熟女综合一区二区三区| 色婷婷狠狠久久综合五月| 免费国产综合视频在线看| 香蕉久久综合精品首页| 亚洲狠狠综合久久|