Compartilhar via

Micro capacidades para ligações de sites

  • Artigo

A forma mais comum de partilhar conteúdos no Microsoft Teams é através de ligações. Para qualquer ligação, o Teams revela uma pré-visualização da ligação num Cartão Ajustável com as informações, como imagem, título e descrição. Pode utilizar os metadados schema.org e os modelos de micro-capacidade para mostrar pré-visualizações avançadas das suas ligações sem instalar a sua aplicação no Microsoft Teams.

Adicionar schema.org ao seu site

Schema.org é um padrão open source para esquemas de dados estruturados na Internet. Adicione schema.org ao seu site e utilize as propriedades nos modelos de micro-capacidade para desfraldar pré-visualizações avançadas das suas ligações no Microsoft Teams.

Observação

Se já adicionou schema.org ao seu site, pode ver a pré-visualização avançada da sua ligação ao colá-la na área de composição de mensagens do Teams.

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

Para ativar pré-visualizações avançadas das ligações, siga estes passos:

  1. No ficheiro 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 etiqueta de script.

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

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

    Também pode adicionar as propriedades de cada tipo disponível no schema.org ao seu site. O Teams reconhece todas as propriedades dos modelos de micro-capacidade suportados disponíveis no schema.org.

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

Modelos de micro-capacidade

Seguem-se os modelos de micro-capacidade suportados para o cliente do Teams:

Observação

Se a ligação do site não tiver os modelos de micro-capacidade suportados, o Teams predefine a ligação para a pré-visualização do URL atual.

Segue-se 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 de para o artigo.
nome Nome do autor.
cabeçalho Título do artigo.
criador Autor do artigo.
url URL do site oficial do artigo.

Exemplo da experiência de desfraldamento do tipo de artigo: Captura de ecrã a mostrar uma experiência de desfraldamento do modelo de artigo no Microsoft Teams.

Segue-se um exemplo de metadados de esquema mapeados para a pré-visualização avançada de um Cartão Ajustável:

Gráfico a mostrar um exemplo de metadados de esquema mapeados para elementos na pré-visualização avançada de um Cartão Ajustável.

Aceda a schema.org validador para validar se os metadados de ligação do seu site estão de acordo com schema.org normas. Depois de a validação ser concluída com êxito, cole a ligação do site na área de composição de mensagens do Teams para ver a pré-visualização avançada da ligação.

Captura de ecrã a mostrar um exemplo de experiência de pré-visualização avançada de um site de micro-capacidade no Teams.

Confira também

Adicionar desenrolamento de link