介绍
Open Graph 协议使任何网页都可以成为社交中的丰富对象。例如，用于 Facebook 以允许任何网页具有与 Facebook上任何其他对象相同的功能。
以下是把链接分享到钉钉，钉钉识别后显示的效果：
image-20230526140415172.png
基本元数据
要将网页变成图形对象，需要将基本元数据添加到页面。在网页中放置额外的<meta>标签。<head>页面的几个必需属性是：
-
og:title- 对象的标题，如上图中的第一行。 -
og:description- 对象的描述，如上图的第二行。 -
og:image- 一个图像 URL，如上图中的右侧图像。 -
og:url- 对象的规范 URL，将用作图表中的永久 ID，例如“https://www.milovetingting.cn/”。
一个简单的示例:
<!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时，会首先访问这个接口，接口返回的数据，会被识别出来，从而形成卡片效果。而当点击时，会先访问到接口返回的页面，然后这个页面会做重定向到实际需要分享的页面。
@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数据可参考下面网址:
网友评论