Edit

Micro-capabilities for website links

  • Article

The most common way to share content in Microsoft Teams is through links. For any link, Teams unfurls a preview of the link into an Adaptive Card with the information such as image, title, and description. You can use the schema.org metadata and the micro-capability templates to show rich unfurl previews of your links without installing your app in Microsoft Teams.

Add schema.org to your website

Schema.org is an open-source standard for schemas of structured data on the internet. Add schema.org to your website and use the properties in the micro-capability templates to unfurl rich previews of your links in Microsoft Teams.

Note

If you've already added schema.org to your website, you can view the rich unfurl preview of your link by pasting it in the Teams message compose area.

Specify the schema.org and the supported @type attribute to your website. For each @type attribute, include the properties available in the micro-capability template that apply to your website.

To enable rich unfurl previews of your links, follow these steps:

  1. In the index.html file, create a <script> element with the type as application/ld+json.

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

  2. Add the @context attribute with the value as http://schema.org in the script tag.

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

  3. Add the @type and name attributes to the script tag.

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

  4. Add the properties listed in the micro-capability template.

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

    You can also add the properties for each type available in the schema.org to your website. Teams recognizes all the properties for the supported micro-capability templates available at schema.org.

  5. After you've added all the properties to the script tag, add the script tag to your website HTML page.

Micro-capability templates

The following are the supported micro-capability templates for Teams client:

Note

If the website link doesn't have the supported micro-capability templates, Teams defaults the link to the current URL preview unfurling.

The following is a JSON code sample for the Article template:

{
    "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}"
    }
}
Property Description
@type Article
image URL of the image of for the article.
name Name of the author.
headline Headline for the article.
creator Author of the article.
url URL of the article's official website.

Example of the unfurling experience for article type: Screenshot shows a unfurling experience of the article template in Microsoft Teams.

The following is an example of schema metadata mapped to the rich unfurling preview of an Adaptive Card:

Graphic shows an example of schema metadata mapped to elements in the rich unfurling preview of an Adaptive Card.

Go to schema.org validator to validate if your website link metadata is as per schema.org standards. After the validation is successful, paste the website link in Teams compose message area to view rich unfurl preview of your link.

Screenshot shows an example of rich unfurl preview experience of a micro-capability website link in Teams.

See also

Add link unfurling