The Open Graph protocol-开放图谱协议的介绍及应用

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

介绍

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

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

基本元数据

要将网页变成图形对象，需要将基本元数据添加到页面。在网页中放置额外的<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数据可参考下面网址:

https://ogp.me/