Partilhar via

Micro-funcionalidades para links de site

  • Artigo

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-funcionalidade para mostrar visualizações de desenrolamento avançadas 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-funcionalidade para desenrolar visualizações avançadas de seus links no Microsoft Teams.

Observação

Se você já tiver adicionado schema.org ao seu site, poderá exibir a versão prévia avançada do link colando-a na área de composição de mensagens do Teams.

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

Para habilitar visualizações de desenrolamento avançadas 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 marca de script.

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

  3. Adicione os @type atributos e name à marca 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-funcionalidade.

    <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 microapropriedade com suporte disponíveis em schema.org.

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

Modelos de microsusenciamento

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

Observação

Se o link do site não tiver os modelos de micro-funcionalidade compatíveis, o Teams padrão será o link para a 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.
Manchete 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: 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.

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

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

Confira também

Adicionar desenrolamento de link