幫助中心
這里有最新的使用文檔和教程
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 就會顯示帶有高分辨率大圖片的鏈接。
要將你的網頁轉換為可控結構化圖形對象,你需要向頁面添加基本元數據。四個基本開放圖形標簽是:
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 就會顯示帶有高分辨率大圖片的鏈接。