背景
Slack で URL を貼り付けたときに下記のスクリーンショットのように「Written by」「Reading time」といった要素をプレビューに含めることができる。
これは、下記のメタ要素の追加で実現ができる。
<meta name="twitter:label1" content="Written by" />
<meta name="twitter:data1" content="hiro" />
<meta name="twitter:label2" content="Reading time" />
<meta name="twitter:data2" content="2 minutes" />これを EC の商品詳細画面から価格などを表示するのに使えないかと考え調査してみた。
twitter:label1 や twitter:data1 とは何か
twitter:label1というように Twitter 固有のタグのようだ。Slack ではプレビューできるが、Twitter のツイート上ではプレビューできない。
カードプロパティ
twitter:label1, twitter:data1, twitter:label2, twitter:data2 は公式リファレンスには載っていない。
Product Card
公式ページはリンク切れしているようだったので、Wayback Machine経由で確認ができた。
概要
The Product Card is a great way to represent retail items on Twitter, and to drive sales. This Card type is designed to showcase your products via an image, a description, and allow you to highlight two other key details about your product.
[訳]: 製品カードは、Twitter で小売商品を表現し、売り上げを伸ばすための優れた方法です。このカードタイプは、画像や説明で商品を紹介し、商品に関する他の 2 つの重要な詳細を強調できるように設計されています。
スクリーンショット
| web | mobile |
|---|---|
 |  |
コード
<meta name="twitter:card" content="product" />
<meta name="twitter:site" content="@twitter" />
<meta name="twitter:creator" content="@twitter" />
<meta name="twitter:title" content="Logo Mug" />
<meta
name="twitter:description"
content="The perfect pick-me-up. Enjoy your favorite blend with this coffee mug featuring the Twitter logo. Make every work day good to the last drop."
/>
<meta
name="twitter:image"
content="https://twitter.siglercompanies.com/graphics/00000001/mug-new.jpg"
/>
<meta name="twitter:data1" content="$3" />
<meta name="twitter:label1" content="Price" />
<meta name="twitter:data2" content="Black" />
<meta name="twitter:label2" content="Color" />プロパティ
| プロパティ名 | 概要 | 必須 |
|---|---|---|
twitter:data1 | このフィールドには文字列が必要であり、価格、在庫のあるアイテム、サイズなどのラベルの値を指定できる。 | 必須 |
twitter:label1 | このフィールドには文字列も必要であり、提供するデータのタイプ（価格、国など）を指定できる。 | 必須 |
twitter:data2 | 〃 | 〃 |
twitter:label2 | 〃 | 〃 |
twitter:card
公式リファレンスを参照するとtwitter:cardに指定できるタイプは以下の通り。
| カードのプロパティ | 説明 |
|---|---|
twitter:card | カードタイプは、summary、summary_large_image、app、playerいずれかになる。 |
そもそも<meta name="twitter:card" content="product">の指定が意味をなさないようになっている（なかったことになっている）。