Share via

Micro funcionalidades para vínculos a sitios web

  • Artículo

La manera más común de compartir contenido en Microsoft Teams es a través de vínculos. Para cualquier vínculo, Teams desplegó una vista previa del vínculo en una tarjeta adaptable con información como imagen, título y descripción. Puede usar los metadatos de schema.org y las plantillas de microinquilino para mostrar las vistas previas completas de los vínculos sin instalar la aplicación en Microsoft Teams.

Agregar schema.org a su sitio web

Schema.org es un estándar de código abierto para esquemas de datos estructurados en Internet. Agregue schema.org a su sitio web y use las propiedades de las plantillas de micro-funcionalidad para desenrollar las vistas previas enriquecidas de los vínculos en Microsoft Teams.

Nota:

Si ya ha agregado schema.org a su sitio web, puede ver la vista previa de unfurl enriquecida del vínculo pegándola en el área de redacción de mensajes de Teams.

Especifique el schema.org y el atributo admitido @type en el sitio web. Para cada @type atributo, incluya las propiedades disponibles en la plantilla de micro funcionalidad que se aplican a su sitio web.

Para habilitar las vistas previas de desplegación enriquecidas de los vínculos, siga estos pasos:

  1. En el archivo index.html, cree un <script> elemento con el tipo como application/ld+json.

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

  2. Agregue el @context atributo con el valor como http://schema.org en la etiqueta de script.

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

  3. Agregue los @type atributos y name a la etiqueta de script.

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

  4. Agregue las propiedades enumeradas en la plantilla de micro funcionalidad.

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

    También puede agregar las propiedades de cada tipo disponible en la schema.org a su sitio web. Teams reconoce todas las propiedades de las plantillas de micro funcionalidad admitidas disponibles en schema.org.

  5. Después de agregar todas las propiedades a la etiqueta de script, agregue la etiqueta de script a la página HTML del sitio web.

Plantillas de micro funcionalidad

A continuación se muestran las plantillas de micro funcionalidad admitidas para el cliente de Teams:

Nota:

Si el vínculo al sitio web no tiene las plantillas de micro funcionalidad admitidas, Teams establece de forma predeterminada el vínculo a la versión preliminar de la dirección URL actual que se desplegó.

A continuación se muestra un ejemplo de código JSON para la plantilla Artículo:

{
    "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}"
    }
}
Propiedad Descripción
@type Artículo
imagen Dirección URL de la imagen de para el artículo.
name Nombre del autor.
Titular Título del artículo.
creador Autor del artículo.
url Dirección URL del sitio web oficial del artículo.

Ejemplo de la experiencia de desplegada para el tipo de artículo: captura de pantalla que muestra una experiencia de desplegada de la plantilla de artículo en Microsoft Teams.

A continuación se muestra un ejemplo de metadatos de esquema asignados a la vista previa de desplegada enriquecida de una tarjeta adaptable:

El gráfico muestra un ejemplo de metadatos de esquema asignados a elementos de la vista previa de desplegada enriquecida de una tarjeta adaptable.

Vaya a schema.org validador para validar si los metadatos del vínculo del sitio web son según schema.org estándares. Una vez que la validación se haya realizado correctamente, pegue el vínculo del sitio web en el área de mensajes de redacción de Teams para ver la vista previa completa de unfurl del vínculo.

Captura de pantalla que muestra un ejemplo de la experiencia de vista previa de un despliegue enriquecido de un vínculo de sitio web de micro funcionalidad en Teams.

Vea también

Añadir una extensión de enlace