category -> | | | | | | | |

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

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

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

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


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

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

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


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

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