大家好，我是零一，前段時間我們項目接到了個H5活動頁的需求，既然是H5活動頁，那么其目的就是通過大量的傳播進行引流、促活，我們的目的也正如此。PM希望我們的H5頁面在別家的APP內傳播時能自動解析我們的鏈接，這怎么做呢？當時我們也不知道，因此經過一番調研得知需要用到本文的主人公 "OG"
本文就來分享一下我同事獨釣寒江雪總結的關于OG的相關知識！文章不是很長，希望對大家有所幫助！
原文：https://juejin.cn/post/7023173942001008670
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[1]、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 協議時，同一個鏈接被解析的差別：
沒有開放圖譜協議時：此時社交軟件正確地獲取了頁面的標題和描述，但它所含有的信息有限，看起來并不誘人。
無開放圖譜
有開放圖譜協議時：
有開放圖譜
互聯網上的內容通常至少有一個目標——與他人分享。如果你只是將它發送給一個朋友，有沒有開放圖譜協議可能不重要。但是如果你想運營、分享或希望它在任何具有豐富預覽功能的社交網絡或應用程序上共享、傳播時，你會希望該預覽盡可能抓住別人的眼球。像下面這樣豐富而有效的信息將有助于鼓勵人們點擊查看你的內容。
吸引眼球的OG協議
如果你的內容沒有開放譜圖協議標簽會怎樣？也許對于網站內容來說不會有什么影響，但你的內容將很難從互聯網上大量其他內容中脫穎而出。
如果網頁采用 OG 協議，分享結果會結構化展示，這樣站點在被鏈接分享時會有更豐富的內容展現，同時站點的轉化率將會提升。
如何給網站添加 OG 協議
基礎屬性
要將你的網頁轉換為可控結構化圖形對象，你需要向頁面添加基本元數據。四個基本開放圖形標簽是：
og:title - 指定你想要在共享時展示的標題。這通常與你網頁的<title>標簽相同，例如“百度一下，你就知道”。og:type- 對象的類型，例如“video.movie”。根據你指定的類型的不同，可能還需要添加一些其他的不同屬性。og:image - 一個圖片 URL。og:url - 指定你想要共享的 URL/當前頁面的 URL（可以是短鏈接），例如，“https://www.baidu.com/[2]”。
各標簽控制區域如下圖所示：
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[3] (https://ogp.me/[4])進行閱讀。
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，可以對圖像進行更細致的控制。
盡量確保你遵循開放圖形文檔[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，這是你在展示你的網站時可以使用的“卡片”類型。他們的卡類型包括：
summarysummary_large_imageappplayer
這將幫助你選擇如何在其 Feed 中使用你的鏈接。例如，如果你使用了summary_large_image，只要你在 og:image 標簽中提供了鏈接，Twitter 就會顯示帶有高分辨率大圖片的鏈接。
要獲得最佳 Twitter 支持，請閱讀Twitter 的相關文檔[9]。
要獲得最佳 Facebook 支持，請閱讀Facebook 的分享指南[10]。
以下是有關如何在某些社交媒體網站上使用開放圖標簽的文檔鏈接，供你參考：
Twitter[11]Facebook[12]Pinterest[13]LinkedIn[14]
測試你的開放圖標簽
如果你在開發過程中遇到困難，也可以使用一些社交媒體提供的工具來測試、調試你的標簽：
Twitter[15]Facebook[16]Pinterest[17]
進一步探究開放圖標簽
雖然以上介紹涵蓋了一個網站中可能包含的大部分標簽，但還有一些標簽可能會幫助你和你的企業在整個社交網絡中更多的被吸引和發現。如果你有興趣深入研究，The Open Graph protocol[18]官方文檔將是一個很好的使用指南。
如果你只是在尋找入門示例，例如為博客文章添加設置標簽，你可以采用類似下面的結果：
<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" />
如果你正在尋找其他方法來優化和分析你的內容，下面幾個鏈接也許會使你感興趣：
如何將社交媒體圖像添加到你的 Github 項目存儲庫[19]如何理解 Google Analytics 和你網站的流量[20]如何使用 Google Analytics（分析）設置和跟蹤 YouTube 頻道的表現[21]
OG 協議的其他說明
不同公司的許多技術審計結果表明，使用 Open Graph 標簽不會幫助你獲得更好的 SEO 排名，它們僅適用于在社交媒體展示豐富的“圖形”對象。