阿超 > 网页让软件识别的小卡片

网页让软件识别的小卡片

2024-06-16

前端

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

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

如何让它识别出来呢？

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

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识别为一个小卡片