Micro-recursos para links de sites

A maneira mais comum de compartilhar conteúdo no Microsoft Teams é por meio de links. Para qualquer link, o Teams desenrola uma visualização do link em um Cartão Adaptável com as informações como imagem, título e descrição. Você pode usar os metadados schema.org e os modelos de micro-recursos para mostrar visualizações avançadas de desenrolar de seus links sem instalar seu aplicativo no Microsoft Teams.

Adicionar schema.org ao seu site

Schema.org é um padrão de código aberto para esquemas de dados estruturados na Internet. Adicione schema.org ao seu site e use as propriedades nos modelos de micro-capacidade para descompactar visualizações avançadas de seus links no Microsoft Teams.

Observação

Se você já adicionou schema.org ao seu site, pode exibir a visualização avançada de desenrolamento do seu link colando-o na área de redação de mensagem do Teams.

Especifique a schema.org e o atributo com suporte @type para seu site. Para cada @type atributo, inclua as propriedades disponíveis no modelo de microfuncionalidade que se aplicam ao seu site.

Para habilitar visualizações avançadas de desenrolamento de seus links, siga estas etapas:

  1. No arquivo index.html, crie um <script> elemento com o tipo como application/ld+json.

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

  2. Adicione o @context atributo com o valor como http://schema.org na tag de script.

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

  3. Adicione os @type atributos and name à tag de script.

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

  4. Adicione as propriedades listadas no modelo de micro-capacidade.

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

    Você também pode adicionar as propriedades para cada tipo disponível no schema.org ao seu site. O Teams reconhece todas as propriedades para os modelos de micro-recursos com suporte disponíveis no schema.org.

  5. Depois de adicionar todas as propriedades à tag de script, adicione a tag de script à página HTML do seu site.

Modelos de micro-recursos

A seguir estão os modelos de micro-recurso com suporte para o cliente do Teams:

Observação

Se o link do site não tiver os modelos de micro-recurso com suporte, o Teams padronizará o link para o desenrolamento da visualização da URL atual.

Veja a seguir um exemplo de código JSON para o modelo de artigo:

{
    "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}"
    }
}
Propriedade Descrição
@type Artigo
imagem URL da imagem do para o artigo.
nome Nome do autor.
Título Manchete do artigo.
criador Autor do artigo.
url URL do site oficial do artigo.

Exemplo da experiência de desenrolamento para o tipo de artigo: a captura de tela mostra uma experiência de desenrolamento do modelo de artigo no Microsoft Teams.

Veja a seguir um exemplo de metadados de esquema mapeados para a visualização avançada de desenrolamento de um Cartão Adaptável:

O gráfico mostra um exemplo de metadados de esquema mapeados para elementos na visualização avançada de desenrolamento de um Cartão Adaptável.

Vá para schema.org validador para validar se os metadados do link do seu site estão de acordo com schema.org padrões. Depois que a validação for bem-sucedida, cole o link do site na área de redação de mensagem do Teams para exibir uma visualização avançada do seu link.

A captura de tela mostra um exemplo de experiência de visualização avançada de um link de site de micro-capacidade no Teams.

Confira também

Adicionar desenrolamento de link

  • Last updated on