个人博客:
http://www.milovetingting.cn

介绍

Open Graph 协议使任何网页都可以成为社交中的丰富对象。例如,用于 Facebook 以允许任何网页具有与 Facebook 上任何其他对象相同的功能。

以下是把链接分享到钉钉,钉钉识别后显示的效果:

image-20230526140415172

基本元数据

要将网页变成图形对象,需要将基本元数据添加到页面。在网页中放置额外的<meta>标签。<head>页面的几个必需属性是:

  • og:title- 对象的标题,如上图中的第一行。
  • og:description- 对象的描述,如上图的第二行。
  • og:image- 一个图像 URL,如上图中的右侧图像。
  • og:url- 对象的规范 URL,将用作图表中的永久 ID,例如“https://www.milovetingting.cn/”。

一个简单的示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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="这是标题">
<meta property="og:description" content="这是内容">
<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>示例页面</title>
</head>

<body>
<p>这是一个示例页面。</p>
</body>

</html>

具体案例

需求

web中某个具体的页面分享到whatsapp,并能显示为卡片形式,当点击卡片时跳转我们指定的页面。

实现

由于项目是用flutter开发,整个web实际运行时都是在index.html上显示。而由于我们需要在不同页面显示不同的标题、描述、图片等信息,因此需要动态修改这些元数据。

方案一

通过js脚本读取当前网页的url,并提取需要的参数,再通过js动态修改对应的meta元素。

运行后,通过查看网页元素,发现meta信息已经设置上去,但是在whatsapp中无法识别。

原因:og元数据不能通过js动态设置。

方案二

通过访问服务端的一个接口,在接口中返回具体的html页面数据,然后在html中再作跳转。

当分享到whatsapp时,会首先访问这个接口,接口返回的数据,会被识别出来,从而形成卡片效果。而当点击时,会先访问到接口返回的页面,然后这个页面会做重定向到实际需要分享的页面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@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=\"这是标题"+random.nextInt(100)+"\">\n" +
" <meta property=\"og:description\" content=\"这是内容"+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>示例页面" + random.nextInt(100) + "</title>\n" +
"</head>\n" +
"\n" +
"<body>\n" +
" <p>这是一个示例页面。</p>\n" +
"</body>\n" +
"\n" +
"</html>";
}

}

参考

更多meta数据可参考下面网址:

https://ogp.me/