我越是孤独,越是没有朋友,越是没有支持,我就得越尊重自己。——《简爱》

今天发现一个问题,有的网页分享出来是带标题、描述和图标的

如何让它识别出来呢?

这遵循一个“开放图谱协议”

https://ogp.me/

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

比如

要将网页转换为图形对象,您需要向页面添加基本元数据。我们的协议初始版本基于 RDFa,这意味着您将在网页的 <head> 中放置额外的 <meta> 标记。每个页面的四个必需属性是:

  • og:title - 对象应出现在图表中的标题,例如“The Rock”。
  • og:type - 对象的类型,例如“video.movi​​e”。根据您指定的类型,可能还需要其他属性。
  • og:image - 图像 URL,应代表图表中的对象。
  • og:url - 对象的规范 URL,将用作图表中的永久 ID,例如“https://www.imdb.com/title/tt0117500/”。

然后我研究了一下,比如这里微信的,三个元素可以这么配置:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en" prefix="og: https://ogp.me/ns#">
<head>
<title>网页标题</title>
<meta content="https://plus.hutool.cn/images/dromara/stream-query.png" itemprop="image" property="og:image">
<meta content="标题" itemprop="name" property="og:title">
<meta content="描述" property="og:description">
</head>
</html>

但是需要注意,这里如果是qq,则描述需要如下配置

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en" prefix="og: https://ogp.me/ns#">
<head>
<title>网页标题</title>
<meta content="https://plus.hutool.cn/images/dromara/stream-query.png" itemprop="image" property="og:image">
<meta content="标题" itemprop="name" property="og:title">
<meta content="描述" property="og:description">
<!-- qq desc -->
<meta content="QQ描述" itemprop="description" name="Description">
</head>
</html>

还有如果是企业微信内置浏览器分享网页,这个是在bilibili网页源码注释里发现的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en" prefix="og: https://ogp.me/ns#">
<head>
<title>网页标题</title>
<meta content="https://plus.hutool.cn/images/dromara/stream-query.png" itemprop="image" property="og:image">
<meta content="标题" itemprop="name" property="og:title">
<meta content="描述" property="og:description">
<!-- qq desc -->
<meta content="QQ描述" itemprop="description" name="Description">
</head>
<body>
<!-- 修复用企业微信内置浏览器分享网页时,生成的分享卡片封面图有误的问题(总是抓取body里的第一个非 .icon img) -->
<img src="https://plus.hutool.cn/images/dromara/stream-query.png" alt=""
style="display:none;width:0;height:0;position:absolute;top:0;left:0;visibility:hidden">
<h1>Foo</h1>
<p>Bar</p>
</body>
</html>

我们只需要这样配置,即可控制分享出来的网页链接小卡片被大部分主流APP识别为一个小卡片