Xでサイトのサムネイルを表示

関連ページ 参考URL 大手サイトのURLをXに投稿する時、大抵そのページのサムネイルと説明文が自動的に表示されます。
調べてみて、HTMLにTwitterCardのコードを追加することで同じようにサムネイルの表示ができたのでそのメモ。 例えば大手ゲーム情報サイトAutomatonの記事をXで投稿すると、下のようにURLが勝手にページサムネイルに変換されます。

しかし自分のサイトのURLを貼っても、そのままURLが表示されるだけでした。

適切にHTMLのheader部分にを指定することで、下のようなサムネイル表示が可能になります。


実装前と実装後のheadタグ付近の違いを比較してみます。
下は実装前。

下は実装後。赤枠で囲んだ部分が変更部分。

まず最初に、htmlタグ部分に下のようなを追加しています。
OGPはX、FacebookなどSNSアプリに向けた汎用機能で、これを利用することでサイトに対する解説を自動で挟むことができます。
続いてmetaタグ部分を見ていきます。
各要素の概要が次の通り。
最初の部分には、もしくはを指定できます。
最初にサムネイルの実例で示した、前者の画像が、後者の画像がになります。


にを指定した場合、アスペクト比は1:1に、の場合はアスペクト比が1:2になります。
Xの場合、には最小300x157ピクセル、最大4096x4096ピクセルまで指定できます。
に指定した画像のアスペクト比が、で指定したアスペクト比と異なる場合、自動でトリミングされます。
HTMLのTwitterCardの設定が正しいかどうか最低限のチェックするには Card validator を使います。
Xにログイン状態で上のURLにアクセスすると、TwitterCardのテスト画面が開きます。
チェックしたいURLを入力した上で、のボタンを押すとテストが走ります。

重要なのは右下の部分で、ここに赤い文字が表示されていなければチェックOKです。
昔はCardPreviewの部分に実際のプレビューイメージが表示されたらしいですが、現在はユーザー環境によって見え方が異なるという理由で表示されません。
注意点として、このLogのチェックを通ってもまだXに反映されない事があります。
更新したHTMLをサーバにアップロードしても、実際にXに反映されるまでは5分10分のタイムラグが存在します。