HTML問(wèn)題：如何實(shí)現(xiàn)分享URL預(yù)覽？
1. 需求分析
為了提高用戶(hù)對(duì)頁(yè)面鏈接分享的體驗(yàn)，需要對(duì)分享鏈接做一些處理。
以 Telegram(國(guó)外某一通訊軟件) 為例，當(dāng)在 Telegram 上分享已做過(guò)處理的鏈接時(shí)，它會(huì)自動(dòng)嘗試獲取鏈接的預(yù)覽信息，包括標(biāo)題、描述和圖片。
如此當(dāng)接收者看到時(shí)，可以立即獲取到分享鏈接的一些重要信息。這有助于接收者更好地了解鏈接的內(nèi)容，決定是否點(diǎn)擊查看詳細(xì)內(nèi)容。
2. 實(shí)現(xiàn)步驟
（1）實(shí)現(xiàn)前的說(shuō)明
對(duì)于URL分享預(yù)覽這個(gè)功能問(wèn)題，在項(xiàng)目中挺常用的，只不過(guò)今天我們是以一些框架分享API的底層原理角度來(lái)講的。
實(shí)現(xiàn)這種功能的關(guān)鍵，是在分享的鏈接中嵌入適當(dāng)?shù)脑獢?shù)據(jù)信息，應(yīng)用軟件會(huì)自動(dòng)解析，請(qǐng)求分享鏈接的預(yù)覽信息，并根據(jù)返回的元數(shù)據(jù)生成預(yù)覽卡片。
對(duì)于國(guó)內(nèi)的應(yīng)用軟件，目前我試過(guò)抖音，它可以實(shí)現(xiàn)分享和復(fù)制粘貼都自動(dòng)解析，而微信、QQ等只能實(shí)現(xiàn)分享的自動(dòng)解析。
對(duì)于國(guó)外的應(yīng)用軟件，我只實(shí)驗(yàn)過(guò)Telegram，它可以實(shí)現(xiàn)分享和復(fù)制粘貼都自動(dòng)解析，但我想Facebook、Twitter、Instagram這些應(yīng)用應(yīng)該也都是可以的。
（2）實(shí)現(xiàn)代碼
實(shí)現(xiàn)URL鏈接的分享預(yù)覽，你可以使用Open Graph協(xié)議或Twitter Cards，然后在 HTML 的<head>標(biāo)簽中，添加以下meta標(biāo)簽來(lái)定義鏈接預(yù)覽的信息。
使用時(shí)，將所有meta全部復(fù)制過(guò)去，然后根據(jù)需求進(jìn)行自定義即可。
還要注意兩點(diǎn)，確保你頁(yè)面的服務(wù)器正確配置了 SSL 證書(shū)，以及確保鏈接的URL有效（即：服務(wù)器沒(méi)有做白名單限制）。
<head>
<!-- Open Graph 協(xié)議 -->
<meta property="og:title" content="預(yù)覽標(biāo)題">
<meta property="og:description" content="預(yù)覽描述">
<meta property="og:image:width" content="圖片寬度">
<meta property="og:image:height" content="圖片高度">
<meta property="og:image" content="預(yù)覽圖片的URL">
<meta property="og:url" content="鏈接的URL">
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="預(yù)覽標(biāo)題">
<meta name="twitter:description" content="預(yù)覽描述">
<meta property="twitter:image:width" content="圖片寬度">
<meta property="twitter:image:height" content="圖片高度">
<meta name="twitter:image" content="預(yù)覽圖片的URL">
<meta name="twitter:url" content="鏈接的URL">
</head>下面我們做一些概念的整理、總結(jié)和學(xué)習(xí)。
3. 問(wèn)題詳解
（1）什么是Open Graph協(xié)議？
Open Graph協(xié)議是一種用于在社交媒體平臺(tái)上定義和傳遞網(wǎng)頁(yè)元數(shù)據(jù)的協(xié)議。它由 Facebook 提出，并得到了其他社交媒體平臺(tái)的支持和采納。Open Graph 協(xié)議旨在標(biāo)準(zhǔn)化網(wǎng)頁(yè)上的元數(shù)據(jù)，使網(wǎng)頁(yè)在社交媒體上的分享和預(yù)覽更加一致和可控。
通過(guò)在網(wǎng)頁(yè)的 HTML <head> 標(biāo)簽中添加特定的 meta 標(biāo)簽，使用 Open Graph 協(xié)議可以定義和傳遞與網(wǎng)頁(yè)相關(guān)的元數(shù)據(jù)信息，如標(biāo)題、描述、圖片等。這些元數(shù)據(jù)信息可以被社交媒體平臺(tái)解析和使用，用于生成鏈接預(yù)覽、分享內(nèi)容和提供更豐富的社交圖譜。
使用 Open Graph 協(xié)議，網(wǎng)頁(yè)的所有者可以控制鏈接在社交媒體上的預(yù)覽內(nèi)容，確保鏈接在分享時(shí)顯示的標(biāo)題、描述和圖片等信息準(zhǔn)確、有吸引力，并能夠準(zhǔn)確傳達(dá)鏈接的主題和內(nèi)容。這有助于提高鏈接的點(diǎn)擊率、轉(zhuǎn)化率和用戶(hù)體驗(yàn)。
Open Graph 協(xié)議定義了一組標(biāo)準(zhǔn)的 meta 標(biāo)簽屬性，如 og:title、og:description、og:image 等，用于提供鏈接預(yù)覽所需的元數(shù)據(jù)信息。通過(guò)在網(wǎng)頁(yè)中添加這些 meta 標(biāo)簽并設(shè)置相應(yīng)的屬性值，可以實(shí)現(xiàn)鏈接預(yù)覽在社交媒體平臺(tái)上的一致展示。
需要注意的是，Open Graph 協(xié)議是一種開(kāi)放的標(biāo)準(zhǔn)，并不限于 Facebook 平臺(tái)。其他社交媒體平臺(tái)，如 Twitter、LinkedIn 等，也支持使用 Open Graph 協(xié)議定義和傳遞網(wǎng)頁(yè)元數(shù)據(jù)，以實(shí)現(xiàn)鏈接預(yù)覽的一致性。
（2）什么是Twitter Cards？
Twitter Cards 是一種由 Twitter 推出的功能，它允許網(wǎng)站所有者在他們的網(wǎng)頁(yè)上定義和傳遞特定的元數(shù)據(jù)，以便在 Twitter 上分享鏈接時(shí)生成更豐富和吸引人的預(yù)覽卡片。通過(guò)使用 Twitter Cards，網(wǎng)頁(yè)鏈接在 Twitter 上的分享可以展示標(biāo)題、描述、圖片、鏈接和其他相關(guān)信息，以提供更具吸引力和信息豐富的鏈接預(yù)覽。
Twitter Cards 提供了多種類(lèi)型的卡片，以適應(yīng)不同類(lèi)型的內(nèi)容和需求。以下是 Twitter Cards 的一些常見(jiàn)類(lèi)型：
- Summary Card：Summary Card 類(lèi)型的卡片包含一個(gè)標(biāo)題、描述和可選的圖片。它適用于分享文章、博客帖子等內(nèi)容。
- Summary Card with Large Image：Summary Card with Large Image 類(lèi)型的卡片與 Summary Card 類(lèi)型類(lèi)似，但圖片尺寸更大，更突出地展示在卡片上。
- App Card：App Card 類(lèi)型的卡片用于分享移動(dòng)應(yīng)用程序的信息。它包含應(yīng)用的名稱(chēng)、圖標(biāo)、描述和下載按鈕，以便用戶(hù)可以直接從預(yù)覽卡片中下載應(yīng)用。
- Player Card：Player Card 類(lèi)型的卡片用于分享包含媒體播放器的內(nèi)容，如音頻文件、視頻等。它允許在預(yù)覽卡片上直接播放媒體內(nèi)容。
通過(guò)在網(wǎng)頁(yè)的 HTML <head> 標(biāo)簽中添加特定的 meta 標(biāo)簽，使用 Twitter Cards 可以定義和傳遞與鏈接預(yù)覽相關(guān)的元數(shù)據(jù)信息，如標(biāo)題、描述、圖片、鏈接等。這些元數(shù)據(jù)信息將被 Twitter 解析和使用，用于生成鏈接預(yù)覽卡片。
使用 Twitter Cards 可以使鏈接在 Twitter 上的分享更加吸引人和信息豐富，提高鏈接的點(diǎn)擊率和用戶(hù)參與度。它為網(wǎng)站所有者提供了更多控制鏈接在 Twitter 上展示的能力，并提供了一種更好的方式來(lái)呈現(xiàn)他們的內(nèi)容。
