Web サイトリンクのマイクロ機能

  • [アーティクル]

Microsoft Teams でコンテンツを共有する最も一般的な方法は、リンク経由です。 リンクの場合、Teams はリンクのプレビューをアダプティブ カードに展開し、画像、タイトル、説明などの情報を表示します。 schema.org メタデータとマイクロ機能テンプレートを使用すると、Microsoft Teams にアプリをインストールせずに、リンクの豊富なアンファール プレビューを表示できます。

Web サイトに schema.org を追加する

Schema.org は、インターネット上の構造化データのスキーマのオープンソース標準です。 web サイトに schema.org を追加し、マイクロ機能テンプレート のプロパティを使用して、Microsoft Teams のリンクのリッチ プレビューを削除します。

注:

Web サイトに schema.org を既に追加している場合は、Teams メッセージ作成領域に貼り付けることで、リンクのリッチ アンファール プレビューを表示できます。

web サイトに schema.org とサポートされている @type 属性を指定します。 各 @type 属性に、Web サイトに適用されるマイクロ機能テンプレートで使用できるプロパティを含めます。

リンクのリッチ アンファール プレビューを有効にするには、次の手順に従います。

  1. index.html ファイルで、 型を <script> として application/ld+json持つ要素を作成します。

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

  2. スクリプト タグのように @context 、値 http://schema.org を持つ属性を追加します。

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

  3. @type属性と name 属性をスクリプト タグに追加します。

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

  4. マイクロ機能テンプレートに一覧表示されているプロパティを追加します。

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

    schema.org で使用できる各種類のプロパティを Web サイトに追加することもできます。 Teams は、schema.org で使用できるサポートされているマイクロ機能テンプレートのすべてのプロパティを認識します。

  5. スクリプト タグにすべてのプロパティを追加したら、Web サイトの HTML ページにスクリプト タグを追加します。

マイクロ機能テンプレート

Teams クライアントでサポートされているマイクロ機能テンプレートを次に示します。

注:

Web サイトのリンクにサポートされているマイクロ機能テンプレートがない場合、Teams は既定で現在の URL プレビューへのリンクを展開解除します。

Article テンプレートの JSON コード サンプルを次に示します。

{
    "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}"
    }
}
プロパティ 説明
@type 記事
image 記事の 画像の URL。
name 作成者の名前。
見出し 記事の見出し。
creator 記事の作成者。
url 記事の公式サイトの URL。

記事の種類の展開解除エクスペリエンスの例: Microsoft Teams の記事テンプレートの展開解除エクスペリエンスを示すスクリーンショット。

アダプティブ カードのリッチ 展開プレビューにマップされたスキーマ メタデータの例を次に示します。

図は、アダプティブ カードの豊富な展開プレビューの要素にマップされたスキーマ メタデータの例を示しています。

schema.org 検証コントロールに移動して、Web サイトのリンク メタデータが schema.org 標準に従うかどうかを検証します。 検証が成功したら、Teams 新規作成メッセージ領域に Web サイト リンクを貼り付けて、リンクのリッチ アンファール プレビューを表示します。

スクリーンショットは、Teams のマイクロ機能 Web サイト リンクの豊富なアンファール プレビュー エクスペリエンスの例を示しています。

関連項目

リンク展開を追加する