我越是孤独，越是没有朋友，越是没有支持，我就得越尊重自己。——《简爱》
今天发现一个问题，有的网页分享出来是带标题、描述和图标的
如何让它识别出来呢？
这遵循一个“开放图谱协议”
https://ogp.me/
开放图谱协议使任何网页都可以成为社交图谱中的丰富对象。例如，这在 Facebook 上使用，允许任何网页具有与 Facebook 上任何其他对象相同的功能。
比如
要将网页转换为图形对象，您需要向页面添加基本元数据。我们的协议初始版本基于 RDFa，这意味着您将在网页的
<head>中放置额外的<meta>标记。每个页面的四个必需属性是：
og:title- 对象应出现在图表中的标题，例如“The Rock”。og:type- 对象的类型，例如“video.movie”。根据您指定的类型，可能还需要其他属性。og:image- 图像 URL，应代表图表中的对象。og:url- 对象的规范 URL，将用作图表中的永久 ID，例如“https://www.imdb.com/title/tt0117500/”。
然后我研究了一下，比如这里微信的，三个元素可以这么配置：
代码语言：javascript复制<!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，则描述需要如下配置
<!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网页源码注释里发现的
<!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识别为一个小卡片
