開放圖譜協議（Open Graph Protocol）

參考資料：https://ogp.me/

不知道大家有沒有注意到，當一個連結被分享到社交媒體平台上時，平台會展示連結的預覽圖、標題、副標題等內容（如下圖）。

open-graph-protocol-1

那麼社交媒體平台是如何獲取到他們的預覽內容的呢？這就不得不說一說 Open Graph Protocol（開放圖譜協議）。

什麼是 Open Graph Protocol？#

簡稱：OG 協議，由 Facebook 在 2010 年公佈，用於在社交媒體平台上共享網頁內容時指定元數據。

簡單來說，OG 協議通過圖文形式直觀地展示連結指向網站的信息，以提高連結的曝光度和點擊率。其中的圖片、標題等信息就是元數據 / Metadata。

open-graph-protocol-2

也就是說，如果想要在社交媒體平台上分享自己的網站並展示符合 OG 協議的元數據，首先需要在網站中添加 meta 標籤，並定義好符合 OG 協議的元數據以供各大社交媒體平台獲取。

如何給自己的網站添加符合 OG 協議的元數據？#

如前所述，OG 協議本質上就是 Meta 標籤的一種。因此，我們只需在網站中添加 property=og 的 meta 標籤即可。

<meta property="og:title" content="yuanx" />
<meta property="og:description" content="yuanx's personal website" />
<meta property="og:image" content="https://yuanx.me/api/og" />

OG 協議變種#

一些社交媒體平台支持 OG 協議的同時，可能還會支持其他自定義協議。例如，Twitter 公佈的 Twitter Cards。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />

如何獲取其他網站符合 OG 協議的元數據？#

前面的流程圖中描述了社交媒體平台獲取其他網站的 OG 元數據的過程，這裡我們來討論下如何使用代碼實現。

整體思路#

獲取目標網站的 HTML -> 解析 HTML -> 匹配 meta 標籤 -> 得到數據

代碼實現#

// node.js
import * as cheerio from 'cheerio';
import axios from 'axios';

const TARGET_URL = 'https://yuanx.me';

axios
  .get(TARGET_URL)
  .then((response) => {
    const html = response.data;
    const $ = cheerio.load(html);
    const ogTitle = $("meta[property='og:title']").attr('content');
    const ogDescription = $('meta[property="og:description"]').attr('content');
    const ogImage = $('meta[property="og:image"]').attr('content');
    console.log('OG Metadata: ', ogTitle, ogDescription, ogImage);
  })
  .catch((error) => {
    console.log('error', error);
  });

結語#

Open Graph Protocol 對於產品營銷、SEO 等多方面都有著不錯的效果。對於獨立開發者或需要進行產品運營、營銷的公司來說，Open Graph Protocol 絕對是一個不可忽略的細節。

如果你對 Open Graph Protocol 感興趣，那麼可以查看 imyuanx/yuanx 倉庫以更多了解技術細節。

謝謝閱讀 ❤️