介紹
Open Graph 協(xié)議使任何網(wǎng)頁(yè)都可以成為社交中的豐富對(duì)象墓赴。例如媳禁，用于 Facebook 以允許任何網(wǎng)頁(yè)具有與 Facebook上任何其他對(duì)象相同的功能立肘。
以下是把鏈接分享到釘釘，釘釘識(shí)別后顯示的效果：
基本元數(shù)據(jù)
要將網(wǎng)頁(yè)變成圖形對(duì)象，需要將基本元數(shù)據(jù)添加到頁(yè)面白胀。在網(wǎng)頁(yè)中放置額外的<meta>標(biāo)簽。<head>頁(yè)面的幾個(gè)必需屬性是：
-
og:title- 對(duì)象的標(biāo)題抚岗，如上圖中的第一行或杠。 -
og:description- 對(duì)象的描述，如上圖的第二行宣蔚。 -
og:image- 一個(gè)圖像 URL向抢，如上圖中的右側(cè)圖像。 -
og:url- 對(duì)象的規(guī)范 URL件已，將用作圖表中的永久 ID笋额，例如“https://www.milovetingting.cn/”。
一個(gè)簡(jiǎn)單的示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta property="og:title" content="這是標(biāo)題">
<meta property="og:description" content="這是內(nèi)容">
<meta property="og:image" content="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fbf6fe5f0-4e5c-4dd1-9545-f58151164f0c%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687600526&t=3464298caa9ef5ecf854ef360e9db93c">
<meta property="og:url" content="https://www.milovetingting.cn">
<title>示例頁(yè)面</title>
</head>
<body>
<p>這是一個(gè)示例頁(yè)面篷扩。</p>
</body>
</html>
具體案例
需求
將web中某個(gè)具體的頁(yè)面分享到whatsapp,并能顯示為卡片形式,當(dāng)點(diǎn)擊卡片時(shí)跳轉(zhuǎn)我們指定的頁(yè)面兄猩。
實(shí)現(xiàn)
由于項(xiàng)目是用flutter開(kāi)發(fā)，整個(gè)web實(shí)際運(yùn)行時(shí)都是在index.html上顯示鉴未。而由于我們需要在不同頁(yè)面顯示不同的標(biāo)題枢冤、描述、圖片等信息铜秆，因此需要?jiǎng)討B(tài)修改這些元數(shù)據(jù)淹真。
方案一：
通過(guò)js腳本讀取當(dāng)前網(wǎng)頁(yè)的url,并提取需要的參數(shù)，再通過(guò)js動(dòng)態(tài)修改對(duì)應(yīng)的meta元素连茧。
運(yùn)行后,通過(guò)查看網(wǎng)頁(yè)元素核蘸，發(fā)現(xiàn)meta信息已經(jīng)設(shè)置上去，但是在whatsapp中無(wú)法識(shí)別啸驯。
原因：og元數(shù)據(jù)不能通過(guò)js動(dòng)態(tài)設(shè)置客扎。
方案二：
通過(guò)訪問(wèn)服務(wù)端的一個(gè)接口，在接口中返回具體的html頁(yè)面數(shù)據(jù)罚斗，然后在html中再作跳轉(zhuǎn)徙鱼。
當(dāng)分享到whatsapp時(shí)，會(huì)首先訪問(wèn)這個(gè)接口针姿，接口返回的數(shù)據(jù)袱吆，會(huì)被識(shí)別出來(lái)，從而形成卡片效果距淫。而當(dāng)點(diǎn)擊時(shí)绞绒，會(huì)先訪問(wèn)到接口返回的頁(yè)面，然后這個(gè)頁(yè)面會(huì)做重定向到實(shí)際需要分享的頁(yè)面榕暇。
@Controller
@RequestMapping("/share")
public class ShareController {
@RequestMapping("/chance")
@ResponseBody
public String share() {
Random random = new Random();
return "<!DOCTYPE html>\n" +
"<html>\n" +
"\n" +
"<head>\n" +
" <meta charset=\"UTF-8\">\n" +
" <meta http-equiv=\"refresh\" content=\"1;url=https://www.milovetingting.cn\"> \n" +
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0\">\n" +
" <meta property=\"og:title\" content=\"這是標(biāo)題"+random.nextInt(100)+"\">\n" +
" <meta property=\"og:description\" content=\"這是內(nèi)容"+random.nextInt(100)+"\">\n" +
" <meta property=\"og:url\" content=\"https://www.milovetingting.cn\" />" +
" <meta property=\"og:image\" content=\"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fbf6fe5f0-4e5c-4dd1-9545-f58151164f0c%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687600526&t=3464298caa9ef5ecf854ef360e9db93c\" />" +
" <title>示例頁(yè)面" + random.nextInt(100) + "</title>\n" +
"</head>\n" +
"\n" +
"<body>\n" +
" <p>這是一個(gè)示例頁(yè)面处铛。</p>\n" +
"</body>\n" +
"\n" +
"</html>";
}
}
參考
更多meta數(shù)據(jù)可參考下面網(wǎng)址:
