Поделиться через

Микро-возможности для ссылок на веб-сайт

  • Статья

Самый распространенный способ предоставления общего доступа к содержимому в Microsoft Teams — это ссылки. Для любой ссылки Teams разворачивает предварительный просмотр ссылки в адаптивную карточку с такими сведениями, как изображение, название и описание. Вы можете использовать метаданные schema.org и шаблоны микро-возможностей для отображения полнофункционированных предварительных просмотров ссылок без установки приложения в Microsoft Teams.

Добавление schema.org на веб-сайт

Schema.org — это стандарт с открытым кодом для схем структурированных данных в Интернете. Добавьте 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 Статья
изображение URL-адрес изображения статьи.
name Имя автора.
заголовок Заголовок статьи.
creator Автор статьи.
url URL-адрес официального веб-сайта статьи.

Пример процесса распаковки для типа статьи: снимок экрана: снимок экрана: процесс распаковки шаблона статьи в Microsoft Teams.

Ниже приведен пример метаданных схемы, сопоставленных с расширенным предварительным просмотром распутывания адаптивной карточки.

На рисунке показан пример метаданных схемы, сопоставленных с элементами в расширенном предварительном просмотре адаптивной карточки.

Перейдите в schema.org проверяющий элемент, чтобы проверить, соответствуют ли метаданные ссылки на веб-сайт schema.org стандартам. После успешной проверки вставьте ссылку на веб-сайт в области создания сообщений Teams, чтобы просмотреть расширенный предварительный просмотр ссылки.

Снимок экрана: пример полнофункционированного предварительного просмотра ссылки на веб-сайт с микро-возможностями в Teams.

См. также

Добавление разворачивающейся ссылки