Partager via

Micro-fonctionnalités pour les liens de site web

  • Article

La façon la plus courante de partager du contenu dans Microsoft Teams consiste à utiliser des liens. Pour n’importe quel lien, Teams déploie un aperçu du lien dans une carte adaptative avec les informations telles que l’image, le titre et la description. Vous pouvez utiliser les métadonnées schema.org et les modèles de micro-fonctionnalité pour afficher des aperçus complets de vos liens sans installer votre application dans Microsoft Teams.

Ajouter schema.org à votre site web

Schema.org est une norme open source pour les schémas de données structurées sur Internet. Ajoutez schema.org à votre site web et utilisez les propriétés des modèles de micro-fonctionnalité pour déployer des aperçus complets de vos liens dans Microsoft Teams.

Remarque

Si vous avez déjà ajouté schema.org à votre site web, vous pouvez afficher l’aperçu complet de votre lien en le collant dans la zone de rédaction de messages Teams.

Spécifiez le schema.org et l’attribut pris en charge @type pour votre site web. Pour chaque @type attribut, incluez les propriétés disponibles dans le modèle de micro-fonctionnalité qui s’appliquent à votre site web.

Pour activer les aperçus de déploiement enrichi de vos liens, procédez comme suit :

  1. Dans le fichier index.html, créez un <script> élément avec le type application/ld+json.

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

  2. Ajoutez l’attribut @context avec la valeur comme http://schema.org dans la balise de script.

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

  3. Ajoutez les @type attributs et name à la balise de script.

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

  4. Ajoutez les propriétés répertoriées dans le modèle de micro-fonctionnalité.

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

    Vous pouvez également ajouter les propriétés de chaque type disponible dans le schema.org à votre site web. Teams reconnaît toutes les propriétés des modèles de micro-fonctionnalité pris en charge disponibles sur schema.org.

  5. Une fois que vous avez ajouté toutes les propriétés à la balise de script, ajoutez la balise de script à la page HTML de votre site web.

Modèles de micro-fonctionnalité

Voici les modèles de micro-fonctionnalité pris en charge pour le client Teams :

Remarque

Si le lien du site web n’a pas les modèles de micro-fonctionnalité pris en charge, Teams utilise par défaut le lien vers le déploiement de l’aperçu de l’URL actuel.

Voici un exemple de code JSON pour le modèle Article :

{
    "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}"
    }
}
Propriété Description
@type Article
image URL de l’image de pour l’article.
nom Nom de l’auteur.
Titre Titre de l’article.
Créateur Auteur de l’article.
url URL du site web officiel de l’article.

Exemple d’expérience de déploiement pour le type d’article : Capture d’écran montrant une expérience de déploiement du modèle d’article dans Microsoft Teams.

Voici un exemple de métadonnées de schéma mappées à l’aperçu de déploiement complet d’une carte adaptative :

Le graphique montre un exemple de métadonnées de schéma mappées à des éléments dans l’aperçu de déploiement complet d’une carte adaptative.

Accédez à schema.org validateur pour vérifier si les métadonnées de lien de votre site web sont conformes aux normes schema.org. Une fois la validation réussie, collez le lien du site web dans la zone de rédaction des messages Teams pour afficher l’aperçu complet de votre lien.

Capture d’écran montrant un exemple d’expérience d’aperçu complet d’un lien de site web de micro-fonctionnalité dans Teams.

Voir aussi

Ajouter un déploiement de lien