[Twitter Cards] meta name=[twitter:label1]を調べる
背景
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">の指定が意味をなさないようになっている（なかったことになっている）。
検証
検証用のページを用意した。
Twitter で埋め込んだ際は特に data1 などの情報は表示されず、Slcak では表示されるといった想定の動きをしている。ソースは、こちら
まとめ
twitter:label1, twitter:data1, twitter:label2, twitter:data2 は Product Card の仕様であった。
本来の目的あった「価格を表示する」などは Product Card の仕様そのものではあったが、Product Card という仕様自体は Twitter Cards 上から既に消えていた。Slack などで利用できるのは、単に後方互換を保ってくれているだけのようだ。個人サイトなどで利用するには影響はなさそうだが、EC サイトなど売上に直結するようなシーンでの使用は避けたほうが良さそうだ。また使えるシーンも限られているため、利用することは現実的には難しそうだ。