前端應該知道的：開放圖譜協議（The Open Graph protocol）

獨釣寒江雪發表於2021-10-26
前端協議Protocol
Open Graph 是一種網際網路協議，最初由 Facebook 建立，用於標準化網頁中後設資料的使用，使得社交媒體得以以豐富的“圖形”物件來表示共享的頁面內容。

  看到這個標題，也許你會陷入疑惑，什麼是開放圖譜協議（The Open Graph protocol）？我們為什麼似乎很少見到它？它到底有什麼用呢？確實，對於很多前端開發來說，開放圖譜協議（The Open Graph protocol）是一個比較陌生的概念。

什麼是 Open Graph Protocol（開放圖譜協議）

  Open Graph Protocol（開放圖譜協議），簡稱 OG 協議。它是 Facebook 在 2010 年 F8 開發者大會公佈的一種網頁元資訊（Meta Information）標記協議，屬於 Meta Tag （Meta 標籤）的範疇，是一種為社交分享而生的 Meta 標籤，用於標準化網頁中後設資料的使用，使得社交媒體得以以豐富的“圖形”物件來表示共享的頁面內容。它允許在 Facebook 上，其他網站能像 Facebook 內容一樣具有豐富的“圖形”物件，進而促進 Facebook 和其他網站之間的整合。

  簡單來說，該協議就是用來標註頁面的型別和描述頁面的內容。其靈感來自 Dublin Core、link-rel canonical、Microformats 和 RDFa，雖然有這些不同的技術和模式並且可以組合在一起，但沒有一種技術可以提供足夠的資訊來豐富地表示社交圖中的任何網頁。Open Graph 協議建立在這些現有技術的基礎上，以開發人員使用的簡單性為關鍵目標，併為開發人員提供了一個實施方案，它為許多技術設計決策提供了資訊。

  看了這麼多，好像還是不理解什麼是開放圖譜協議？

  舉個簡單的例子，當我們分享一個連結（URL）給朋友時，在有的 App 上它只是一個連結，而在有的 APP 上，他卻可以包含如下圖所示的標題、圖片、描述等資訊：

OG協議

  像飛書、WhatsApp、Twitter、Facebook 等社交軟體，都會根據連結去抓取你給定 URL 的內容，以確定要包含哪些屬性來進行共享展示。你可以通過在頁面的頭部程式碼中包含 og:tags 來顯式定義屬性；如果沒有這些顯示定義的資訊，這些社交軟體將在完成對給定 URL 的頁面抓取後推斷屬性，然後使用這些屬性資訊組裝共享框並進行展示。

  其實這一切也是依賴於具體 APP 的實現的（是否會根據URL去抓取內容），對於同一 URL，我們可以看看在飛書和微信上的不同形態：

  微信：

OG協議

  飛書：

OG協議

為什麼需要使用 OG 協議？

  我們知道，構建內容和維護網站通常可能需要耗費大量時間，我們當然希望自己的內容能夠在社交分享時能夠脫穎而出。先來看下有無 OG 協議時，同一個連結被解析的差別：

  沒有開放圖譜協議時：此時社交軟體正確地獲取了頁面的標題和描述，但它所含有的資訊有限，看起來並不誘人。

simple-twitter-card

  有開放圖譜協議時：

large-image-twitter-card

  網際網路上的內容通常至少有一個目標——與他人分享。如果你只是將它傳送給一個朋友，有沒有開放圖譜協議可能不重要。但是如果你想運營、分享或希望它在任何具有豐富預覽功能的社交網路或應用程式上共享、傳播時，你會希望該預覽儘可能抓住別人的眼球。像下面這樣豐富而有效的資訊將有助於鼓勵人們點選檢視你的內容。

吸引眼球的OG協議

  如果你的內容沒有開放譜圖協議標籤會怎樣？也許對於網站內容來說不會有什麼影響，但你的內容將很難從網際網路上大量其他內容中脫穎而出。

  如果網頁採用 OG 協議，分享結果會結構化展示，這樣站點在被連結分享時會有更豐富的內容展現，同時站點的轉化率將會提升。

如何給網站新增 OG 協議

基礎屬性

  要將你的網頁轉換為可控結構化圖形物件，你需要向頁面新增基本後設資料。四個基本開放圖形標籤是：

  • og:title - 指定你想要在共享時展示的標題。這通常與你網頁的<title>標籤相同，例如“百度一下，你就知道”。
  • og:type- 物件的型別，例如“video.movi​​e”。根據你指定的型別的不同，可能還需要新增一些其他的不同屬性。
  • og:image - 一個圖片 URL。
  • og:url - 指定你想要共享的 URL/當前頁面的 URL（可以是短連結），例如，“https://www.baidu.com/”。

  各標籤控制區域如下圖所示：

OG

  給網站設定 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/" />
    <meta
      property="og:image"
      content="https://ia.media-imdb.com/images/rock.jpg"
    />
    ...
  </head>
  ...
</html>

開放圖示籤介紹

  上面介紹了基本後設資料標籤，下面將進一步對一些屬性進行說明。如果你想要獲得更全面的資訊，請轉到 Open Graph (https://ogp.me/)進行閱讀。

title

  最多 65 個字元。

<title>your keyword rich title of the website and/or webpage</title>

description

  最多 155 個字元。

<meta
  name="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 連結提供。

<meta
  property="og:image"
  content="//cdn.example.com/uploads/images/webpage_300x200.png"
/>

  雖然使用og:image新增影像比較容易，但有時讓你的影像正確顯示可能具有挑戰性。開放圖譜協議包括一些影像標籤，例如og:image:urlvsog:image:secure_url以及og:image:width和og:image:height，可以對影像進行更細緻的控制。

  儘量確保你遵循開放圖形文件中的所有註釋和示例。此外，一些社交網路可能會對影像有特殊要求。例如，[Twitter
要求](https://developer.twitter.com...)比例為
2:1，最小尺寸為 300x157，最大尺寸為 4096x4096，小於 5MB，JPG、PNG、WEBP 或 GIF 格式。

og:video

  og:video 標籤與 og:image 標籤相同，用於補充“圖形”物件的視訊檔案的 URL。

og:type

  為了在圖形中表示你的物件，你需要指定其型別。這裡 是可用的全部型別列表。你還可以指定自己的型別。

<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

  要獲得對所有瀏覽器和裝置的最佳圖示支援，請閱讀此內容。

Twitter 和其他使用開放圖的社交媒體

  大多數社交網路都遵循開放圖譜協議的基本後設資料標籤，當然，一些社交應用也會包括自己的擴充套件，以幫助自定義其生態系統中的一些外觀展示。

  例如，Twitter 允許你指定twitter:card，這是你在展示你的網站時可以使用的“卡片”型別。他們的卡型別包括：

  • summary
  • summary_large_image
  • app
  • player

  這將幫助你選擇如何在其 Feed 中使用你的連結。例如，如果你使用了summary_large_image，只要你在 og:image 標籤中提供了連結，Twitter 就會顯示帶有高解析度大圖片的連結。

  要獲得最佳 Twitter 支援，請閱讀Twitter 的相關文件。

  要獲得最佳 Facebook 支援，請閱讀Facebook 的分享指南。

  以下是有關如何在某些社交媒體網站上使用開放圖示籤的文件連結，供你參考：

測試你的開放圖示籤

  如果你在開發過程中遇到困難，也可以使用一些社交媒體提供的工具來測試、除錯你的標籤：

進一步探究開放圖示籤

  雖然以上介紹涵蓋了一個網站中可能包含的大部分標籤，但還有一些標籤可能會幫助你和你的企業在整個社交網路中更多的被吸引和發現。如果你有興趣深入研究，The Open Graph protocol官方文件將是一個很好的使用指南。

  如果你只是在尋找入門示例，例如為部落格文章新增設定標籤，你可以採用類似下面的結果：

<meta property="og:site_name" content="Colby Fayock" />
<meta
  property="og:title"
  content="Anyone Can Map! Inspiration and an
introduction to the world of mapping - Colby Fayock"
/>
<meta
  property="og:description"
  content="Chef Gusteau was a visionary who created food experiences for the world to enjoy. How can we take his lessons and apply them to the world of…"
/>
<meta
  property="og:url"
  content="https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/"
/>
<meta property="og:type" content="article" />
<meta property="article:publisher" content="https://www.colbyfayock.com" />
<meta property="article:section" content="Coding" />
<meta property="article:tag" content="Coding" />
<meta
  property="og:image"
  content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1"
/>
<meta
  property="og:image:secure_url"
  content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1"
/>
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="640" />
<meta property="twitter:card" content="summary_large_image" />
<meta
  property="twitter:image"
  content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1"
/>
<meta property="twitter:site" content="@colbyfayock" />

  如果你正在尋找其他方法來優化和分析你的內容，下面幾個連結也許會使你感興趣：

OG 協議的其他說明

  不同公司的許多技術審計結果表明，使用 Open Graph 標籤不會幫助你獲得更好的 SEO 排名，它們僅適用於在社交媒體展示豐富的“圖形”物件。

參考資料

  本文首發於個人部落格，歡迎指正和star。

相關文章