將 Twitter Cards 和 Open Graph 社交元數(shù)據(jù)添加到你的網(wǎng)頁

當(dāng)你在社交媒體平臺(tái)上分享鏈接時(shí)，它們通常會(huì)顯示豐富的圖像和格式良好的標(biāo)題、摘要和鏈接，而不是純文本。你知道是怎么實(shí)現(xiàn)這樣的功能的嗎？如果你連meta 標(biāo)簽的基礎(chǔ)知識(shí)還不清楚的話，可以閱讀【HTML meta 標(biāo)簽詳解】

一、為什么要設(shè)置社交媒體元標(biāo)簽

通常，我們可以通過在 HTML 文檔的中包含某些標(biāo)簽，來將這些富媒體社交共享功能添加到你的站點(diǎn)，從而實(shí)現(xiàn)定制化分享的顯示內(nèi)容。

下圖是一個(gè)沒有設(shè)置這些元數(shù)據(jù)，Twitter 分享鏈接顯示的效果：

默認(rèn)情況下，大多數(shù)社交網(wǎng)絡(luò)會(huì)盡最大努力創(chuàng)建你的內(nèi)容預(yù)覽?？雌饋硭坪踹€行？

下圖是設(shè)置了這些元數(shù)據(jù)后的效果，相比之下，前一個(gè)的分享效果顯得就很是單薄無趣了。

因此，正確的設(shè)置這些社交媒體元數(shù)據(jù)是十分重要的，這能使你的內(nèi)容在互聯(lián)網(wǎng)上大量的內(nèi)容中脫穎而出。

現(xiàn)如今有兩個(gè)主要標(biāo)準(zhǔn)定義如何格式化此元數(shù)據(jù)：Twitter Cards 和 Facebook Open Graph 協(xié)議。

在本教程中，你將學(xué)會(huì)如何將 Twitter Cardss 和 Open Graph 元數(shù)據(jù)添加到你的網(wǎng)頁中。

二、 Facebook Open Graph

Open Graph （開放圖譜協(xié)議）由 Facebook 的創(chuàng)建，簡稱 OG 協(xié)議或 OGP。它是 Facebook 在 2010 年 F8 開發(fā)者大會(huì)公布的一種網(wǎng)頁元信息（Meta Information）標(biāo)記協(xié)議，屬于 Meta Tag （Meta 標(biāo)簽）的范疇，是一種為社交分享而生的 Meta 標(biāo)簽。它允許在 Facebook 上，其他網(wǎng)站能像 Facebook 內(nèi)容一樣具有豐富的媒體對(duì)象，進(jìn)而促進(jìn) Facebook 和其他網(wǎng)站之間的集成。

Open Graph 標(biāo)簽不僅被 Facebook 使用，也被 LinkedIn 和 Twitter 等平臺(tái)使用。請(qǐng)注意 Twitter 也有自己的一套 Twitter Cards 定義，如果網(wǎng)頁提供了 Twitter 自己的定義，則優(yōu)先使用自己的標(biāo)準(zhǔn)。

Open Graph 協(xié)議格式

Open Graph 元標(biāo)簽的格式如下：

<meta?property="[NAME]"?content="[VALUE]"?/>

Open Graph 常用屬性

一組最小的 Open Graph 標(biāo)簽如下所示：

#?標(biāo)題
<meta?property="og:title"?content="HTML?meta?標(biāo)簽詳解">
#?類型
<meta?property="og:type"?content="article">
#?網(wǎng)頁的永久鏈接
<meta?property="og:url"?content="https://www.liuxing.io/blog/html-meta-tags/">
#?網(wǎng)頁的需要展示圖片
<meta?property="og:image"?content="https://www.liuxing.io/blog/html-meta-tags/meta-tags.webp">

對(duì)于 Open Graph 來說，每個(gè)頁面里需要以上四個(gè)必需屬性：

• og:title - 網(wǎng)頁的標(biāo)題，例如“劉星的個(gè)人網(wǎng)站”。
• og:type - 網(wǎng)頁的類型，所描述內(nèi)容的類型?？梢允?article，book，website, profile 等
• og:image - 一個(gè)圖像 URL, 用于設(shè)置與頁面關(guān)聯(lián)的圖像。
• og:url - 對(duì)象的規(guī)范 URL，例如，"https://liuxing.io/"

Open Graph 協(xié)議定義了一些網(wǎng)頁類型， 包括 article、book、website、profile 等。

如果你的網(wǎng)頁為個(gè)人主頁，og:type 可以為profile；如果你的網(wǎng)頁是一個(gè)視頻為主的網(wǎng)頁面，則可以為video；如果你的網(wǎng)頁是一篇博客文章則可以為article。如果你的網(wǎng)頁沒什么特殊的類別，則可將og:type 設(shè)置為通用的website。

你可以在 https://ogp.me/#types 找到 Open Graph 通用的類型定義

除了以上四個(gè)必需屬性之外，Open Graph 還有以下常用屬性：

<meta?property="og:description"?content="Description?Here">
<meta?property="og:site_name"?content="Site?Name">
<meta?property="og:locale"?content="en_US">
<meta?property="og:video"?content="link">
<meta?property="og:audio"?content="link">

• og:site_name 你的網(wǎng)站的名稱
• og:description 你的頁面的描述
• og:audio - 網(wǎng)頁中的音頻鏈接。
• og:locale - 標(biāo)記語言環(huán)境。格式為 language_TERRITORY。默認(rèn)為 en_US。
• og:video - 你網(wǎng)頁中的視頻鏈接

除了以上介紹的常用內(nèi)容外，Open Graph 還有很多屬性。有關(guān) Open Graph 協(xié)議的更多信息，請(qǐng)?jiān)L問官方 Open Graph 協(xié)議網(wǎng)站 https://ogp.me/

如果你的網(wǎng)站設(shè)置了 Open Graph 你可以使用 facebook 的 debug 工具^[1] 來調(diào)試及查看顯示效果

三、Twitter Cards

大多數(shù)社交網(wǎng)站都遵循 Open Graph 協(xié)議，但是也有一些平臺(tái)自己實(shí)現(xiàn)了一些定義，例如 Twitter。

Twitter Cards 是 Twitter 使用的元數(shù)據(jù)規(guī)范，用于在 Twitter 上共享鏈接時(shí)顯示富文本、圖像和視頻。

Twitter Cards 格式

Twitter Cards 元標(biāo)簽的格式如下：

<meta?name="[NAME]"?content="[VALUE]"?/>

Twitter Cards 常用屬性

Twitter Cards 有四種不同的類型：Summary, Summary Card With Large Image, App, 和 Player.

<meta?name=twitter:card?content="summary_large_image">
<meta?name=twitter:image?content="https://www.liuxing.io/blog/html-meta-tags/meta-tags.webp">
<meta?name=twitter:title?content="HTML?meta?標(biāo)簽詳解">
<meta?name=twitter:description?content="meta?標(biāo)簽標(biāo)簽定義了關(guān)于?HTML?文檔的元數(shù)據(jù)">
<meta?name="twitter:creator"?content="@liuxing_chn">
<meta?name="twitter:site"?content="@site_account">

• twitter:card : 卡片類型，將是 summary、summary_large_image、app 或 player 之一
• twitter:site : 用于卡片頁腳中使用的網(wǎng)站 @username
• twitter:creator ：內(nèi)容創(chuàng)建者 / 作者的 @username
• twitter:url : 分享對(duì)象的鏈接
• twitter:title : 分享對(duì)象的標(biāo)題 （最多 70 個(gè)字符）
• twitter:description : 分享對(duì)象的描述 （最多 200 個(gè)字符）
• twitter:image : 分享對(duì)象的圖片 URL, 支持的格式有 JPG、PNG、WEBP 和 GIF。只會(huì)導(dǎo)入 GIF 的第一幀

給你的網(wǎng)頁設(shè)置以上 meta 標(biāo)簽，再分享到 Twitter 就能看到如下效果

上面介紹了 Twitter Cards 一些常用屬性，有關(guān)其他 Twitter Cards 標(biāo)簽和選項(xiàng)的更多信息，請(qǐng)?jiān)L問『官方 Twitter Cards 文檔』( https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards)。

如果你的網(wǎng)站設(shè)置了 Open Graph 你可以使用 Twitter Cards 驗(yàn)證器^[2] 來調(diào)試及查看顯示效果

Open Graph 與 Twitter Cards 常用屬性匯總

Facebook 和 Twitter 提供了有關(guān)如何使用上述元標(biāo)記的指南。在下表中，我們總結(jié)了他們的幾個(gè)常用屬性。

總結(jié)

本文講解了如何通過 Open Graph 以及 Twitter Cards 設(shè)置社交媒體元標(biāo)簽。正確的設(shè)置這些 meta tag，在社交媒體中顯示內(nèi)容豐富的卡片，能夠讓你的受眾眼前一亮。快去試試吧！

Reference