Slackしか使っていないTwitter用のメタタグがある
ウェブサイトのリンクプレビューや SNS でのシェア時に表示される情報を制御するため、各プラットフォームは独自のメタタグを用意しています。
特に Twitter は「Twitter Card」という仕組みで、ページのタイトル、説明、画像などを指定するためのメタタグを提供しています。
先日 Nuxt の useSeoMeta を使ったときに型定義ファイルを読んでいたところ、見慣れないメタタグを発見しました。
本記事では、この 4 種類のメタタグについて解説します。
twitter:label1, twitter:label2
Twitter Card 向けの仕様として、twitter:label1 と twitter:label2（およびそれに対応する twitter:data1 と twitter:data2）が存在します。これらは、主に追加情報を提示するためのペアとして設計されており、例えば商品ページであれば「価格」や「在庫情報」など、ユーザーにとって有用なデータを補足する目的で用いられます。
具体的には以下のように設定が可能です。
<meta name="twitter:label1" content="価格" />
<meta name="twitter:data1" content="￥9,800" />
<meta name="twitter:label2" content="在庫状況" />
<meta name="twitter:data2" content="残りわずか" />
ここで Slack API のドキュメントを確認すると、Classic link unfurlingのセクションで、これらのプロパティを参照していることが説明されています。
実際に著者のポートフォリオサイトで導入してみた結果が以下のとおりです。正しく設定すれば表示されることがわかります。
肝心の Twitter では
さて、これが Twitter(現 X)でどのように表示されるのかという話ですが、今の Twitter にこれらのプロパティの情報を表示する機能はありません。
2014 年頃のリファレンスを確認すると、Product Cardというセクションがあり、以下のようなレイアウトで表示することができたようです。
それぞれのプロパティの用途は以下のように説明があります。
| Card Property | Description | Required |
|---|---|---|
twitter:data1 |
This field expects a string, and you can specify values for labels such as price, items in stock, sizes, etc. | Yes |
twitter:label1 |
This field also expects a string, and allows you to specify the types of data you want to offer (price, country, etc.). | Yes |
twitter:data2 |
This field expects a string, and you can specify values for labels such as price, items in stock, sizes, etc. | Yes |
twitter:label2 |
This field also expects a string, and allows you to specify the types of data you want to offer (price, country, etc.). | Yes |
しかしこの Product Card を表示するためには twitter:card を product に設定する必要があります。
現在 twitter:card に指定できるのはsummary, summary_large_image, app , or player なので、この設定は意味をなしません。
なお、Slack に表示するうえで twitter:card を product に設定する必要はありません。
まとめ
Google 検索でのヒット数は少ないですが、GitHub でコード検索をかけてみると 334k もヒットしたため少し驚きました。知っている人は知っているプロパティなのでしょうか。
しかし Twitter が作り出したメタタグにも関わらず、もはや Slack でしか使えないという状況なので、今後活用する機会は少なそうです。
参考にした記事
Discussion