网站链接的微功能

  • 项目

在 Microsoft Teams 中共享内容的最常见方法是通过链接。 对于任何链接，Teams 会通过图像、标题和说明等信息将链接预览展开到自适应卡片中。 可以使用 schema.org 元数据和 微功能 模板来显示链接的丰富展开预览，而无需在 Microsoft Teams 中安装应用。

将 schema.org 添加到网站

Schema.org 是 Internet 上结构化数据架构的开源标准。 将 schema.org 添加到网站，并使用微功能模板 中的属性展开 Microsoft Teams 中链接的丰富预览。

注意

如果已将 schema.org 添加到网站，可以通过将链接粘贴到 Teams 消息撰写区域中来查看链接的丰富展开预览。

指定 网站的 schema.org 和支持 @type 的属性。 对于每个 @type 属性，包括适用于网站的微功能模板中可用的属性。

若要启用链接的丰富展开预览，请执行以下步骤：

  1. 在 index.html 文件中，创建 <script> 类型为 的 application/ld+json元素。

    <head>
 <script type="application/ld+json">
 </script>
</head>

  2. @context使用 脚本标记中的 值http://schema.org添加 属性。

     <script type="application/ld+json">
  {
     "@context": "http://schema.org/",
  }
 </script>

  3. @type将 和 name 属性添加到脚本标记。

    <script type="application/ld+json">
  {
      "@context": "http://schema.org/",
      "@type": "Article",
      "name": "Contoso news"
  }
</script>

  4. 添加微功能模板中列出的属性。

    <script type="application/ld+json">
  {
      "@context": "http://schema.org/",
      "@type": "Article",
      "name": "Contoso news"
  }
</script>

    还可以将 schema.org 中可用的每种类型的属性添加到网站。 Teams 可识别 schema.org 中支持的微功能模板的所有属性。

  5. 将所有属性添加到脚本标记后，将脚本标记添加到网站 HTML 页面。

微功能模板

以下是 Teams 客户端支持的微功能模板：

注意

如果网站链接没有支持的微功能模板，Teams 会将当前 URL 预览的链接默认展开。

下面是文章模板的 JSON 代码示例：

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.4",
    "body":
    [
        {
            "type": "Container",
            "$when": "${image != null}",
            "backgroundImage":
            {
                "url": "${image}",
                "horizontalAlignment": "Center",
                "verticalAlignment": "Center"
            },
            "minHeight": "180px",
            "bleed": true,
            "items":
            []
        },
        {
            "type": "TextBlock",
            "$when": "${name != null}",
            "text": "${name}",
            "size": "Medium",
            "weight": "Bolder",
            "wrap": true,
            "spacing": "Small",
            "maxLines": 2
        },
        {
            "type": "TextBlock",
            "$when": "${name == null && headline != null}",
            "text": "${headline}",
            "size": "Medium",
            "weight": "Bolder",
            "wrap": true,
            "spacing": "Small",
            "maxLines": 2
        },
        {
            "type": "TextBlock",
            "$when": "${creator != null}",
            "text": "${creator}",
            "isSubtle": true,
            "spacing": "Small",
            "size": "Small"
        },
        {
            "type": "TextBlock",
            "$when": "${description != null}",
            "text": "${description}",
            "isSubtle": true,
            "spacing": "Small",
            "wrap": true,
            "maxLines": 2,
            "size": "Small"
        }
    ],
    "selectAction":
    {
        "type": "Action.OpenUrl",
        "url": "${url}"
    }
}
属性 说明
@type 文章
image 文章的图像的 URL。
name 作者的名称。
标题 文章的标题。
Creator 文章的作者。
url 文章官方网站的 URL。

文章类型的展开体验示例： 屏幕截图显示了 Microsoft Teams 中文章模板的展开体验。

下面是映射到自适应卡片的丰富展开预览的架构元数据示例：

图形显示了映射到自适应卡片丰富展开预览中的元素的架构元数据示例。

转到 schema.org 验证程序 ，验证网站链接元数据是否符合 schema.org 标准。 验证成功后，将网站链接粘贴到 Teams 撰写消息区域中，以查看链接的丰富展开预览。

屏幕截图显示了 Teams 中微功能网站链接的丰富展开预览体验的示例。

另请参阅

添加链接展开